/* ============================================================
   BLOSSOM HOST — status page
   Rides the concept-03 tokens from styles.css. Nothing here
   redefines a colour; the palette is the site's palette.
   ============================================================ */

.st-hero{padding:clamp(3.5rem,10vh,6rem) 0 clamp(2rem,5vh,3rem); position:relative; overflow:hidden}
.st-hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(760px 380px at 15% -20%, rgba(200,255,61,.10), transparent 62%); pointer-events:none}
.st-hero .wrap{position:relative; z-index:2}

.st-banner{display:flex; align-items:center; gap:16px; margin:18px 0 10px}
.st-banner h1{font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.95;
  font-size:clamp(1.9rem,5.4vw,3.6rem); letter-spacing:-.02em}
.st-led{width:16px; height:16px; border-radius:50%; flex:0 0 auto; background:var(--muted)}
.st-banner[data-state="ok"] .st-led{background:var(--go); box-shadow:0 0 0 6px rgba(200,255,61,.14), 0 0 22px var(--go)}
.st-banner[data-state="ok"] h1{color:var(--go)}
.st-banner[data-state="degraded"] .st-led{background:var(--warn); box-shadow:0 0 0 6px rgba(255,200,61,.14); animation:blink 1s infinite}
.st-banner[data-state="degraded"] h1{color:var(--warn)}
.st-banner[data-state="down"] .st-led{background:var(--bad); box-shadow:0 0 0 6px rgba(255,84,112,.16); animation:blink .7s infinite}
.st-banner[data-state="down"] h1{color:var(--bad)}
.st-banner[data-state="loading"] .st-led{animation:blink 1.1s infinite}
.st-sub{color:var(--muted); max-width:70ch; font-size:.95rem}

.st-keys{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line);
  background:var(--ink-2); margin-top:clamp(1.8rem,4vh,2.6rem)}
.st-key{padding:clamp(18px,2.6vw,28px); border-right:1px solid var(--line)}
.st-key:last-child{border-right:0}
.st-key .k{font-family:var(--disp); font-weight:900; font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1;
  color:var(--paper); font-variant-numeric:tabular-nums}
.st-key .k em{font-style:normal; color:var(--go)}
.st-key .k small{font-size:.42em; color:var(--muted); font-family:var(--mono); font-weight:400; margin-left:.35em}
.st-key .l{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); margin-top:10px}
@media(max-width:760px){
  .st-keys{grid-template-columns:1fr 1fr}
  .st-key:nth-child(2){border-right:0}
  .st-key:nth-child(1),.st-key:nth-child(2){border-bottom:1px solid var(--line)}
}

.st-sec{padding:clamp(3.4rem,8vh,6rem) 0}
.st-loading{color:var(--muted); font-family:var(--mono); font-size:.82rem; padding:26px 0}

/* ---------- component rows ---------- */
.st-components{border:1px solid var(--line); background:var(--ink-2)}
.st-comp{padding:clamp(18px,2.4vw,26px); border-bottom:1px solid var(--line)}
.st-comp:last-child{border-bottom:0}
.st-comp-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:4px}
.st-comp-h h3{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.02rem;
  letter-spacing:-.01em}
.st-comp-h .pct{margin-left:auto; font-family:var(--mono); font-weight:700; font-size:.92rem;
  color:var(--go); font-variant-numeric:tabular-nums}
.st-comp-h .pct.dim{color:var(--muted)}
.st-comp p.blurb{color:var(--muted); font-size:.88rem; max-width:76ch; margin-bottom:16px}

.bars{display:flex; gap:2px; align-items:stretch; height:38px; margin-bottom:9px}
.bar{flex:1 1 0; min-width:2px; border-radius:2px; background:var(--go); opacity:.82;
  transition:opacity .12s, transform .12s; position:relative}
.bar:hover{opacity:1; transform:scaleY(1.06)}
.bar.minor{background:var(--go-deep)}
.bar.partial{background:var(--warn)}
.bar.down{background:var(--bad); opacity:1}
.bar.nodata{background:transparent; border:1px solid var(--line); opacity:.5}
/* Reconstructed days read as dimmer, not as a pattern. Most of the chart is
   currently reconstructed, so a hatch fill covered the whole board in stripes. */
.bar.journal{opacity:.42}
.bar.journal:hover{opacity:.72}
/* 90 bars is unreadable on a phone — drop the oldest half rather than
   squeezing them to sub-pixel widths and pretending they're legible. */
@media(max-width:720px){ .bar:nth-child(-n+45){display:none} }
@media(max-width:420px){ .bar:nth-child(-n+60){display:none} }

.bars-ax{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem;
  color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em}

.st-legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; font-family:var(--mono);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.st-legend span{display:inline-flex; align-items:center; gap:7px}
.st-legend .sw{width:11px; height:11px; border-radius:2px; display:inline-block; flex:0 0 auto}
.st-legend .sw.ok{background:var(--go)} .st-legend .sw.minor{background:var(--go-deep)}
.st-legend .sw.partial{background:var(--warn)} .st-legend .sw.down{background:var(--bad)}
.st-legend .sw.nodata{border:1px solid var(--line-2)}
.st-legend .sw.journal{background:var(--go); opacity:.42}

/* The scoreboard itself (.st-board / .st-row / .st-track) lives in styles.css:
   the landing page renders the identical component, and two copies of those
   rules is two places for them to drift. */
.st-board-sec{background:var(--ink-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- incidents ---------- */
.st-incidents{border-top:1px solid var(--line)}
.st-inc{display:grid; grid-template-columns:minmax(150px,210px) 1fr auto; gap:18px; padding:16px 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.st-inc .when{font-family:var(--mono); font-size:.76rem; color:var(--muted)}
.st-inc .what b{font-family:var(--disp-c); text-transform:uppercase; font-size:.9rem; letter-spacing:-.01em}
.st-inc .what p{color:var(--muted); font-size:.86rem; margin-top:3px}
.st-inc .dur{font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--bad); white-space:nowrap}
.st-inc.clean .dur{color:var(--go)}
@media(max-width:640px){ .st-inc{grid-template-columns:1fr; gap:4px} }

.st-method .faq{margin-top:0}