/* ============================================================
   Decagon — Emperor ME Benchmarking
   Light UI. Shared stylesheet for every page.
   ============================================================ */

:root{
  /* ============================================================
     Identity is black, white and grey. Colour is reserved for
     state -- good, warning, serious -- and never used to decorate.
     A neutral grey ramp, no hue bias: greys with a tint read as a
     washed-out brand colour rather than as grey.
     ============================================================ */

  /* ink */
  --ink:#18181B;
  --ink-2:#52525B;
  --ink-3:#8B8B93;

  /* surfaces */
  --bg:#F7F7F8;
  --card:#FFFFFF;
  --card-2:#FAFAFA;
  --border:#E4E4E7;
  --border-2:#EFEFF1;

  /* the primary action is black; there is no brand hue */
  --primary:#18181B;
  --neutral:#18181B;
  --brand:var(--primary);
  --brand-600:#000000;
  --brand-plain:var(--primary);
  --brand-soft:#F4F4F5;
  --brand-soft-2:#FAFAFA;

  /* rail — near-black, one step off pure so the page edge stays visible */
  --rail-bg:#0C0C0E;
  --rail-line:#242427;
  --rail-ink:#FAFAFA;
  --rail-ink-2:#A1A1AA;
  --rail-ink-3:#71717A;
  --rail-hover:#18181B;
  --rail-active:#26262B;

  /* ---- the secondary palette: state only ----
     Reserved. Never reused as a series colour or an accent, and always
     paired with a word, never carried by the colour alone. */
  --success:#15803D; --green:var(--success); --green-soft:#E8F3EC;
  --amber:#B45309;                           --amber-soft:#F8EFE4;
  --danger:#B91C1C;  --red:var(--danger);    --red-soft:#F8E9E9;
  --secondary:var(--amber);

  /* ---- chart series ----
     The radar carries two series and only ever two: the report under
     review, and the peer or prior-year comparison. There is no
     categorical scale to build, and no 10-colour ramp -- the old
     --d1..--d10 tokens were never referenced by anything.
     Separation is lightness plus a dashed outline, which survives
     both colour blindness and a black-and-white printout.
     Validated: adjacent ΔE 27 normal and CVD, contrast >= 3:1 on the
     client series. */
  --series:var(--ink);        /* the subject: full ink, deliberately dominant */
  --series-soft:#18181B14;
  --series-ghost:#A1A1AA;     /* the comparison: recessive, dashed */

  --shadow-sm:0 1px 2px rgba(24,24,27,.05), 0 1px 3px rgba(24,24,27,.05);
  --shadow-md:0 2px 4px rgba(24,24,27,.05), 0 8px 20px -8px rgba(24,24,27,.10);
  --shadow-lg:0 4px 8px rgba(24,24,27,.06), 0 20px 40px -16px rgba(24,24,27,.18);

  --r-sm:8px; --r:12px; --r-lg:16px;
  --rail:250px;

  --ui:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --wordmark:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3{margin:0;letter-spacing:-.018em;font-weight:700}
p{margin:0}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lab{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.tiny{font-size:.78rem}
.spacer{flex:1}
.row{display:flex;align-items:center;gap:.7rem}
.hide{display:none !important}

/* ============ layout ============
   A fixed frame, not a scrolling document. The window never scrolls; only the
   one region holding the data does. The rail, the header and a page's own
   heading stay put, so the tool reads as an application rather than as a long
   page someone has to travel down.

   The mechanic is `min-height:0` at every level: a flex or grid child defaults
   to a minimum size of its content, which makes an inner `overflow:auto`
   useless -- the child simply grows and pushes the frame open instead. */
html,body{height:100%}
body{overflow:hidden}
.shell{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh;overflow:hidden}
.main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding:1.15rem 1.4rem;max-width:1560px;width:100%;gap:.9rem;
  /* The safe default. A page that manages its own scrolling regions (a .scroll
     or a .card.grow) never overflows here, so this costs it nothing -- but a
     page that does not would otherwise have its bottom clipped and unreachable,
     which is how the frame first broke settings, queue and scoring review. */
  overflow:auto;
}
/* The scrolling region. One per page, and the only thing that moves. */
.page > .scroll,.page .card.grow{min-height:0}
.scroll{flex:1;min-height:0;overflow:auto;padding-right:.15rem}
/* A card that should fill the remaining height and scroll inside itself. */
.card.grow{flex:1;display:flex;flex-direction:column;overflow:hidden}
.card.grow > .card-b,.card.grow > .tw,.card.grow > .scroll{flex:1;min-height:0;overflow:auto}

@media(max-width:1024px){
  /* Below the breakpoint the rail stacks above the content and a fixed frame
     stops being an advantage; let the document scroll normally. */
  body{overflow:auto}
  .shell{height:auto;overflow:visible}
  .main,.page{overflow:visible}
  .scroll,.card.grow,.card.grow > .card-b,.card.grow > .tw{overflow:visible;min-height:auto}
}

/* ============ sidebar ============ */
.rail{
  background:var(--rail-bg);border-right:1px solid var(--rail-bg);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:block;padding:1.35rem 1.15rem 1.2rem;border-bottom:1px solid var(--rail-line)}
.wordmark{
  display:block;font-family:var(--wordmark);font-weight:500;font-size:1.42rem;
  letter-spacing:-.028em;color:#fff;line-height:1;
}
.brand-sub{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rail-ink-3);font-weight:600;margin-top:.4rem}
.brand:hover{text-decoration:none}

.nav{padding:.4rem .7rem 1rem;overflow-y:auto;flex:1}
.nav-lab{font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rail-ink-3);padding:1.1rem .55rem .4rem}
.nav-i{
  display:flex;align-items:center;gap:.6rem;padding:.52rem .55rem;border-radius:var(--r-sm);
  color:var(--rail-ink-2);font-weight:600;font-size:.85rem;margin-bottom:1px;
}
.nav-i:hover{background:var(--rail-hover);color:var(--rail-ink);text-decoration:none}
.nav-i.on{background:var(--rail-active);color:#fff}
.nav-i .ico{width:17px;height:17px;flex:none;opacity:.9}
.nav-i .cnt{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--rail-ink-3)}

/* gate spine */
.spine{padding:.2rem .3rem}
.gate{
  display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:start;width:100%;
  padding:.5rem .5rem;border-radius:var(--r-sm);text-align:left;position:relative;
}
.gate + .gate{margin-top:1px}
.gate:hover:not(.locked){background:var(--rail-hover)}
.gate.on{background:var(--rail-active)}
.gate.locked{cursor:not-allowed;opacity:.62}
.gate::before{content:"";position:absolute;left:11px;top:28px;bottom:-3px;width:1.5px;background:var(--rail-line)}
.gate:last-child::before{display:none}
.pip{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rail-line);background:var(--rail-bg);
  display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;color:var(--rail-ink-3);
  position:relative;z-index:1;font-weight:500;
}
.gate.done .pip{background:var(--success);border-color:var(--success);color:#fff}
.gate.on .pip{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.gate-t{display:block;font-size:.83rem;font-weight:600;line-height:1.3;color:var(--rail-ink-2)}
.gate.on .gate-t{color:#fff}
.gate.done .gate-t{color:var(--rail-ink)}
.gate-s{display:block;font-size:.72rem;color:var(--rail-ink-3);margin-top:.06rem;line-height:1.35;font-weight:500}

.rail-foot{border-top:1px solid var(--rail-line);padding:.6rem}
.who{
  display:flex;align-items:center;gap:.65rem;width:100%;
  padding:.5rem .55rem;border-radius:var(--r-sm);text-align:left;transition:background .14s ease;
}
.who:hover{background:var(--rail-hover)}
.av{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;line-height:1;
}
.who-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.who-n{font-size:.83rem;font-weight:600;line-height:1.25;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-e{font-size:.72rem;font-weight:500;line-height:1.25;color:var(--rail-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-ic{color:var(--rail-ink-3);display:flex;transform:rotate(90deg);opacity:.7}
.who:hover .who-ic{color:var(--rail-ink-2)}

/* ============ topbar ============ */
.top{
  position:sticky;top:0;z-index:20;background:rgba(244,243,248,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  padding:.7rem 1.9rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.crumb{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ink-3);font-weight:500}
.crumb b{color:var(--ink);font-weight:700}
.crumb i{font-style:normal;color:var(--ink-3);opacity:.55}
.search{
  display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.42rem .7rem;min-width:260px;color:var(--ink-3);
}
.search input{border:0;background:none;outline:0;width:100%;font-size:.85rem}
.search input::placeholder{color:var(--ink-3)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--card);font-size:.84rem;font-weight:600;
  color:var(--ink-2);transition:.14s ease;white-space:nowrap;box-shadow:var(--shadow-sm);
}
.btn:hover{border-color:#d4d1e2;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.ghost{background:none;box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:var(--brand-soft-2)}
.btn.sm{padding:.34rem .65rem;font-size:.78rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn .ico{width:15px;height:15px}

/* ============ cards ============ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-h{padding:1rem 1.15rem;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:.75rem}
.card-h h2{font-size:.98rem;font-weight:700}
.card-b{padding:1.15rem}
.grid{display:grid;gap:1.1rem}
@media(min-width:1180px){ .g-2-1{grid-template-columns:minmax(0,1fr) 340px} }

/* page head */
.phead{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.phead h1{font-size:1.65rem;line-height:1.15}
.phead p{color:var(--ink-2);font-size:.88rem;margin-top:.22rem}

/* ============ KPI tiles ============ */
.kpis{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));margin-bottom:1.1rem}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.05rem 1.15rem;box-shadow:var(--shadow-sm)}
.kpi-h{display:flex;align-items:center;gap:.55rem;margin-bottom:.65rem}
.kpi-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.kpi-ic svg{width:16px;height:16px}
.kpi-t{font-size:.82rem;color:var(--ink-2);font-weight:600}
.kpi-v{font-family:var(--mono);font-size:1.85rem;font-weight:600;letter-spacing:-.028em;line-height:1.05}
.kpi-v small{font-size:.9rem;color:var(--ink-3);font-weight:400}
.kpi-d{display:flex;align-items:center;gap:.3rem;font-size:.76rem;margin-top:.42rem;font-weight:600}
.kpi-d.up{color:var(--green)} .kpi-d.down{color:var(--red)} .kpi-d.flat{color:var(--ink-3)}
.kpi-d span{color:var(--ink-3);font-weight:500}

/* ============ pills ============ */
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;
  padding:.2rem .55rem;border-radius:99px;letter-spacing:.01em}
.pill.ok{background:var(--green-soft);color:#026B3B}
.pill.warn{background:var(--amber-soft);color:#9A4F00}
.pill.bad{background:var(--red-soft);color:#BE0733}
.pill.info{background:var(--brand-soft);color:var(--brand-600)}
.pill.grey{background:var(--bg);color:var(--ink-2);border:1px solid var(--border)}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ============ tables ============ */
.tw{overflow-x:auto;border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;font-size:.86rem}
thead th{
  text-align:left;padding:.62rem 1.1rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:var(--card-2);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:.72rem 1.1rem;border-bottom:1px solid var(--border-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-soft-2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.w{white-space:normal;min-width:16rem}
.trow-link{font-weight:600;color:var(--ink)}

/* ============ progress ============ */
.bar{height:6px;background:var(--border-2);border-radius:99px;overflow:hidden;min-width:64px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--fill,var(--brand));
  transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ============ sections / criteria (scoring page) ============ */
.sec{border-top:1px solid var(--border-2)}
.sec:first-child{border-top:0}
.sec-h{width:100%;display:grid;grid-template-columns:20px 1fr auto auto auto;gap:.85rem;
  align-items:center;padding:.8rem 1.15rem;text-align:left}
.sec-h:hover{background:var(--brand-soft-2)}
.caret{color:var(--ink-3);transition:transform .18s ease;display:grid;place-items:center}
.sec.open .caret{transform:rotate(90deg)}
.sec-name{font-size:.88rem;font-weight:600}
.sec-name em{font-style:normal;color:var(--ink-3);font-weight:500;font-family:var(--mono);font-size:.75rem;margin-right:.45rem}
.sec-tot{font-family:var(--mono);font-size:.95rem;font-weight:600;min-width:3.2rem;text-align:right}
.sec-tot small{color:var(--ink-3);font-weight:400;font-size:.75rem}
.sec-tot.capped{color:var(--amber)}

.crits{display:none;background:var(--card-2);border-top:1px solid var(--border-2)}
.sec.open .crits{display:block}
.crit{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1rem;align-items:start;
  padding:.85rem 1.15rem .85rem 2.9rem;border-bottom:1px solid var(--border-2)}
.crit:last-child{border-bottom:0}
.crit-code{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);padding-top:.15rem}
.crit-name{font-size:.85rem;font-weight:600;line-height:1.4}
.crit-why{font-size:.79rem;color:var(--ink-2);margin-top:.3rem;line-height:1.55;max-width:62ch}
.crit-pg{font-family:var(--mono);font-size:.71rem;color:var(--ink-3);margin-top:.35rem}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm)}
.stepper button{width:26px;height:30px;color:var(--ink-3);display:grid;place-items:center;font-size:1rem}
.stepper button:hover:not([disabled]){background:var(--brand-soft);color:var(--brand)}
.stepper button[disabled]{opacity:.3;cursor:not-allowed}
.stepper .val{font-family:var(--mono);font-size:.85rem;font-weight:600;min-width:3.1rem;height:30px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  border-left:1px solid var(--border);border-right:1px solid var(--border)}
.stepper .val s{text-decoration:none;color:var(--ink-3);font-weight:400}
.stepper.edited{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.stepper.edited .val{color:var(--brand)}
.edit-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);
  margin-left:.4rem;vertical-align:middle}
.reset{display:block;font-size:.71rem;color:var(--ink-3);margin-top:.35rem;text-align:right;width:100%;font-weight:600}
.reset:hover{color:var(--brand);text-decoration:underline}

/* structural flag box */
.flagbox{margin:.9rem 1.15rem;padding:.85rem .95rem;border:1px solid var(--secondary);
  background:var(--amber-soft);border-radius:var(--r);display:flex;gap:.85rem;align-items:flex-start}
.flagbox.off{border-color:var(--border);background:var(--card)}
.flagbox .ft{font-size:.75rem;font-weight:800;color:#9A4F00;letter-spacing:.03em}
.flagbox.off .ft{color:var(--ink-2)}
.flagbox p{font-size:.79rem;color:var(--ink-2);margin-top:.25rem;line-height:1.5}
.toggle{flex:none;width:38px;height:22px;border-radius:99px;background:#D8D5E4;position:relative;transition:.18s;border:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:.18s cubic-bezier(.4,0,.2,1)}
.toggle[aria-pressed="true"]{background:var(--secondary)}
.toggle[aria-pressed="true"]::after{transform:translateX(16px)}

/* ============ radar ============ */
svg.radar{width:100%;height:auto;display:block;margin:0 auto;max-width:340px}
.grid-ring{fill:none;stroke:var(--border);stroke-width:.5}
.grid-spoke{stroke:var(--border-2);stroke-width:.5}
.series-fill{fill:var(--series);fill-opacity:.08;stroke:var(--series);stroke-width:1.6;stroke-linejoin:round}
.series-pt{fill:var(--series);stroke:#fff;stroke-width:.8}
.series-ghost{fill:none;stroke:var(--series-ghost);stroke-width:1.3;stroke-dasharray:3 2.4}
.axis-lab{font-family:var(--ui);font-size:5.4px;fill:var(--ink-3);font-weight:700}
.axis-lab.hot{fill:var(--amber)}
.legend{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1.15rem;border-top:1px solid var(--border-2)}
.leg{display:flex;align-items:center;gap:.55rem;font-size:.81rem}
.leg i{width:14px;height:3px;border-radius:2px;flex:none}
.leg .nm{flex:1;color:var(--ink-2);font-weight:600}
.leg .sc{font-family:var(--mono);font-weight:600}

/* tally */
.trow{display:flex;justify-content:space-between;align-items:center;padding:.42rem 0;
  border-bottom:1px solid var(--border-2);font-size:.83rem}
.trow:last-of-type{border-bottom:0}
.trow .k{color:var(--ink-2);font-weight:500}
.trow .v{font-family:var(--mono);font-weight:600}
.trow.sum{border-top:1.5px solid var(--border);border-bottom:0;margin-top:.4rem;padding-top:.65rem;font-weight:700}
.trow.sum .v{font-size:1.05rem}

/* ============ recommendations / selection ============ */
.rec{border:1px solid var(--border);border-radius:var(--r);background:var(--card);
  padding:.95rem 1.05rem;display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start}
.rec + .rec{margin-top:.7rem}
.rec.sel{border-color:var(--brand);background:var(--brand-soft-2);box-shadow:0 0 0 3px var(--brand-soft)}
.rec.structural{border-left:3px solid var(--amber)}
.rec-t{font-size:.88rem;font-weight:700}
.rec-b{font-size:.8rem;color:var(--ink-2);margin-top:.3rem;line-height:1.55}
.rec-b li{margin-bottom:.2rem}
.rec-m{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.cbx{width:19px;height:19px;border-radius:5px;border:1.5px solid #CFCCDE;background:#fff;
  display:grid;place-items:center;flex:none;margin-top:.1rem;transition:.14s}
.cbx svg{width:11px;height:11px;opacity:0;color:#fff}
.rec.sel .cbx{background:var(--brand);border-color:var(--brand)}
.rec.sel .cbx svg{opacity:1}

/* slide preview */
.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.slide{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.slide-c{aspect-ratio:16/9;background:var(--card-2);border-bottom:1px solid var(--border-2);
  padding:.5rem;font-size:.6rem;color:var(--ink-3);display:flex;flex-direction:column;gap:.2rem}
.slide-n{padding:.4rem .5rem;font-size:.72rem;font-weight:600}
.slide.off{opacity:.42}

/* empty / notice */
.notice{border:1px solid var(--border);background:var(--card);border-radius:var(--r);
  padding:1rem 1.1rem;display:flex;gap:.85rem;align-items:flex-start}
.notice.warn{border-color:var(--amber);background:var(--amber-soft)}
.notice.info{border-color:var(--brand);background:var(--brand-soft-2)}
.notice h3{font-size:.86rem;margin-bottom:.2rem}
.notice p{font-size:.81rem;color:var(--ink-2);line-height:1.55}

/* forms */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.79rem;font-weight:700;margin-bottom:.35rem}
.field .hint{font-size:.75rem;color:var(--ink-3);margin-top:.3rem}
.inp{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);font-size:.86rem;outline:0;transition:.14s}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.swatch{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);flex:none}
.assist{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;
  color:var(--brand);padding:.28rem .55rem;border-radius:99px;background:var(--brand-soft)}
.assist:hover{background:#dfe6fa;text-decoration:none}
.assist svg{width:12px;height:12px}

.chiplist{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border:1px solid var(--border);
  border-radius:99px;font-size:.79rem;font-weight:600;background:var(--card)}
.chip .x{color:var(--ink-3);font-size:.9rem;line-height:1}
.chip .x:hover{color:var(--red)}

@media(max-width:1024px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}
  .rail .spine,.rail .nav{max-height:none}
  .page{padding:1.1rem}
  .top{padding:.7rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- icon sizing: every inline svg outside the brand mark and the radar ---- */
svg{flex:none}
:where(.top,.page,.nav,.spine,.rail-foot,.kpi,.card,.notice,.rec) svg:not(.radar){width:15px;height:15px}
.kpi-ic svg{width:16px;height:16px}
.pip svg{width:11px;height:11px;stroke-width:3}
.cbx svg{width:11px;height:11px;stroke-width:3}
.assist svg{width:12px;height:12px}
.crumb svg{width:13px;height:13px}
.kpi-d svg{width:13px;height:13px}
.notice > svg{width:17px;height:17px;margin-top:.15rem}

/* ============ empty states ============ */
.empty{padding:2.6rem 1.5rem;text-align:center;max-width:34rem;margin:0 auto}
.empty-ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin:0 auto .9rem}
.empty-ic svg{width:21px !important;height:21px !important}
.empty h3{font-size:1rem;margin-bottom:.35rem}
.empty p{font-size:.85rem;color:var(--ink-2);line-height:1.6}
.empty-cta{margin-top:1.1rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ============ assist button — proper pill, not a floating chip ============ */
.assist{
  display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;border-radius:var(--r-sm);
  border:1px solid var(--brand-soft);background:var(--brand-soft-2);color:var(--brand);
  font-size:.79rem;font-weight:700;white-space:nowrap;transition:.14s ease;line-height:1;
}
.assist:hover{background:var(--brand-soft);border-color:#cbd6f5;text-decoration:none}
.assist:active{transform:translateY(1px)}
.assist svg{width:13px !important;height:13px !important;opacity:.9}
.assist[disabled]{opacity:.5;cursor:not-allowed}

/* input + assist as one control */
.inp-group{display:flex;align-items:stretch;gap:.5rem}
.inp-group .inp{flex:1;min-width:0}
.inp-group .assist{flex:none}

/* ============ modal ============ */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:1.5rem;z-index:60}
.modal{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:32rem;max-height:88vh;overflow:auto}
.modal-h{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:.8rem}
.modal-h h2{font-size:1rem}
.modal-b{padding:1.25rem}
.modal-f{padding:.95rem 1.25rem;border-top:1px solid var(--border-2);display:flex;gap:.6rem;justify-content:flex-end;
  background:var(--card-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.x-btn{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);font-size:1.1rem}
.x-btn:hover{background:var(--bg);color:var(--ink)}

/* dropzone */
.drop{border:1.5px dashed var(--border);border-radius:var(--r);padding:1.5rem 1rem;text-align:center;
  background:var(--card-2);transition:.14s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft-2)}
.drop p{font-size:.82rem;color:var(--ink-2);margin-top:.4rem}
.drop svg{width:20px !important;height:20px !important;color:var(--ink-3)}

/* queue rows */
.qrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--border-2)}
.qrow:last-child{border-bottom:0}

/* ---------------- sign-in and invitation pages ---------------- */
/* Single-viewport, centred: these are the only two screens without the rail. */
/* Flex, not grid: `place-items:center` makes the card size to its content, and
   a percentage width then has nothing to resolve against -- it collapses to a
   column barely wider than the word "Password". */
body.gate{
  min-height:100vh; margin:0; display:flex;
  align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}
.gate-card{
  width:min(380px, 100%); background:var(--card);
  border:1px solid var(--border); border-radius:14px;
  padding:32px 30px 26px; box-shadow:0 1px 2px rgba(28,26,39,.04),0 8px 28px rgba(28,26,39,.06);
}
.gate-mark{
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.02em;
  color:var(--ink-3); margin-bottom:22px;
}
.gate-card h1{ font-size:22px; line-height:1.2; margin:0 0 4px; letter-spacing:-.01em; }
.gate-sub{ margin:0 0 22px; color:var(--ink-2); font-size:14px; }
.gate-card label{
  display:block; font-size:12px; font-weight:600; color:var(--ink-2);
  margin:0 0 6px; letter-spacing:.01em;
}
.gate-card input{
  width:100%; box-sizing:border-box; padding:10px 12px; margin:0 0 16px;
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--card-2); border:1px solid var(--border);
  border-radius:9px; transition:border-color .12s, box-shadow .12s;
}
.gate-card input:focus{
  outline:none; border-color:var(--brand); background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.gate-hint{ margin:-12px 0 16px; font-size:12px; color:var(--ink-3); }
.gate-error{
  margin:0 0 14px; padding:9px 11px; font-size:13px;
  color:var(--danger); background:color-mix(in srgb, var(--danger) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius:8px;
}
.btn.block{ width:100%; justify-content:center; }
.gate-foot{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--border-2);
  font-size:12px; line-height:1.5; color:var(--ink-3);
}

/* account menu in the rail foot */
.rail-foot{position:relative}
.who-menu{
  position:absolute; left:10px; right:10px; bottom:calc(100% + 6px); z-index:20;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:4px; box-shadow:0 10px 30px rgba(28,26,39,.18);
}
.who-mi{
  display:block; width:100%; text-align:left; padding:8px 10px;
  font-size:13px; color:var(--ink); border-radius:7px; text-decoration:none;
}
.who-mi:hover{background:var(--card-2); text-decoration:none}

/* admin */
.atbl{width:100%;border-collapse:collapse;margin-top:.6rem}
.atbl td{padding:.6rem .1rem;border-top:1px solid var(--border-2);vertical-align:middle}
.atbl tr:first-child td{border-top:0}
.fld{
  padding:9px 11px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--card-2); border:1px solid var(--border); border-radius:9px;
}
.fld:focus{outline:none;border-color:var(--brand);background:var(--card)}
.invite-link{
  margin-top:.7rem; padding:.7rem .8rem; border-radius:9px;
  background:var(--card-2); border:1px solid var(--border);
}
tr.off td{opacity:.55}
.gate-alt{margin:14px 0 0;font-size:13px;text-align:center}

/* account */
.av img,.av-lg img{width:100%;height:100%;object-fit:cover;display:block}
.av{overflow:hidden}
.av-lg{
  width:84px;height:84px;border-radius:50%;overflow:hidden;margin:0 auto;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  font-size:26px;font-weight:700;letter-spacing:.01em;
}

/* ============================================================
   PUBLIC PAGES
   Monochrome, and everything that moves is either a response to a
   pointer or a one-time entrance. Nothing loops, nothing decorates.
   ============================================================ */

body.pub{background:var(--bg);color:var(--ink);margin:0;overflow:auto;height:auto}

/* ---- chrome ---- */
/* One content column, used by every block on the page. Anything that needs a
   full-bleed background puts this inside itself rather than opting out of it --
   which is how the closing panel ended up 278px left of everything above it. */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:2rem}

.pub-top{
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--card) 86%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  position:sticky;top:0;z-index:20;
}
.pub-bar{display:flex;align-items:center;gap:1.2rem;padding-block:1rem}
.pub-mark{font-family:var(--mono);font-size:14px;color:var(--ink);text-decoration:none}
.pub-mark:hover{text-decoration:none}
.pub-nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.pub-nav > a{font-size:13.5px;font-weight:600;color:var(--ink-3);text-decoration:none;
  position:relative;padding:.15rem 0}
.pub-nav > a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--ink);transition:right .22s cubic-bezier(.2,.7,.3,1)}
.pub-nav > a:hover{color:var(--ink);text-decoration:none}
.pub-nav > a:hover::after,.pub-nav > a.on::after{right:0}
.pub-nav > a.on{color:var(--ink)}
.pub-nav > a.btn::after{display:none}
.pub-nav > a.btn{color:#fff}

/* Same width as .wrap, so a page's content lines up with its own header and
   footer. Measure is controlled by the text blocks inside (.hero.narrow caps
   the reading line), not by narrowing the column and leaving the chrome behind. */
.pub-main{width:100%;max-width:1180px;margin-inline:auto;padding:4.5rem 2rem 5rem}

/* ---- entrance ---- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---- hero ---- */
.hero-split{
  width:100%;max-width:1180px;margin-inline:auto;padding:5rem 2rem 4.5rem;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:3.5rem;align-items:center;
}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
.hero-copy h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;
  letter-spacing:-.032em;margin:0 0 1.1rem;text-wrap:balance}
.lede{font-size:1.05rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:46ch}
.hero-cta{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.hero-note{margin-top:1rem}
.hero{max-width:640px}
.hero.narrow{max-width:600px;margin-bottom:2.6rem}
.hero h1{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.028em;
  margin:0 0 .9rem}

/* ---- the decagon ---- */
/* Column flow rather than an absolutely positioned caption: the caption was
   sitting on top of the diagram, overlapping the lowest axis by ~32px. */
.hero-viz{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.dg{width:min(100%,400px);height:auto;overflow:visible}
.dg-ring{fill:none;stroke:var(--border);stroke-width:.35}
.dg-spoke{stroke:var(--border);stroke-width:.35}
.dg-fill{fill:var(--ink);fill-opacity:.07;stroke:var(--ink);stroke-width:.9;
  stroke-linejoin:round;transform-origin:50px 50px;
  animation:dgIn .85s cubic-bezier(.2,.9,.3,1) both}
.dg-pt{fill:var(--ink);stroke:var(--card);stroke-width:.6;
  animation:dgPt .4s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(.4s + var(--i) * 35ms)}
@keyframes dgIn{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dgPt{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.dg-axis{cursor:default;outline:none}
.dg-hit{fill:transparent}
.dg-hit-line{stroke:transparent;stroke-width:5}
.dg-num{font-family:var(--mono);font-size:3.4px;fill:var(--ink-3);
  text-anchor:middle;dominant-baseline:middle;transition:fill .18s}
.dg-axis.on .dg-num,.dg-axis:focus-visible .dg-num{fill:var(--ink);font-weight:600}
.dg-axis.on .dg-hit-line,.dg-axis:focus-visible .dg-hit-line{stroke:var(--ink);
  stroke-width:.7;stroke-dasharray:1.5 1.5}

.viz-label{text-align:center;min-height:2.6rem;pointer-events:none}
.viz-label b{display:block;font-size:.92rem}
.viz-label span{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.1rem}

/* ---- score bands ---- */
.band{width:100%;max-width:1180px;margin-inline:auto;padding:0 2rem 4.5rem}
.band-h{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.8rem}
.band-scale{display:flex;gap:3px;height:auto}
.band-seg{padding:.65rem .8rem;border-radius:var(--r-sm);background:var(--ink);
  color:#fff;display:flex;flex-direction:column;gap:.1rem;
  opacity:calc(.3 + var(--i) * .235);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.band-seg:hover{transform:translateY(-3px)}
.band-n{font-size:.8rem;font-weight:700}
.band-r{font-size:.72rem;opacity:.85}
.band-note{font-size:.82rem;color:var(--ink-3);margin-top:.7rem;max-width:60ch}

/* ---- pillars ---- */
.pillars{width:100%;max-width:1180px;margin-inline:auto;padding:0 2rem 4.5rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.pill-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;transition:transform .22s cubic-bezier(.2,.7,.3,1),
    box-shadow .22s,border-color .22s}
.pill-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ink-3)}
.pill-n{display:block;font-size:.72rem;color:var(--ink-3);margin-bottom:1.1rem}
.pill-card h3{font-size:1.05rem;margin-bottom:.5rem}
.pill-card p{font-size:.88rem;line-height:1.62;color:var(--ink-2)}

/* ---- closer ---- */
.closer{padding:2.8rem 2.6rem;background:var(--ink);color:#fff;
  border-radius:var(--r-lg);margin-bottom:5rem}
.closer h2{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.7rem}
.closer p{font-size:.95rem;line-height:1.62;color:#D4D4D8;max-width:62ch;margin-bottom:1.4rem}
.closer .btn{background:#fff;border-color:#fff;color:var(--ink)}
.closer .btn:hover{background:#E4E4E7;border-color:#E4E4E7}

/* ---- stepper (how it works) ---- */
.pstepper{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:1.6rem;align-items:start}
.step-rail{display:flex;flex-direction:column;gap:2px;position:relative}
.step-b{display:grid;grid-template-columns:26px 1fr;gap:.7rem;align-items:start;
  text-align:left;padding:.7rem .7rem;border-radius:var(--r-sm);position:relative;
  transition:background .18s}
.step-b:hover{background:var(--card)}
.step-b.on{background:var(--card);box-shadow:var(--shadow-sm)}
.step-b::before{content:"";position:absolute;left:20px;top:34px;bottom:-2px;width:1.5px;
  background:var(--border)}
.step-b:last-child::before{display:none}
.step-b.done::before{background:var(--ink)}
.step-p{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.7rem;position:relative;z-index:1;
  border:1.5px solid var(--border);background:var(--bg);color:var(--ink-3);
  transition:background .2s,color .2s,border-color .2s}
.step-b.on .step-p{background:var(--ink);border-color:var(--ink);color:#fff}
.step-b.done .step-p{background:var(--ink);border-color:var(--ink);color:#fff;opacity:.35}
.step-tx b{display:block;font-size:.88rem;line-height:1.3}
.step-tx span{display:block;font-size:.74rem;color:var(--ink-3);margin-top:.1rem}

.step-panel{min-height:270px}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.8rem;animation:panelIn .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-k{font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.step-card h2{font-size:1.35rem;margin:.5rem 0 .8rem;letter-spacing:-.022em}
.step-card p{font-size:.95rem;line-height:1.65;color:var(--ink-2);max-width:58ch}
.step-owes{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--border-2);
  font-size:.86rem!important;color:var(--ink)!important}
.step-owes .lab{display:block;margin-bottom:.2rem}

/* ---- rubric explorer (methodology) ---- */
.explore{display:grid;grid-template-columns:minmax(230px,290px) 1fr;gap:1.4rem;align-items:start}
.sec-grid{display:flex;flex-direction:column;gap:3px}
.sec-t{display:grid;grid-template-columns:26px 1fr auto;gap:.1rem .65rem;
  text-align:left;padding:.6rem .7rem;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background .18s,border-color .18s,transform .18s}
.sec-t:hover{background:var(--card);border-color:var(--border)}
.sec-t.on{background:var(--ink);border-color:var(--ink)}
.sec-n{grid-row:1/3;align-self:center;font-size:.78rem;color:var(--ink-3)}
.sec-t.on .sec-n{color:#A1A1AA}
.rsec-name{font-size:.86rem;font-weight:600}
.sec-t.on .rsec-name{color:#fff}
.sec-meta{grid-column:2;font-size:.72rem;color:var(--ink-3)}
.sec-t.on .sec-meta{color:#A1A1AA}
.sec-cap{grid-column:3;grid-row:1/3;align-self:center;font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);padding:.15rem .4rem;border-radius:99px}

.sec-panel{min-height:420px}
.sec-body{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;animation:panelIn .32s cubic-bezier(.2,.7,.3,1) both}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:.15rem;align-items:end;
  padding-bottom:1rem;border-bottom:1px solid var(--border-2)}
.sec-k{grid-column:1;font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.sec-head h2{grid-column:1;font-size:1.35rem;letter-spacing:-.022em}
.rsec-tot{grid-column:2;grid-row:1/3;align-self:center;font-size:1.7rem;font-weight:600;
  letter-spacing:-.02em}
.rsec-tot span{font-size:.7rem;color:var(--ink-3);margin-left:.2rem;font-weight:400}
.sec-capnote{margin-top:1rem;padding:.8rem .9rem;border-radius:var(--r-sm);
  font-size:.84rem;line-height:1.55;color:var(--ink-2);
  background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 22%,transparent)}
.sec-capnote b{color:var(--ink)}

.rcrit{list-style:none;margin:1.1rem 0 0;padding:0}
.rcrit-i{display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid var(--border-2);
  animation:critIn .34s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i) * 32ms)}
@keyframes critIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.rcrit-i:last-child{border-bottom:0}
.rcrit-c{font-size:.74rem;color:var(--ink-3)}
.rcrit-n{font-size:.89rem;line-height:1.45}
.rcrit-p{display:flex;align-items:center;gap:3px}
.rcrit-p i{width:5px;height:5px;border-radius:50%;background:var(--border)}
.rcrit-p i.on{background:var(--ink)}
.rcrit-p b{font-size:.74rem;color:var(--ink-3);margin-left:.35rem;font-weight:500;min-width:8px}

/* ---- footer ---- */
.pub-foot{border-top:1px solid var(--border);font-size:.8rem;color:var(--ink-3)}
.pub-foot .pub-bar{padding-block:1.6rem 2.4rem;flex-wrap:wrap;gap:1.4rem}
.pub-foot a{color:var(--ink-3)}
.pub-foot a:hover{color:var(--ink)}

@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:2rem;padding-top:2.6rem}
  .pstepper,.explore{grid-template-columns:1fr}
  .sec-grid{flex-direction:row;overflow-x:auto;padding-bottom:.4rem}
  .sec-t{min-width:190px;flex:0 0 auto}
  .closer{padding:2rem 1.5rem;margin-bottom:3.5rem}
  .wrap,.pub-main,.pillars,.band,.hero-split{padding-inline:1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .dg-fill,.dg-pt,.step-card,.sec-body,.rcrit-i{animation:none}
  .pill-card:hover,.band-seg:hover{transform:none}
}
/* ============ dense list pages ============
   A stat strip instead of KPI cards, a single filter row, and a
   master/detail split so the page never grows past the frame. */

.strip{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline;
  padding:0 .1rem .1rem}
.strip-i{display:flex;align-items:baseline;gap:.4rem;font-size:.76rem;color:var(--ink-3)}
.strip-i b{font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}

.filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.filters .search{min-width:190px}
.filters .inp{width:auto;padding:.42rem .6rem;font-size:.8rem}

.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,1fr) minmax(340px,1.05fr);gap:.9rem}
@media(max-width:1180px){.split{grid-template-columns:1fr}
  .split > .card:last-child{display:none}}

.pad-empty{padding:2rem;text-align:center}

/* group header inside the list */
.grp{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:.5rem;
  padding:.5rem .85rem;background:var(--card-2);
  border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.grp:first-child{border-top:0}
.grp-n{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.grp-note,.grp-c{font-size:.72rem;color:var(--ink-3)}
.grp-c{font-family:var(--mono)}

/* a row in the master list */
.prow{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.55rem .85rem;border-bottom:1px solid var(--border-2);cursor:pointer}
.prow:hover{background:var(--card-2)}
.prow.on{background:var(--brand-soft)}
.prow.on .prow-co{font-weight:700}
.prow-score{flex:0 0 34px;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.prow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.prow-co{font-size:.87rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow-meta{font-size:.72rem;color:var(--ink-3)}

/* ten section cells: value carried by ink weight, not by hue */
.prof{display:flex;gap:2px;flex:0 0 auto}
.prof i{width:6px;height:16px;border-radius:2px;background:var(--ink);
  opacity:calc(.10 + var(--v) * .78)}

/* detail panel */
.dhead{display:flex;gap:1.8rem;padding-bottom:.9rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--border-2)}
.dhead div{display:flex;flex-direction:column;gap:1px}
.dhead-v{font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.dhead-l{font-size:.72rem;color:var(--ink-3)}
.dmeta{font-size:.82rem;line-height:1.55;color:var(--ink-2);margin-bottom:.9rem}
.dradar{max-width:250px;margin:0 auto .6rem}
.dsec{width:100%;border-collapse:collapse}
.dsec td{padding:.3rem 0;font-size:.82rem;border-bottom:1px solid var(--border-2)}
.dsec-n{width:20px;color:var(--ink-3);font-size:.74rem}
.dsec-bar{width:46%;padding-left:.6rem!important}
.dsec-bar span{display:block;height:6px;border-radius:3px;background:var(--ink);
  width:calc(var(--v) * 100%);min-width:2px;opacity:.82}
.dsec-v{width:26px;text-align:right;font-weight:600}

/* ============ stage board ============ */
.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}
.col{display:flex;flex-direction:column;min-height:0;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.col-h{display:grid;grid-template-columns:1fr auto;gap:.3rem .5rem;
  padding:.6rem .75rem;border-bottom:1px solid var(--border-2);background:var(--card-2)}
.col-n{font-size:.76rem;font-weight:700;letter-spacing:.02em}
.col-c{font-size:.76rem;color:var(--ink-3);text-align:right}
.col-note{grid-column:1/-1;font-size:.68rem;color:var(--ink-3)}
.col-b{padding:.5rem;display:flex;flex-direction:column;gap:.4rem}
.col-empty{color:var(--border);text-align:center;padding:.9rem 0;font-size:.9rem}

.pcard{display:flex;flex-direction:column;gap:.35rem;width:100%;text-align:left;
  padding:.55rem .6rem;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.pcard:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.pcard.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pcard-t{font-size:.83rem;font-weight:600;line-height:1.3}
.pcard-m{display:flex;align-items:center;gap:.4rem}
.pcard-s{font-size:.78rem;font-weight:600}
.pcard-a{font-size:.68rem;color:var(--ink-3)}
.pcard-open{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.who-dot{width:18px;height:18px;border-radius:50%;background:var(--brand-soft);
  color:var(--ink-2);display:grid;place-items:center;font-size:.6rem;font-weight:700}

@media(max-width:1180px){
  .board{grid-template-columns:repeat(2,1fr);overflow:auto}
}
@media(max-width:640px){ .board{grid-template-columns:1fr} }

/* ============ avatar cropper ============ */
.crop-bg{position:fixed;inset:0;z-index:100;background:rgba(24,24,27,.55);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.crop{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);width:min(360px,100%);padding:1.1rem}
.crop-h h2{font-size:1rem;margin-bottom:.8rem}
.crop-stage{position:relative;width:300px;height:300px;margin:0 auto;
  border-radius:var(--r);overflow:hidden;background:var(--card-2);
  cursor:grab;touch-action:none;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block}
/* The circle is where the picture will actually be seen, so show it. */
.crop-mask{position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(255,255,255,.72) inset;
  border-radius:50%;outline:1px solid var(--border);outline-offset:-1px}
.crop-zoom{display:flex;align-items:center;gap:.6rem;margin-top:.9rem}
.crop-zoom input{flex:1;accent-color:var(--ink)}
.crop-hint{text-align:center;margin-top:.4rem}
.crop-f{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}