/* Public status page. Colours: the navy (marine) house-style tokens (B-089); the navy accent only as
   hairlines and markers. Self-hosted fonts only (SIL OFL, see fonts/OFL.txt); no external requests.
   Layout is mobile-first: narrow (< 640 px) is the default, then medium (640-999 px) and
   wide (>= 1000 px). The team diagram is HTML/CSS; connectors are aria-hidden boxes whose lines
   are drawn with borders and whose small arrowheads are border triangles. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/source-serif-4-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/ibm-plex-sans-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Navy tokens (the house-style theme file, B-089): page, panels, lines, text, brand accent
     (brand #16254A, deep #0E1A36, soft #2A3D6B, light brand tint #E8ECF6). */
  --bg: #F5F6F9; --surface: #FFFFFF; --tint: #E8ECF6; --line: #DCE1EC; --line-strong: #C3CADB;
  --ink: #121B30; --muted: #5B6478; --accent: #16254A; --heading: #16254A;
  --conn: #78819A;            /* connectors: >= 3:1 against bg, surface and tint */
  --s-ok: #1E8E5A; --s-info: #5B6478; --s-warn: #8A5A10; --s-down: #9B2C2C;
  --active: #B3261E; --glow-red: 179, 38, 30; --glow-wait: 22, 37, 74; --flag-ink: #16254A;
  /* Groups, as in the Dutch team chart: soft fill with a matching border. */
  --people-bg: #F6E6E2; --people-bd: #D4A39A;     /* people: warm rose */
  --ai-bg: #EDE9F5; --ai-bd: #AFA3CF;             /* AI roles: lavender */
  --env-bg: #E1EFEC; --env-bd: #86BBB1;           /* environments: teal */
  --store-bg: #EEF0F5; --store-bd: #C3CADB;       /* shared storage: neutral grey */
  /* Status labels: text colour on its soft fill, AA (>= 4.5:1) on the fill and on the surface. */
  --st-run: #24613C; --st-run-bg: #E2F0E6; --st-upd: #8A5A10; --st-upd-bg: #F8ECD4;
  --st-down: #9B2C2C; --st-down-bg: #F8E1DF; --st-unk: #5B6478; --st-unk-bg: #EEF0F5;
  --shadow: 0 1px 2px rgba(18, 27, 48, .05), 0 3px 10px -6px rgba(18, 27, 48, .14);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --g: 48px;                  /* gap column in the team, env and medium top grids */
  --pp: 12px;                 /* padding of the team panel (medium and narrow) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F141B; --surface: #171D25; --tint: #1A2440; --line: #2A333E; --line-strong: #3C4754;
    --ink: #E8ECF2; --muted: #9AA4B2; --accent: #9FB3E3; --heading: #9FB3E3;
    --conn: #7C8694;
    --s-ok: #4FC28A; --s-info: #9AA4B2; --s-warn: #F09A4A; --s-down: #E8686C;
    --active: #E5534B; --glow-red: 229, 83, 75; --glow-wait: 159, 179, 227; --flag-ink: #9FB3E3;
    --people-bg: #3A2A2A; --people-bd: #8E5F58;
    --ai-bg: #2D2A3B; --ai-bd: #7466A0;
    --env-bg: #1F3330; --env-bd: #4E8C83;
    --store-bg: #1D242E; --store-bd: #3C4754;
    --st-run: #8FD3A5; --st-run-bg: #1E3326; --st-upd: #E9BC6C; --st-upd-bg: #3A2E17;
    --st-down: #F29B93; --st-down-bg: #42221F; --st-unk: #9AA4B2; --st-unk-bg: #1D242E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px -6px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 14px/22px var(--sans); color: var(--ink); background: var(--bg); overflow-x: hidden; }
p { margin: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 32px 16px 32px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; line-height: 18px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.head { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
h1 { font: 500 clamp(28px, 4.2vw, 40px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--heading); margin: 0; }
.lede { color: var(--muted); max-width: 60ch; margin-top: 6px; }
.live { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 400 12px/18px var(--mono); color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--muted); flex: none; }
.live[data-kind="live"] .live-dot { border: 0; background: var(--s-ok); animation: pulse 2.4s ease-out infinite; }
.live[data-kind="stale"] .live-dot { border: 0; border-radius: 0; width: 6px; height: 6px; background: var(--s-warn); transform: rotate(45deg); }
.live[data-kind="stale"] { color: var(--s-warn); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 90, .35); } 70%, 100% { box-shadow: 0 0 0 6px rgba(30, 142, 90, 0); } }

/* Sections */
section { margin-top: 40px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
h2.label { display: flex; align-items: center; gap: 10px; font: 500 11px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
h2.label::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
.legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 10px; border: 1.5px solid; border-radius: 2px; }
.sw-active { border-color: var(--active); box-shadow: 0 0 5px 1px rgba(var(--glow-red), .5); }
.sw-waiting { border-color: var(--accent); box-shadow: 0 0 5px 1px rgba(var(--glow-wait), .6); }
h3 { font: 500 18px/24px var(--serif); margin: 0; }

.notice { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 14px; border: 1px solid var(--line); border-left: 2px solid var(--s-warn); background: var(--surface); color: var(--s-warn); font-weight: 500; border-radius: 4px; }
.notice[hidden] { display: none; }
.notice + .notice { margin-top: 10px; }
.notice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* Runner key notice: warn in the warning colour with a navy hairline (founders act on it);
   info (API not reachable) muted. */
.notice[data-level="warn"] { border-left-color: var(--accent); }
.notice[data-level="info"] { border-left-color: var(--s-info); color: var(--muted); font-weight: 400; }
/* Source of the runner's last run (Max subscription or API key): a quiet line, no glow. */
.source-line { margin: 10px 0 0; overflow-wrap: anywhere; }
.source-line[hidden] { display: none; }

/* ---------- Team diagram ---------- */
.org { position: relative; }
.tier { display: flex; flex-direction: column; }

.blk { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 12px 14px; }
.blk .role { font: 500 16px/21px var(--serif); color: var(--ink); overflow-wrap: break-word; }
.blk .kind { font: 400 12px/16px var(--sans); color: var(--muted); white-space: nowrap; }
.blk .sub { font-size: 12.5px; line-height: 17px; color: var(--muted); margin-top: 3px; }
.blk .sub.mono { font: 400 12px/17px var(--mono); }
.blk .sub.mono:empty { display: none; }
.blk.g-people { background: var(--people-bg); border-color: var(--people-bd); }
.blk.g-ai { background: var(--ai-bg); border-color: var(--ai-bd); }
.blk.g-env { background: var(--env-bg); border-color: var(--env-bd); }
.blk.g-store { background: var(--store-bg); border-color: var(--store-bd); }
.blk.env { border-top-color: var(--accent); }
.blk .pill { align-self: flex-start; margin-top: 6px; }
.blk .flag { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 12.5px/17px var(--sans); color: var(--flag-ink); }
.blk .flag[hidden] { display: none; }
/* Kinds of waiting under the flag (B-053): short fixed labels side by side, wrapping on small screens. */
.blk .kinds { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.blk .kinds[hidden] { display: none; }
.blk .kinds span { font: 500 11.5px/16px var(--sans); color: var(--flag-ink); padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); }
.sh-waiting { background: var(--accent); }

/* Working: a pulsing red glow on a red border (the only bright red on the page; Down uses a
   darker red). Waiting for founders: the same pulse in navy, never red. No layout shift; a
   static glow with reduced motion. */
.blk.is-active { border-color: var(--active); box-shadow: 0 0 0 1.5px var(--active), 0 0 12px 2px rgba(var(--glow-red), .4), var(--shadow); animation: glow-red 1.6s ease-in-out infinite; }
.blk.is-waiting { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px 2px rgba(var(--glow-wait), .5), var(--shadow); animation: glow-wait 2s ease-in-out infinite; }
@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--active), 0 0 3px 0 rgba(var(--glow-red), .2), var(--shadow); }
  50% { box-shadow: 0 0 0 1.5px var(--active), 0 0 18px 5px rgba(var(--glow-red), .55), var(--shadow); }
}
@keyframes glow-wait {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 3px 0 rgba(var(--glow-wait), .25), var(--shadow); }
  50% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 18px 5px rgba(var(--glow-wait), .65), var(--shadow); }
}

.working { margin-top: 18px; color: var(--muted); font-size: 12.5px; line-height: 18px; }

/* Connectors */
.cn { position: relative; flex: none; }
.cn::before, .cn::after { content: ''; position: absolute; }
.cn.v { height: 32px; }
.cn.v.short { height: 24px; }
.cn.v::before { left: calc(50% - .5px); top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.h::before { top: calc(50% - .5px); left: 0; right: 0; border-top: 1px solid var(--conn); }
.cn.v.dash::before { border-left-style: dashed; }
.cn.h.dash::before { border-top-style: dashed; }
.cn.v2 { height: 40px; }
.cn.v2::before, .cn.v2::after { top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.v2::before { left: calc(50% - 12.5px); }
.cn.v2::after { left: calc(50% + 11.5px); }

.hd { position: absolute; width: 0; height: 0; border: 4px solid transparent; }
.hd-d { bottom: 0; left: calc(50% - 4px); border-top: 6px solid var(--conn); border-bottom-width: 0; }
.hd-u { top: 0; left: calc(50% - 4px); border-bottom: 6px solid var(--conn); border-top-width: 0; }
.hd-r { right: 0; top: calc(50% - 4px); border-left: 6px solid var(--conn); border-right-width: 0; }
.hd-l { left: 0; top: calc(50% - 4px); border-right: 6px solid var(--conn); border-left-width: 0; }
.hd-d.off-l { left: calc(50% - 16px); }
.hd-u.off-r { left: calc(50% + 8px); }

.cl { position: absolute; font: 400 11.5px/14px var(--sans); color: var(--muted); white-space: nowrap; }
.cn.h .cl, .cn.lm .cl, .cn.lx-h .cl { left: 0; right: 0; bottom: calc(50% + 5px); text-align: center; white-space: normal; }
.cn.v .cl, .cl.side { left: calc(50% + 10px); top: 50%; transform: translateY(-50%); }
.cl.left { left: auto; right: calc(50% + 10px); top: 50%; transform: translateY(-50%); }

/* Visibility per breakpoint (narrow is the default) */
.only-w, .only-m, .not-n { display: none; }

/* Narrow: one vertical flow in reading order. Expert and Monitor hang off a spine on the left
   that runs from the Project Manager to the delivery team. */
.tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: 100%; }
.cn.sp { height: 30px; }
.cn.sp::before { left: 12px; top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.sp .cl { left: 32px; top: 50%; transform: translateY(-50%); }
.hd.at-sp { left: 8.5px; }
.blk.side { margin-left: 32px; }
.blk.side::before { left: -21px; top: -1px; bottom: -1px; border-left: 1px solid var(--conn); }
.blk.side::after { left: -21px; width: 20px; top: 50%; border-top: 1px solid var(--conn); }
.blk.side::before, .blk.side::after { content: ''; position: absolute; }
.a-ex.side::after { border-top-style: dashed; }
.tk { display: block; position: absolute; left: -20px; top: calc(50% - 3.5px); width: 0; height: 0; border: 4px solid transparent; border-right: 6px solid var(--conn); border-left-width: 0; }
.tier-team { background: var(--tint); border: 1px solid var(--line); border-radius: 6px; padding: var(--pp); }
.tier-team .a-bo { margin-top: 12px; }

/* Medium */
@media (min-width: 640px) {
  .page { padding: 44px 28px 36px; }
  .head { grid-template-columns: minmax(0, 1fr) auto; }
  .live { grid-column: auto; justify-self: end; align-self: start; }
  :root { --pp: 16px; }
  .only-n { display: none; }
  .only-m, .not-n { display: block; }
  .blk { text-align: center; padding: 14px 16px; }
  .blk .pill { align-self: center; }
  .blk .flag { justify-content: center; }
  .blk .kinds { justify-content: center; }
  .blk.side { margin-left: 0; }
  .blk.side::before, .blk.side::after, .tk { display: none; }
  .tier-team .a-bo { margin-top: 0; }
  .cn.v.a-t2 { height: auto; }
  .cn.v.del { height: 28px; }

  .tier { display: grid; grid-template-columns: minmax(0, 1fr) var(--g) minmax(0, 1fr); }
  .tier-top { grid-template-areas:
      "fo fo fo" "c1 c1 c1" "co co co" "c2 c2 c2" "dr dr dr" "c3 c3 c3" "pm pm pm" "ma t1 mb" "ex t2 mo"; }
  .tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: 64%; justify-self: center; }
  .cn.a-ma, .cn.a-t1, .cn.a-mb { height: 36px; }
  .tier-team { grid-template-areas: "bu br re" ". . rv" "bo . se"; }
  .tier-env { grid-template-areas: "cs cs cs" "te dp pr"; }

  /* Security -> Test: an L from the Security column of the padded panel to the Test column. */
  .cn.lm { height: 48px; }
  .cn.lm::before { top: 0; height: 50%; left: calc((100% - var(--g)) / 4); right: calc((100% - 2 * var(--pp) - 2px - var(--g)) / 4 + var(--pp) + 1px); border-right: 1px solid var(--conn); border-bottom: 1px solid var(--conn); }
  .cn.lm::after { top: 50%; bottom: 0; left: calc((100% - var(--g)) / 4); border-left: 1px solid var(--conn); }
  .cn.lm .hd-d { left: calc((100% - var(--g)) / 4 - 3.5px); }
  .cn.lm .cl { left: calc((100% - var(--g)) / 4); right: calc((100% - var(--g)) / 4); }
}

/* Wide: the full team chart */
@media (min-width: 1000px) {
  .page { padding: 56px 40px 40px; }
  .only-m, .not-w { display: none; }
  .only-w { display: block; }
  .tier-top { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr);
    grid-template-areas:
      ".  .  fo .  ." ".  .  c1 .  ." "lh lh co .  ." "lv .  c2 .  ." "lv .  dr .  ." "lv .  c3 .  ." "ex cx pm cm mo"; }
  .tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: auto; justify-self: stretch; }
  .tier-team { grid-template-columns: repeat(3, minmax(0, 1fr) var(--g)) minmax(0, 1fr); grid-template-areas: "bu br re rs se . bo";
    background: none; border: 0; border-radius: 0; padding: 0; }
  .tier-env { grid-template-columns: repeat(3, minmax(0, 1fr) var(--g)) minmax(0, 1fr); grid-template-areas: ". . . . cs . ." ". . . . te dp pr"; }
  .cn.v.a-cs { height: 40px; }

  /* Expert -> Consultant: dashed L from the top of the Expert block to the Consultant's side. */
  .cn.lx-h::before { top: calc(50% - .5px); left: calc((100% - 96px) / 2); right: 0; border-top: 1px dashed var(--conn); }
  .cn.lx-h::after { top: 50%; bottom: 0; left: calc((100% - 96px) / 2); border-left: 1px dashed var(--conn); }
  .cn.lx-h .cl { left: calc((100% - 96px) / 2); }
  .cn.lx-v::before { left: calc(50% - .5px); top: 0; bottom: 0; border-left: 1px dashed var(--conn); }

  /* Project Manager -> the four: trunk, bus and four drops at the card centres. */
  .cn.bus { height: 40px; }
  .cn.bus::before { left: calc(50% - .5px); top: 0; height: 50%; border-left: 1px solid var(--conn); }
  .cn.bus::after { top: calc(50% - .5px); left: calc((100% - 3 * var(--g)) / 8); right: calc((100% - 3 * var(--g)) / 8); border-top: 1px solid var(--conn); }
  .drop { position: absolute; top: 50%; bottom: 0; width: 0; border-left: 1px solid var(--conn); }
  .drop::after { content: ''; position: absolute; bottom: 0; left: -4.5px; border: 4px solid transparent; border-top: 6px solid var(--conn); border-bottom-width: 0; }
  .drop:nth-child(1) { left: calc((100% - 3 * var(--g)) / 8 - .5px); }
  .drop:nth-child(2) { left: calc((100% - 3 * var(--g)) * 3 / 8 + var(--g) - .5px); }
  .drop:nth-child(3) { left: calc((100% - 3 * var(--g)) * 5 / 8 + 2 * var(--g) - .5px); }
  .drop:nth-child(4) { left: calc((100% - 3 * var(--g)) * 7 / 8 + 3 * var(--g) - .5px); }
  /* "change as draft" sits just left of the Back-office drop, below the bus line. */
  .cn.bus .bus-l { top: calc(50% + 3px); right: calc(100% - (100% - 3 * var(--g)) * 7 / 8 - 3 * var(--g) + 8px); }
}

/* Grid placement (only takes effect where the tier is a grid) */
.a-fo { grid-area: fo; } .a-c1 { grid-area: c1; } .a-co { grid-area: co; } .a-c2 { grid-area: c2; }
.a-dr { grid-area: dr; } .a-c3 { grid-area: c3; } .a-pm { grid-area: pm; } .a-ex { grid-area: ex; }
.a-mo { grid-area: mo; } .a-cx { grid-area: cx; } .a-cm { grid-area: cm; } .a-ma { grid-area: ma; }
.a-mb { grid-area: mb; } .a-t1 { grid-area: t1; } .a-t2 { grid-area: t2; }
.lx-h { grid-area: lh; } .lx-v { grid-area: lv; }
.a-bu { grid-area: bu; } .a-br { grid-area: br; } .a-re { grid-area: re; } .a-rs { grid-area: rs; }
.a-rv { grid-area: rv; } .a-se { grid-area: se; } .a-bo { grid-area: bo; }
.a-cs { grid-area: cs; } .a-te { grid-area: te; } .a-dp { grid-area: dp; } .a-pr { grid-area: pr; }

/* ---------- Shapes + labels, never colour alone ---------- */
.sh { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.sh-ok { background: var(--s-ok); }
.sh-running { background: var(--st-run); }
.sh-info { border: 1.5px solid var(--s-info); }
.sh-warn, .sh-updating { width: 8px; height: 8px; border-radius: 0; background: var(--s-warn); transform: rotate(45deg); }
.sh-updating { background: var(--st-upd); }
.sh-down { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--s-down); }
.sh-unknown { border: 1.5px dashed var(--st-unk); }
.card .state .sh-down { border-bottom-color: var(--st-down); }
/* Coloured status labels (always with a shape or the word itself): Running green, Update in
   progress amber, Down red, Unknown grey. */
.st-running { color: var(--st-run); } .st-updating { color: var(--st-upd); } .st-down { color: var(--st-down); } .st-unknown { color: var(--st-unk); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor; font: 500 11.5px/16px var(--sans); }
.pill.st-running { background: var(--st-run-bg); } .pill.st-updating { background: var(--st-upd-bg); }
.pill.st-down { background: var(--st-down-bg); } .pill.st-unknown { background: var(--st-unk-bg); border-style: dashed; }

/* ---------- Environment cards ---------- */
.env-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 20px 22px 18px; }
.card::before { content: ''; position: absolute; left: 22px; top: -1px; width: 28px; height: 1px; background: var(--accent); }
.card h3 { color: var(--muted); font-size: 15px; line-height: 20px; }
.card .state { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 500 22px/28px var(--serif); }
.card .state .sh { width: 12px; height: 12px; }
.card .state .sh-warn, .card .state .sh-updating { width: 10px; height: 10px; }
.card .state .sh-down { width: 0; height: 0; border-left-width: 7px; border-right-width: 7px; border-bottom-width: 12px; }
.card .release { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.card .release .key { font: 500 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .release .rel { font-size: 13px; }
.card .ready { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); }
.card .ready[hidden] { display: none; }

/* ---------- Updates: quiet timeline ---------- */
.upd-list { list-style: none; margin: 0; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.upd-list:empty { display: none; }
.upd-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.upd-list li:first-child { border-top: 0; }
.upd-list .when { grid-column: 1 / -1; font: 400 12px/18px var(--mono); color: var(--ink); }
.upd-list .when .rel { margin-left: 8px; color: var(--muted); font: 400 12px/18px var(--sans); }
.upd-list .sh { justify-self: center; }
.upd-list .text { overflow-wrap: anywhere; }
.empty { padding: 4px 0; }

@media (min-width: 640px) {
  .env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .upd-list { padding: 0 22px; }
  .upd-list li { grid-template-columns: 150px 14px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  .upd-list .when { grid-column: auto; }
  .upd-list .when .rel { display: block; margin-left: 0; }
}

.foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .blk.is-active { animation: none; box-shadow: 0 0 0 2.5px var(--active), 0 0 12px 3px rgba(var(--glow-red), .45), var(--shadow); }
  .blk.is-waiting { animation: none; box-shadow: 0 0 0 2.5px var(--accent), 0 0 12px 3px rgba(var(--glow-wait), .55), var(--shadow); }
  .live[data-kind="live"] .live-dot { animation: none; }
}