/* =====================================================================
   CSP Scanner — design system
   Warm paper, hairline rules, editorial type. One green accent.
   Built on Mantine primitives; this layer carries the visual identity.
   ===================================================================== */

:root{
  --paper:#FAF9F5;
  --surface:#FFFFFF;
  --surface-2:#F3F1EA;
  --ink:#1B1D20;
  --ink-2:#57534A;
  --ink-3:#8C887C;
  --line:#E6E2D6;
  --line-strong:#D8D2C0;
  --brand:#14753D;
  --brand-strong:#0E5A2F;
  --brand-soft:#E9F3EC;
  --danger:#B3261E;
  --warn:#8A5A00;
  --warn-soft:#FAF2DF;
  --terminal:#0B0D0F;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --wrap:1180px;
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#D8E9DD}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.mono{font-family:var(--font-mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- shared editorial atoms ---------- */
.kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 6px;
}
.display{
  font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;
  line-height:1.12;color:var(--ink);
}
.sechead{display:flex;align-items:baseline;gap:18px;margin:0 0 6px}
.seclabel{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.sechead::after{content:"";flex:1 1 auto;height:1px;background:var(--line);transform:translateY(-4px)}
.secnote{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em;white-space:nowrap}

/* ---------- masthead / footer ---------- */
.mast{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;justify-content:space-between;height:58px}
.wordmark{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:12px}
.wm-serif{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-0.01em}
.wm-tag{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--line-strong);padding-left:12px;
}
.mast-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mast-meta b{color:var(--brand-strong);font-weight:600}

.estrip{border-bottom:1px solid #EAD9AC;background:var(--warn-soft)}
.estrip p{margin:0;padding:9px 0;font-size:12px;color:#6B5518;max-width:var(--wrap)}

.footer{border-top:1px solid var(--line);margin-top:76px;padding:26px 0 44px}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer p{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);margin:0;letter-spacing:.02em;max-width:52ch}

/* ---------- homepage : morning brief ---------- */
.brief{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;padding:46px 0 40px}
.brief h1{font-size:clamp(30px,3.6vw,42px);margin:12px 0 16px}
.lede{font-size:16.5px;color:var(--ink-2);max-width:58ch;margin:0}
.rmeta{border-top:2px solid var(--ink);padding-top:4px;align-self:start}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.mrow .k{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mrow .v{font-family:var(--font-mono);font-size:14px;font-weight:600}
.mrow .v.go{color:var(--brand-strong)}

/* ---------- homepage : ranked opportunities (rows, not cards) ---------- */
.opps{margin-top:6px}
.opplist{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--ink)}
.opprow{
  display:grid;align-items:center;gap:20px;
  grid-template-columns:54px minmax(0,1.6fr) repeat(4,minmax(0,.62fr)) auto 22px;
  padding:20px 6px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);
  transition:background-color .15s ease;
}
.opprow:hover{background:var(--surface)}
.or-rank{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:23px;color:var(--ink-3)}
.or-t{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:.02em;display:block}
.or-name{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.or-why{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44ch}
.or-cell .k{display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.or-cell .v{font-family:var(--font-mono);font-size:14px;font-weight:600}
.or-cell .v.neg{color:var(--danger)}
.or-cell .v.go{color:var(--brand-strong)}
.or-tail{display:contents}
.or-verdict{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--brand-strong)}
.or-verdict .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.or-chev{color:var(--ink-3);font-size:17px;transition:transform .15s ease}
.opprow:hover .or-chev{transform:translateX(4px);color:var(--ink)}

/* ---------- homepage : lower grid (rejects + exposure rail) ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:56px;margin-top:52px;align-items:start}
.rej-note{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;font-family:var(--font-mono)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.exp-big{font-family:var(--font-display);font-weight:600;font-size:44px;line-height:1;margin:10px 0 2px;letter-spacing:-0.01em}
.exp-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.meter{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin:0 0 18px}
.meter i{display:block;height:100%;background:var(--brand);border-radius:3px}
.kv{margin:0}
.krow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.krow:last-child{border-bottom:0}
.kk{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kv2{font-family:var(--font-mono);font-weight:600;font-size:13px;text-align:right}
.rules{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.rules li{font-size:12.5px;color:var(--ink-2);margin:0 0 10px;padding-left:16px;position:relative}
.rules li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
.fine{font-size:11.5px;color:var(--ink-3);margin:14px 0 0;line-height:1.55}

/* ---------- detail : dossier head ---------- */
.back{
  display:inline-block;margin:26px 0 0;text-decoration:none;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink-3);
}
.back:hover{color:var(--ink)}
.dhead{padding:14px 0 0}
.dhead h1{font-size:clamp(30px,3.4vw,40px);margin:10px 0 4px}
.dhead h1 .tcode{font-family:var(--font-mono);font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--ink-3);margin-left:10px;vertical-align:middle}
.dhead .wown{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);letter-spacing:.04em;margin:0}
.dhead .wown b{color:var(--brand-strong)}
.statstrip{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px;
}
.stat{padding:16px 18px 15px 0}
.stat+.stat{padding-left:18px;border-left:1px solid var(--line)}
.stat .k{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--font-mono);font-size:19px;font-weight:600;margin-top:7px;letter-spacing:-0.01em}
.stat .v.neg{color:var(--danger)}
.stat .v.go{color:var(--brand-strong)}

/* ---------- detail : body grid ---------- */
.dbody{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:60px;margin-top:38px;align-items:start}

/* dark terminal chart panel — the product anchor */
.chartpanel{background:var(--terminal);border:1px solid #20242a;border-radius:var(--r-lg);padding:18px 18px 8px;color:#C9CDD3}
.charthead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.charthead .t{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:#8C887C}
.chartlegend{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#8C887C}
.chartlegend i{width:14px;height:2px;display:inline-block;margin-right:6px;vertical-align:middle}
.lg-put{background:#3FA767}.lg-sup{background:#8C887C}
.chart{height:380px}
.charthint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#5d6259;margin:10px 2px 6px}

/* ---------- detail : sections (editorial blocks, hairline separated) ---------- */
.dsec{padding:36px 0 8px;border-top:1px solid var(--line);scroll-margin-top:84px}
.dsec.gap{margin-top:28px}
.snum{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--ink-3);margin:0 0 10px}
.dsec h2{font-size:20px;font-weight:650;letter-spacing:-0.01em;margin:0 0 8px}
.ssub{color:var(--ink-2);font-size:14px;margin:0 0 22px;max-width:72ch}

.chk{display:flex;gap:12px;margin:0 0 12px;font-size:14.5px;color:var(--ink-2);max-width:78ch}
.chk .tick{color:var(--brand-strong);font-weight:700;flex:none}
.chk b,.note b,.chain b{color:var(--ink)}
.note{border-left:2px solid var(--line-strong);padding:3px 0 3px 18px;color:var(--ink-2);font-size:14.5px;margin:20px 0;max-width:76ch}
.callout{
  background:var(--warn-soft);border:1px solid #EAD9AC;border-left:3px solid var(--warn);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;font-size:14px;color:#5C4A1A;margin:20px 0;max-width:78ch;
}

/* news autopsy */
.news-etype{display:flex;gap:14px;align-items:baseline;margin:0 0 14px;font-size:14px}
.elabel{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);flex:none}
.chain{font-size:15px;max-width:76ch;color:var(--ink-2);margin:0 0 6px}
.newslist{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.newslist li{padding:15px 0;border-bottom:1px solid var(--line)}
.nl-top{display:flex;gap:12px;align-items:center;margin-bottom:5px}
.nl-date{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.tag{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tag::before{content:"●";font-size:7px;margin-right:6px;vertical-align:1px}
.tag-conf{color:var(--ink-2)} .tag-co{color:var(--brand-strong)}
.tag-an{color:var(--ink-3)} .tag-dev{color:var(--warn)}
.nl-h{font-weight:600;font-size:14.5px;margin:0 0 2px}
.nl-s{font-size:12.5px;color:var(--ink-3);margin:0}
.nmeta{margin-top:20px;display:grid;gap:10px}
.nmeta p{font-size:13.5px;color:var(--ink-2);margin:0;max-width:78ch}
.nmeta .elabel{display:block;margin-bottom:3px}

/* IC memo */
.memo{margin:4px 0 0;padding:0;list-style:none}
.memo li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.memo li:first-child{border-top:1px solid var(--line)}
.memo .mk{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}

/* ---------- detail : rail ---------- */
.rail{position:sticky;top:84px;display:grid;gap:20px;align-content:start}
.vline{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-0.01em;margin:12px 0 10px}
.vline .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
.vline.nogo .dot{background:var(--danger)}
.vline.nogo{color:var(--danger)}
.vline.go{color:var(--brand-strong)}
.decision{font-size:14px;color:var(--ink-2);margin:0 0 6px;line-height:1.6}
.gstrip{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin-top:14px;line-height:1.65}
.exc{margin-top:14px}
.exc ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.exc li{margin-bottom:6px}
.secnav ol{list-style:none;margin:10px 0 0;padding:0}
.secnav a{display:flex;gap:10px;align-items:baseline;padding:8px 0;font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.secnav a:hover{color:var(--brand-strong)}
.secnav .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:none}

/* ---------- Mantine component tuning (one visual language) ---------- */
.mantine-Button-root{border-radius:var(--r-sm);font-weight:600;font-size:13px;letter-spacing:.01em}
.mantine-Button-root[data-variant="filled"]{background:var(--ink)}
.mantine-Button-root[data-variant="filled"]:hover{background:#000}
.mantine-Badge-root{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-radius:4px;
}
.dtable{width:100%}
.dtable th{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:10px 18px 10px 0;white-space:nowrap;
  border-bottom:1px solid var(--line-strong) !important;
}
.dtable td{padding:11px 18px 11px 0;font-size:13.5px;color:var(--ink-2);vertical-align:top;border-bottom:1px solid var(--line) !important;overflow-wrap:break-word}
.dtable tbody tr:last-child td{border-bottom:0 !important}
.dtable td:first-child{color:var(--ink);font-weight:550}
.dtable .mono{font-size:12.5px}
.rsig{font-size:12px;display:block}
.rwhy{display:block}
.mantine-Tooltip-tooltip{font-size:12px;border-radius:var(--r-sm)}

/* ---------- loading / error / empty ---------- */
.stateblock{padding:60px 0;max-width:720px}
.statepanel{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:32px}
.statepanel h2{font-size:19px;margin:0 0 8px}
.statepanel p{color:var(--ink-2);font-size:14px;margin:0 0 20px}
.sk{margin-bottom:14px}

/* ---------- responsive : rethink, not just stack ---------- */
@media (max-width:1080px){
  .dbody{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;grid-template-columns:1fr 1fr;margin-top:48px}
  .secnav{display:none}
  .brief{grid-template-columns:minmax(0,1fr);gap:30px;padding:36px 0 30px}
  .rmeta{max-width:560px}
  .cols{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .mast-meta .hide-m{display:none}
  .brief h1{font-size:31px}
  .lede{font-size:15.5px}
  .opprow{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:18px 2px}
  .or-rank,.or-chev,.hide-m{display:none}
  .or-id{grid-column:1;grid-row:1}
  .or-tail{display:flex;align-items:center;gap:14px;grid-column:2;grid-row:1}
  .or-why{max-width:30ch}
  .statstrip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
  .stat{padding:13px 0;border-top:1px solid var(--line)}
  .stat+.stat{padding-left:0;border-left:0}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .stat .v{font-size:17px}
  .rail{grid-template-columns:minmax(0,1fr)}
  .memo li{grid-template-columns:minmax(0,1fr);gap:4px}
  .chart{height:300px}
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
  .tscroll .dtable{min-width:560px}
  .footer{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}