/* ══════════════════════════════════════════════════════════════════════
 * HOGWARTS CENTRAL COMMAND · hcc3.css · Design System v3.0 (Approved 2026-10-15)
 * Owner: Fleur (tokens + component classes). Spec: mockups/3.0/DESIGN-GUIDE.md
 * Single CSS bundle for the 3.0 shell. Templates must not add <style> or hex values.
 * Arthur: request new tokens/sizes from Fleur (§18); do not add them here directly.
 * ════════════════════════════════════════════════════════════════════ */
/* Self-hosted fonts (OFL, see static/fonts/OFL-*.txt). Variable woff2, latin subset; weights used: Cinzel 500–700, Inter 400–700, JetBrains Mono 400–500. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/Cinzel-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/JetBrainsMono-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* brand (unchanged from v2) */
  --gryffindor-red:#740001;--gryffindor-gold:#D3A625;--gryffindor-gold-light:#e8c96d;
  --slytherin-green:#1A472A;--slytherin-green-bright:#40916c;--slytherin-silver:#AAAAAA;
  --hufflepuff-yellow:#EEBE10;--hufflepuff-black:#372E29;
  --ravenclaw-blue:#0E1A40;--ravenclaw-blue-bright:#2a5298;--ravenclaw-bronze:#946B2D;
  /* v3 surfaces: fewer, calmer steps */
  --surface-0:#111a30;--surface-1:#18233d;--surface-2:#1f2c4a;--surface-3:#283858;
  --line:#2a3a5c;--line-strong:#3b4f78;
  --ink-1:#e8edf5;--ink-2:#a3b1c6;--ink-3:#8494ad;
  --accent:#D3A625;--accent-soft:rgba(211,166,37,.12);--accent-ring:rgba(211,166,37,.35);
  --pos:#22c55e;--pos-soft:rgba(34,197,94,.12);--neg:#ef4444;--neg-soft:rgba(239,68,68,.12);
  --warn:#f59e0b;--warn-soft:rgba(245,158,11,.12);--info:#38bdf8;--info-soft:rgba(56,189,248,.12);
  /* business accents */
  --biz-home:var(--gryffindor-gold);--biz-dta:var(--ravenclaw-blue-bright);--biz-cal:var(--slytherin-green-bright);
  --biz-pres:var(--gryffindor-red);--biz-bur:var(--hufflepuff-yellow);--biz-ops:var(--ravenclaw-bronze);
  --font-display:'Cinzel',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;
  /* 4px grid */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  --r-sm:6px;--r:10px;--r-lg:14px;--r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  --sidenav-w:248px;--topbar-h:56px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-0);color:var(--ink-1);font:400 14px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:var(--sidenav-w) 1fr;min-height:100vh}
/* side nav */
.sidenav{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface-1);border-right:1px solid var(--line);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.brand img{width:34px;height:34px;object-fit:contain}
.brand b{font:600 13px/1.2 var(--font-display);letter-spacing:.06em;color:var(--accent)}
.brand small{display:block;color:var(--ink-3);font-size:11px}
.nav-group h6{margin:0 0 var(--s1);padding:0 var(--s2);font:600 10.5px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nav-item{display:flex;align-items:center;gap:var(--s3);padding:7px var(--s2);border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;position:relative}
.nav-item:hover{background:var(--surface-2);color:var(--ink-1)}
.nav-item .dot{width:8px;height:8px;border-radius:2px;background:var(--c,var(--ink-3));flex:none}
.nav-item.active{background:var(--accent-soft);color:var(--ink-1)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
.nav-item .count{margin-left:auto;font:500 11px var(--font-mono);color:var(--ink-3)}
.nav-sub{margin-left:20px;border-left:1px solid var(--line);padding-left:var(--s2)}
.nav-sub .nav-item{padding:5px var(--s2);font-size:13px}
.sidenav .foot{margin-top:auto;font-size:11px;color:var(--ink-3);padding:var(--s2)}
/* top bar */
.main{min-width:0}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s8);border-bottom:1px solid var(--line);background:rgba(17,26,48,.88);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.crumbs{color:var(--ink-3);font-size:13px}.crumbs b{color:var(--ink-1);font-weight:500}
.search{margin-left:auto;width:280px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;color:var(--ink-3);font-size:13px}
.iconbtn{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2);position:relative}
.iconbtn .pip{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--neg)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ravenclaw-blue-bright);display:grid;place-items:center;font-weight:600;font-size:12px}
.content{padding:var(--s8);max-width:1320px}
.page-head{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s6)}
.page-head h1{margin:0;font:600 26px/1.2 var(--font-display);letter-spacing:.02em}
.page-head p{margin:var(--s1) 0 0;color:var(--ink-2)}
.page-head .actions{margin-left:auto;display:flex;gap:var(--s2)}
.example-banner{display:flex;gap:var(--s2);align-items:center;background:var(--info-soft);border:1px dashed var(--info);color:var(--info);border-radius:var(--r-sm);padding:6px 12px;font-size:12px;margin-bottom:var(--s6)}
/* grid */
.grid{display:grid;gap:var(--s4)}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:2fr 1fr}
.section{margin-top:var(--s8)}.section-title{display:flex;align-items:center;margin:0 0 var(--s3);font:600 15px var(--font-body)}
.section-title a{margin-left:auto;font-size:12px;color:var(--accent);font-weight:500}
/* card */
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.card--accent{border-top:2px solid var(--c,var(--accent))}
.card h3{margin:0 0 var(--s3);font:600 13px var(--font-body);color:var(--ink-2);display:flex;align-items:center;gap:var(--s2)}
.card h3 .meta{margin-left:auto;font-weight:400;color:var(--ink-3);font-size:11px}
a.card:hover{border-color:var(--line-strong);background:var(--surface-2)}
/* kpi */
.kpi .label{font-size:12px;color:var(--ink-2);font-weight:500}
.kpi .value{font:600 28px/1.15 var(--font-body);letter-spacing:-.01em;margin:var(--s2) 0 var(--s1);font-variant-numeric:tabular-nums}
.kpi .delta{font:500 12px var(--font-mono)}.up{color:var(--pos)}.down{color:var(--neg)}.flat{color:var(--ink-3)}
.spark{height:32px;margin-top:var(--s3)}
/* business tiles */
.biz{display:flex;flex-direction:column;gap:var(--s3)}
.biz-head{display:flex;align-items:center;gap:var(--s3)}
.biz-mark{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;font:700 12px var(--font-display);background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.biz-head b{font-weight:600}.biz-head small{display:block;color:var(--ink-3);font-size:12px}
.biz-stats{display:flex;gap:var(--s5);font-size:12px;color:var(--ink-3)}.biz-stats b{display:block;color:var(--ink-1);font:600 16px var(--font-body)}
/* badges & buttons */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);font:500 11px var(--font-body);border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-pos{color:var(--pos);background:var(--pos-soft)}.b-neg{color:var(--neg);background:var(--neg-soft)}.b-warn{color:var(--warn);background:var(--warn-soft)}.b-info{color:var(--info);background:var(--info-soft)}.b-neutral{color:var(--ink-2);background:var(--surface-3)}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-sm);font:500 13px var(--font-body);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-1);cursor:pointer}
.btn:hover{border-color:var(--ink-3)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1b1404}.btn-primary:hover{background:var(--gryffindor-gold-light)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
/* table */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-weight:500;color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:10px;border-bottom:1px solid var(--line)}.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:var(--surface-2)}.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* lists / feed */
.feed{list-style:none;margin:0;padding:0}.feed li{display:flex;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.feed li:last-child{border:0}
.feed time{margin-left:auto;color:var(--ink-3);font:400 11px var(--font-mono);white-space:nowrap}
.needs{display:flex;align-items:center;gap:var(--s3);background:linear-gradient(90deg,var(--accent-soft),transparent);border:1px solid var(--accent-ring);border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin-bottom:var(--s6)}
.needs b{color:var(--accent)}
/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.col{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
.col h4{margin:0 0 var(--s3);font:600 12px var(--font-body);color:var(--ink-2);display:flex}.col h4 span{margin-left:auto;color:var(--ink-3);font-family:var(--font-mono)}
.kcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:var(--s2);font-size:12.5px}
.kcard small{display:block;color:var(--ink-3);margin-top:4px}
/* chart */
.chart{width:100%;height:180px}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:var(--s2)}
.bars i{flex:1;background:linear-gradient(var(--c,var(--accent)),color-mix(in srgb,var(--c,var(--accent)) 30%,transparent));border-radius:4px 4px 0 0}
/* states */
.empty,.skeleton{border:1px dashed var(--line-strong);border-radius:var(--r);padding:var(--s6);text-align:center;color:var(--ink-3);font-size:13px}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.tabs a{padding:8px 12px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}.tabs a.active{color:var(--ink-1);border-color:var(--accent)}
/* guest showcase */
.guest .topbar .search{display:none}
.hero{border-radius:var(--r-lg);padding:var(--s10) var(--s10);background:radial-gradient(1200px 300px at 0% 0%,rgba(211,166,37,.16),transparent),radial-gradient(800px 300px at 100% 100%,rgba(42,82,152,.25),transparent),var(--surface-1);border:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s8);align-items:center}
.hero h1{font:600 34px/1.15 var(--font-display);margin:var(--s3) 0}.hero p{color:var(--ink-2);font-size:15px;max-width:560px}
.eyebrow{font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.arch{display:grid;gap:var(--s2)}.arch div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:12.5px;display:flex;gap:8px}.arch div b{color:var(--accent);font-family:var(--font-mono);font-weight:500}
.feature h4{margin:var(--s2) 0 var(--s1);font-size:15px}.feature p{margin:0;color:var(--ink-2);font-size:13px}
.stack{display:flex;flex-wrap:wrap;gap:var(--s2)}.stack span{padding:4px 10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:12px;color:var(--ink-2)}
@media (max-width:900px){.app{grid-template-columns:1fr}.g4,.g3{grid-template-columns:1fr 1fr}.g2,.hero{grid-template-columns:1fr}.kanban{grid-template-columns:1fr}}
.badge{white-space:nowrap}

/* ── 3.1 Hogwarts layer ── */
:root{--parchment:#efe3c4;--parchment-ink:#3a2c14;--parchment-line:#c9b384;
--h-sly:#2f8a5a;--h-sly-deep:#1A472A;--h-sly-2:#c0c7cf;--h-rav:#3d6fd1;--h-rav-deep:#0E1A40;--h-rav-2:#b88a45;
--h-huf:#EEBE10;--h-huf-deep:#372E29;--h-huf-2:#2b2622;--h-gry:#b5262c;--h-gry-deep:#740001;--h-gry-2:#D3A625}
.house-sly{--c:var(--h-sly);--c2:var(--h-sly-2);--cd:var(--h-sly-deep)}.house-rav{--c:var(--h-rav);--c2:var(--h-rav-2);--cd:var(--h-rav-deep)}
.house-huf{--c:var(--h-huf);--c2:var(--h-huf-deep);--cd:#5a4a1a}.house-gry{--c:var(--h-gry);--c2:var(--h-gry-2);--cd:var(--h-gry-deep)}
.crest{width:var(--sz,22px);height:calc(var(--sz,22px)*1.15);flex:none}
.nav-item .crest{--sz:16px}
.page-head h1 .crest{--sz:34px;vertical-align:middle;margin-right:10px}
.banner{position:relative;border-radius:var(--r-lg);padding:var(--s6) var(--s8);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,var(--surface-1)),var(--surface-1) 70%);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));display:flex;align-items:center;gap:var(--s6);margin-bottom:var(--s6);overflow:hidden}
.banner::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,var(--c) 0 14px,var(--c2) 14px 28px)}
.banner .crest{--sz:64px}.banner h1{margin:0;font:600 28px/1.15 var(--font-display)}.banner p{margin:4px 0 0;color:var(--ink-2)}
.banner .motto{font:italic 500 13px var(--font-display);color:var(--c2);letter-spacing:.04em}
.parchment{background:linear-gradient(180deg,#f3e9cf,#e8d9b2);color:var(--parchment-ink);border:1px solid var(--parchment-line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:inset 0 0 30px rgba(120,90,30,.18)}
.parchment h3{color:#5b4520;font-family:var(--font-display)}.parchment .feed li{border-color:rgba(90,70,30,.2)}.parchment time{color:#7a6438}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);align-items:end;height:200px;padding:var(--s3) var(--s2) 0}
.hourglass{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.hourglass .tube{width:46px;flex:1;border:1px solid var(--line-strong);border-radius:23px 23px 8px 8px;background:var(--surface-2);position:relative;overflow:hidden}
.hourglass .gems{position:absolute;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35) 0 2px,transparent 3px) 0 0/9px 9px,linear-gradient(var(--c),var(--cd));}
.hourglass b{font:600 15px var(--font-mono)}.hourglass small{font:600 11px var(--font-display);letter-spacing:.06em;color:var(--ink-2)}
.house-card{display:flex;flex-direction:column;gap:var(--s3);border-top:3px solid var(--c)}
.house-card .hc-head{display:flex;gap:var(--s3);align-items:center}.house-card .hc-head .crest{--sz:38px}
.house-card .hc-head b{font:600 16px var(--font-display)}.house-card .hc-head small{display:block;color:var(--ink-3);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:11.5px;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.meter{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--cd,var(--accent)),var(--c,var(--accent)))}
.proj{display:flex;flex-direction:column;gap:var(--s3)}.proj-head{display:flex;gap:var(--s3);align-items:center}
.proj-mark{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;font:700 12px var(--font-display);background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.proj-head b{font-weight:600}.proj-head small{display:block;color:var(--ink-3);font-size:12px}
.proj-foot{display:flex;gap:var(--s4);font-size:12px;color:var(--ink-3)}.proj-foot b{color:var(--ink-1)}
.wax{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c4453f,#7a1414);box-shadow:0 1px 2px rgba(0,0,0,.4);display:inline-grid;place-items:center;color:#f3d3c0;font:700 10px var(--font-display)}
.type{display:inline-flex;gap:5px;align-items:center;font:600 11px var(--font-body);padding:2px 8px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-2)}
.divider{display:flex;align-items:center;gap:12px;color:var(--c2,var(--accent));font:600 12px var(--font-display);letter-spacing:.14em;text-transform:uppercase;margin:var(--s8) 0 var(--s3)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--c2,var(--accent)),transparent);opacity:.6}
.select{height:30px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink-1);padding:0 8px;font:500 12px var(--font-body)}
.g4b{grid-template-columns:repeat(4,1fr)}
.search{white-space:nowrap;overflow:hidden}
/* ── 3.0 final brand (crest-v4) ── */
.brand{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--s3) var(--s2) var(--s4)}
.brand picture,.brand img{width:56px;height:56px;display:block}
.brand b{font-size:13px}
.crest-hero img{width:120px;height:120px;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.hall-head{align-items:center}
.motto-ribbon{display:inline-block;position:relative;font:600 11px var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--parchment-ink);background:linear-gradient(180deg,#e9d8a6,#c9a95e);padding:4px 18px;margin-bottom:6px;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.hero-crest{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s3)}
.hero-crest img{width:96px;height:96px}
/* ── Roster ── */
.person{display:flex;flex-direction:column;gap:var(--s3);border-top:3px solid var(--c)}
.p-head{display:flex;gap:var(--s3);align-items:flex-start}.p-head b{font:600 15px var(--font-display)}.p-head small{display:block;color:var(--ink-2);font-size:12px}
.avatar-lg{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 14px var(--font-display);color:var(--c2);background:radial-gradient(circle at 35% 30%,var(--c),var(--cd));border:2px solid var(--c2)}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--ink-3)}.p-meta .crest{--sz:13px}
.pill{font:500 11px var(--font-mono);padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2)}
.p-load{margin-left:auto;text-align:center}.p-load b{display:block;font:600 18px var(--font-mono)}.p-load small{color:var(--ink-3);font-size:10.5px}
.p-bio{margin:0;color:var(--ink-2);font-size:12.5px}
.mini{margin:0;padding:8px 10px 8px 24px;background:var(--surface-2);border-radius:var(--r);font-size:12px;color:var(--ink-2)}
.house-toggle{display:flex;gap:6px}.ht{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;font:700 11px var(--font-display);border:1px solid var(--line-strong);color:var(--ink-3)}
.ht.on{background:var(--c);color:var(--c2);border-color:var(--c2)}
.pill{white-space:nowrap}
/* ── 3.0 approved: WCAG house fill/ink/text tokens ── */
.house-sly{--c-fill:#277a4f;--c-ink:#ffffff;--c-text:#4fae7c}
.house-rav{--c-fill:#3d6fd1;--c-ink:#ffffff;--c-text:#5b8ff0}
.house-huf{--c-fill:#EEBE10;--c-ink:#1b1404;--c-text:#EEBE10}
.house-gry{--c-fill:#b5262c;--c-ink:#ffffff;--c-text:#f06a6f}
.ht.on{background:var(--c-fill);color:var(--c-ink);border-color:var(--c-fill)}
.avatar-lg{background:var(--c-fill);color:var(--c-ink);border-color:var(--c2)}
.proj-mark{color:var(--c-text,var(--c))}
.fill-chip{display:inline-block;padding:3px 10px;border-radius:var(--r-sm);background:var(--c-fill);color:var(--c-ink);font:600 12px var(--font-body)}
/* sync + stale */
.sync{display:flex;align-items:center;gap:6px;margin-top:var(--s2);font:400 11px var(--font-mono);color:var(--ink-3)}
.sync::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pos)}
.is-stale{border-color:var(--warn)!important;box-shadow:inset 0 0 0 1px var(--warn-soft)}
.is-stale .value{opacity:.6}.is-stale .sync{color:var(--warn)}.is-stale .sync::before{background:var(--warn)}

/* ── Production additions (v3.0) ── */
.btn-danger{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,var(--line))}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.state-error{border:1px dashed var(--neg);color:var(--neg);border-radius:var(--r);padding:var(--s6);text-align:center;font-size:13px}
.skeleton{position:relative;overflow:hidden;color:transparent}
.skeleton::after{content:"Loading…";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.skeleton{background:linear-gradient(90deg,var(--surface-1),var(--surface-2),var(--surface-1));background-size:200% 100%;animation:hcc-shimmer 1.4s linear infinite}}
@keyframes hcc-shimmer{to{background-position:-200% 0}}
/* confirm dialog (money actions, guide §12a) */
.dialog-backdrop{position:fixed;inset:0;background:rgba(5,8,18,.7);display:grid;place-items:center;z-index:500}
.dialog{width:min(520px,92vw);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s6)}
.dialog h2{margin:0 0 var(--s2);font:600 18px var(--font-display)}
.dialog .warn{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px;margin-bottom:var(--s4)}
.dialog dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 var(--s4);font-size:13px}
.dialog dt{color:var(--ink-3)}.dialog dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.dialog .confirm-type{width:100%;height:34px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-1);padding:0 10px;font:500 13px var(--font-mono);margin-bottom:var(--s4)}
.dialog footer{display:flex;justify-content:flex-end;gap:var(--s2)}
.tabs a:focus-visible,.nav-item:focus-visible{outline:2px solid var(--accent-ring)}
.push{margin-left:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dialog-preview{position:relative;height:440px;border-radius:var(--r-lg);overflow:hidden;border:1px dashed var(--line-strong)}.dialog-preview .dialog-backdrop{position:absolute}

/* ══ v3 shell classes (visual pass for feat/v3-shell) — DESIGN-GUIDE §7–§13 ══ */
/* Nav: house crest is 16px in nav (§6) even if the macro passes a larger --sz */
.sidenav .nav-item .crest{width:16px;height:18px}
.nav-sub{margin:2px 0 6px 18px;padding-left:10px;border-left:1px solid var(--line)}
.nav-item.nav-proj{padding:5px 8px;font-size:13px;font-weight:400;color:var(--ink-2)}
.nav-item.nav-proj.active{color:var(--ink-1);background:var(--accent-soft)}
.nav-item.nav-proj.active::before{left:-11px}
.nav-toggle{margin-top:auto;align-self:flex-start;height:28px;padding:0 10px;font:600 12px var(--font-mono);color:var(--ink-3);background:transparent}
.nav-toggle:hover{color:var(--ink-1)}
/* Collapsed icon rail (64px) */
.app{transition:grid-template-columns .15s ease}
.nav-collapsed .app{grid-template-columns:64px 1fr}
.nav-collapsed .sidenav{padding:var(--s3) 8px;align-items:center}
.nav-collapsed .brand{padding:4px 0 10px}
.nav-collapsed .brand > div,.nav-collapsed .nav-group h6,.nav-collapsed .nav-item .count,.nav-collapsed .nav-sub{display:none}
.nav-collapsed .brand picture,.nav-collapsed .brand img{width:34px;height:34px}
.nav-collapsed .nav-item{font-size:0;justify-content:center;width:44px;height:36px;padding:0}
.nav-collapsed .nav-item .dot{width:10px;height:10px}
.nav-collapsed .sidenav .nav-item .crest{width:20px;height:23px}
.nav-collapsed .nav-item.active::before{left:-8px}
.nav-collapsed .nav-toggle{align-self:center}
/* Grids (responsive; §5, §13) */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1099px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.grid-4,.grid-3,.grid-2-1{grid-template-columns:1fr}}
/* Compact house banner on project pages + styled house select */
.banner--compact{padding:var(--s4) var(--s6);gap:var(--s4);margin-bottom:var(--s4)}
.banner--compact .crest{--sz:40px;width:40px;height:46px}
.banner--compact h1{font-size:22px}
.banner--compact p{font-size:13px}
.house-select{margin-left:auto;display:flex;align-items:center;gap:8px;font:500 12px var(--font-body);color:var(--ink-2)}
.house-select select{appearance:none;-webkit-appearance:none;height:32px;min-width:150px;padding:0 32px 0 12px;border-radius:var(--r-sm);
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a3b1c6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line-strong);color:var(--ink-1);font:500 13px var(--font-body);cursor:pointer}
.house-select select:hover{border-color:var(--c,var(--ink-3))}
.house-select select:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
/* Legacy module iframe tab */
.legacy-frame{display:block;width:100%;height:calc(100vh - 260px);min-height:520px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-1)}
/* Back link + prose */
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s4);font:500 13px var(--font-body);color:var(--ink-2)}
.back:hover{color:var(--accent)}
.prose{max-width:72ch;color:var(--ink-1);font-size:14px;line-height:1.65}
.prose p{margin:0 0 .9em}.prose h2,.prose h3{font:600 15px var(--font-body);margin:1.2em 0 .5em}
.prose a{color:var(--info);text-decoration:underline}.prose code{font:12.5px var(--font-mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
.prose ul,.prose ol{padding-left:1.3em}
/* Divider label span (templates wrap the label) */
.divider > span{white-space:nowrap}
/* Guest mode (§12): no search/actions chrome, no collapse toggle */
.is-guest .nav-toggle,.is-guest .topbar .search,.is-guest .iconbtn,.is-guest .avatar,.is-guest .count{display:none}
.is-guest .topbar{justify-content:space-between}
/* Mobile (<900): side nav becomes the 64px rail until a drawer toggle exists in base.html */
@media (max-width:900px){
  .app{grid-template-columns:64px 1fr}
  .sidenav{display:flex;padding:var(--s3) 8px;align-items:center}
  .sidenav .brand > div,.sidenav .nav-group h6,.sidenav .nav-item .count,.sidenav .nav-sub,.sidenav .foot{display:none}
  .sidenav .brand picture,.sidenav .brand img{width:34px;height:34px}
  .sidenav .nav-item{font-size:0;justify-content:center;width:44px;height:40px;padding:0}
  .sidenav .nav-item .crest{width:20px;height:23px}
  .nav-toggle{display:none}
  .topbar{padding:0 var(--s4)}.topbar .search{display:none}
  .content{padding:var(--s4)}
  .hall-head{flex-wrap:wrap}.hall-head picture img{width:72px;height:72px}
  .banner{flex-wrap:wrap;padding:var(--s4)}.house-select{margin-left:0}
  .table{display:block;overflow-x:auto}
}
/* ── visual-pass fixes (V3-VISUAL-PASS.md F1–F6) ── */
.content > .grid + .grid,.content > .grid + .section{margin-top:var(--s4)}               /* F1 stacked grids touched */
.nav-group h6{letter-spacing:.08em;line-height:1.35}                                        /* F2 long group titles */
@media (max-width:767px){
  .grid-4:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))}                        /* F3 KPI pairs on mobile */
  .kpi .value{font-size:22px}
  .banner .crest{--sz:44px;width:44px;height:51px}                                            /* F4 banner crest size */
  .banner h1{font-size:22px}.banner .motto-ribbon{font-size:9.5px;letter-spacing:.14em}
  .tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.tabs a{flex:none}           /* F5 tab overflow */
}
.table + .empty{margin-top:calc(-1 * var(--s2));border-top-left-radius:0;border-top-right-radius:0} /* F6 empty under header */
@media (max-width:767px){.needs{flex-wrap:wrap}.needs .btn{margin-left:0!important;width:100%;justify-content:center}}  /* F7 Owl banner CTA on mobile */

/* ══ Rail icons + mobile drawer (feat/v3-rail-drawer) — DESIGN-GUIDE §7, §8, §13, §14 ══ */
/* Nav icon + label */
.nav-icon{width:20px;height:20px;flex:none;display:inline-grid;place-items:center;color:var(--ink-3)}
.nav-icon .icon{width:20px;height:20px;display:block}
.nav-icon .icon + .dot{display:none}                         /* icon present → drop the fallback dot */
.nav-item:hover .nav-icon{color:var(--ink-1)}
.nav-item.active .nav-icon{color:var(--accent)}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Collapse chevron: points left when expanded, right when collapsed */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;padding:0}
.nav-toggle .chevron{transition:transform .15s ease}
.nav-toggle[aria-expanded="false"] .chevron{transform:rotate(180deg)}
/* Rail: bigger icons, labels hidden but still in the accessible name */
.nav-scrim{display:none} /* drawer scrim; only shown <900px when nav-open */
.nav-collapsed .nav-icon,.nav-collapsed .nav-icon .icon{width:22px;height:22px}
.nav-collapsed .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Two equal columns */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.grid-2{grid-template-columns:1fr}}
/* Menu button only on small screens */
.nav-menu{display:none}
@media (min-width:901px){.nav-menu{display:none!important}}

/* ── Mobile drawer (<900px) — replaces the interim 64px rail ── */
@media (max-width:900px){
  .nav-menu{display:inline-grid;place-items:center;flex:none}
  .app,.nav-collapsed .app{grid-template-columns:1fr}
  .sidenav{position:fixed;top:0;left:0;bottom:0;z-index:600;width:min(300px,86vw);height:100dvh;
    padding:var(--s4) var(--s3);align-items:stretch;box-shadow:var(--shadow);
    transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  body.nav-open .sidenav{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
  body.nav-open{overflow:hidden}                                   /* no background scroll while open */
  /* undo the interim rail inside the drawer: full labels again */
  .sidenav .brand > div,.sidenav .nav-group h6,.sidenav .nav-sub{display:block}
  .sidenav .nav-item .count{display:inline}
  .sidenav .brand{flex-direction:column}
  .sidenav .brand picture,.sidenav .brand img{width:56px;height:56px}
  .sidenav .nav-item,.nav-collapsed .sidenav .nav-item{font-size:14px;justify-content:flex-start;width:auto;height:auto;padding:8px;min-height:40px}
  .sidenav .nav-item.nav-proj{font-size:13px;min-height:36px}
  .nav-collapsed .sidenav .nav-label{position:static;width:auto;height:auto;clip:auto}
  .sidenav .nav-item .crest{width:16px;height:18px}
  .sidenav .nav-toggle{display:none}
  /* scrim: real element if base.html provides .nav-scrim (click to close), else a pseudo-element */
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;z-index:590;background:rgba(5,8,18,.6)}
  body.nav-open .app:not(:has(.nav-scrim))::after{content:"";position:fixed;inset:0;z-index:590;background:rgba(5,8,18,.6)}
  .sidenav :focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .sidenav,body.nav-open .sidenav{transition:none}
}
@media (prefers-reduced-motion:reduce){.nav-toggle .chevron,.app{transition:none}}

/* ── Merged header (DESIGN-GUIDE §layout "One header") ─────────────────────────────────
   #topbar is the page's single title band: [menu] crest · eyebrow/breadcrumb + Cinzel title · actions | search · owl · avatar.
   House pages tint it with .house-xxx (--c / --c2). No separate banner block in #content. */
.topbar.band{height:auto;min-height:72px;padding:var(--s3) var(--s8);gap:var(--s4);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--accent)) 26%,var(--surface-1)) 0%,var(--surface-0) 62%);
  border-bottom:1px solid color-mix(in srgb,var(--c,var(--accent)) 45%,var(--line))}
.topbar.band:not([class*="house-"]){background:var(--surface-0);border-bottom-color:var(--line)}
.topbar.band[class*="house-"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:repeating-linear-gradient(90deg,var(--c) 0 28px,var(--c2) 28px 56px);opacity:.85}
.band-id{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1 1 auto}
.band-id .crest{--sz:44px;flex:none}
.band-id picture,.band-id picture img{width:48px;height:48px;flex:none}
.band-text{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:2px}
.band .crumbs{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .crumbs a{color:var(--ink-2)}.band .crumbs a:hover{color:var(--ink-1)}
.band .motto-ribbon{align-self:flex-start;margin:0;font-size:9.5px;padding:2px 14px;letter-spacing:.18em}
.band-title{margin:0;font:600 22px/1.2 var(--font-display);letter-spacing:.02em;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-sub{margin:0;font:400 12.5px/1.35 var(--font-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .house-select{margin-left:0;flex:none}
.band .search{margin-left:0;flex:0 1 260px;width:auto}
.search-btn{display:none}
/* page-head that only repeats the band title is redundant */
#content > .page-head:first-child:has(> h1:only-child){display:none}
.content{padding-top:var(--s6)}
@media (max-width:1180px){.band-sub{display:none}}
@media (max-width:900px){
  .topbar.band{min-height:56px;padding:var(--s2) var(--s3);gap:var(--s2);flex-wrap:wrap}
  .band-id .crest{--sz:28px;width:28px;height:32px}
  .band-id picture,.band-id picture img{width:32px;height:32px}
  .band .crumbs,.band .motto-ribbon,.band-sub,.band .owl-btn{display:none}
  .band-title{font-size:17px}
  .search-btn{display:grid;flex:none}
  /* the project house picker drops to a compact second line under the title row */
  .band .house-select{order:10;flex-basis:100%;justify-content:flex-end;font-size:11px}
  .band .house-select select{height:28px;min-width:130px}
  .content{padding-top:var(--s4)}
}

/* ── Side-nav scrolling: capped project lists + thin themed scrollbars ───────────────── */
.sidenav{--nav-proj-h:29.5px}
.nav-sub{position:relative;max-height:calc(var(--nav-proj-h) * 8.5);overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--s2)}
.nav-item.house-sly + .nav-sub{--c:var(--h-sly)}.nav-item.house-rav + .nav-sub{--c:var(--h-rav)}
.nav-item.house-huf + .nav-sub{--c:var(--h-huf)}.nav-item.house-gry + .nav-sub{--c:var(--h-gry)}
/* WebKit/Blink: a fixed 10px gutter (no layout shift; Blink won't re-lay-out a width change on :hover).
   At rest a 3px transparent border trims the thumb to 4px; on hover/focus the border drops so the
   thumb fills ~10px and can be grabbed and dragged. */
.sidenav::-webkit-scrollbar,.nav-sub::-webkit-scrollbar{width:10px;height:10px}
.sidenav::-webkit-scrollbar-track,.nav-sub::-webkit-scrollbar-track{background:transparent}
.sidenav::-webkit-scrollbar-thumb,.nav-sub::-webkit-scrollbar-thumb{border-radius:var(--r-pill);border:3px solid transparent;background-clip:padding-box}
.sidenav::-webkit-scrollbar-thumb{background-color:transparent}
.sidenav:hover::-webkit-scrollbar-thumb,.sidenav:focus-within::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.nav-sub::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--c,var(--accent)) 70%,transparent)}
.sidenav:hover::-webkit-scrollbar-thumb:hover,.nav-sub:hover::-webkit-scrollbar-thumb,.nav-sub:focus-within::-webkit-scrollbar-thumb{border-width:1px}
.nav-sub:hover::-webkit-scrollbar-thumb,.nav-sub:focus-within::-webkit-scrollbar-thumb{background-color:var(--c,var(--accent))}
.sidenav::-webkit-scrollbar-thumb:active,.nav-sub::-webkit-scrollbar-thumb:active{background-color:var(--accent)}
/* Firefox (standard props). Kept out of Blink, which ignores ::-webkit-scrollbar once these are set.
   Firefox has only thin/auto widths: thin at rest, auto (wider, draggable) on hover/focus. */
@supports not selector(::-webkit-scrollbar){
  .sidenav{scrollbar-width:thin;scrollbar-color:transparent transparent}
  .sidenav:hover,.sidenav:focus-within{scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent}
  .nav-sub{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--c,var(--accent)) 70%,transparent) transparent}
  .nav-sub:hover,.nav-sub:focus-within{scrollbar-width:auto;scrollbar-color:var(--c,var(--accent)) transparent}
}
@media (max-width:900px){.sidenav{--nav-proj-h:36px}}
@media (prefers-reduced-motion:no-preference){.nav-sub{scroll-behavior:smooth}}
.nav-sub .nav-item.nav-proj{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Account menu (avatar → <details> dropdown). Tokens only. Open/close is native <details>;
   Escape, click-outside and focus-on-open come from Alpine on the element in base.html. ── */
.user-menu{position:relative;flex:none}
.user-menu>summary{list-style:none;cursor:pointer;user-select:none;transition:box-shadow .15s}
.user-menu>summary::-webkit-details-marker{display:none}
.user-menu>summary:hover{box-shadow:0 0 0 2px var(--line-strong)}
.user-menu>summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.user-menu[open]>summary{box-shadow:0 0 0 2px var(--accent)}
.user-menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:220px;padding:var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-1);box-shadow:var(--shadow)}
.user-menu-panel::before{content:"";position:absolute;top:-6px;right:12px;width:10px;height:10px;transform:rotate(45deg);
  background:var(--surface-1);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong)}
.user-menu-name{padding:var(--s2) var(--s3) var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--line);
  font:600 13px var(--font-body);color:var(--ink-1)}
.user-menu-panel form{margin:0}
.user-menu-panel .btn{width:100%;justify-content:flex-start;background:transparent;border-color:transparent;color:var(--ink-2)}
.user-menu-panel .btn:hover{background:var(--surface-2);color:var(--ink-1)}
.user-menu-panel .btn:focus-visible{outline:none;background:var(--surface-2);color:var(--ink-1);box-shadow:0 0 0 2px var(--accent-ring)}
@media (prefers-reduced-motion:no-preference){.user-menu[open] .user-menu-panel{animation:menu-in .12s ease-out}}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* drawer sign out: only inside the mobile drawer */
.nav-signout{display:none;margin:auto 0 0;padding-top:var(--s3);border-top:1px solid var(--line)}
.nav-signout .btn{width:100%;justify-content:center;background:transparent;color:var(--ink-2)}
.nav-signout .btn:hover{color:var(--ink-1);border-color:var(--ink-3)}
.nav-signout .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
@media (max-width:900px){
  .nav-signout{display:block}
  .band .avatar{display:grid;width:30px;height:30px;font-size:11px}   /* keep the account menu reachable at 390 */
  .band .search{display:none}
  .user-menu-panel{min-width:200px}
}
/* showcase hero title (h2: the band title is the page's only h1) */
.hero .hero-title{font:600 34px/1.15 var(--font-display);margin:var(--s3) 0}
/* ── Header fix (feat/v3-header-fix) ─────────────────────────────────────────────
   1. House band = the original banner, merged: full-width house tint, crest, title, pennant stripe.
   2. The band can never be wider than .main: every flex child may shrink, title truncates, wraps <1100px.
   3. Account menu panel is clamped inside the viewport. */
.main{min-width:0;max-width:100%}
.topbar.band{min-width:0;max-width:100%;box-sizing:border-box;flex-wrap:nowrap}
.topbar.band>*{min-width:0}
.topbar.band .user-menu,.topbar.band .iconbtn,.topbar.band .nav-toggle{flex:none}
.band .search{flex:0 1 240px;min-width:120px}
.band-text{flex:1 1 auto}
.topbar.band[class*="house-"]{min-height:88px;padding-right:calc(var(--s8) + 8px);
  background:linear-gradient(100deg,color-mix(in srgb,var(--c) 42%,var(--surface-1)) 0%,color-mix(in srgb,var(--c) 18%,var(--surface-1)) 45%,var(--surface-0) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--c) 55%,var(--line))}
.topbar.band[class*="house-"]::after{height:4px;opacity:1}
.topbar.band[class*="house-"]::before{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;     /* the banner's pennant edge */
  background:repeating-linear-gradient(180deg,var(--c) 0 14px,var(--c2) 14px 28px)}
.topbar.band[class*="house-"] .band-id .crest{--sz:52px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.topbar.band[class*="house-"] .band-title{font-size:26px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.topbar.band[class*="house-"] .band-sub,.topbar.band[class*="house-"] .crumbs a{color:color-mix(in srgb,var(--ink-1) 82%,var(--c2))}
.user-menu-panel{max-width:calc(100vw - 16px);box-sizing:border-box}
@media (max-width:1100px){.band .search{display:none}.band .search-btn{display:grid}}
@media (max-width:900px){
  .topbar.band[class*="house-"]{min-height:60px;padding-right:calc(var(--s3) + 6px)}
  .topbar.band[class*="house-"] .band-id .crest{--sz:30px;width:30px;height:35px}
  .topbar.band[class*="house-"] .band-title{font-size:18px}
  .topbar.band[class*="house-"]::before{width:4px}
}
/* project settings menu (house re-sort lives here, not in the band) */
.proj-head{display:flex;align-items:flex-end;gap:var(--s3)}
.proj-head>:first-child{flex:1 1 auto;min-width:0}
.proj-settings{position:relative;flex:none;margin-bottom:var(--s2)}
.proj-settings>summary{list-style:none;cursor:pointer}.proj-settings>summary::-webkit-details-marker{display:none}
.proj-settings-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;padding:var(--s3);max-width:calc(100vw - 32px);
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-1);box-shadow:var(--shadow)}
.proj-settings-panel .house-select{margin:0;white-space:nowrap}
.proj-head{margin-bottom:var(--s5);border-bottom:1px solid var(--line)}.proj-head .tabs{margin-bottom:0;border-bottom:0}
.proj-settings>summary.btn{padding:4px 10px;font-size:12.5px}
/* ── Roster (one page: Agents + Family) ── */
.roster-tools{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
.roster-filter{flex:1 1 320px;max-width:420px;height:34px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface-1);color:var(--ink-1);font:400 13px var(--font-body)}
.roster-filter:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.roster-card{display:flex;gap:var(--s3);align-items:flex-start;border-top:3px solid var(--c,var(--line))}
.roster-card b{display:block;font:600 15px var(--font-display)}.roster-card small{display:block;color:var(--ink-3);font-size:12px;margin:2px 0 6px}
.roster-co{margin-left:var(--s2);font-size:11px;color:var(--ink-3)}.roster-bio{margin:0;color:var(--ink-2);font-size:12.5px}
.roster-card .avatar-lg{font-size:22px;background:var(--surface-2)}
.divider small{font-family:var(--font-body);letter-spacing:0;color:var(--ink-3)}
.roster-medallion{width:56px;height:56px;flex:none;border-radius:50%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
/* project document page (Caliber plan) — layout only; Fleur to polish */
.plan-layout{grid-template-columns:minmax(200px,260px) minmax(0,1fr);align-items:start}
.plan-toc{position:sticky;top:var(--s4)}.plan-toc .toc{margin:0;padding-left:1.1em;font-size:13px}.plan-toc .toc-l3{margin-left:1em;font-size:12.5px}
.plan-toc .meta{margin:var(--s3) 0 0;font-size:12px;color:var(--ink-3)}
.plan-prose{max-width:none}.plan-prose h1,.plan-prose h2,.plan-prose h3{scroll-margin-top:var(--s6)}
.table-wrap{overflow-x:auto;margin:var(--s3) 0}.table-wrap .table{min-width:560px}
.nav-proj.nav-doc{padding-left:calc(var(--s2) + 14px);font-size:12.5px}
@media (max-width:900px){.plan-layout{grid-template-columns:1fr}.plan-toc{position:static}}
.roster-arch-toggle{font:600 12px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.roster-arch-list{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px var(--s4)}
.roster-arch-list li{display:flex;gap:var(--s2);align-items:baseline;min-width:0;padding:4px 0;color:var(--ink-3);font-size:12.5px;border-bottom:1px solid var(--line)}
.roster-arch-list b{color:var(--ink-2);font-weight:600;white-space:nowrap}.roster-arch-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[x-cloak]{display:none !important}