/* Public VPS stock board — trimmed COPY of public/css/tokens.css (TECH §8).
   The :root token block stays byte-identical to tokens.css — sync on visual
   changes. Shared components kept as-is; operator-only classes (tabs, alarm
   banner, conn lamp, mute, rows, blind banner, per-card .fresh) dropped.
   One deliberate public override: .pcard.s-checking is neutral grey — never
   the panel's amber (PRD D5). */
:root{
  --bg:oklch(98.6% 0.003 250); --bg-grid:oklch(96% 0.005 250);
  --surface:oklch(100% 0 0); --surface-2:oklch(97.4% 0.006 250); --surface-3:oklch(95% 0.01 250);
  --ink:oklch(22% 0.02 258); --ink-soft:oklch(46% 0.02 258); --ink-faint:oklch(60% 0.018 258);
  --line:oklch(90% 0.012 250); --line-strong:oklch(82% 0.018 250);
  /* DMIT store palette */
  --blue:oklch(54% 0.19 260); --blue-ink:oklch(47% 0.18 262); --blue-soft:oklch(96.5% 0.028 260); --blue-line:oklch(86% 0.07 260);
  --orange:oklch(64% 0.16 52); --orange-ink:oklch(58% 0.16 50);
  --setup:oklch(56% 0.14 150);
  --oos-bg:oklch(94.5% 0.004 258); --oos-ink:oklch(52% 0.012 258);
  --ok:oklch(60% 0.19 150); --ok-ink:oklch(40% 0.13 150); --ok-soft:oklch(94% 0.07 150);
  --no:oklch(57% 0.22 27); --no-ink:oklch(45% 0.18 27); --no-soft:oklch(95.5% 0.04 27);
  --warn:oklch(76% 0.17 80); --warn-ink:oklch(52% 0.13 70); --warn-soft:oklch(95% 0.07 82);
  --accent:oklch(53% 0.16 248); --accent-ink:oklch(40% 0.16 248);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px oklch(40% 0.02 258 / .06), 0 8px 24px oklch(40% 0.02 258 / .07);
  --dur-fast:150ms; --dur:280ms; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;
  background:linear-gradient(var(--bg-grid) 1px,transparent 1px) 0 0/100% 30px,
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px) 0 0/30px 100%,var(--bg);}
.shell{max-width:1180px;margin:0 auto;padding:clamp(12px,2.4vw,26px)}
a{color:var(--accent-ink)}
[hidden]{display:none!important}
/* visually hidden live region — announced, never seen */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- sticky zone: header + stale banner pin together ---- */
.sticky-zone{position:sticky;top:0;z-index:40;margin-bottom:12px}
header.app{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  background:oklch(100% 0 0 / .86);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}
.brandblock .t{margin:0;font-family:var(--mono);font-weight:800;letter-spacing:-.01em;font-size:16px;text-transform:uppercase}
.brandblock .s{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.lamp{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--surface);white-space:nowrap}
.lamp .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-faint)}
/* freshness pill — the page's single trust signal, driven by receivedAt age */
.fresh-pill .dot{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.fresh-pill.aging{background:var(--warn-soft);border-color:oklch(85% 0.1 82);color:var(--warn-ink)}
.fresh-pill.aging .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.fresh-pill.stale{background:var(--warn-soft);border-color:oklch(78% 0.12 82);color:var(--warn-ink);font-weight:700}
.fresh-pill.stale .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);animation:agepulse 1.6s var(--ease) infinite}
@keyframes agepulse{0%,100%{opacity:1}50%{opacity:.4}}

/* stale banner — appears only when data age > 5 min */
#staleBanner{display:none;margin-top:8px} #staleBanner.show{display:block}
.stale-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:var(--warn-soft);border:1px solid oklch(85% 0.1 82);color:var(--warn-ink);border-radius:10px;padding:8px 13px;
  font-family:var(--mono);font-size:12px;font-weight:600;box-shadow:var(--shadow)}
.stale-inner .ico{font-size:14px}
/* dim the board while stale so it can't be mistaken for live data (sticky zone stays crisp) */
body.stale .stats,body.stale .jump,body.stale .prem-note,body.stale .section,body.stale .foot{
  opacity:.55;filter:saturate(.4);transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}

/* stats strip */
.stats{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);margin-bottom:10px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.stats b{color:var(--ink);font-size:14px}
.stats .dim{color:var(--ink-faint);font-size:11px}
.stat-hero{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;font-weight:700;letter-spacing:.01em;
  border:1px solid transparent;border-radius:999px;padding:4px 13px}
.stat-hero b{font-size:21px;letter-spacing:-.01em}
.stat-hero.in0{background:var(--surface-2);border-color:var(--line);color:var(--ink-soft)}
.stat-hero.in0 b{color:var(--no-ink)}
.stat-hero.in1{background:var(--ok-soft);border-color:oklch(82% 0.1 150);color:var(--ok-ink)}
.stat-hero.in1 b{color:var(--ok-ink)}
.stat-sub{font-size:12px}.stat-sub b{font-size:14px}

/* datacenter jump chips — scroll landmarks for the ~37-card wall */
.jump{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.jchip{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;white-space:nowrap;text-decoration:none;transition:var(--dur-fast)}
.jchip:hover{border-color:var(--line-strong);color:var(--ink)}
.jchip:focus-visible,.buy:focus-visible,.foot a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.prem-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:14px}
.prem-note .ico{color:var(--blue-ink);flex:none}

/* datacenter group */
.dc-group{margin-bottom:20px;scroll-margin-top:120px}
.dc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.dc-card{display:flex;align-items:center;gap:11px;border:1px solid var(--blue-line);border-radius:12px;padding:9px 14px;box-shadow:var(--shadow);background:linear-gradient(180deg,var(--blue-soft),var(--surface))}
.dc-card .flag{font-size:22px;line-height:1;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:4px 7px}
.dc-city{font-weight:700;font-size:14px}
.dc-country{font-size:11.5px;color:var(--ink-soft)}
.rp-badge{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--blue-ink);background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:999px;padding:5px 12px}
.dc-count{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* generation card */
.gen-group{margin:0 0 14px}
.gen-card{display:inline-flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 13px;margin-bottom:10px;max-width:100%;box-shadow:var(--shadow)}
.epyc{display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:8px;line-height:1.1;letter-spacing:.08em;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:6px;padding:5px 6px;text-align:center}
.gen-code{font-family:var(--mono);font-weight:800;font-size:13px}
.gen-series{font-size:11px;color:var(--ink-soft)}
.gen-count{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-left:4px}

/* plan cards — public variant: wall min 170px (2-up from 390), hero min 240px */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px}
.grid-in{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px 13px 17px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.pcard:hover{transform:translateY(-2px)}
/* status-coded left edge — calm/muted OUT, loud green IN, neutral grey checking */
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-strong)}
.pcard.s-out::before{background:oklch(72% 0.13 27)}
.pcard.s-checking::before{background:var(--ink-faint)}   /* neutral — never amber/red publicly */
.pcard.s-in::before{background:var(--ok)}
.pcard.s-in{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok-soft),0 14px 34px oklch(60% 0.18 150 / .2);background:linear-gradient(180deg,var(--ok-soft),var(--surface))}
/* status hero — the dominant, first-read element on every card */
.pstatus{margin:-1px 0 11px}
.oos,.unk,.instockpill{display:block;text-align:center;font-family:var(--mono);font-weight:800;font-size:14px;
  line-height:1.1;letter-spacing:.045em;text-transform:uppercase;border-radius:9px;padding:9px 8px;white-space:nowrap}
.oos{color:var(--no-ink);background:var(--no-soft);border:1px solid oklch(89% 0.05 27)}
.unk{color:var(--ink-soft);background:var(--surface-2);border:1px dashed var(--line-strong)}
.instockpill{color:#fff;background:linear-gradient(180deg,oklch(64% 0.2 150),var(--ok));border:1px solid var(--ok-ink);box-shadow:0 5px 16px oklch(60% 0.18 150 / .32)}
.phead{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap}
.pname{font-family:var(--mono);font-weight:700;font-size:11.5px;color:var(--orange-ink);letter-spacing:-.005em;overflow-wrap:anywhere}
.popular{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--blue-ink);background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:999px;padding:2px 7px;white-space:nowrap}
.ctxline{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:4px}
.price{margin-top:6px;font-family:var(--mono);display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}
.price .cur{font-size:11px;color:var(--ink-soft)}
.price .num{font-size:15px;font-weight:700;color:var(--blue-ink);letter-spacing:-.01em}
.price .unit{font-size:10px;color:var(--ink-soft);font-weight:700}
.price .per{font-size:10px;color:var(--ink-faint);margin-left:2px}
.specs{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--ink-faint)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.since{font-family:var(--mono);font-size:10.5px;color:var(--ok-ink);font-weight:600}
.since.out{color:var(--ink-faint);font-weight:400}   /* quiet muted line, render-if-present */
.buy{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:800;font-size:11.5px;background:var(--ok);color:#fff;border:none;border-radius:8px;padding:8px 12px;text-decoration:none}
.buy:hover{filter:brightness(1.06)}

/* sections */
.section{margin-bottom:16px}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 2px 12px}
.sec-title{font-family:var(--mono);font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.sec-badge{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--surface);color:var(--ink-soft);white-space:nowrap}
.empty{text-align:center;color:var(--ink-soft);font-family:var(--mono);font-size:12.5px;padding:22px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;color:var(--ink-soft);font-size:12.5px}
.foot p{margin:.35rem 0;max-width:74ch}
.foot .tiny{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* dev-only "demo data" chip (?demo=1 — no UI entry point) */
.demochip{position:fixed;right:14px;bottom:14px;z-index:60;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--ink-faint);background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:999px;padding:6px 11px;box-shadow:var(--shadow)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .pcard,.fresh-pill.stale .dot{animation:none!important;transition:none!important}
  .pcard:hover{transform:none}
}