/*
 * T507 — the public status page's styles: the approved picture's (v10 direction B, t507 pictures v1, owner 2026-11-09),
 * on the BUYER palette. "Slow" uses the buyer-only --slow tokens (owner, 2026-11-09). Every colour is a `var(--token)` from buyer.css (packages/ui/generated/buyer.css, uploaded beside
 * this file by Terraform), never a new hex. The tabs copy the buyer's `.result-tabs` / `.result-tab`
 * (apps/buyer/app/globals.css); the fonts are the buyer's own files.
 */
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
body { color: var(--ink); font-family: "Inter Tight", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
.sp { max-width: 720px; margin: 0 auto; min-height: 100vh; }
a { color: inherit; }

.logo { font-weight: 800; letter-spacing: -.035em; white-space: nowrap; color: var(--ink); font-size: 21px; }
.logo .b { color: var(--brand-mark); }
.wm-o { position: relative; display: inline-block; font-size: 1.24em; line-height: 1; }
.wm-o > span { position: absolute; left: 0; top: 0; color: var(--brand-mark); clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); }
.sp-time { font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-k { font: 500 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.past-k { margin-top: 4px; }

.pub-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; }
.result-tabs { display: flex; gap: 4px; padding: 0 8px; border-bottom: .5px solid var(--mist); }
.rt { background: transparent; border: none; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--slate); text-decoration: none; border-bottom: 1.5px solid transparent; margin-bottom: -.5px; min-height: 44px; display: inline-flex; align-items: center; transition: color .15s, border-color .15s; }
.rt.active { color: var(--ink); border-bottom-color: var(--amber); }
.rt:hover:not(.active) { color: var(--ink); }
.rt:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.pub-body { padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 14px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--forest-soft); color: var(--forest); }
.pill.bad { background: var(--brick-soft); color: var(--brick); }
.pill.warn { background: var(--slow-soft); color: var(--slow-deep); }
.pill.grey { background: var(--tile); color: var(--muted); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; margin-top: 5px; }
.dot.ok { background: var(--forest); } .dot.bad { background: var(--brick); } .dot.warn { background: var(--slow); } .dot.grey { background: var(--mist); }

.hero { border-radius: 14px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; border: .5px solid; }
.hero.ok { background: var(--forest-soft); border-color: var(--forest-line); }
.hero.bad { background: var(--brick-soft); border-color: var(--brick-line); }
.hero.warn { background: var(--slow-soft); border-color: var(--mist); }
.hero.grey { background: var(--paper); border-color: var(--line); }
.hero-h { font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.hero.ok .hero-h { color: var(--forest); } .hero.bad .hero-h { color: var(--brick); } .hero.warn .hero-h { color: var(--slow-deep); } .hero.grey .hero-h { color: var(--slate); }
.hero p { margin: 4px 0 0; font-size: 13.5px; color: var(--slate); }

.card { background: var(--paper); border: .5px solid var(--mist); border-radius: 14px; overflow: hidden; }
.rowB { padding: 14px 16px; } .rowB + .rowB { border-top: .5px solid var(--line); }
.rowB-top { display: flex; align-items: center; gap: 8px; }
.row-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }
.row-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.bars { display: flex; gap: 1.5px; height: 26px; margin-top: 8px; }
.bars i { flex: 1; border-radius: 1.5px; background: var(--forest); opacity: .85; }
.bars i.s { background: var(--slow); opacity: 1; } .bars i.d { background: var(--brick); opacity: 1; } .bars i.n { background: var(--mist); opacity: 1; }
.bars-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }

.inc { padding: 16px; }
.inc-h { font-weight: 700; font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.tl { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tl li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; font-size: 13.5px; color: var(--slate); overflow-wrap: anywhere; }
.tl b { color: var(--ink); font-weight: 600; }
.tl .who { display: block; font: 500 10.5px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }

.past div { padding: 12px 16px; font-size: 13.5px; } .past > div + div { border-top: .5px solid var(--line); }
.past .t { font-weight: 600; padding: 0; } .past .m { color: var(--muted); font-size: 12.5px; padding: 0; }
.foot { text-align: center; font-size: 12px; color: var(--muted); padding-top: 4px; }