/* Mission control — Solid Two Studio's own surface.
 *
 * The brand kit, applied: graphite ground #0E1217, warm paper type #F2EEE6, and Signal
 * #FFC93C as the single accent. Type is the studio site's three faces, self-hosted
 * (Archivo for anything that carries weight, Inter for prose, JetBrains Mono for every
 * hostname, label and number).
 *
 * Two rules the whole page obeys:
 *
 * 1. **Signal is never a status.** The accent marks the studio tile, focus rings and the
 *    one thing you can click. Health has its own four hues — live #3FC79A, protected
 *    #F0B429, error #FF7A66, down #FF5F52, and grey for "not built / not checked" — and
 *    every one of them is a dot *and* a word, so the page survives colourblindness, a
 *    phone in sunlight, and a greyscale print.
 * 2. **Depth comes from one step, not from shadows.** ground → surface → inset, each one
 *    line lighter, with a hairline between. No glow, no gradient on data.
 *
 * Layout is mobile-first; every media query adds, never subtracts.
 */

/* ── faces ────────────────────────────────────────────────────────────────── */
@font-face { font-family: Archivo; src: url(/static/Archivo.woff2) format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: InterVar; src: url(/static/Inter.woff2) format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: JetBrainsMonoVar; src: url(/static/JetBrainsMono.woff2) format('woff2');
  font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;

  /* ground */
  --ground:    #080B0E;
  --surface:   #0E1217;
  --raised:    #141A21;
  --inset:     #11161C;
  --line:      rgba(242,238,230,.085);
  --line-firm: rgba(242,238,230,.15);

  /* type */
  --text:      #F2EEE6;
  --text-2:    #9AA6B4;
  --text-3:    #7C8794;

  /* the one accent */
  --signal:    #FFC93C;
  --signal-dim:#5C4710;

  /* health — four hues, each with a 12%-alpha wash for its own chip */
  --live:      #3FC79A;  --live-bg:      rgba(63,199,154,.11);  --live-ln:      rgba(63,199,154,.30);
  --protected: #F0B429;  --protected-bg: rgba(240,180,41,.11);  --protected-ln: rgba(240,180,41,.30);
  --error:     #FF7A66;  --error-bg:     rgba(255,122,102,.12); --error-ln:     rgba(255,122,102,.32);
  --down:      #FF5F52;  --down-bg:      rgba(255,95,82,.12);   --down-ln:      rgba(255,95,82,.34);
  --idle:      #78838F;  --idle-bg:      rgba(120,131,143,.10); --idle-ln:      rgba(120,131,143,.26);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;

  --display: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body: InterVar, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: JetBrainsMonoVar, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--text);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }

/* Numbers never jitter between refreshes. */
.num, .stat-v, .s-ms, .v-big { font-variant-numeric: tabular-nums; }

/* ── header ───────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; }
header {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px calc(11px) 16px;
  padding-top: calc(11px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: rgba(14,18,23,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
/* mark.svg already carries the Signal tile and its 112/512 (22%) radius; the element just
   matches that radius at its own size so the corners don't double up. */
header .mark { height: 30px; width: 30px; flex: none; border-radius: 7px; }
header .lockup { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
header h1 {
  font: 800 15px/1.1 var(--display); letter-spacing: -.015em;
  font-variation-settings: 'wdth' 112; white-space: nowrap;
}
header .sub {
  font: 400 9.5px/1.1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
header .spacer { flex: 1; }

button.ghost {
  background: var(--raised); border: 1px solid var(--line-firm); color: var(--text-2);
  border-radius: 999px; height: 36px; padding: 0 13px;
  font: 500 12.5px/1 var(--body); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, color .15s, background .15s;
}
button.ghost:hover { border-color: var(--text-3); color: var(--text); background: #182029; }
button.ghost:disabled { opacity: .55; cursor: default; }
button.ghost svg { width: 14px; height: 14px; flex: none; }
button.primary {
  background: var(--signal); color: #241A00; border: none; border-radius: var(--r-md);
  height: 46px; padding: 0 20px; font: 700 15px/1 var(--display); cursor: pointer; width: 100%;
}
button.primary:disabled { opacity: .6; cursor: default; }

main {
  flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 16px max(14px, env(safe-area-inset-left)) 56px max(14px, env(safe-area-inset-right));
}
footer {
  border-top: 1px solid var(--line); padding: 18px 16px 28px;
  color: var(--text-3); font: 400 11.5px/1.6 var(--mono); text-align: center;
}

.banner {
  background: var(--error-bg); border: 1px solid var(--error-ln); color: #FFC3B6;
  border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
}

/* ── 1. the verdict: one screen answers "is everything OK?" ───────────────── */
.overview {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; margin-bottom: 12px;
}
.verdict { display: flex; align-items: center; gap: 14px; padding: 18px 18px 17px; }
/* A ring, not a filled blob: it reads as a state indicator rather than decoration, and it
   still says which state in the word beside it. */
.verdict .ring {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  border: 3px solid var(--idle); position: relative;
}
.verdict .ring::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--idle);
}
.verdict.ok .ring { border-color: var(--live-ln); }
.verdict.ok .ring::after { background: var(--live); }
.verdict.bad .ring { border-color: var(--down-ln); }
.verdict.bad .ring::after { background: var(--down); }
.verdict .v-text { min-width: 0; }
.verdict .v-big {
  font: 800 25px/1.12 var(--display); letter-spacing: -.028em;
  font-variation-settings: 'wdth' 108;
}
.verdict.bad .v-big { color: var(--down); }
.verdict .v-sub {
  color: var(--text-2); font: 400 12.5px/1.45 var(--body); margin-top: 3px;
  overflow-wrap: anywhere;
}
.verdict .v-sub code { font: 400 11.5px/1.45 var(--mono); color: var(--text); }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.stat {
  padding: 11px 14px 12px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.stats .stat:nth-child(-n+2) { border-top: none; }
.stats .stat:nth-child(2n) { border-right: none; }
.stat .stat-k {
  font: 400 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
}
.stat .stat-v {
  font: 700 19px/1.15 var(--display); letter-spacing: -.02em; margin-top: 6px;
}
.stat .stat-s { color: var(--text-3); font: 400 11px/1.35 var(--body); margin-top: 2px; }

/* ── 2. the portfolio grid: ten tiles, worst status each ──────────────────── */
.section-head {
  display: flex; align-items: center; gap: 10px; margin: 20px 2px 9px;
}
.section-head h2 {
  font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.section-head .rule { flex: 1; height: 1px; background: var(--line); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ptile {
  position: relative; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 11px 10px 15px; overflow: hidden; color: inherit; font: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.ptile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--idle);
}
.ptile.live::before      { background: var(--live); }
.ptile.protected::before { background: var(--protected); }
.ptile.error::before     { background: var(--error); }
.ptile.down::before      { background: var(--down); }
.ptile:hover { border-color: var(--line-firm); background: var(--raised); }
.ptile:active { transform: scale(.985); }
.ptile .t-name {
  font: 700 13.5px/1.25 var(--display); letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptile .t-meta {
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  font: 400 10.5px/1 var(--mono); color: var(--text-3); white-space: nowrap;
}
.ptile .t-word { text-transform: uppercase; letter-spacing: .07em; }
.ptile.live .t-word      { color: var(--live); }
.ptile.protected .t-word { color: var(--protected); }
.ptile.error .t-word     { color: var(--error); }
.ptile.down .t-word      { color: var(--down); }
.ptile .t-n { margin-left: auto; color: var(--text-3); }

/* The shared status dot. These are deliberately *not* written as `.error .dot` — a card
   whose worst state is error carries class `error`, and an ancestor rule would then repaint
   every healthy surface dot inside it red. Each dot is coloured by its own class, or by the
   one component that owns it. */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--idle); flex: none; }
.dot.live      { background: var(--live); }
.dot.protected { background: var(--protected); }
.dot.error     { background: var(--error); }
.dot.down      { background: var(--down); }

.badge.live .dot      { background: var(--live); }
.badge.protected .dot { background: var(--protected); }
.badge.error .dot     { background: var(--error); }
.badge.down .dot      { background: var(--down); }

.ptile.live .dot      { background: var(--live); }
.ptile.protected .dot { background: var(--protected); }
.ptile.error .dot     { background: var(--error); }
.ptile.down .dot      { background: var(--down); }

/* ── 3. the tab bar ───────────────────────────────────────────────────────────
   One tab per project. On a phone it scrolls sideways rather than wrapping to three
   rows: a tab set that reflows is a tab set whose positions you can't learn. Each tab
   carries its project's health dot so the bar itself is a status readout. */
.tabbar {
  background: rgba(8,11,14,.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.tabs {
  display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
  max-width: 1240px; margin: 0 auto;
  /* Eleven tabs don't fit at 1280px either, so the bar scrolls on every width. The mask
     fades the last one out instead of guillotining it, which is the only cue that there
     is more to the right — a cut-off glyph reads as a bug. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; cursor: pointer;
  background: none; border: none; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
  /* 44px of target: this is the control a thumb uses most on this page. */
  height: 44px; padding: 0 11px;
  font: 500 13px/1 var(--body); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--signal); }
.tab .tab-t { letter-spacing: -.005em; }
.tab .tab-n {
  font: 400 10px/1 var(--mono); color: var(--text-3);
  background: rgba(242,238,230,.06); border-radius: 999px; padding: 3px 5px;
}
.tab.on .tab-n { background: rgba(255,201,60,.13); color: var(--signal); }

/* ── a project's header block ─────────────────────────────────────────────── */
.phead {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 15px 14px 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
}
.phead::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--idle);
}
.phead.live::before      { background: var(--live); }
.phead.protected::before { background: var(--protected); }
.phead.error::before     { background: var(--error); }
.phead.down::before      { background: var(--down); }
.phead.sealed { background: #0D1014; }
.phead.unmapped { border-color: var(--signal-dim); }
.phead-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.p-name {
  font: 700 20px/1.15 var(--display); letter-spacing: -.025em;
  font-variation-settings: 'wdth' 106;
}
.phead-top .badge { flex: none; }
.p-dom {
  font: 400 11px/1 var(--mono); color: var(--text-3); margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.phead-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font: 400 10.5px/1.4 var(--mono); color: var(--text-3);
}
.chev {
  flex: none; width: 15px; height: 15px; color: var(--text-3);
  transition: transform .18s ease;
}
.sh-x {
  font: 400 10px/1 var(--mono); letter-spacing: .06em; color: var(--text-3);
  white-space: nowrap;
}

/* status badge — dot + word, always both */
.badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 8px 4px 6px;
  background: var(--idle-bg); border: 1px solid var(--idle-ln); color: var(--text-2);
}
.badge.live      { background: var(--live-bg);      border-color: var(--live-ln);      color: var(--live); }
.badge.protected { background: var(--protected-bg); border-color: var(--protected-ln); color: var(--protected); }
.badge.error     { background: var(--error-bg);     border-color: var(--error-ln);     color: var(--error); }
.badge.down      { background: var(--down-bg);      border-color: var(--down-ln);      color: var(--down); }

.p-inner { padding: 0 14px 12px 17px; display: flex; flex-direction: column; gap: 11px; }
.blurb { color: var(--text-2); font: 400 12.5px/1.5 var(--body); max-width: 62ch; }
.note {
  color: var(--signal); font: 400 12px/1.45 var(--body);
  border-left: 2px solid var(--signal-dim); padding-left: 10px;
}
.host-sum {
  font: 400 10.5px/1.4 var(--mono); color: var(--text-3);
  letter-spacing: .02em;
}

/* ── surfaces, as an accordion ─────────────────────────────────────────────
   The collapsed row is Phase 1's line, unchanged, so the scan still reads the same.
   Everything added is behind the disclosure, which is the point: the "why" is a
   question you ask about one surface, not a wall of text about forty-two. */
.surfaces {
  list-style: none; background: var(--inset);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.surf { border-top: 1px solid var(--line); }
.surfaces > .surf:first-child { border-top: none; }
.surf > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; min-height: 44px;
}
.surf > summary::-webkit-details-marker { display: none; }
.surf > summary:hover { background: rgba(242,238,230,.025); }
.surf[open] > summary { background: rgba(242,238,230,.03); }
.surf[open] > summary .s-chev { transform: rotate(90deg); }
.surf > summary > .dot { margin-top: 6px; }
.surf .s-chev { margin-top: 3px; width: 13px; height: 13px; }
.surf .s-body { min-width: 0; flex: 1; }
.surf .s-host {
  font: 500 12.5px/1.35 var(--mono); color: var(--text); overflow-wrap: anywhere;
  letter-spacing: -.01em;
}
.surf .s-host .alias { color: var(--text-3); font-weight: 400; }
.surf .s-label { color: var(--text-2); font: 400 11.5px/1.4 var(--body); margin-top: 2px; }
.surf .s-where {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 5px;
}
/* The host badge is deliberately colourless. Where a thing is served from is not a health
   signal, and giving it a hue would put two meanings on one channel. */
.surf .hb {
  font: 500 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-2); background: rgba(242,238,230,.055);
  border: 1px solid var(--line); border-radius: 5px; padding: 3.5px 6px; flex: none;
}
.surf .s-detail { font: 400 10.5px/1.45 var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.surf .s-note { font: 400 11px/1.4 var(--body); color: var(--text-3); margin-top: 4px; }
.surf .s-right { text-align: right; flex: none; padding-left: 2px; }
.surf .s-ms { font: 500 12.5px/1.2 var(--mono); color: var(--text); white-space: nowrap; }
.surf .s-ms small { font-size: 9.5px; color: var(--text-3); margin-left: 1px; }
.surf .s-ms.slow { color: var(--protected); }
.surf .s-word {
  display: block; margin-top: 3px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
}
.surf.live .s-word      { color: var(--live); }
.surf.protected .s-word { color: var(--protected); }
.surf.error .s-word     { color: var(--error); }
.surf.down .s-word      { color: var(--down); }
.surf.iso { background: rgba(255,201,60,.025); }

/* ── the expanded half: why this surface is the colour it is ──────────────── */
.s-open {
  padding: 2px 12px 13px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.why {
  background: var(--raised); border: 1px solid var(--line);
  border-left: 2px solid var(--idle);
  border-radius: var(--r-sm); padding: 10px 12px;
}
/* The border keys to the *reason*, not to the status: a protected 401 and a not-built
   zone are both amber-by-design, and a red one is red because something is wrong. */
.why.by-design { border-left-color: var(--protected); }
.why.error     { border-left-color: var(--error); }
.why.down      { border-left-color: var(--down); }
.why.live      { border-left-color: var(--live); }
.why-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.why-k {
  font: 500 9px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); flex: none;
}
.why.by-design .why-k { color: var(--protected); }
.why-h {
  font: 600 13px/1.4 var(--body); color: var(--text); letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.why-d {
  color: var(--text-2); font: 400 12.5px/1.55 var(--body); margin-top: 6px;
  max-width: 68ch;
}
.facts {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}
.facts dt {
  font: 400 9.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.facts dd {
  font: 400 11px/1.6 var(--mono); color: var(--text-2); overflow-wrap: anywhere;
  min-width: 0;
}
.why-fix {
  display: flex; gap: 8px; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line);
  font: 400 12px/1.5 var(--body); color: var(--text-2);
}
.why-fix-k {
  font: 500 9px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); flex: none;
}

/* the last few checks, as pips — a shape you read in one glance */
.hist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-k, .hist-s {
  font: 400 9.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--text-3);
}
.hist-k { text-transform: uppercase; }
.hist-line { display: flex; gap: 3px; }
.pip { width: 7px; height: 14px; border-radius: 2px; background: var(--idle); }
.pip.live { background: var(--live); } .pip.protected { background: var(--protected); }
.pip.error { background: var(--error); } .pip.down { background: var(--down); }
.s-stamp { font: 400 9.5px/1.4 var(--mono); color: var(--text-3); }

/* ── activity: build-agent reports, file changes, status history ──────────── */
.act-inner { display: flex; flex-direction: column; gap: 9px; }
.act-loading, .empty {
  font: 400 12px/1.5 var(--body); color: var(--text-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
}
.act-src { font: 400 10px/1.5 var(--mono); color: var(--text-3); padding: 0 2px; }
.logs {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.log { border-top: 1px solid var(--line); }
.logs > .log:first-child { border-top: none; }
.log > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; min-height: 44px;
}
.log > summary::-webkit-details-marker { display: none; }
.log > summary:hover { background: var(--raised); }
.log[open] > summary .s-chev { transform: rotate(90deg); }
.log-date {
  font: 500 10px/1.7 var(--mono); color: var(--text-3); flex: none;
  width: 44px; letter-spacing: .02em;
}
.log-t { min-width: 0; flex: 1; }
.log-title {
  font: 500 12.5px/1.4 var(--body); color: var(--text); overflow-wrap: anywhere;
}
.log-out {
  font: 400 11.5px/1.45 var(--body); color: var(--text-3); margin-top: 2px;
  overflow-wrap: anywhere;
}
.log-flag {
  font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--protected); background: var(--protected-bg);
  border: 1px solid var(--protected-ln); border-radius: 5px; padding: 3.5px 6px;
  flex: none; margin-top: 2px;
}
.log-body { padding: 0 12px 12px 12px; }
.log-pre {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; margin: 0;
  font: 400 11.5px/1.65 var(--mono); color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  /* The reports are markdown written for a chat window, so their paragraphs are single
     very long lines. Unbounded on a 1280px screen that is a 190-character measure. */
  max-width: 104ch;
  max-height: 420px; overflow-y: auto;
}
.log-meta { font: 400 9.5px/1.5 var(--mono); color: var(--text-3); margin-top: 6px; }

details.sub {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
details.sub > summary {
  list-style: none; cursor: pointer; padding: 11px 13px; min-height: 42px;
  display: flex; align-items: center;
  font: 400 11.5px/1 var(--mono); letter-spacing: .03em; color: var(--text-3);
}
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary:hover { color: var(--text); }
details.sub[open] > summary { color: var(--text-2); border-bottom: 1px solid var(--line); }
details.sub .act-src { padding: 0 13px 11px; }
ul.changes { list-style: none; }
ul.changes li {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 13px;
  border-top: 1px solid var(--line);
}
ul.changes li:first-child { border-top: none; }
.ch-path {
  font: 400 11px/1.4 var(--mono); color: var(--text-2);
  overflow-wrap: anywhere; min-width: 0; flex: 1;
}
.ch-at { font: 400 10px/1.4 var(--mono); color: var(--text-3); flex: none; }
.ch-state {
  font: 500 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); flex: none;
}
.ch-state.live { color: var(--live); } .ch-state.protected { color: var(--protected); }
.ch-state.error { color: var(--error); } .ch-state.down { color: var(--down); }
.hist-list li .dot { align-self: center; }

/* ── suggestions ──────────────────────────────────────────────────────────── */
ul.sugs {
  list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.sug { padding: 12px 14px; border-top: 1px solid var(--line); }
ul.sugs > .sug:first-child { border-top: none; }
.sug-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sug-sev {
  font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  border-radius: 5px; padding: 4px 6px; flex: none;
  background: var(--idle-bg); border: 1px solid var(--idle-ln); color: var(--text-2);
}
.sev-critical .sug-sev { background: var(--down-bg); border-color: var(--down-ln); color: var(--down); }
.sev-high .sug-sev { background: var(--error-bg); border-color: var(--error-ln); color: var(--error); }
.sev-medium .sug-sev { background: var(--protected-bg); border-color: var(--protected-ln); color: var(--protected); }
.sug-t {
  font: 600 13px/1.4 var(--body); color: var(--text); overflow-wrap: anywhere;
  letter-spacing: -.005em;
}
.sug-p {
  margin-left: auto; font: 400 10px/1.4 var(--mono); color: var(--text-3); flex: none;
}
.sug-d { font: 400 12.5px/1.55 var(--body); color: var(--text-2); margin-top: 5px; max-width: 70ch; }
.sug-b {
  display: flex; gap: 7px; margin-top: 7px;
  font: 400 10.5px/1.5 var(--mono); color: var(--text-3); overflow-wrap: anywhere;
}
.sug-b-k {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; flex: none;
  line-height: 1.7;
}

/* ── this box: storage, stress, capacity ──────────────────────────────────── */
.bx {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.bx-grid { display: grid; grid-template-columns: 1fr; }
.bx-cell { padding: 12px 15px; border-top: 1px solid var(--line); }
.bx-grid > .bx-cell:first-child { border-top: none; }
.bx-k {
  font: 400 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
}
.bx-v {
  font: 700 19px/1.15 var(--display); letter-spacing: -.02em; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.bx-s { color: var(--text-3); font: 400 10.5px/1.45 var(--mono); margin-top: 5px; }
.meter {
  height: 5px; border-radius: 3px; background: rgba(242,238,230,.07);
  margin-top: 8px; overflow: hidden;
}
.meter-f { display: block; height: 100%; border-radius: 3px; background: var(--idle); }
.meter-f.ok { background: var(--live); }
.meter-f.warn { background: var(--protected); }
.meter-f.bad { background: var(--down); }

.fcast { padding: 13px 15px 14px; border-top: 1px solid var(--line-firm); background: var(--inset); }
.fc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fc-k {
  font: 400 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
}
/* The provenance tag is not decoration. A date from a two-week fit and a date from four
   hours of samples look identical until one of them says so. */
.fc-tag {
  font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border-radius: 5px; padding: 4px 6px;
  background: var(--idle-bg); border: 1px solid var(--idle-ln); color: var(--text-3);
}
.fc-measured .fc-tag { background: var(--live-bg); border-color: var(--live-ln); color: var(--live); }
.fc-early .fc-tag { background: var(--protected-bg); border-color: var(--protected-ln); color: var(--protected); }
.fc-big {
  font: 700 18px/1.25 var(--display); letter-spacing: -.022em; margin-top: 7px;
}
.fc-d { font: 400 12px/1.55 var(--body); color: var(--text-2); margin-top: 6px; max-width: 70ch; }
.fc-s { font: 400 9.5px/1.5 var(--mono); color: var(--text-3); margin-top: 7px; }
.bx-notes { list-style: none; border-top: 1px solid var(--line); }
.bx-notes li {
  font: 400 11.5px/1.5 var(--body); color: var(--protected);
  padding: 9px 15px; border-top: 1px solid var(--line);
}
.bx-notes li:first-child { border-top: none; }
.bx-foot {
  font: 400 10px/1.5 var(--mono); color: var(--text-3);
  padding: 10px 15px; border-top: 1px solid var(--line);
}

/* a clickable hostname in the verdict line */
.v-jump {
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: left; border-radius: 3px;
}
.v-jump:hover { text-decoration: underline; }

/* ── the coming-soon seam: one quiet line, not a box on every card ────────── */
.seam {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 2px;
}
#panel > .seam {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}
.surf { scroll-margin-top: 120px; }
.seam button.soon {
  background: none; border: 1px dashed var(--line-firm); color: var(--text-3);
  border-radius: 999px; height: 28px; padding: 0 11px;
  font: 400 11px/1 var(--mono); letter-spacing: .03em; cursor: default;
}
.seam button.soon:hover { color: var(--text-2); border-color: var(--text-3); }
.seam .soon-link {
  background: none; border: none; color: var(--text-3); height: 28px; padding: 0 8px;
  font: 400 11px/1 var(--mono); letter-spacing: .03em; cursor: default;
}
.seam .soon-link:hover { color: var(--text-2); }
.seam .soon-tag {
  margin-left: auto; font: 400 9.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); opacity: .8;
}
.seam.sealed-note {
  font: 400 11px/1.5 var(--mono); color: var(--text-3); letter-spacing: .01em;
  border-top: 1px solid var(--line); padding-top: 10px;
}

/* ── auth pages ───────────────────────────────────────────────────────────── */
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 24px; }
.auth {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 34px 28px; width: 100%; max-width: 390px; text-align: center;
}
.auth .mark {
  width: 56px; height: 56px; border-radius: 12px; margin: 0 auto 20px; display: block;
}
.auth h1 {
  font: 800 22px/1.2 var(--display); letter-spacing: -.025em; margin-bottom: 9px;
  font-variation-settings: 'wdth' 110;
}
.auth p { color: var(--text-2); font: 400 13.5px/1.55 var(--body); margin-bottom: 22px; }
.msg { margin-top: 15px; font: 400 12.5px/1.45 var(--mono); color: var(--text-2); min-height: 18px; }
.msg.err { color: var(--down); }
.msg.ok { color: var(--live); }

/* ── wider ────────────────────────────────────────────────────────────────── */
/* Phone only: the Refresh label goes, the icon stays (the button keeps its name for a
   screen reader), and the masthead stops wrapping onto two lines at 390px. */
@media (max-width: 519px) {
  #refresh .t { display: none; }
  #refresh { padding: 0 11px; }
  .verdict { padding: 15px 16px 14px; gap: 12px; }
  .verdict .ring { width: 38px; height: 38px; }
  .verdict .ring::after { inset: 8px; }
  .verdict .v-big { font-size: 23px; }
  .stat { padding: 9px 13px 10px; }
  .stat .stat-v { font-size: 17px; margin-top: 4px; }
  .section-head { margin: 15px 2px 8px; }
  .p-name { font-size: 18px; }
  /* At 390px the domain under the name is the first thing to go — it is repeated two
     lines down in the meta row anyway. */
  .phead .p-dom { display: none; }
  .s-open { padding-left: 14px; }
  .facts { grid-template-columns: 1fr; gap: 0 0; }
  .facts dt { margin-top: 6px; }
}

@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats .stat { border-top: none; }
  .stats .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stats .stat:last-child { border-right: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .bx-grid { grid-template-columns: repeat(2, 1fr); }
  .bx-grid > .bx-cell:nth-child(-n+2) { border-top: none; }
  .bx-grid > .bx-cell:nth-child(2n) { border-left: 1px solid var(--line); }
}
@media (min-width: 760px) {
  header { padding-left: 24px; padding-right: 24px; gap: 13px; }
  header .mark { height: 34px; width: 34px; border-radius: 8px; }
  header h1 { font-size: 17px; }
  .tabs { padding-left: 20px; padding-right: 20px; }
  .tab { height: 48px; font-size: 13.5px; padding: 0 13px; }
  main { padding: 22px 24px 70px; }
  .verdict { padding: 24px 24px 22px; gap: 17px; }
  .verdict .ring { width: 50px; height: 50px; border-width: 3.5px; }
  .verdict .ring::after { inset: 11px; }
  .verdict .v-big { font-size: 31px; }
  .verdict .v-sub { font-size: 13px; }
  .stat { padding: 14px 18px 15px; }
  .stat .stat-v { font-size: 22px; }
  .grid { grid-template-columns: repeat(5, 1fr); gap: 9px; }
  .ptile { padding: 12px 13px 12px 17px; }
  .ptile .t-name { font-size: 14px; }
  .phead { padding: 18px 20px 17px 22px; }
  .p-name { font-size: 24px; }
  .bx-grid { grid-template-columns: repeat(4, 1fr); }
  .bx-grid > .bx-cell { border-top: none; border-left: 1px solid var(--line); }
  .bx-grid > .bx-cell:first-child { border-left: none; }
  .s-open { padding-left: 32px; padding-right: 16px; }
}
@media (min-width: 1180px) {
  .grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}