/* AHT Construction — admin dashboard. Same drawing-sheet palette as the site, tuned for dense work. */
:root {
  --ink: #06121c; --navy: #0b2235; --panel: #0f2a40; --panel-2: #12314a;
  --paper: #edf2f6; --steel: #9db4c7; --mute: #6f8aa0;
  --rule: rgba(157, 180, 199, 0.16); --rule-strong: rgba(157, 180, 199, 0.3);
  --orange: #f39325; --orange-ink: #1a0e02; --ok: #5fc59a; --danger: #ff7a6b; --warn: #f4c54d;
  --sheet: #0c2233; --sheet-grid: rgba(160, 190, 215, 0.07); --sheet-line: rgba(222, 233, 242, 0.82); --sheet-faint: rgba(190, 210, 228, 0.32);
  --f-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Hanken Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --r: 4px;
  --glass: rgba(6, 18, 28, 0.82);   /* translucent bars over content */
  --glass-2: rgba(6, 18, 28, 0.74);
  --hover: rgba(157, 180, 199, 0.1);
  --backdrop: rgba(3, 9, 14, 0.78);
  --shadow: rgba(0, 0, 0, 0.55);
  --orange-hover: #ffa443;
  --hero-glow: rgba(25, 63, 94, 0.55);
  --skel: #14334b;
  --viewer: #030a10;
  --map-filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9) brightness(0.95);
  --hero-line: #d6e4ef; --hero-slab: #123049; --hero-glass: #2a5878; --hero-grid: #2b4d68; --hero-grid-2: #173247;
  color-scheme: dark;
}
/* Light theme: follows the system setting unless the visitor picked one with the toggle. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f3f5f7; --navy: #e7edf2; --panel: #ffffff; --panel-2: #f6f8fa;
    --paper: #0b2235; --steel: #45607a; --mute: #687f94;
    --rule: rgba(11, 34, 53, 0.12); --rule-strong: rgba(11, 34, 53, 0.24);
    --orange: #d97409; --orange-ink: #1a0e02; --orange-hover: #ec8516;
    --ok: #1b8657; --danger: #c13a29; --warn: #a77a00;
    --sheet: #edf2f6; --sheet-grid: rgba(11, 34, 53, 0.06); --sheet-line: rgba(11, 34, 53, 0.8); --sheet-faint: rgba(11, 34, 53, 0.3);
    --glass: rgba(243, 245, 247, 0.86); --glass-2: rgba(255, 255, 255, 0.84);
    --hover: rgba(11, 34, 53, 0.06); --backdrop: rgba(11, 34, 53, 0.42); --shadow: rgba(11, 34, 53, 0.16);
    --hero-glow: rgba(176, 202, 224, 0.55); --skel: #e2e9ef; --viewer: #e3e9ee;
    --map-filter: grayscale(0.9) contrast(0.95) brightness(1.02);
    --hero-line: #0f2a40; --hero-slab: #c6d4e0; --hero-glass: #8fabc2; --hero-grid: #b4c4d2; --hero-grid-2: #d3dde6;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #f3f5f7; --navy: #e7edf2; --panel: #ffffff; --panel-2: #f6f8fa;
  --paper: #0b2235; --steel: #45607a; --mute: #687f94;
  --rule: rgba(11, 34, 53, 0.12); --rule-strong: rgba(11, 34, 53, 0.24);
  --orange: #d97409; --orange-ink: #1a0e02; --orange-hover: #ec8516;
  --ok: #1b8657; --danger: #c13a29; --warn: #a77a00;
  --sheet: #edf2f6; --sheet-grid: rgba(11, 34, 53, 0.06); --sheet-line: rgba(11, 34, 53, 0.8); --sheet-faint: rgba(11, 34, 53, 0.3);
  --glass: rgba(243, 245, 247, 0.86); --glass-2: rgba(255, 255, 255, 0.84);
  --hover: rgba(11, 34, 53, 0.06); --backdrop: rgba(11, 34, 53, 0.42); --shadow: rgba(11, 34, 53, 0.16);
  --hero-glow: rgba(176, 202, 224, 0.55); --skel: #e2e9ef; --viewer: #e3e9ee;
  --map-filter: grayscale(0.9) contrast(0.95) brightness(1.02);
  --hero-line: #0f2a40; --hero-slab: #c6d4e0; --hero-glass: #8fabc2; --hero-grid: #b4c4d2; --hero-grid-2: #d3dde6;
  color-scheme: light;
}
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .35s, border-color .35s, color .35s, fill .35s, stroke .35s !important; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the hidden attribute must win over component display rules */
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; }
.muted { color: var(--steel); }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 1px solid var(--rule-strong); background: transparent; padding: .55em .95em; border-radius: var(--r); cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: .15s; }
.btn:hover { border-color: var(--paper); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn-danger { color: var(--danger); border-color: rgba(255,122,107,.4); }
.btn-danger:hover { border-color: var(--danger); background: rgba(255,122,107,.08); }
.btn-sm { padding: .32em .65em; font-size: 13px; }
.btn-icon { padding: .4em; width: 32px; height: 32px; }
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* login */
.gate { min-height: 100%; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px); background-size: 32px 32px; }
.gate-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 30px; display: grid; gap: 16px; }
.gate-card img { height: 44px; width: auto; }
.gate-card h1 { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }

/* shell */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100%; background: linear-gradient(90deg, var(--navy) 247px, var(--rule) 247px, var(--rule) 248px, transparent 248px); }
@media (max-width: 900px) { .app { background: none; } }
.side { background: var(--navy); border-right: 1px solid var(--rule); align-self: start; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.side .logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; }
.side .logo img { height: 34px; width: auto; }
.side .logo span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; border-left: 1px solid var(--rule-strong); padding-left: 10px; }
.menu { display: grid; gap: 2px; }
.menu button { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); background: none; border: 0; cursor: pointer; text-align: left; color: var(--steel); font-weight: 500; }
.menu button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu button:hover { background: var(--hover); color: var(--paper); }
.menu button[aria-current='page'] { background: var(--paper); color: var(--ink); }
.menu .count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: inherit; opacity: .7; }
.menu .count.hot { background: var(--orange); color: var(--orange-ink); opacity: 1; padding: 1px 7px; border-radius: 99px; }
.side-foot { margin-top: auto; display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.me { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--orange-ink); display: grid; place-items: center; font-weight: 800; font-family: var(--f-display); flex: none; }
.me b { display: block; font-size: 14px; line-height: 1.2; }
.side-foot .row { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar { display: none; }

.main { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 60px; display: grid; gap: 22px; align-content: start; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head h1 { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); line-height: 1; }
.head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40; transform: translateX(-100%); transition: transform .25s; height: 100%; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .app.menu-open .side { transform: none; box-shadow: 0 0 0 100vmax var(--backdrop); }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
  .topbar img { height: 28px; }
  .main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--panel); }
.tile { padding: 16px 18px; display: grid; gap: 4px; text-align: left; background: none; border: 0; border-right: 1px solid var(--rule); cursor: pointer; }
.tile:last-child { border-right: 0; }
.tile:hover { background: var(--hover); }
.tile b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.tile.hot b { color: var(--orange); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { border-bottom: 1px solid var(--rule); } .tile:nth-child(2n) { border-right: 0; } }
.cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--rule-strong); border-radius: var(--r); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.panel-h h2 { font-size: 15px; font-weight: 700; }
.panel-b { padding: 16px; display: grid; gap: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.steps li:last-child { border-bottom: 0; }
.steps .n { font-family: var(--f-mono); color: var(--orange); font-size: 12px; padding-top: 2px; }

/* toolbar + table */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.input, .field input, .field select, .field textarea { width: 100%; background: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r); padding: .6em .8em; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.toolbar .input { max-width: 280px; }
.toolbar select.input { max-width: 180px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 500; padding: 11px 14px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
td.actions { text-align: right; white-space: nowrap; }
td.actions .btn + .btn { margin-left: 4px; }
.thumb { width: 72px; height: 54px; border-radius: 3px; overflow: hidden; background: var(--sheet); position: relative; flex: none; }
.thumb img, .thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptitle { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.ptitle b { display: block; font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule-strong); border-radius: 99px; padding: 2px 8px; white-space: nowrap; color: var(--steel); }
.pill.ok { color: var(--ok); border-color: rgba(95,197,154,.4); }
.pill.off { color: var(--mute); }
.pill.star { color: var(--orange); border-color: rgba(243,147,37,.45); }
.pill.admin { color: var(--orange); border-color: rgba(243,147,37,.45); }
.pill.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.empty { padding: 36px 16px; text-align: center; color: var(--steel); }

/* forms */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12.5px; color: var(--mute); }
.grid2, .grid3 { align-items: start; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 7px 11px; cursor: pointer; font-size: 14px; user-select: none; }
.checks input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }
.checks label:has(input:checked) { border-color: var(--orange); background: rgba(243,147,37,.08); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--rule-strong); position: relative; cursor: pointer; margin: 0; transition: .2s; flex: none; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: .2s; }
.switch input:checked { background: var(--orange); }
.switch input:checked::after { left: 19px; }
.pw { display: flex; gap: 6px; }
.pw input { flex: 1; min-width: 0; font-family: var(--f-mono); }
.err { color: var(--danger); font-size: 13.5px; min-height: 1.2em; }

/* editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } }
.drop { border: 1.5px dashed var(--rule-strong); border-radius: var(--r); padding: 22px; text-align: center; display: grid; gap: 8px; justify-items: center; cursor: pointer; transition: .15s; background: var(--ink); }
.drop svg { width: 30px; height: 30px; stroke: var(--orange); fill: none; stroke-width: 1.6; }
.drop.over { border-color: var(--orange); background: rgba(243,147,37,.06); }
.progress { height: 4px; background: var(--rule); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--orange); width: 0; transition: width .2s; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gimg { border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; background: var(--ink); display: grid; }
.gimg.cover { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.gimg .ph { aspect-ratio: 4/3; position: relative; background: var(--sheet); }
.gimg .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gimg .ph .pill { position: absolute; top: 6px; left: 6px; background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
.gimg input { border: 0; border-top: 1px solid var(--rule); background: transparent; padding: 7px 9px; font-size: 13px; width: 100%; min-width: 0; }
.gimg input:focus { outline: none; background: var(--hover); }
.gimg .bar { display: flex; gap: 2px; padding: 4px; border-top: 1px solid var(--rule); }
.gimg .bar .btn { flex: 1; padding: 5px 0; height: 28px; border-color: transparent; }
.gimg .bar .btn:hover { border-color: var(--rule-strong); }

/* repeaters (site content) */
.rep { border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; background: var(--ink); }
.rep-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rep-h b { font-family: var(--f-mono); font-size: 12px; color: var(--orange); letter-spacing: .08em; }

/* messages */
.msg { border-bottom: 1px solid var(--rule); padding: 14px 16px; display: grid; gap: 8px; }
.msg:last-child { border-bottom: 0; }
.msg.unread { background: rgba(243,147,37,.05); box-shadow: inset 3px 0 0 var(--orange); }
.msg-h { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.msg-h b { font-size: 15px; }
.msg-body { white-space: pre-line; color: var(--steel); font-size: 14px; }
.msg-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* dialogs */
dialog { border: 0; padding: 0; background: transparent; color: var(--paper); max-width: none; max-height: none; }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.modal { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: 0 30px 80px var(--shadow); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--rule); gap: 10px; }
.modal-h h2 { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 19px; }
.modal-b { padding: 18px; display: grid; gap: 14px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.secret { background: var(--ink); border: 1px dashed var(--orange); border-radius: var(--r); padding: 12px; display: grid; gap: 6px; font-size: 14px; }
.secret code { font-family: var(--f-mono); font-size: 15px; color: var(--paper); user-select: all; }

.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); opacity: 0; visibility: hidden; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: var(--r); font-weight: 600; font-size: 14px; z-index: 100; transition: .3s; max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.bad { background: var(--danger); color: var(--ink); }
.loading { padding: 40px; text-align: center; color: var(--mute); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* theme toggle + logos per theme */
.theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--r); background: none; color: var(--paper); cursor: pointer; transition: border-color .2s; }
.theme-btn:hover { border-color: var(--paper); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-dark .theme-btn .ic-moon, .is-light .theme-btn .ic-sun { display: none; }
.is-light .logo-on-dark, .is-dark .logo-on-light { display: none !important; }

/* access picker */
.modal.wide { width: min(760px, calc(100vw - 24px)); }
.pill.warn { color: var(--warn); border-color: currentColor; }
.acc { border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--ink); overflow: hidden; }
.acc-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--rule); }
.acc-top .input { flex: 1 1 220px; width: auto; max-width: 340px; min-height: 36px; }
.acc-list { max-height: min(340px, 45vh); overflow-y: auto; }
.acc-g { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.acc-g:last-child { border-bottom: 0; }
.acc-h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 8px 12px 4px; }
.acc-c, .acc-p { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.acc-c:hover, .acc-p:hover { background: var(--hover); }
.acc-p { padding-left: 38px; }
.acc-p span:nth-of-type(2) { margin-left: auto; font-size: 11.5px; }
.acc-p:has(input:disabled) { opacity: .7; cursor: default; }
.acc input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; flex: none; }
.acc-empty { padding: 4px 12px 8px 38px; font-size: 13px; }
.checks input[type=radio] { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }

/* project visibility choice */
.vis { display: grid; gap: 6px; }
.vis-o { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 9px 12px; cursor: pointer; }
.vis-o input { accent-color: var(--orange); width: 16px; height: 16px; margin: 3px 0 0; flex: none; }
.vis-o > span { display: grid; gap: 1px; font-size: 14px; min-width: 0; }
.vis-o .muted { font-size: 13px; }
.vis-o:has(input:checked) { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }