/* Shared shell for the overview hub and the rendered spec / migration docs.
   Same token contract as the three directions — one :root block to rebrand. */
:root{
  --brand:#2D7492; --brand-ink:#fff; --brand-soft:#EAF2F6; --brand-strong:#1E5063;
  --ink:#17161C; --ink-2:#54525E; --ink-3:#8B8895;
  --surface:#FCFBF9; --surface-2:#FFFFFF; --surface-3:#F3F1EC;
  --line:#E5E1D9; --line-strong:#CFC9BC;
  --accent:#B4531F; --ok:#1F7A4C; --warn:#946200; --danger:#B3261E;
  --radius:8px; --radius-lg:14px;
  --shadow-1:0 1px 2px rgba(20,18,14,.05);
  --shadow-2:0 10px 30px -10px rgba(20,18,14,.18);
  --font-display:"Archivo",ui-sans-serif,sans-serif;
  --font-body:"Public Sans",ui-sans-serif,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px);
}
@media(prefers-color-scheme:dark){
  :root{
    --brand:#5FA9C8; --brand-ink:#08181F; --brand-soft:#17303B; --brand-strong:#2D7492;
    --ink:#EDECF1; --ink-2:#A19FAB; --ink-3:#6C6A78;
    --surface:#100F13; --surface-2:#17161B; --surface-3:#1F1E25;
    --line:#27262F; --line-strong:#3A3843;
    --accent:#D98A4E; --ok:#4FB07C; --warn:#C99A3C; --danger:#D9695C;
    --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 14px 36px -12px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.logo,.vg-logo{height:26px;width:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}

.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:26px;height:66px}
.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.top nav a{padding:7px 13px;border-radius:100px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none}
.top nav a:hover{background:var(--surface-3);color:var(--ink)}
.top nav a.on{background:var(--brand);color:var(--brand-ink)}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.022em;line-height:1.15;font-weight:700}
h1{font-size:clamp(30px,4.4vw,50px);margin:0 0 16px}
h2{font-size:clamp(22px,2.6vw,30px);margin:56px 0 14px;padding-top:26px;border-top:1px solid var(--line)}
h3{font-size:19px;margin:32px 0 10px}
h4{font-size:16px;margin:24px 0 8px}
p,ul,ol{margin:0 0 16px}
li{margin:5px 0}
code{font-family:var(--font-mono);font-size:.87em;background:var(--surface-3);
     border:1px solid var(--line);border-radius:5px;padding:1px 5px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.6;margin:0 0 18px}
pre code{background:none;border:0;padding:0;font-size:inherit}
blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--brand);color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 20px;display:block;overflow-x:auto}
th{text-align:left;font-family:var(--font-display);font-size:12px;text-transform:uppercase;
   letter-spacing:.07em;color:var(--ink-3);padding:9px 14px 9px 0;border-bottom:1px solid var(--line-strong);
   white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
td strong{color:var(--ink)}
.doc{padding:44px 0 90px;max-width:900px}
.doc>p:first-of-type{font-size:18px;color:var(--ink-2)}
.toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 24px;margin:0 0 40px}
.toc h4{margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.toc li{margin:3px 0;font-size:14px;break-inside:avoid}
@media(max-width:640px){.toc ol{columns:1}}
.ft{border-top:1px solid var(--line);padding:30px 0 50px;color:var(--ink-3);font-size:13px}