/* FOLIO components and templates - CodeCloud Nova (DESIGN.md par.5-7) */
/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg-canvas); color:var(--text-1);
  font:400 13px/20px var(--f-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
::selection { background:var(--ink-200); color:var(--ink-900); }
.i { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.i-sm { width:14px; height:14px; }
.mono { font-family:var(--f-code); }
.num { font-family:var(--f-code); font-variant-numeric:tabular-nums; }
.muted { color:var(--text-3); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kbd {
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px;
  font:500 10.5px/1 var(--f-code); color:var(--text-3); background:var(--bg-surface);
  border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px;
}
.cap { font:600 10.5px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }

/* =====================================================================
   App frame: rail | navigator | main
   ===================================================================== */
.app {
  display:grid; grid-template-columns:var(--rail-w) var(--nav-w) minmax(0,1fr);
  height:100vh; height:100dvh; transition:grid-template-columns .22s var(--ease);
}
.app.nav-collapsed { grid-template-columns:var(--rail-w) 0 minmax(0,1fr); }
.app > .rail { grid-column:1; grid-row:1; } .app > .nav { grid-column:2; grid-row:1; } .app > .main { grid-column:3; grid-row:1; }

/* ---- Rail ---------------------------------------------------------- */
.rail {
  background:var(--side-bg); box-shadow:inset -1px 0 0 var(--side-line); display:flex; flex-direction:column; align-items:center;
  padding:12px 0 10px; gap:2px; position:relative; z-index:6; min-height:0;
}
.rail-brand { width:44px; height:44px; display:grid; place-items:center; border-radius:10px; margin-bottom:12px; }
.rail-brand:hover { background:var(--side-hover); }
.rail-brand svg { width:30px; height:32px; }
.rail-item {
  position:relative; width:54px; padding:6px 0 5px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--side-fg);
}
.rail-item:hover { color:var(--side-fg-strong); background:var(--side-hover); }
.rail-tile {
  min-width:36px; height:26px; padding:0 5px; display:grid; place-items:center; border-radius:7px;
  font:600 11px/1 var(--f-code); letter-spacing:.02em; border:1px solid var(--tile-line);
}
.rail-lbl { font:500 9.5px/1.1 var(--f-ui); letter-spacing:.02em; white-space:nowrap; }
.rail-item[aria-current="page"] { color:var(--side-fg-strong); }
.rail-item[aria-current="page"] .rail-lbl { font-weight:600; }
.rail-item[aria-current="page"] .rail-tile { background:var(--tile-on-bg); color:var(--tile-on-fg); border-color:var(--tile-on-bg); }
.rail-item[aria-current="page"]::before {
  content:""; position:absolute; left:-5px; top:9px; width:4px; height:22px; border-radius:1px;
  background:var(--epicle-red); transform:skewY(calc(var(--slant) * -1));
}
.rail-sep { width:28px; height:1px; background:var(--side-line); margin:8px 0; }
.rail-spacer { flex:1; }

/* ---- Navigator ----------------------------------------------------- */
.nav {
  background:var(--side-bg); border-right:1px solid var(--side-line); min-width:0; min-height:0;
  display:flex; flex-direction:column; overflow:hidden;
}
.nav-inner { width:var(--nav-w); display:flex; flex-direction:column; min-height:0; height:100%; }
.nav-head { padding:14px 14px 12px; border-bottom:1px solid var(--side-line); }
.nav-product { display:flex; align-items:center; gap:7px; }
.nav-product .nova-logo { width:18px; height:18px; flex:none; }
.nav-product b { font:600 12px/1 var(--f-ui); color:var(--text-1); letter-spacing:-.005em; }
.nav-product span { font:500 10.5px/1 var(--f-ui); color:var(--text-3); }
.nav-title { font:600 22px/28px var(--f-display); letter-spacing:-.01em; margin:12px 0 2px; }
.nav-kind { font-size:12px; color:var(--text-3); margin-bottom:10px; }
.edition {
  display:flex; align-items:center; gap:8px; width:100%; height:32px; padding:0 8px 0 10px;
  background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
}
.edition:hover { border-color:var(--ink-300); }
.edition .yr { font:600 12.5px/1 var(--f-code); }
.edition .note { font-size:11.5px; color:var(--text-3); }
.edition .i { margin-left:auto; color:var(--text-3); }
.pill-now { font:600 9.5px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; padding:3px 6px; border-radius:99px; background:var(--success-soft); color:var(--success); }
.pill-arch { font:600 9.5px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; padding:3px 6px; border-radius:99px; background:var(--warning-soft); color:var(--warning); }
.nav-scroll { flex:1; overflow:auto; padding:6px 8px 14px; min-height:0; scrollbar-width:thin; }
.nav-label { display:flex; align-items:center; justify-content:space-between; padding:14px 8px 6px; }
.nav-item {
  display:flex; align-items:center; gap:10px; width:100%; height:var(--row-h); padding:0 8px; border-radius:6px;
  color:var(--text-2); font-weight:500; text-align:left;
}
.nav-item .i { color:var(--text-3); }
.nav-item:hover { background:var(--side-hover); color:var(--text-1); }
.nav-item[aria-current="page"] { background:var(--side-sel); color:var(--side-sel-fg); box-shadow:var(--side-sel-shadow); }
.nav-item[aria-current="page"] .i { color:var(--side-sel-icon); }
.nav-item .kbd { margin-left:auto; opacity:0; transition:opacity .12s; }
.nav-item:hover .kbd { opacity:1; }
.nav-item .soon { margin-left:auto; font-size:10.5px; color:var(--text-4); }
.chap {
  display:grid; grid-template-columns:66px minmax(0,1fr); gap:6px; align-items:center; width:100%;
  min-height:28px; padding:3px 8px; border-radius:6px; text-align:left;
}
.chap:hover { background:var(--side-hover); }
.chap[aria-current="true"] { background:var(--side-sel); box-shadow:var(--side-sel-shadow); }
.chap .rng { font:500 11px/1 var(--f-code); color:var(--text-3); }
.chap[aria-current="true"] .rng { color:var(--side-sel-icon); }
.chap .nm { font-size:12.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chap[aria-current="true"] .nm { color:var(--side-sel-fg); }
.nav-foot { border-top:1px solid var(--side-line); padding:10px 14px 12px; }
.recent { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }

/* ---- Main column ---------------------------------------------------- */
.main { display:grid; grid-template-rows:var(--bar-h) minmax(0,1fr) var(--status-h); min-width:0; min-height:0; }
.bar {
  display:flex; align-items:center; gap:10px; padding:0 14px 0 8px; min-width:0;
  border-bottom:1px solid var(--line); background:var(--bg-canvas);
}
.crumbs { display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; color:var(--text-3); white-space:nowrap; }
.crumbs .sep { color:var(--line-strong); font-size:15px; }
.crumbs b { color:var(--text-1); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.omni {
  display:flex; align-items:center; gap:9px; width:min(460px,38vw); height:34px; padding:0 6px 0 11px; margin:0 auto;
  background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:8px; color:var(--text-3); box-shadow:var(--sh-1);
}
.omni:hover { border-color:var(--ink-300); color:var(--text-2); }
.omni .ph { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.omni .kbds { display:flex; gap:3px; }
.icon-btn { width:32px; height:32px; display:grid; place-items:center; border-radius:7px; color:var(--text-2); flex:none; }
.icon-btn:hover { background:var(--bg-hover); color:var(--text-1); }
.icon-btn[aria-pressed="true"] { background:var(--bg-selected); color:var(--accent-strong); }
.user { display:flex; align-items:center; gap:9px; height:36px; padding:0 4px 0 10px; border-radius:99px; border:1px solid var(--line); flex:none; }
.user:hover { background:var(--bg-hover); }
.user .who { text-align:right; line-height:14px; }
.user .who b { display:block; font-size:12.5px; font-weight:600; }
.user .who span { font-size:11px; color:var(--text-3); }
.avatar { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--epicle-navy); color:#fff; font:600 11px/1 var(--f-ui); letter-spacing:.02em; }
[data-theme="dark"] .avatar { background:#ECECEC; color:#171717; }

/* ---- Status bar ------------------------------------------------------ */
.status {
  display:flex; align-items:center; gap:14px; padding:0 14px; border-top:1px solid var(--line);
  background:var(--bg-nav); font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden;
}
.status .dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.status .grow { flex:1; }
.status button { color:var(--text-3); display:inline-flex; align-items:center; gap:6px; }
.status button:hover { color:var(--text-1); }
.status .sepv { width:1px; height:12px; background:var(--line-strong); }

/* =====================================================================
   Workspace
   ===================================================================== */
.ws { min-height:0; min-width:0; overflow:hidden; padding:var(--pad); display:grid; gap:var(--pad); }
.ws.split { grid-template-columns:minmax(300px,380px) minmax(0,1fr); }
.ws.single { grid-template-columns:minmax(0,1fr); overflow:auto; align-content:start; }
/* A pane or wrapper that fills the workspace height exactly (PDF viewers,
   par.6.21; the ABN form). */
.fill-ws { height:calc(100vh - var(--bar-h) - var(--status-h) - 2*var(--pad)); }
.banner-arch {
  grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--r-md);
  background:var(--warning-soft); color:var(--warning); font-size:12.5px;
}
.banner-arch b { color:inherit; }
.banner-arch .btn { margin-left:auto; }

.pane {
  background:var(--bg-surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh-1);
  min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden;
}
/* A workbench input bar (codes, claim, payment inputs) keeps its own height: with
   min-height:0 + overflow:hidden above, tall results beneath it squeezed it to nothing.
   .keep is the explicit opt-in; the :has() rule covers the other tools' input bars
   (kept as a separate rule: a browser without :has() would drop a combined one). */
.pane.keep { overflow:visible; min-height:auto; flex:none; }
.pane:has(> .wb-input) { overflow:visible; min-height:auto; flex:none; }
.pane-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); flex:none; }
.pane-title { font:600 13px/18px var(--f-ui); min-width:0; }
.pane-sub { font-size:11.5px; color:var(--text-3); }
.pane-tools { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); flex:none; align-items:center; }
.pane-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; }
.pane-foot { display:flex; align-items:center; gap:12px; padding:7px 12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-3); flex:none; }

/* ---- Controls -------------------------------------------------------- */
.field {
  display:flex; align-items:center; gap:8px; height:30px; padding:0 9px; flex:1; min-width:0;
  background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:6px; color:var(--text-3);
}
.field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field input { flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text-1); font-size:12.5px; }
.field input::placeholder { color:var(--text-4); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 11px; flex:none;
  border-radius:6px; border:1px solid var(--line-strong); background:var(--bg-surface);
  font-size:12.5px; font-weight:500; color:var(--text-1); white-space:nowrap; transition:background .12s, border-color .12s;
}
.btn:hover { background:var(--bg-hover); border-color:var(--ink-200); }
[data-theme="dark"] .btn:hover { border-color:var(--line-strong); }
.btn-primary { background:var(--btn-primary); border-color:var(--btn-primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--btn-primary-hover); border-color:var(--btn-primary-hover); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--bg-hover); border-color:transparent; color:var(--text-1); }
.btn-sm { height:26px; padding:0 8px; font-size:12px; }
.btn-icon { width:30px; padding:0; }
.btn-sm.btn-icon { width:26px; }
.seg { display:inline-flex; padding:2px; border-radius:7px; background:var(--bg-sunken); border:1px solid var(--line); flex:none; }
.seg button { height:24px; padding:0 10px; border-radius:5px; font-size:12px; font-weight:500; color:var(--text-3); white-space:nowrap; }
.seg button:hover { color:var(--text-1); }
.seg button[aria-pressed="true"] { background:var(--bg-surface); color:var(--text-1); box-shadow:0 1px 2px rgba(12,18,72,.14); }
[data-theme="dark"] .seg button[aria-pressed="true"] { background:var(--bg-selected); }

/* ---- Code chips, badges, flags -------------------------------------- */
.code {
  display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:4px; white-space:nowrap;
  font:500 11.5px/1 var(--f-code); color:var(--chip-fg); background:var(--chip-bg); border:1px solid var(--chip-line);
  vertical-align:1px; cursor:pointer; transition:border-color .12s, background .12s;
}
.code:hover { border-color:var(--accent); }
.code.plain { background:transparent; border-color:transparent; padding:0; height:auto; cursor:default; }
.badge {
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:99px; white-space:nowrap;
  font:600 10px/1 var(--f-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-strong);
}
.badge .d { width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.ok   { color:var(--success); background:var(--success-soft); border-color:transparent; }
.badge.warn { color:var(--warning); background:var(--warning-soft); border-color:transparent; }
.badge.bad  { color:var(--rubric);  background:var(--rubric-soft);  border-color:transparent; }
.badge.ink  { color:var(--accent-strong); background:var(--accent-soft); border-color:transparent; }
.badge.solid{ color:var(--on-primary); background:var(--btn-primary); border-color:transparent; }
.flag {
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px 0 3px; border-radius:4px; white-space:nowrap;
  font:500 11px/1 var(--f-ui); color:var(--text-2); background:var(--bg-surface); border:1px solid var(--line-strong);
}
.flag .g {
  min-width:15px; height:14px; padding:0 2px; display:grid; place-items:center; border-radius:3px;
  font:700 10px/1 var(--f-code); color:var(--fc,var(--text-2)); background:var(--fb,var(--bg-sunken));
}
.flag.only { padding:0 2px; } .flag.only .ft { display:none; }
.f-life   { --fc:var(--success); --fb:var(--success-soft); }
.f-rev    { --fc:var(--accent-strong); --fb:var(--accent-soft); }
.f-bill   { --fc:var(--n-addl); --fb:var(--n-addl-bg); }
.f-demo   { --fc:var(--text-2); --fb:var(--bg-sunken); }
.f-mf     { --fc:var(--n-first); --fb:var(--n-first-bg); }
.f-warn   { --fc:var(--warning); --fb:var(--warning-soft); }
.f-bad    { --fc:var(--rubric); --fb:var(--rubric-soft); }

/* =====================================================================
   Tree / list rows
   ===================================================================== */
.tree { padding:4px 0 10px; }

/* ---- Index term tree (template B, par.7): CM/E-index, PCS, CPT -------- */
.term-tree { padding:6px 0 12px; }
.term {
  display:flex; gap:8px; align-items:flex-start; padding:4px 14px 4px 10px;
  font-size:12.5px; line-height:19px; color:var(--text-2);
}
.term:hover { background:var(--side-hover); }
summary.term { cursor:pointer; list-style:none; }
summary.term::-webkit-details-marker { display:none; }
.term .chev { width:14px; height:14px; flex:none; margin-top:2.5px; color:var(--text-3); }
.term .chev-i { transition:transform .12s; }
.term .t { min-width:0; }
.term .tt, .tbl .tt { font-weight:500; color:var(--text-1); }
.term-kids { border-left:1px solid var(--line); margin-left:16px; }
.tnode > .tkids { margin-left:19px; border-left:1px solid var(--line); }
.trow {
  display:grid; grid-template-columns:16px auto minmax(0,1fr) auto; align-items:start; gap:8px; width:100%;
  min-height:var(--row-h); padding:5px 12px 5px 8px; text-align:left; position:relative; background:var(--bg-surface);
}
.trow:hover { background:var(--bg-hover); }
.trow .chev { width:16px; height:20px; display:grid; place-items:center; color:var(--text-3); }
.trow .chev .i { width:13px; height:13px; transition:transform .15s var(--ease); }
.trow[aria-expanded="true"] .chev .i { transform:rotate(90deg); }
.trow .cd { font:500 12px/20px var(--f-code); color:var(--accent-strong); white-space:nowrap; }
.trow .ds { font-size:12.5px; line-height:20px; color:var(--text-2); }
.trow .aside { display:flex; gap:4px; align-items:center; height:20px; }
.trow.grp { position:sticky; z-index:2; }
.trow.grp .ds { color:var(--text-1); font-weight:500; }
.trow.lvl1 { top:0; }
.trow.lvl2 { top:var(--row-h); }
.trow[aria-selected="true"] { background:var(--bg-selected); }
.trow[aria-selected="true"] .ds { color:var(--text-1); font-weight:500; }
.trow[aria-selected="true"]::before {
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:3px; border-radius:0 2px 2px 0; background:var(--epicle-red);
}
.bill { width:7px; height:7px; border-radius:50%; margin-top:6px; }
.bill.y { background:var(--success); }
.bill.n { border:1.5px solid var(--text-4); }
.tempty { padding:6px 12px 8px 32px; font-size:12px; color:var(--text-4); font-style:italic; }
.src { font:600 9.5px/1 var(--f-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:3px 5px; border-radius:3px; background:var(--bg-sunken); }

/* =====================================================================
   Code sheet
   ===================================================================== */
.sheet { position:relative; }
.sheet-band { height:3px; flex:none; background:linear-gradient(104deg, var(--epicle-navy) 0 64%, var(--epicle-grey) 64% 76%, var(--epicle-red) 76% 100%); }
[data-theme="dark"] .sheet-band { background:linear-gradient(104deg, #6B6B6B 0 64%, #454545 64% 76%, var(--epicle-red) 76% 100%); }
.sheet-head { padding:12px 18px 0; border-bottom:1px solid var(--line); flex:none; }
.ribbon { display:flex; align-items:stretch; height:24px; font-size:11.5px; min-width:0; overflow:hidden; margin-bottom:12px; transition:height .18s var(--ease), margin .18s var(--ease), opacity .18s; }
.rseg {
  display:flex; align-items:center; gap:6px; padding:0 13px 0 12px; margin-right:-3px; min-width:0; flex:0 1 auto;
  background:var(--bg-sunken); color:var(--text-2); clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  white-space:nowrap;
}
.rseg:first-child { clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%); border-radius:4px 0 0 4px; padding-left:9px; }
.rseg:hover { background:var(--accent-soft); color:var(--text-1); }
.rseg .rc { font:600 11px/1 var(--f-code); color:var(--accent-strong); }
.rseg .rt { overflow:hidden; text-overflow:ellipsis; }
.rseg.cur { background:var(--epicle-navy); color:#fff; flex:none; }
.rseg.cur .rc { color:#fff; }
[data-theme="dark"] .rseg.cur { background:#ECECEC; color:#171717; } [data-theme="dark"] .rseg.cur .rc { color:#171717; }
.hero { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-code { font:600 30px/36px var(--f-code); letter-spacing:-.015em; color:var(--text-1); transition:font-size .18s var(--ease), line-height .18s; }
.hero-code .x { color:var(--code-ext); }
.hero-code .pcs-sp { margin-right:.08em; }
.hero-badges { display:flex; gap:6px; flex-wrap:wrap; }
.hero-actions { display:flex; gap:6px; margin-left:auto; }
.hero-desc { font:600 21px/28px var(--f-display); letter-spacing:-.005em; margin:6px 0 2px; max-width:62ch; transition:font-size .18s var(--ease), line-height .18s; }
.hero-meta { font-size:12px; color:var(--text-3); margin:0 0 4px; }
.tabs { display:flex; gap:2px; margin:8px -8px 0; overflow-x:auto; scrollbar-width:none; }
.tab { position:relative; height:36px; padding:0 9px; display:flex; align-items:center; gap:6px; font-weight:500; color:var(--text-3); white-space:nowrap; }
.tab:hover { color:var(--text-1); }
.tab .n { font:500 10.5px/1 var(--f-code); padding:3px 5px; border-radius:99px; background:var(--bg-sunken); color:var(--text-3); }
.tab[aria-selected="true"] { color:var(--text-1); }
.tab[aria-selected="true"]::after { content:""; position:absolute; left:9px; right:9px; bottom:-1px; height:2px; background:var(--text-1); border-radius:2px 2px 0 0; }
.sheet.is-condensed .ribbon { height:0; margin-bottom:0; opacity:0; }
.sheet.is-condensed .hero-code { font-size:20px; line-height:28px; }
.sheet.is-condensed .hero-desc { font-size:15px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.sheet.is-condensed .hero-meta { display:none; }
.sheet-body { flex:1; min-height:0; overflow:auto; scroll-behavior:smooth; scrollbar-width:thin; }
.sec { padding:16px 18px 18px; }
.sec + .sec { border-top:1px solid var(--line); }
.sec-h { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.sec-t { font:600 16px/22px var(--f-display); margin:0; }
.sec-c { font:400 12px/1.3 var(--f-ui); color:var(--text-3); }
.sec-h .right { margin-left:auto; display:flex; gap:6px; align-items:center; }
.sub-h { display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-size:12px; color:var(--text-3); }
.sub-h:first-child { margin-top:0; }
.sub-h b { color:var(--text-2); font-weight:600; }

/* ---- Instructional notes (rubric blocks) --------------------------- */
.notes { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.note { --c:var(--n-note); --b:var(--n-note-bg); background:var(--b); border-radius:var(--r-md); padding:10px 12px 10px 15px; position:relative; }
.note::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--c); }
.note-h { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.note-t { font:600 10.5px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c); }
.note-hint { margin-left:auto; font-size:11px; color:var(--text-3); }
.note ul { margin:0; padding:0; list-style:none; }
.note li { display:flex; align-items:flex-start; gap:10px; padding:3px 0 3px 12px; position:relative; font-size:13px; line-height:19px; }
.note li::before { content:""; position:absolute; left:0; top:12px; width:5px; height:1.5px; background:var(--c); opacity:.7; }
.note li .t { flex:1; }
.note li .code { margin-top:0; }
.note.incl  { --c:var(--n-incl);  --b:var(--n-incl-bg); }
.note.ex1   { --c:var(--n-ex1);   --b:var(--n-ex1-bg); }
.note.ex2   { --c:var(--n-ex2);   --b:var(--n-ex2-bg); }
.note.first { --c:var(--n-first); --b:var(--n-first-bg); }
.note.addl  { --c:var(--n-addl);  --b:var(--n-addl-bg); }
.note.also  { --c:var(--n-also);  --b:var(--n-also-bg); }
.notes.compact .note { padding:8px 10px 8px 13px; }
.notes.compact .note li { font-size:12.5px; line-height:18px; padding:2px 0 2px 12px; }
.notes.compact .note li::before { top:11px; }
.inherit { border:1px solid var(--line); border-radius:var(--r-md); margin-top:10px; }
.inherit > summary { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; list-style:none; font-size:12.5px; color:var(--text-2); }
.inherit > summary::-webkit-details-marker { display:none; }
.inherit > summary .i { color:var(--text-3); transition:transform .15s var(--ease); }
.inherit[open] > summary .i { transform:rotate(90deg); }
.inherit > summary .cnt { margin-left:auto; font-size:11.5px; color:var(--text-3); }
.inherit > .notes { padding:0 12px 12px; }

/* ---- Tables ---------------------------------------------------------- */
.tbl-wrap { border:1px solid var(--line); border-radius:var(--r-md); overflow:auto; }
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.tbl th {
  position:sticky; top:0; z-index:1; background:var(--bg-surface); text-align:left; white-space:nowrap;
  font:600 10px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
  padding:9px 12px; border-bottom:1px solid var(--line);
}
.tbl td { padding:7px 12px; border-bottom:1px solid var(--line); vertical-align:top; line-height:18px; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover td { background:var(--bg-hover); }
.tbl .r { text-align:right; }
.tbl td.num, .tbl th.r { text-align:right; }
.tbl tr.total td { font-weight:600; background:var(--bg-nav); }
.tbl tr.hard td:first-child { box-shadow:inset 3px 0 0 var(--rubric); }
.tbl .wrap { white-space:normal; }
/* ICD validator rows: the notes that govern a code, and the Excludes1 conflicts it raises */
.v-in { display:block; font-size:11px; color:var(--text-3); }
.v-st { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.v-warn { display:inline-flex; color:var(--warning); }
.v-notes { display:grid; gap:7px; min-width:0; }
.v-grp { --c:var(--n-ex1); }
.v-grp.ex2 { --c:var(--n-ex2); }
.v-h { display:block; font:600 10px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--c); margin-bottom:3px; }
.v-grp ul { margin:0; padding:0; list-style:none; }
.v-grp li { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; padding:1px 0; font-size:12px; line-height:18px; }
.v-grp li .t { flex:1 1 150px; min-width:0; }
.v-grp li .code { margin-top:0; }
.v-conf { display:grid; gap:6px; min-width:0; }
.v-hit { background:var(--n-ex1-bg); border-radius:var(--r-md); padding:6px 9px 6px 12px; position:relative; font-size:12px; line-height:17px; }
.v-hit::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--n-ex1); }
.v-hit-h { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-weight:600; color:var(--text-1); }
.v-hit-h .i { color:var(--n-ex1); }
.v-hit .src { display:inline-block; margin-top:3px; }
/* One alert card for every Excludes1 conflict: the pair, and the reason */
.alert-card { background:var(--n-ex1-bg); border:1px solid var(--n-ex1); border-radius:var(--r-md); margin-bottom:var(--pad); overflow:hidden; }
.ac-h { display:flex; gap:10px; align-items:flex-start; padding:10px 14px 8px; }
.ac-h > .i { flex:none; margin-top:1px; color:var(--n-ex1); }
.ac-t { font-weight:600; font-size:13.5px; line-height:19px; color:var(--text-1); }
.ac-s { font-size:12px; line-height:17px; color:var(--text-3); }
.ac-list { margin:0; padding:0 14px 4px 38px; list-style:none; display:grid; gap:8px; }
.ac-list li { border-top:1px solid var(--line); padding-top:8px; }
.ac-pair { font-size:13px; line-height:22px; font-weight:600; color:var(--text-1); }
.ac-why { display:flex; gap:8px; align-items:baseline; font-size:12.5px; line-height:18px; padding:2px 0; color:var(--text-2); }
.ac-k { flex:none; font:600 9.5px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--n-ex1); }
.alert-card.ex2 { background:var(--n-ex2-bg); border-color:var(--n-ex2); }
.alert-card.ex2 .ac-h > .i, .alert-card.ex2 .ac-k { color:var(--n-ex2); }
.v-hit.ex2 { background:var(--n-ex2-bg); }
.v-hit.ex2::before { background:var(--n-ex2); }
.v-hit.ex2 .v-hit-h .i { color:var(--n-ex2); }
.alert-card.ok { background:var(--success-soft); border-color:var(--success); }
.alert-card.ok .ac-h { padding-bottom:10px; }
.alert-card.ok .ac-h > .i { color:var(--success); }
.ac-f { padding:7px 14px 9px 38px; border-top:1px solid var(--line); font-size:12px; line-height:17px; color:var(--text-3); }
.mi { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; }
.mi .k { width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font:600 11px/1 var(--f-code); }
.mi.m0 .k { background:var(--rubric-soft); color:var(--rubric); }
.mi.m1 .k { background:var(--success-soft); color:var(--success); }
.mi.m9 .k { background:var(--bg-sunken); color:var(--text-3); }

/* ---- Facts grid (key / value) -------------------------------------- */
.facts { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:0; }
.fact { background:var(--bg-surface); padding:9px 12px 10px; min-width:0; }
.fact dt { font:600 10px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.fact dd { margin:0; font-size:12.5px; line-height:17px; }
.fact .k { font:600 12px/17px var(--f-code); color:var(--accent-strong); margin-right:6px; }
.fact .none { color:var(--text-4); }
.callout { display:flex; gap:10px; padding:10px 12px; border-radius:var(--r-md); background:var(--bg-nav); border:1px solid var(--line); font-size:12.5px; line-height:19px; margin-top:10px; }
.callout .i { color:var(--text-3); margin-top:2px; }
.callout b { font-weight:600; }

/* ---- Stats ----------------------------------------------------------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.stat { background:var(--bg-surface); padding:10px 14px 12px; }
.stat .v { font:600 22px/28px var(--f-code); letter-spacing:-.01em; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .u { font:500 11.5px/1 var(--f-ui); color:var(--text-3); margin-left:3px; letter-spacing:0; }
.stat .s { font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* ---- RVU composition bar ------------------------------------------- */
.rvubar { display:flex; height:8px; border-radius:99px; overflow:hidden; gap:2px; margin:12px 0 6px; }
.rvubar span { display:block; height:100%; }
.rvu-w { background:var(--epicle-navy); } [data-theme="dark"] .rvu-w { background:#D9D9D9; } [data-theme="dark"] .rvu-p { background:#6B6B6B; }
.rvu-p { background:var(--ink-300); }
.rvu-m { background:var(--epicle-red); }
.legend { display:flex; gap:14px; font-size:11.5px; color:var(--text-3); flex-wrap:wrap; }
.legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:0; }

/* ---- Empty states --------------------------------------------------- */
.empty { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px dashed var(--line-strong); border-radius:var(--r-md); color:var(--text-2); font-size:12.5px; line-height:19px; }
.empty .i { color:var(--text-3); margin-top:2px; }
.empty b { display:block; color:var(--text-1); font-weight:600; margin-bottom:1px; }

/* ---- Skeleton & slant loader --------------------------------------- */
.sk { display:block; height:10px; border-radius:4px; background:linear-gradient(90deg,var(--bg-sunken) 0,var(--bg-hover) 40%,var(--bg-sunken) 80%); background-size:300% 100%; animation:sk 1.2s linear infinite; }
@keyframes sk { from { background-position:100% 0; } to { background-position:-50% 0; } }
.loader { display:flex; gap:4px; align-items:center; height:16px; }
.loader span { width:5px; height:14px; background:var(--epicle-navy); transform:skewY(calc(var(--slant) * -1)); animation:ld 1s var(--ease) infinite; border-radius:1px; }
.loader span:nth-child(2) { background:var(--epicle-grey); animation-delay:.12s; }
.loader span:nth-child(3) { background:var(--epicle-red); animation-delay:.24s; }
@keyframes ld { 0%,100% { opacity:.25; } 50% { opacity:1; } }

/* ---- Blueprint (not-built-in-example) view --------------------------- */
.blueprint { max-width:720px; margin:6vh auto 0; padding:26px 28px; }
.blueprint h2 { font:600 24px/30px var(--f-display); margin:10px 0 6px; }
.blueprint p { color:var(--text-2); font-size:13.5px; line-height:21px; margin:0 0 12px; }
.blueprint ul { margin:0; padding-left:18px; color:var(--text-2); font-size:13px; line-height:21px; }
.blueprint .tpl { display:inline-flex; gap:6px; align-items:center; }

/* =====================================================================
   NCCI workbench
   ===================================================================== */
.wb { display:grid; gap:var(--pad); grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
.wb > .full { grid-column:1/-1; }
.wb-input { padding:14px 16px 16px; }
.tokens { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:40px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:7px; background:var(--bg-surface); }
.tokens:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.token { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 4px 0 8px; border-radius:5px; background:var(--chip-bg); border:1px solid var(--chip-line); font:500 12.5px/1 var(--f-code); color:var(--chip-fg); }
.token button { width:18px; height:18px; display:grid; place-items:center; border-radius:4px; color:var(--text-3); }
.token button:hover { background:var(--bg-sunken); color:var(--text-1); }
.tokens input { flex:1; min-width:120px; border:0; outline:0; background:none; font:500 12.5px var(--f-code); height:26px; }
.wb-row { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-top:12px; }
.lbl { display:block; font:600 10px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.date { height:30px; padding:0 9px; border:1px solid var(--line-strong); border-radius:6px; background:var(--bg-surface); font:500 12.5px var(--f-code); }
.hint { font-size:11.5px; color:var(--text-3); margin-top:8px; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.matrix { padding:14px 16px 16px; }
.mx { display:grid; gap:3px; margin-top:10px; font:500 10.5px/1 var(--f-code); }
.mx .h { color:var(--text-3); display:flex; align-items:center; justify-content:center; height:22px; }
.mx .hr { justify-content:flex-end; padding-right:4px; }
.mx .c { height:30px; border-radius:4px; display:grid; place-items:center; background:var(--bg-sunken); }
.mx .c.none { background:transparent; }
.mx .c.clean::after { content:""; width:4px; height:4px; border-radius:50%; background:var(--text-4); }
.mx .c.m0 { background:var(--rubric); color:#fff; } [data-theme="dark"] .mx .c.m0 { color:#171717; }
.mx .c.m1 { background:var(--success-soft); color:var(--success); box-shadow:inset 0 0 0 1px var(--success); }
.drop { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px dashed var(--line-strong); border-radius:var(--r-md); background:var(--bg-nav); }
.drop .i { width:20px; height:20px; color:var(--text-3); }
.drop p { margin:0; font-size:12.5px; color:var(--text-2); line-height:19px; }
.drop { cursor:pointer; }
.drop.drag { border-color:var(--accent); background:var(--accent-soft); }

/* =====================================================================
   PCS table + character strip
   ===================================================================== */
.strip { display:flex; gap:4px; flex-wrap:wrap; }
.ch { width:78px; border:1px solid var(--line-strong); border-radius:7px; overflow:hidden; background:var(--bg-surface); text-align:center; }
.ch .v { font:600 22px/38px var(--f-code); color:var(--text-1); }
.ch .a { font:600 9px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding:5px 2px 6px; border-top:1px solid var(--line); background:var(--bg-nav); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch.fixed .v { color:var(--text-3); }
.ch.set { border-color:var(--accent); } .ch.set .v { color:var(--accent-strong); }
.ch.open .v { color:var(--text-4); }
.ch.next { border-color:var(--epicle-red); box-shadow:0 0 0 3px var(--rubric-soft); }
.pcs-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.pcs-grid + .pcs-grid { margin-top:10px; }
.pcs-col { border-right:1px solid var(--line); min-width:0; }
.pcs-col:last-child { border-right:0; }
.pcs-col h4 { margin:0; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--bg-nav); }
.pcs-opt { display:flex; gap:8px; width:100%; align-items:flex-start; padding:5px 10px; text-align:left; font-size:12.5px; line-height:18px; color:var(--text-2); }
.pcs-opt:hover { background:var(--bg-hover); color:var(--text-1); }
.pcs-opt .k { font:600 12px/18px var(--f-code); color:var(--accent-strong); width:12px; flex:none; }
.pcs-opt[aria-pressed="true"] { background:var(--bg-selected); color:var(--text-1); font-weight:500; }
.pcs-opt[aria-pressed="true"] .k { color:var(--epicle-red); }
.pcs-opt:disabled { opacity:.35; cursor:not-allowed; }
.pcs-result { display:flex; gap:14px; align-items:center; padding:12px 14px; border-radius:var(--r-md); background:var(--bg-nav); border:1px solid var(--line); margin-top:12px; }
.pcs-result .cd { font:600 18px/1 var(--f-code); letter-spacing:.06em; }
.pcs-result .ds { flex:1; font:500 14px/20px var(--f-display); }

/* ---- DRG logic --------------------------------------------------------- */
.logic { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:stretch; }
.logic .join { align-self:center; font:600 10px/1 var(--f-ui); letter-spacing:.12em; color:var(--text-3); padding:6px 8px; border:1px solid var(--line-strong); border-radius:99px; background:var(--bg-surface); }
.lcard { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.lcard h4 { margin:0; padding:8px 12px; font-size:12px; font-weight:600; background:var(--bg-nav); border-bottom:1px solid var(--line); }
.lcard ul { list-style:none; margin:0; padding:4px 0; }
.lcard li { display:flex; gap:10px; padding:4px 12px; font-size:12.5px; line-height:18px; align-items:flex-start; }
.route { font:600 10px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.route::after { content:""; flex:1; height:1px; background:var(--line); }
.fam { display:grid; gap:6px; }
.fam-row { display:grid; grid-template-columns:48px minmax(0,1fr) 70px 140px; gap:12px; align-items:center; padding:6px 10px; border-radius:6px; font-size:12.5px; }
.fam-row.cur { background:var(--bg-selected); }
.fam-row .bar { height:6px; border-radius:99px; background:var(--bg-sunken); overflow:hidden; }
.fam-row .bar span { display:block; height:100%; background:var(--epicle-navy); border-radius:99px; }
[data-theme="dark"] .fam-row .bar span { background:#D9D9D9; }
/* Excluded by: the codes whose Excludes notes name the open code */
.exb { display:grid; gap:1px; }
.exb-row { display:grid; grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto; gap:12px; align-items:baseline; width:100%; padding:5px 10px; border-radius:6px; font-size:12.5px; line-height:18px; text-align:left; }
.exb-row[hidden] { display:none; }
button.exb-row:hover { background:var(--bg-hover); }
.exb-row .cd { font:600 12px/18px var(--f-code); color:var(--accent-strong); white-space:nowrap; }
.exb-row.static .cd { color:var(--text-2); }
.exb-row .rules { display:flex; gap:8px; }
.exb-rule { --c:var(--n-note); font:600 10px/1 var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--c); white-space:nowrap; }
.exb-rule.ex1 { --c:var(--n-ex1); }
.exb-rule.ex2 { --c:var(--n-ex2); }
.exb-more { margin-top:6px; }

/* =====================================================================
   Overlays: popover, palette, toast, login
   ===================================================================== */
.scrim { position:fixed; inset:0; background:rgba(7,10,43,.36); z-index:50; opacity:0; pointer-events:none; transition:opacity .16s; }
.scrim.show { opacity:1; pointer-events:auto; }
.pop {
  position:fixed; z-index:60; min-width:240px; background:var(--bg-surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--sh-2); padding:6px; display:none;
}
.pop.show { display:block; animation:pop .14s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(-4px); } }
.pop .grp { padding:8px 8px 4px; }
.pop-item { display:flex; align-items:center; gap:10px; width:100%; min-height:32px; padding:4px 8px; border-radius:6px; text-align:left; color:var(--text-2); }
.pop-item:hover { background:var(--bg-hover); color:var(--text-1); }
.pop-item .chk { margin-left:auto; color:var(--accent); }
.pop-item .yr { font:600 12.5px var(--f-code); color:var(--text-1); width:44px; }
.pop hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.pop-head { padding:8px 8px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.pop-head b { display:block; font-size:13px; }
.pop-head span { font-size:11.5px; color:var(--text-3); }
.pop-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; font-size:12.5px; color:var(--text-2); }

.palette {
  position:fixed; z-index:70; top:11vh; left:50%; transform:translateX(-50%); width:min(640px,calc(100vw - 24px));
  background:var(--bg-surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-3); overflow:hidden; display:none;
}
.palette.show { display:block; animation:pal .16s var(--ease); }
@keyframes pal { from { opacity:0; transform:translate(-50%,-6px) scale(.99); } }
.pal-in { display:flex; align-items:center; gap:10px; height:54px; padding:0 14px; border-bottom:1px solid var(--line); }
.pal-in .i { width:18px; height:18px; color:var(--text-3); }
.pal-in input { flex:1; min-width:0; border:0; outline:0; background:none; font:400 15.5px var(--f-ui); color:var(--text-1); }
.pal-in input::placeholder { color:var(--text-4); }
.pal-list { max-height:min(430px,58vh); overflow:auto; padding:6px; }
.pal-grp { padding:10px 10px 5px; }
.pal-item { display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:5px 10px; border-radius:7px; text-align:left; color:var(--text-2); }
.pal-item .cd { font:600 12.5px var(--f-code); color:var(--text-1); min-width:66px; }
.pal-item .ds { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pal-item .sys { font:600 9.5px/1 var(--f-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:4px 6px; border:1px solid var(--line-strong); border-radius:4px; }
.pal-item.is-active { background:var(--bg-selected); color:var(--text-1); }
.pal-item.is-active .sys { border-color:var(--accent); color:var(--accent-strong); }
.pal-item mark { background:none; color:var(--accent-strong); font-weight:600; }
.pal-foot { display:flex; gap:16px; padding:9px 14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-3); background:var(--bg-nav); }
.pal-foot span { display:inline-flex; gap:5px; align-items:center; }
.pal-none { padding:22px 16px; text-align:center; color:var(--text-3); font-size:12.5px; }

.toast {
  position:fixed; z-index:80; left:50%; bottom:calc(var(--status-h) + 18px); transform:translate(-50%,10px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:8px; font-size:12.5px;
  background:var(--epicle-navy); color:#fff; box-shadow:var(--sh-2); transition:opacity .18s, transform .18s var(--ease);
}
[data-theme="dark"] .toast { background:#E8E9F3; color:#0A0C1E; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast .code { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:inherit; }
[data-theme="dark"] .toast .code { background:rgba(10,12,30,.08); border-color:rgba(10,12,30,.15); }

.legend-list { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; padding:6px 8px 8px; font-size:12px; color:var(--text-2); max-width:480px; }
.legend-list .cap { grid-column:1/-1; margin-top:8px; }
.legend-list .flag { justify-self:start; }

/* ---- Sign-in -------------------------------------------------------- */
.login { position:fixed; inset:0; z-index:90; display:none; grid-template-columns:minmax(0,5fr) minmax(0,6fr); background:var(--bg-canvas); }
.login.show { display:grid; }
.login-art { position:relative; background:var(--epicle-navy); color:#fff; padding:40px 48px; display:flex; flex-direction:column; overflow:hidden; }
[data-theme="dark"] .login-art { background:#171717; border-right:1px solid #2A2A2A; }
[data-theme="dark"] .login-art p { color:#B4B4B4; } [data-theme="dark"] .login-art .foot { color:#8A8A8A; }
.login-art .wm { position:absolute; right:-90px; top:-60px; width:460px; height:492px; opacity:.07; }
.login-art .brand { display:flex; align-items:center; gap:10px; font:600 13px/1 var(--f-ui); }
.login-art .brand svg { width:26px; height:28px; }
.login-art h1 { display:flex; align-items:center; gap:20px; margin:auto 0 8px; font-weight:700; }
.login-art h1 .nova-logo { display:block; flex:none; width:clamp(72px,7vw,104px); height:clamp(72px,7vw,104px); }
.login-art h1 .nm { display:flex; flex-direction:column; gap:6px; min-width:0; }
.login-art h1 .l1 { font:700 clamp(30px,3.4vw,46px)/1 var(--f-ui); letter-spacing:-.03em; }
.login-art h1 .l2 { font:500 clamp(17px,1.8vw,24px)/1 var(--f-ui); letter-spacing:.01em; color:#C9CCEA; }
[data-theme="dark"] .login-art h1 .l2 { color:#B4B4B4; }
.login-art .by { font-size:13px; color:#8E93C4; margin:0 0 18px; }
.login-art p { font-size:15px; line-height:24px; color:#C9CCEA; max-width:44ch; margin:0 0 22px; }
.login-art .feats { display:grid; gap:11px; margin:0 0 24px; max-width:56ch; }
.login-art .feats .ft { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:18px; color:#C9CCEA; }
.login-art .feats .ft .i { width:15px; height:15px; flex:none; margin-top:1.5px; color:#8E93C4; }
.login-art .feats .ft b { color:#fff; font-weight:600; }
[data-theme="dark"] .login-art .by { color:#8A8A8A; }
[data-theme="dark"] .login-art .feats .ft { color:#B4B4B4; }
[data-theme="dark"] .login-art .feats .ft b { color:#F2F2F2; }
.login-art .sets { display:flex; flex-wrap:wrap; gap:6px; max-width:440px; }
.login-art .sets span { font:500 11.5px/1 var(--f-code); padding:6px 8px; border:1px solid rgba(255,255,255,.18); border-radius:5px; color:#E3E5F7; }
.login-art .foot { margin-top:36px; font-size:11.5px; color:#8E93C4; }
.login-form { display:flex; flex-direction:column; justify-content:center; padding:40px; }
.login-card { width:min(380px,100%); margin:0 auto; }
.login-card h2 { font:600 28px/34px var(--f-display); margin:0 0 4px; letter-spacing:-.01em; }
.login-mark { display:none; align-items:center; gap:10px; margin-bottom:28px; font:600 15px/1 var(--f-display); }
.login-mark svg { width:26px; height:26px; }
.login-card .sub { color:var(--text-3); margin:0 0 26px; font-size:13px; }
.fl { margin-bottom:14px; }
.fl .field { height:40px; }
.fl .field input { font-size:14px; }
.fl-row { display:flex; justify-content:space-between; align-items:center; margin:4px 0 20px; font-size:12.5px; color:var(--text-2); }
.chk { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.chk input { width:15px; height:15px; accent-color:var(--epicle-navy); margin:0; }
.login-card .btn-primary { width:100%; height:42px; font-size:14px; font-weight:600; }
.login-err { display:none; gap:8px; align-items:flex-start; padding:9px 11px; border-radius:7px; background:var(--rubric-soft); color:var(--rubric); font-size:12.5px; margin-bottom:14px; }
.login-err.show { display:flex; }
.login-note { margin-top:22px; font-size:12px; color:var(--text-3); line-height:18px; }
.login-close { position:absolute; top:14px; right:14px; }

/* =====================================================================
   Responsive
   ===================================================================== */
.only-mobile { display:none !important; }
@media (max-width:1180px) {
  .app, .app.nav-collapsed { grid-template-columns:var(--rail-w) 0 minmax(0,1fr); }
  .nav { position:fixed; left:var(--rail-w); top:0; bottom:0; width:var(--nav-w); z-index:55; box-shadow:var(--sh-3); transform:translateX(calc(-100% - var(--rail-w))); transition:transform .22s var(--ease); }
  .app.nav-open .nav { transform:none; }
  .omni { width:min(360px,34vw); }
  .wb { grid-template-columns:minmax(0,1fr); }
  .user .who { display:none; }
}
@media (max-width:760px) {
  :root { --bar-h:52px; }
  .app, .app.nav-collapsed { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 60px; }
  .app > .main { grid-column:1; grid-row:1; grid-template-rows:var(--bar-h) minmax(0,1fr); }
  .status { display:none; }
  .app > .rail { grid-column:1; grid-row:2; }
  .rail { flex-direction:row; padding:4px 6px calc(4px + env(safe-area-inset-bottom)); gap:0; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .rail-brand, .rail-sep, .rail-spacer { display:none; }
  .rail-item { width:auto; min-width:58px; flex:none; }
  .rail-item[aria-current="page"]::before { left:50%; top:-4px; width:22px; height:3px; margin-left:-11px; transform:skewX(calc(var(--slant) * -1)); }
  .rail { box-shadow:inset 0 1px 0 var(--side-line); }
  .nav { left:0; bottom:60px; width:min(300px,86vw); }
  .crumbs { display:none; }
  .tbl.stack thead { display:none; }
  .tbl.stack tr { display:block; padding:8px 12px; border-bottom:1px solid var(--line); }
  .tbl.stack tr:last-child { border-bottom:0; }
  .tbl.stack td { display:flex; gap:10px; align-items:baseline; padding:3px 0; border:0; text-align:left !important; white-space:normal !important; }
  .tbl.stack td::before { content:attr(data-l); flex:none; width:88px; font:600 10px/18px var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
  .tbl.stack tr.hard { box-shadow:inset 3px 0 0 var(--rubric); }
  .tbl.stack tr.hard td:first-child { box-shadow:none; }
  .v-grp li .t { flex-basis:100px; }
  .omni { width:auto; flex:1; margin:0; }
  .omni .kbds { display:none; }
  .user { border:0; padding:0; }
  .ws { padding:8px; gap:8px; }
  .fill-ws { height:calc(100vh - var(--bar-h) - var(--status-h) - 16px); }
  .ws.split { grid-template-columns:minmax(0,1fr); }
  .ws.split .sheet { display:none; }
  .ws.split.show-sheet .sheet { display:flex; }
  .ws.split.show-sheet .listpane { display:none; }
  .only-mobile { display:inline-flex !important; }
  .hero-code { font-size:24px; line-height:30px; }
  .hero-desc { font-size:18px; line-height:24px; }
  .hero-actions { margin-left:0; width:100%; }
  .hero-actions .btn .t { display:none; }
  .sheet-head { padding:10px 14px 0; }
  .sec { padding:14px; }
  .notes { grid-template-columns:minmax(0,1fr); }
  .summary { grid-template-columns:repeat(2,1fr); }
  .pcs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pcs-col:nth-child(2) { border-right:0; }
  .pcs-col:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .ch { width:calc((100% - 24px) / 7); }
  .ch .a { font-size:8px; letter-spacing:.02em; }
  .logic { grid-template-columns:minmax(0,1fr); }
  .logic .join { justify-self:center; }
  .fam-row { grid-template-columns:40px minmax(0,1fr) 60px; }
  .fam-row .bar { display:none; }
  .login.show { grid-template-columns:minmax(0,1fr); }
  .login-art { display:none; }
  .login-mark { display:flex; }
  .login-form { padding:24px 16px; }
  .tbl-wrap { border-radius:6px; }
}

/* =====================================================================
   Print — the code sheet prints as a clean reference page
   ===================================================================== */
@media print {
  body { background:#fff; }
  .rail, .nav, .bar, .status, .listpane, .hero-actions, .tabs, .toast, .palette, .scrim, .pop, .banner-arch { display:none !important; }
  .app, .main, .ws { display:block !important; height:auto !important; overflow:visible !important; padding:0 !important; }
  .pane { border:0 !important; box-shadow:none !important; overflow:visible !important; }
  .sheet-body { overflow:visible !important; }
  .note { break-inside:avoid; border:1px solid #ddd; }
  .exb-row[data-extra] { display:grid !important; }
  .exb-more { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Epicle mark colourways */
  /* Mark colourways: brand (on paper) and reversed (on navy) */
  .mark-brand { --mk-n:var(--epicle-navy); --mk-g:var(--epicle-grey); --mk-r:var(--epicle-red); }
  [data-theme="dark"] .mark-brand { --mk-n:#ECECEC; --mk-g:#6B6B6B; }
  .mark-rev { --mk-n:#FFFFFF; --mk-g:rgba(255,255,255,.38); --mk-r:#E25450; }