/* ============================================================================
   Kosovo Merchant & Payments Intelligence

   Palette from fintechhumans.com: navy #1a1f36, warm ivory #f5f4f2,
   rule #e0ddd8, gold #b8960c. NLB purple #230078 is the DATA accent — chart
   series, active state, focus — never the interface colour. Gold marks
   structure, purple marks data, and the two do not compete.

   Hairline rules rather than shadows carry the structure.
   ============================================================================ */

:root{
  --ink:#1a1f36;
  --ink-2:#5b617a;
  --ink-3:#8f95a8;
  --ivory:#f5f4f2;
  --surface:#ffffff;
  --surface-warm:#faf9f7;
  --surface-sunk:#efeeea;
  --rule:#e4e1dc;
  --rule-strong:#cfcbc3;

  --gold:#b8960c;
  --gold-soft:#c9a84c;
  --gold-wash:#fbf7ea;
  --purple:#230078;
  --purple-soft:#5b3fd9;
  --purple-wash:#f2effc;

  --pos:#14634a;  --pos-wash:#e8f2ed;
  --neg:#8c4a00;  --neg-wash:#faf0e4;
  --stop:#8f1b2c; --stop-wash:#fbeaec;
  --warn:#7e5100; --warn-wash:#f9f1e0;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --rail:214px;
  --lift:0 1px 2px rgba(26,31,54,.04), 0 12px 28px -20px rgba(26,31,54,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,p{margin:0}
a{color:inherit}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type primitives ---------- */
.label{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.label-gold{color:var(--gold)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em}

/* ============================ frame ============================ */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

/* ---------- rail ---------- */
/* The rail holds eleven sections, a way back and a status line. On a short
   laptop viewport that is taller than 100vh, so it scrolls: without this the
   last sections sit below the fold of a sticky element and nothing reaches
   them — the page scroll moves the canvas, not the rail. */
.rail{
  background:var(--ink); color:#fff; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:var(--s5) 0 var(--s4);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.rail::-webkit-scrollbar-track{background:transparent}

/* A <button>, so the browser's own chrome has to be turned off explicitly —
   left on, it paints light grey under white text and the name disappears. */
/* No width here on purpose: the rail is a flex column, so the brand already
   stretches across it. Asking for 100% would also be obeyed in the row layout
   on a phone, where it means the whole viewport and every section is pushed
   off the screen. */
.rail-brand{
  appearance:none;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;
  padding:0 var(--s5) var(--s6);display:block;text-decoration:none;
}
.rail-brand .m{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.rail-brand .s{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;margin-top:5px;display:block}
.rail-group{padding:0 var(--s3)}
.rail-group + .rail-group{margin-top:var(--s6)}
.rail-group .label{padding:0 var(--s3) var(--s2);display:block;color:rgba(255,255,255,.38)}
.rail-nav{display:flex;flex-direction:column;gap:1px}
.rail-nav button{
  appearance:none;background:none;border:0;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:var(--s3);padding:11px var(--s3);
  color:rgba(255,255,255,.66);font-size:13.5px;text-align:left;border-radius:3px;
  min-height:44px;
}
.rail-nav button .i{
  width:22px;height:22px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.16);border-radius:3px;
}
.rail-nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
.rail-nav button[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1);font-weight:500}
.rail-nav button[aria-current="page"] .i{border-color:var(--gold);color:var(--gold-soft)}
.rail-nav.secondary button{font-size:12.5px;color:rgba(255,255,255,.5)}
.rail-foot{margin-top:auto;padding:var(--s4) var(--s5) 0}
.rail-status{
  display:flex;align-items:center;gap:var(--s2);background:none;border:0;cursor:pointer;
  font-size:11.5px;color:rgba(255,255,255,.6);padding:var(--s3) 0;width:100%;text-align:left;
  min-height:44px;
}
.rail-status:hover{color:#fff}
.rail-status .dot{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none}
.rail-status .dot.warn{background:var(--gold)}

/* 44px is a finger's minimum, not a cursor's. Tightening the rows where the
   pointer is precise keeps all eleven sections on one laptop screen, so the
   scrollbar above stays a fallback rather than the normal way to navigate. */
@media (min-width:901px) and (pointer:fine){
  .rail-nav button{min-height:36px;padding:7px var(--s3)}
  .rail-status{min-height:36px;padding:var(--s2) 0}
  .back-summary{min-height:36px;padding:var(--s2) var(--s5)}
  .rail-brand{padding-bottom:var(--s5)}
}

/* ---------- toolbar (visible filters) ---------- */
.toolbar{
  background:var(--surface); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:30; padding:var(--s3) var(--s6);
  display:flex; align-items:flex-end; gap:var(--s5); flex-wrap:wrap;
}
.filter{display:flex;flex-direction:column;gap:5px;min-width:0}
.filter > .label{display:block}
.filter select{
  appearance:none; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b617a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--rule-strong); border-radius:3px;
  padding:9px 30px 9px 11px; min-height:40px; cursor:pointer; min-width:150px;
  font-weight:500;
}
.filter select:hover{border-color:var(--ink-2)}
.toolbar .spacer{flex:1;min-width:0}
.toolbar-right{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}

.viewtoggle{display:inline-flex;border:1px solid var(--rule-strong);border-radius:3px;overflow:hidden}
.viewtoggle button{
  appearance:none;background:var(--surface);border:0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.04em;padding:10px 14px;min-height:40px;
  color:var(--ink-2);
}
.viewtoggle button + button{border-left:1px solid var(--rule-strong)}
.viewtoggle button[aria-pressed="true"]{background:var(--ink);color:#fff}

.btn{
  appearance:none;background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:3px;padding:9px 13px;font-size:12.5px;cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{border-color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-quiet{border-color:transparent;background:none;color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-warm);color:var(--ink)}

/* ---------- canvas ---------- */
.canvas{padding:var(--s6) var(--s6) var(--s9);max-width:1360px;margin:0 auto;width:100%}
.page{display:none}
.page.active{display:block}

.page-head{margin-bottom:var(--s5);max-width:70ch}
.page-head h1{font-size:clamp(23px,2.6vw,31px);font-weight:400;letter-spacing:-.025em;line-height:1.14}
.page-head .q{margin-top:var(--s2);color:var(--ink-2);font-size:14.5px}

/* ============================ home ============================ */
.home-hero{
  background:var(--ink);color:#fff;padding:var(--s7) var(--s7) var(--s6);
  margin-bottom:var(--s4);
}
.home-hero .label{color:var(--gold-soft);margin-bottom:var(--s4);display:block}
.home-hero h1{
  font-size:clamp(28px,4.2vw,46px);font-weight:300;letter-spacing:-.033em;
  line-height:1.06;max-width:17ch;
}
.home-hero .lede{
  margin-top:var(--s4);color:rgba(255,255,255,.66);font-size:15px;max-width:56ch;line-height:1.6;
}
.home-figs{display:flex;gap:var(--s7);flex-wrap:wrap;margin-top:var(--s6)}
.home-fig .v{font-family:var(--mono);font-size:clamp(21px,2.5vw,29px);font-weight:500;letter-spacing:-.025em}
.home-fig .k{font-size:11.5px;color:rgba(255,255,255,.58);margin-top:5px;max-width:20ch;line-height:1.4}
.home-fig.lead .v{color:var(--gold-soft)}
.home-meta{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;
  font-size:11.5px;color:rgba(255,255,255,.55);
}
.home-meta button{background:none;border:0;color:var(--gold-soft);cursor:pointer;
  font-size:11.5px;padding:0;border-bottom:1px solid transparent}
.home-meta button:hover{border-bottom-color:var(--gold-soft)}

/* three paths */
.paths{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  margin-bottom:var(--s6)}
.path{
  background:var(--surface);border:1px solid var(--rule);padding:var(--s5);
  text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:var(--s2);
  min-height:150px;transition:border-color .18s ease,transform .18s ease;
}
.path:hover{border-color:var(--ink);transform:translateY(-2px)}
.path .n{font-family:var(--mono);font-size:10.5px;color:var(--gold);letter-spacing:.12em}
.path h3{font-size:17px;font-weight:500;letter-spacing:-.015em;margin-top:2px}
.path p{font-size:13px;color:var(--ink-2);line-height:1.5;flex:1}
.path .go{font-size:12px;font-weight:600;color:var(--purple);display:flex;align-items:center;gap:6px}

/* ============================ KPIs ============================ */
.kpis{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  margin-bottom:var(--s5)}
.kpi{background:var(--surface);border:1px solid var(--rule);padding:var(--s4) var(--s5) var(--s5);
  position:relative;display:flex;flex-direction:column;gap:var(--s2)}
.kpi .k{display:flex;align-items:center;gap:7px;min-height:18px}
.kpi .v{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.03em;
  line-height:1.02;cursor:help}
.kpi .v.sm{font-size:20px}
.kpi .f{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kpi .src{position:absolute;top:var(--s2);right:var(--s2);background:none;border:0;cursor:pointer;
  color:var(--ink-3);font-size:13px;line-height:1;padding:9px;border-radius:3px;min-width:36px;
  min-height:36px}
.kpi .src:hover{color:var(--purple);background:var(--purple-wash)}
.kpi.na .v{color:var(--ink-3);font-size:14px;font-family:var(--sans);font-weight:400;letter-spacing:0}

.delta{font-family:var(--mono);font-size:12px;font-weight:600}
.delta.up{color:var(--pos)} .delta.down{color:var(--neg)} .delta.flat{color:var(--ink-3)}

/* compact caveat that sits beside a figure, never a paragraph */
.caveat{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--warn);
  background:var(--warn-wash);border:1px solid #ecdcb8;border-radius:3px;
  padding:6px 10px;cursor:pointer;min-height:32px;
}
.caveat:hover{border-color:var(--warn)}
.caveat.est{color:var(--ink-2);background:var(--surface-sunk);border-color:var(--rule-strong)}

/* ============================ sections ============================ */
.sec{margin-top:var(--s7)}
.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.sec-head h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sec-head .sub{color:var(--ink-3);font-size:12.5px;margin-left:auto;text-align:right;max-width:46ch}

.grid2{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(390px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column}
.card-h{padding:var(--s4) var(--s5) 0;display:flex;align-items:baseline;gap:var(--s3)}
.card-h h3{font-size:13.5px;font-weight:600}
.card-h .note{font-size:11px;color:var(--ink-3);margin-left:auto;font-family:var(--mono);
  text-align:right;line-height:1.4}
.card-h .src{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:12px;
  padding:4px 6px;min-height:28px}
.card-h .src:hover{color:var(--purple)}
.card-b{padding:var(--s3) var(--s5) var(--s5);flex:1}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;padding:0 var(--s5) var(--s3);
  font-size:11.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:2px;margin-right:6px;vertical-align:middle}
svg.chart{display:block;width:100%;height:auto;overflow:visible}
svg.chart text{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3)}
svg.chart .grid{stroke:var(--rule)}
svg.chart .axis{stroke:var(--rule-strong)}

/* ---------- disclosure ---------- */
details.more{border:1px solid var(--rule);background:var(--surface);margin-top:var(--s3)}
details.more > summary{
  cursor:pointer;padding:var(--s3) var(--s5);font-size:12.5px;font-weight:600;
  color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:var(--s2);min-height:44px;
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:'+';font-family:var(--mono);color:var(--gold);font-size:13px}
details.more[open] > summary::before{content:'\2212'}
details.more > summary:hover{color:var(--ink);background:var(--surface-warm)}
details.more .body{padding:0 var(--s5) var(--s5);font-size:13px;color:var(--ink-2);
  line-height:1.6;max-width:92ch}
details.more .body p{margin-bottom:var(--s3)}
details.more .body p:last-child{margin-bottom:0}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:560px}
th,td{padding:10px var(--s5);text-align:left;border-bottom:1px solid var(--rule)}
thead th{background:var(--surface-warm);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-warm)}
tbody tr.sel{background:var(--purple-wash)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.strong{font-weight:600}
tr.clickable{cursor:pointer}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border:1px solid transparent;white-space:nowrap}
.badge.PASS,.badge.HIGH{background:var(--pos-wash);color:var(--pos);border-color:#cfe3d9}
.badge.WARNING,.badge.MEDIUM{background:var(--warn-wash);color:var(--warn);border-color:#ecdcb8}
.badge.FAIL,.badge.REVIEW_REQUIRED{background:var(--stop-wash);color:var(--stop);border-color:#eed2d6}
.badge.BLOCKED{background:var(--ink);color:#fff}
.badge.LOW{background:var(--surface-sunk);color:var(--ink-3);border-color:var(--rule)}
.badge.purple{background:var(--purple-wash);color:var(--purple);border-color:#ddd5f4}

/* ---------- pulse ---------- */
.pulse{background:var(--surface);border:1px solid var(--rule);margin-bottom:var(--s5)}
.pulse-h{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:var(--s3)}
.pulse-item{display:flex;gap:var(--s4);padding:var(--s3) var(--s5);align-items:center;
  border-bottom:1px solid var(--rule)}
.pulse-item:last-child{border-bottom:0}
.pulse-item .arrow{font-family:var(--mono);font-size:15px;width:16px;flex:none}
.pulse-item.up .arrow{color:var(--pos)}
.pulse-item.down .arrow{color:var(--neg)}
.pulse-item.flat .arrow{color:var(--ink-3)}
.pulse-item .txt{font-size:13.5px;flex:1}
.pulse-item .val{font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap}

/* ---------- empty ---------- */
.empty{border:1px dashed var(--rule-strong);background:var(--surface-warm);
  padding:var(--s6) var(--s5);text-align:center;color:var(--ink-2)}
.empty .t{font-weight:600;color:var(--ink);margin-bottom:6px;font-size:13.5px}
.empty .d{font-size:12.5px;max-width:52ch;margin:0 auto;line-height:1.55}

/* ---------- tooltip ---------- */
#tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .12s ease;
  background:var(--ink);color:#fff;padding:var(--s3) var(--s4);max-width:290px;
  font-size:12px;line-height:1.5;box-shadow:0 14px 36px -14px rgba(26,31,54,.55)}
#tip.on{opacity:1}
#tip .t-name{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;margin-bottom:5px}
#tip .t-val{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em}
#tip .t-d{font-size:11.5px;color:rgba(255,255,255,.58);margin-top:3px}
#tip dl{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);margin:var(--s3) 0 0;
  padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);font-size:11px}
#tip dt{color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase;
  font-size:9.5px;padding-top:2px}
#tip dd{margin:0;color:rgba(255,255,255,.88)}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer[open]{display:block}
.drawer-scrim{position:absolute;inset:0;background:rgba(26,31,54,.34)}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(520px,100%);
  background:var(--surface);overflow-y:auto;padding:var(--s7) var(--s6);
  box-shadow:-26px 0 52px -26px rgba(26,31,54,.3)}
.drawer-panel h3{font-weight:400;font-size:24px;letter-spacing:-.022em;margin:var(--s2) 0}
.drawer-close{position:absolute;top:var(--s4);right:var(--s4);background:none;
  border:1px solid var(--rule-strong);cursor:pointer;font-size:12px;padding:9px 13px;
  color:var(--ink-2);min-height:40px}
.drawer-close:hover{border-color:var(--ink);color:var(--ink)}
.kv{display:grid;grid-template-columns:126px 1fr;gap:var(--s2) var(--s4);
  margin:var(--s5) 0;font-size:12.5px}
.kv dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding-top:3px}
.kv dd{margin:0;color:var(--ink-2);word-break:break-word}
.kv dd code{font-family:var(--mono);font-size:11.5px;background:var(--surface-sunk);padding:2px 5px}
.pick{text-align:left;background:var(--surface);border:0;padding:14px;cursor:pointer;
  font-size:13.5px;min-height:48px;width:100%}

/* ---------- simple view hides analyst apparatus ---------- */
body.simple .adv{display:none!important}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;background:var(--ink);color:#fff;display:grid;place-items:center;z-index:90}
.boot.gone{display:none}
.boot .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);
  font-weight:600;margin-bottom:var(--s4)}
.boot .bar{width:190px;height:1px;background:rgba(255,255,255,.2);overflow:hidden;margin:0 auto}
.boot .bar i{display:block;height:100%;width:40%;background:var(--gold);
  animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}

footer.foot{border-top:1px solid var(--rule);padding:var(--s5) var(--s6) var(--s8);
  font-size:11.5px;color:var(--ink-3);max-width:1360px;margin:0 auto}
footer.foot p{max-width:96ch;margin-bottom:6px}

/* ============================ responsive ============================ */
@media (max-width:1180px){ .sec-head .sub{display:none} }

@media (max-width:900px){
  :root{--rail:0px}
  .app{grid-template-columns:1fr}
  /* One scrolling row holds the brand and both nav groups. The rail itself is
     the scroll container: giving each group its own overflow let the secondary
     group claim its natural width and squeeze the primary one to nothing. */
  .rail{
    position:sticky;top:0;height:auto;flex-direction:row;align-items:stretch;
    padding:0;z-index:40;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  /* The row is about five screens wide on a phone and a plain overflow says
     nothing about that. Each edge carries a fade towards the rail's own navy,
     and it is kept honest: no fade where there is nothing further to reach.
     Both are sticky flex items with a negative margin, so they pin to the
     edges of the scrollport without taking width from the sections. */
  .rail::before,
  .rail::after{
    content:'';flex:none;align-self:stretch;width:44px;
    pointer-events:none;opacity:0;transition:opacity .18s ease;
  }
  .rail::before{
    position:sticky;left:0;margin-right:-44px;
    background:linear-gradient(270deg,rgba(26,31,54,0),var(--ink) 80%);
  }
  .rail::after{
    position:sticky;right:0;margin-left:-44px;
    background:linear-gradient(90deg,rgba(26,31,54,0),var(--ink) 80%);
  }
  .rail[data-x="start"]::after,
  .rail[data-x="middle"]::after{opacity:1}
  .rail[data-x="middle"]::before,
  .rail[data-x="end"]::before{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .rail::before,.rail::after{transition:none}
  }
  .rail-brand{padding:var(--s3) var(--s4);flex:none;border-right:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center}
  .rail-brand .s{display:none}
  .rail-brand .m{font-size:12px;white-space:nowrap}
  .rail-group{padding:0;display:contents}
  .rail-group .label{display:none}
  /* natural width, no nested scroller — the rail scrolls */
  .rail-nav{flex-direction:row;gap:0;flex:none;overflow:visible}
  .rail-nav.secondary{border-left:1px solid rgba(255,255,255,.12)}
  .rail-nav button{
    border-radius:0;padding:var(--s3) var(--s4);white-space:nowrap;min-height:48px;
    border-bottom:2px solid transparent;
  }
  .rail-nav button .i{display:none}
  .rail-nav button[aria-current="page"]{background:none;border-bottom-color:var(--gold)}
  .rail-nav.secondary{flex:none}
  .rail-foot{margin:0;padding:0 var(--s4) 0 0;flex:none}
  .rail-status{white-space:nowrap;font-size:11px}

  .toolbar{padding:var(--s3) var(--s4);gap:var(--s3);top:0}
  .filter{flex:1 1 44%;min-width:0}
  .filter select{width:100%;min-width:0}
  .toolbar .spacer{display:none}
  .toolbar-right{flex:1 1 100%;justify-content:space-between}

  .canvas{padding:var(--s5) var(--s4) var(--s8)}
  .home-hero{padding:var(--s6) var(--s4) var(--s5)}
  .home-figs{gap:var(--s5)}
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .kpi{padding:var(--s4)}
  .kpi .v{font-size:25px}
  .card-h,.card-b,.legend{padding-left:var(--s4);padding-right:var(--s4)}
  th,td{padding:12px var(--s4)}
  /* comfortable thumb targets on touch */
  .caveat{min-height:38px;font-size:12px}
  .kpi .src{min-width:40px;min-height:40px}
  .card-h .src{min-width:40px;min-height:40px;padding:10px}
  .rail-status{min-height:48px}
  .drawer-panel{padding:var(--s6) var(--s4)}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:var(--s3)}
  footer.foot{padding:var(--s5) var(--s4) var(--s8)}
}

@media (max-width:560px){
  .home-hero h1{font-size:27px}
  .kpis{grid-template-columns:1fr 1fr}
  .paths{grid-template-columns:1fr}
  .sec{margin-top:var(--s6)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .path:hover{transform:none}
}

/* ============================================================================
   Executive summary — the default view.

   Nothing to operate: no rail, no toolbar, no mode switch, no source buttons.
   A single column that is read from the top. The analyst tool lives behind one
   link at the end, and body.tool brings the chrome back.
   ============================================================================ */
body.summary .rail,
body.summary .toolbar,
body.summary > .app > .main > footer.foot { display:none }
body.summary .app { grid-template-columns:1fr }
body.summary .canvas { padding:0; max-width:none }
body:not(.summary) #page-summary { display:none }

.sum { max-width:1080px; margin:0 auto; padding:0 var(--s6) var(--s9) }

.sum-open{
  max-width:880px;margin:0 auto;padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px);
  text-align:left;
}
.sum-eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s5);
}
.sum-open h1{
  font-size:clamp(32px,5.2vw,60px);font-weight:300;letter-spacing:-.035em;
  line-height:1.04;max-width:18ch;
}
.sum-lede{
  margin-top:var(--s5);font-size:clamp(16px,1.5vw,19px);line-height:1.62;
  color:var(--ink-2);max-width:60ch;font-weight:300;
}
.sum-meta{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:12px;color:var(--ink-3);letter-spacing:.01em;
}

/* a step: sentence on the left, picture on the right */
.sum-step{
  display:grid;grid-template-columns:minmax(280px,7fr) 11fr;gap:clamp(24px,4vw,64px);
  align-items:start;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--rule);
}
.sum-text{position:sticky;top:var(--s6)}
.sum-n{
  display:block;font-family:var(--mono);font-size:12px;color:var(--gold);
  letter-spacing:.16em;margin-bottom:var(--s4);
}
.sum-step h2{
  font-size:clamp(21px,2.4vw,30px);font-weight:400;letter-spacing:-.024em;
  line-height:1.16;max-width:22ch;
}
.sum-k{margin-top:var(--s3);font-size:15px;color:var(--ink-2);line-height:1.6;max-width:44ch}
.sum-note{
  margin-top:var(--s4);font-size:13px;line-height:1.6;color:var(--ink-3);
  max-width:46ch;padding-left:var(--s4);border-left:2px solid var(--rule);
}
.sum-chart{background:var(--surface);border:1px solid var(--rule);padding:var(--s5)}
.sum-legend{
  margin-top:var(--s3);display:flex;gap:var(--s5);flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);
}
.sum-legend i{display:inline-block;width:12px;height:2px;margin-right:6px;vertical-align:middle}

.sum-conc{
  margin-top:clamp(40px,6vw,72px);background:var(--ink);color:#fff;
  padding:clamp(40px,6vw,80px) clamp(28px,5vw,72px);
}
.sum-conc .sum-eyebrow{color:var(--gold-soft)}
.sum-conc h2{
  font-size:clamp(28px,4vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.08;
}
.sum-conc p{
  margin-top:var(--s5);font-size:clamp(15px,1.4vw,18px);line-height:1.62;
  color:rgba(255,255,255,.78);max-width:62ch;font-weight:300;
}
.sum-conc .sum-caveat{
  margin-top:var(--s5);padding-top:var(--s4);font-size:13px;
  color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.16);
}
.sum-cta{
  margin-top:var(--s6);background:var(--gold);border:0;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.08em;padding:15px 24px;
  cursor:pointer;min-height:48px;
}
.sum-cta:hover{background:var(--gold-soft)}

/* the way back, only in tool mode */
.back-summary{
  display:none;background:none;border:0;color:rgba(255,255,255,.62);cursor:pointer;
  font-size:12px;padding:var(--s3) var(--s5);text-align:left;width:100%;min-height:44px;
}
body.tool .back-summary{display:block}
.back-summary:hover{color:#fff}

@media (max-width:900px){
  .sum{padding:0 var(--s4) var(--s8)}
  .sum-step{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) 0}
  .sum-text{position:static}
  .sum-open{padding:var(--s7) 0 var(--s6)}
  .sum-conc{padding:var(--s6) var(--s4)}
}

/* ======================= decision cockpit ======================= */
/* Cards, not a dashboard: each one carries a claim and its limits, so they
   are sized for reading rather than packed for density. */
.ck-watch{border:1px solid var(--rule);background:var(--surface);
  padding:var(--s5) var(--s5) var(--s4);margin-bottom:var(--s6)}
.ck-watch-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.ck-watch-list{list-style:none;margin:0;padding:0;counter-reset:w}
.ck-watch-list li{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.ck-watch-list li:last-child{border-bottom:0}
.ck-w-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ck-w-title{font-weight:600;font-size:14px}
.ck-w-signal{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.ck-w-signal.ck-pos{color:var(--pos)} .ck-w-signal.ck-neg{color:var(--neg)}
.ck-w-signal.ck-warn{color:var(--gold)}
.ck-w-scale{font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-top:3px}
.ck-w-why{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:4px;
  max-width:84ch}

.ck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ck-card{border:1px solid var(--rule);background:var(--surface);
  padding:var(--s5);display:flex;flex-direction:column}
.ck-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s3);margin-bottom:var(--s4)}
.ck-head h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ck-q{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.ck-badges{display:flex;gap:6px;flex:none;align-items:center}
.ck-conf{font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 6px;
  border-radius:2px}
.ck-conf-pass{background:rgba(20,99,74,.1);color:var(--pos)}
.ck-conf-warning{background:rgba(140,74,0,.1);color:var(--neg)}
.ck-conf-blocked{background:rgba(26,31,54,.08);color:var(--ink-3)}
.ck-level{font-family:var(--mono);font-size:10.5px;font-weight:600;
  width:19px;height:19px;display:grid;place-items:center;
  border:1px solid var(--rule-strong);color:var(--ink-2);border-radius:2px}
.ck-signal{display:flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;letter-spacing:.01em}
.ck-dot{width:7px;height:7px;border-radius:50%;flex:none}
.ck-pos .ck-dot{background:var(--pos)} .ck-pos .ck-signal{color:var(--pos)}
.ck-neg .ck-dot{background:var(--neg)} .ck-neg .ck-signal{color:var(--neg)}
.ck-warn .ck-dot{background:var(--gold)} .ck-warn .ck-signal{color:var(--gold)}
.ck-scale{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:6px 0 var(--s4);
  line-height:1.3}
.ck-evidence{list-style:none;margin:0 0 var(--s4);padding:0;
  border-top:1px solid var(--rule)}
.ck-evidence li{font-size:12.5px;color:var(--ink-2);padding:7px 0;
  border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.ck-imp{font-size:13px;color:var(--ink);line-height:1.6}
.ck-lim{font-size:12px;color:var(--ink-3);line-height:1.55;margin-top:8px}
.ck-lim strong{color:var(--ink-2)}
.ck-foot{margin-top:auto;padding-top:var(--s4);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

@media (max-width:900px){ .ck-grid{grid-template-columns:1fr} }

/* Data currency: one date per institution. A single "as of" would be wrong
   for every source but one -- customs runs ahead of the central bank, the tax
   administration trails it, and the supplied extract has no period at all. */
.ck-fresh{border:1px solid var(--rule);background:var(--surface-sunk);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.ck-fresh-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.ck-fresh-row{display:flex;gap:var(--s5);flex-wrap:wrap}
.ck-fresh-item{min-width:104px}
.ck-fresh-inst{display:flex;align-items:center;gap:6px;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ck-fresh-date{font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--ink);margin-top:3px}
.ck-fresh-none .ck-fresh-date{color:var(--neg);font-weight:500}

/* ======================= audit report ======================= */
/* A rating is a claim about evidence, so each row carries its basis and its
   limit beside it rather than a colour alone. */
.au-counts{display:flex;gap:6px;flex-wrap:wrap}
.au-pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:2px}
.au-pill.au-pass{background:rgba(20,99,74,.1);color:var(--pos)}
.au-pill.au-warning{background:rgba(140,74,0,.1);color:var(--neg)}
.au-pill.au-blocked{background:rgba(26,31,54,.08);color:var(--ink-2)}
.au-pill.au-fail{background:rgba(140,74,0,.18);color:var(--neg)}

.au-row td{vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule)}
.au-rating{white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  width:112px;font-family:var(--mono)}
.au-dot{width:7px;height:7px;border-radius:50%;display:inline-block;
  margin-right:7px;vertical-align:middle}
.au-pass .au-dot{background:var(--pos)}   .au-pass .au-rating{color:var(--pos)}
.au-warning .au-dot{background:var(--neg)} .au-warning .au-rating{color:var(--neg)}
.au-blocked .au-dot{background:var(--ink-3)} .au-blocked .au-rating{color:var(--ink-3)}
.au-fail .au-dot{background:var(--neg)}    .au-fail .au-rating{color:var(--neg)}
.au-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.au-basis{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:4px;
  max-width:88ch;font-variant-numeric:tabular-nums}
.au-lim{font-size:12px;color:var(--ink-3);line-height:1.55;margin-top:5px;
  max-width:88ch}
.au-clears{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:5px;
  max-width:88ch}
.au-clears strong{color:var(--ink)}

@media (max-width:900px){ .au-rating{width:auto} }

/* ======================= five decisions ======================= */
/* The first screen. One number per decision, nothing competing for the eye. */
.dc-headline{background:var(--ink);color:#fff;padding:var(--s7) var(--s6);
  margin-bottom:var(--s6)}
.dc-headline .label{color:var(--gold-soft)}
.dc-headline h2{font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:-.02em;
  line-height:1.2;margin:var(--s3) 0 var(--s5);max-width:26ch}
.dc-versus{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) 0;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14)}
.dc-side-v{font-family:var(--mono);font-size:clamp(24px,4vw,38px);font-weight:600;
  letter-spacing:-.03em;color:rgba(255,255,255,.62)}
.dc-side-lead .dc-side-v{color:var(--gold-soft)}
.dc-side-k{font-size:12px;color:rgba(255,255,255,.55);line-height:1.45;
  max-width:30ch;margin-top:4px}
.dc-vs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
.dc-reading{font-size:14px;line-height:1.7;color:rgba(255,255,255,.86);
  max-width:70ch;margin-top:var(--s4)}
.dc-caveat{font-size:12px;line-height:1.6;color:rgba(255,255,255,.5);
  max-width:70ch;margin-top:var(--s3)}

.dc-grid{display:grid;gap:var(--s4)}
.dc-card{display:flex;gap:var(--s5);border:1px solid var(--rule);
  background:var(--surface);padding:var(--s5)}
.dc-n{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--rule-strong);
  line-height:1;flex:none;width:44px}
.dc-body{flex:1;min-width:0}
.dc-verb{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.dc-conf{font-size:9.5px;letter-spacing:.08em;padding:2px 6px;border-radius:2px;
  background:var(--surface-sunk);color:var(--ink-3);font-weight:600}
.dc-high .dc-conf{background:rgba(20,99,74,.1);color:var(--pos)}
.dc-medium .dc-conf{background:rgba(184,150,12,.12);color:var(--gold)}
.dc-low .dc-conf{background:rgba(140,74,0,.1);color:var(--neg)}
.dc-q{font-size:13px;font-weight:500;color:var(--ink-3);margin:6px 0 4px}
.dc-a{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.35;
  max-width:44ch}
.dc-fig{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s4) 0;
  padding:var(--s3) 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.dc-v{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;
  color:var(--purple,#230078)}
.dc-u{font-size:12px;color:var(--ink-3)}
.dc-basis,.dc-action,.dc-limit,.dc-needs{font-size:12.5px;line-height:1.6;
  max-width:72ch;margin-top:7px}
.dc-basis{color:var(--ink-2)} .dc-action{color:var(--ink)}
.dc-limit,.dc-needs{color:var(--ink-3);font-size:12px}
.dc-basis strong,.dc-action strong{color:var(--ink);font-weight:600}
.dc-limit strong,.dc-needs strong{color:var(--ink-2);font-weight:600}

@media (max-width:900px){
  .dc-card{flex-direction:column;gap:var(--s3)}
  .dc-n{width:auto}
  .dc-versus{flex-direction:column;align-items:flex-start;gap:var(--s3)}
}

/* ======================= scenario engine ======================= */
.sc-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);
  margin-bottom:var(--s5)}
.sc-block{border:1px solid var(--rule);background:var(--surface);padding:var(--s5)}
.sc-inputs-block{background:var(--surface-sunk)}
.sc-hint{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:var(--s2);
  max-width:60ch}
.sc-fields{display:grid;gap:var(--s3);margin-top:var(--s3)}
.sc-field{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--s3);font-size:12.5px;color:var(--ink-2)}
.sc-field span{display:flex;flex-direction:column}
.sc-field em{font-style:normal;font-size:11px;color:var(--ink-3);margin-top:1px}
.sc-field input[type=number]{width:104px;padding:6px 8px;border:1px solid var(--rule-strong);
  background:var(--surface);font-family:var(--mono);font-size:13px;text-align:right;
  color:var(--ink)}
.sc-field input[type=number]:focus{outline:2px solid var(--purple,#230078);
  outline-offset:-1px}
.sc-field input[type=range]{width:150px}
.sc-field output{font-family:var(--mono);font-size:13px;font-weight:600;
  min-width:52px;text-align:right}
.sc-check input{width:16px;height:16px}

.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:var(--s4)}
.sc-card{border:1px solid var(--rule);background:var(--surface);padding:var(--s5);
  display:flex;flex-direction:column}
.sc-card h3{font-size:15px;font-weight:600}
.sc-assume{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.sc-vol{margin:var(--s4) 0;padding:var(--s3) 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.sc-vol .v{display:block;font-family:var(--mono);font-size:27px;font-weight:600;
  letter-spacing:-.03em;color:var(--purple,#230078)}
.sc-vol .k{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sc-chain{width:100%;border-collapse:collapse;font-size:12.5px}
.sc-chain td{padding:6px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.sc-chain td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.sc-note{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.sc-await{color:var(--ink-3);font-family:var(--sans);font-size:11.5px;font-style:italic}
.sc-chain .sc-result td{font-weight:600;color:var(--ink);border-bottom:0}
.sc-basis{font-size:12px;color:var(--ink-2);line-height:1.6;margin-top:var(--s3)}
.sc-conf{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:6px}
.sc-missing{font-size:11.5px;color:var(--neg);line-height:1.55;margin-top:auto;
  padding-top:var(--s3)}
.sc-ok{font-size:11.5px;color:var(--pos);line-height:1.55;margin-top:auto;
  padding-top:var(--s3);font-weight:600}

.sc-kind{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px}
.sc-k-measured{background:rgba(20,99,74,.1);color:var(--pos)}
.sc-k-derived{background:rgba(35,0,120,.08);color:var(--purple,#230078)}
.sc-k-assumption{background:rgba(184,150,12,.14);color:var(--gold)}
.sc-k-input{background:rgba(140,74,0,.1);color:var(--neg)}

@media (max-width:900px){ .sc-controls{grid-template-columns:1fr} }

/* ======================= where to play explorer ======================= */
.ex-controls{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap;
  padding:var(--s4) var(--s5);border:1px solid var(--rule);
  background:var(--surface);margin-bottom:var(--s4)}
.ex-sel{display:flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ex-sel select{min-width:210px;max-width:100%;padding:8px 10px;
  border:1px solid var(--rule-strong);background:var(--surface);
  font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0}
.ex-profile{border:1px solid var(--rule);background:var(--surface-sunk);
  padding:var(--s5)}
.ex-flagged{border-color:var(--neg)}
.ex-p-row{display:flex;gap:var(--s6);flex-wrap:wrap}
.ex-p-row .k{display:block;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.ex-p-row .v{display:block;font-family:var(--mono);font-size:17px;font-weight:600;
  letter-spacing:-.02em;margin-top:3px}
.ex-p-row .v em{font-family:var(--sans);font-size:12px;font-weight:400;
  font-style:normal;color:var(--ink-3)}
.ex-warn{font-size:12.5px;color:var(--neg);line-height:1.6;margin-top:var(--s4);
  max-width:78ch}
.ex-warn strong{font-weight:600}
.ex-note{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:var(--s4);
  max-width:78ch}
.ex-addr{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 7px;
  border-radius:2px;white-space:nowrap}
.ex-addr.ex-pos{background:rgba(20,99,74,.1);color:var(--pos)}
.ex-addr.ex-mid{background:rgba(184,150,12,.14);color:var(--gold)}
.ex-addr.ex-low{background:var(--surface-sunk);color:var(--ink-3)}
.ex-addr.ex-warn{background:rgba(140,74,0,.1);color:var(--neg)}
@media (max-width:900px){ .ex-sel select{min-width:0;width:100%} .ex-sel{flex:1 1 100%} }

/* three layers: market, the bank's position, the economics */
.sc-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:var(--s4)}
.sc-layer{border:1px solid var(--rule);background:var(--surface);padding:var(--s5)}
.sc-l-awaiting{background:var(--surface-sunk);border-style:dashed}
.sc-l-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.sc-l-n{font-family:var(--mono);font-size:12px;font-weight:600;width:22px;height:22px;
  display:grid;place-items:center;border:1px solid var(--rule-strong);
  color:var(--ink-2);border-radius:2px}
.sc-l-head h3{font-size:14px;font-weight:600;flex:1;min-width:0}
.sc-l-status{font-size:9.5px;font-weight:700;letter-spacing:.09em;padding:3px 7px;
  border-radius:2px;background:rgba(20,99,74,.1);color:var(--pos)}
.sc-l-awaiting .sc-l-status{background:rgba(140,74,0,.1);color:var(--neg)}
.sc-l-partial .sc-l-status{background:rgba(184,150,12,.14);color:var(--gold)}
.sc-l-detail{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:8px}
.sc-l-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:6px}