/* DCNA Dev Gateway (DCNA-1247) — self-contained static page.
   Garage-portal token subset for surfaces/text/warn/danger (packages/design-tokens/
   tokens.css values, verbatim from the signed-off mockup screen-dev-gateway.html).
   DCNA-1272: --accent* now points at CoachView's accent (var(--cv-accent) etc,
   loaded from tokens.css below) instead of the Garage portal's blue — Ahmed's
   call: the gateway is CoachView-surface-branded, not Garage-branded, for this
   one shared front door. tokens.css MUST be linked before this file in
   index.html so --cv-accent* is defined when these vars resolve. */
:root{--surface-0:#FFFFFF;--surface-1:#F9F9F9;--surface-2:#F2F2F2;--border:#E8E8E8;--border-strong:#D4D4D4;
--text-1:#1A1A1A;--text-2:#555555;--text-3:#9B9B9B;--accent:var(--cv-accent);--accent-hover:var(--cv-accent-hover);--accent-muted:var(--cv-accent-weak);
--warn:#F59E0B;--warn-muted:rgba(245,158,11,.08);--danger:#B91C1C;--danger-muted:rgba(185,28,28,.08)}
html[data-theme="dark"]{--surface-0:#101214;--surface-1:#16181B;--surface-2:#1D2024;--border:#26292E;--border-strong:#33373D;
--text-1:#F4F5F6;--text-2:#A6ABB3;--text-3:#6B7078;--accent:var(--cv-accent);--accent-hover:var(--cv-accent-hover);--accent-muted:var(--cv-accent-weak);
--danger:#F87171;--danger-muted:rgba(248,113,113,.12)}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,'Segoe UI',sans-serif;background:var(--surface-1);color:var(--text-1);min-height:100vh;display:grid;place-items:center}
.wrap{width:min(760px,94vw);padding:40px 0}
.dev-banner{display:flex;align-items:center;gap:8px;justify-content:center;background:var(--warn-muted);border:1px solid rgba(245,158,11,.35);color:#92400E;border-radius:10px;padding:8px 14px;font:600 12.5px/1.4 Inter,sans-serif;margin-bottom:26px}
html[data-theme="dark"] .dev-banner{color:#FCD34D}
.brand{text-align:center;margin-bottom:28px}
.brand .starwrap{width:56px;height:56px;border-radius:50%;background:#0A0C0E;display:grid;place-items:center;margin:0 auto 12px}
.brand .star{width:36px;height:36px;display:block}
.brand h1{font:700 24px/1.2 'MB Corpo S Title','Inter Tight',Inter,sans-serif;margin:0}
.brand p{color:var(--text-2);font-size:13.5px;margin:6px 0 0}
.card{background:var(--surface-0);border:1px solid var(--border);border-radius:16px;padding:34px 36px;box-shadow:0 10px 30px rgba(10,12,14,.05)}
.state{display:none}
.state.on{display:block}
label{display:block;margin-bottom:16px}
label span{display:block;font:600 12.5px/1 Inter,sans-serif;color:var(--text-2);margin-bottom:7px}
input{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-0);color:var(--text-1);font-size:14px;font-family:inherit}
input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 18px;border-radius:10px;border:1px solid transparent;background:var(--accent);color:#fff;font:600 14px/1 Inter,sans-serif;cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn .spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;display:none;animation:spin .7s linear infinite}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-label{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:var(--danger-muted);border:1px solid rgba(185,28,28,.3);color:var(--danger);border-radius:8px;padding:10px 12px;font:600 12.5px/1.4 Inter,sans-serif;margin:0 0 16px}
.who{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--text-2);font-size:13px;margin-bottom:22px}
.who .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 12px/1 Inter}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice{display:block;width:100%;text-align:left;text-decoration:none;color:inherit;background:var(--surface-0);border:1px solid var(--border);border-radius:14px;padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s, box-shadow .15s;font-family:inherit;appearance:none}
.choice:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.choice:disabled{opacity:.6;cursor:not-allowed}
.choice .brandstrip{background:#0A0C0E;padding:22px 22px;display:flex;align-items:center;min-height:64px}
.choice .lockup{display:flex;align-items:center;gap:12px}
.choice .lockup img{width:38px;height:38px;display:block;flex:none}
.choice .lockup .t1{font:700 17px/1.15 'MB Corpo S Title','Inter Tight',Inter,sans-serif;color:#fff;letter-spacing:.1px}
.choice .lockup .t2{font:500 11.5px/1 'JetBrains Mono',ui-monospace,monospace;color:#8b939c;letter-spacing:.08em;margin-top:4px}
.choice .cvmark{font-family:'MB Corpo S Title','Inter Tight',Inter,sans-serif;font-style:italic;font-weight:700;font-size:26px;color:#fff;letter-spacing:.2px}
.choice .cvmark .acc{color:var(--cv-accent-bright)}   /* DCNA-1272 fix-round-1: theme-invariant brand mark on the permanently-black .brandstrip — was a raw hex literal (drift risk on re-brand); now tokenized via --cv-accent-bright (CoachView dark accent, see coachview-accent.css), declared identically in both theme blocks of tokens.css so it never silently repoints */
.choice .cvmark sup{font-size:10px;font-style:normal;color:#9aa3ad;margin-left:1px}
.choice .cvby{font:600 9px/1 Inter,sans-serif;color:#8b939c;letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.choice .body{padding:18px 22px 22px}
.choice h2{font:700 16px/1.3 'MB Corpo S Title','Inter Tight',Inter,sans-serif;margin:0 0 6px}
.choice p{font-size:12.5px;color:var(--text-2);line-height:1.5;margin:0}
.choice .dest{display:inline-block;margin-top:12px;font:600 11.5px/1 'JetBrains Mono',monospace;color:var(--text-3)}
.note{margin-top:18px;font-size:11.5px;color:var(--text-3);line-height:1.55;text-align:center}
@media (max-width:640px){.choices{grid-template-columns:1fr}.card{padding:26px 22px}}