@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/a/ae062b6d5ae308e7edf61b28b07b9984bbb6e961b1f34d9b2c2f4389c33f21ea.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;font-display:swap;src:url(/a/3b646991d30055a93a4ecc499713d4347953a74a947ecab435ab72070cbdab0e.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:500;font-display:swap;src:url(/a/0717336fb31fcdcde4b8deb3675bb4a0f7f6d484864afcd6751ac29975962203.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:600;font-display:swap;src:url(/a/8960851d691c054ed38e259bdcf1a6190d157b4203ed5bb32c632a863fb8ec2f.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(/a/08949f728dc52d528e69b1667d15c89a5686a4ee9a296ff90983985f99c380f7.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(/a/01d285447409c8a588692162439a038b8cbd7871309ee20267b0d2d91c6e8e22.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}

/* Firekeeper console tokens (authority-and-license.md §3.15). One dark theme, plus print. This screen is read at 3am
   beside a terminal, so the ground is Char and the type is Bone. Eight brand tokens, and every other colour in this file
   is one of them by another name. Ember is the one accent and it means "needs a human": CRITICAL, the single primary
   action and keyboard focus here, and the rail's live states in the slice that draws them. A test holds Ember to that
   list, holds every text colour to 4.5:1 on its ground, and refuses any colour that is not a token. */
:root{
color-scheme:dark;
/* brand */
--char:#0E0C0A;--soot:#17130F;--cinder:#2A231C;--edge:#6B6157;
--ash:#9A8F82;--stone:#C9C0B3;--bone:#EDE6DA;--ember:#F26B1D;

/* type. Cormorant Garamond 600 for page titles, the wordmark and empty states; IBM Plex Sans for the interface; IBM
   Plex Mono for ids, hashes, evidence and labels. Each is the console's own file (fonts.ts); the names after it are
   what draws the text until the face arrives, or if it never does. */
--serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
--sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

/* type: eight sizes, and nothing outside them. */
--t-11:11px;--t-12:12px;--t-13:13px;--t-14:14px;--t-15:15px;--t-17:17px;--t-22:22px;--t-30:30px;
--lh-tight:1.3;--lh-row:1.45;--lh-prose:1.6;
/* Tracking only ever tightens, except on a label (.label), which is the one place capitals are allowed. */
--ls-12:0;--ls-13:-.006em;--ls-15:-.011em;--ls-17:-.014em;--ls-22:-.012em;--ls-30:-.01em;
--w-regular:400;--w-medium:500;--w-semibold:600;

/* space: a 4px grid with two half-steps. Fifty ad-hoc pixel values is what made nothing line up. */
--s-05:2px;--s-1:4px;--s-15:6px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;

/* heights: six, reused everywhere. */
--h-row:36px;--h-group:32px;--h-bar:40px;--h-header:44px;
--h-nav:32px;--h-control:28px;--h-input:32px;--h-button:32px;
--w-sidebar:232px;--w-panel:380px;--w-prose:68ch;

/* Square corners. Two pixels is the most any corner gets. */
--r:2px;
--hairline:1px;

/* motion: nothing over 120ms, and only background, colour, opacity and transform ever animate. */
--ease:cubic-bezier(.25,.46,.45,.94);
--t-quick:80ms;--t-hover:120ms;--t-dialog:120ms;

/* The ladders every rule below is written against, each a brand token. Grounds: Char is the page, Soot a raised
   surface, Cinder a hovered or selected one. Lines: Cinder for a hairline, Edge for a control's edge, which meets the
   3:1 rule for a non-text edge on both grounds. Text: Bone, Stone, Ash. */
--bg-0:var(--char);--bg-1:var(--soot);--bg-2:var(--cinder);--bg-3:var(--cinder);--bg-inset:var(--char);
--line-1:var(--cinder);--line-2:var(--cinder);--line-3:var(--edge);
--fg-1:var(--bone);--fg-2:var(--stone);--fg-3:var(--ash);--fg-4:var(--ash);
--accent:var(--ember);--on-accent:var(--char);--focus:var(--ember);
/* Severity is a word and a glyph first, colour second. CRITICAL is the only one in Ember, as a block with Char text;
   HIGH is a Bone outline, MEDIUM an Edge outline in Stone, LOW and INFO are Ash text, INFO on a Cinder outline. */
--sev-critical:var(--ember);--sev-high:var(--bone);--sev-medium:var(--stone);--sev-low:var(--ash);--sev-info:var(--ash);
/* A state is a word. Verified is a Bone check and never green; a failure is Bone at full weight; a warning is Stone.
   None of them is Ember, because none of them is by itself a person being asked for something. */
--ok:var(--bone);--warn:var(--stone);--bad:var(--bone);
--w-content:1240px;
/* The names the older screens and the signer page still spell. They are aliases onto the ladders above rather than a
   second palette: two palettes is how the last redesign ended up with 50 pixel values and 13 font sizes. */
--bg:var(--bg-0);--panel:var(--bg-1);--sunk:var(--bg-inset);--head:var(--bg-1);--hover:var(--bg-2);
--ink:var(--fg-1);--ink-2:var(--fg-2);--muted:var(--fg-3);--code:var(--fg-2);
--line:var(--line-1);--rule:var(--line-1);--link-rule:var(--line-3);
--crit:var(--sev-critical);--high:var(--sev-high);--med:var(--sev-medium);
--low:var(--sev-low);--info:var(--sev-info);
font-family:var(--sans);color:var(--fg-2);background:var(--bg-0)}

/* base */
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg-0);color:var(--fg-2);
font:var(--w-regular) var(--t-13)/var(--lh-row) var(--sans);letter-spacing:var(--ls-13);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
::selection{background:var(--cinder);color:var(--fg-1)}
/* A link is Bone, underlined in Edge, so it reads as a link without a colour of its own: the one accent is spoken for. */
a{color:var(--fg-1);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:2px}
a:hover{color:var(--fg-1);text-decoration-color:currentColor}
/* Focus is inset on a list row so it cannot paint over its neighbour, and outset everywhere else. The one place the
   ring is taken away is a focus that is not keyboard focus, which is the rule that makes it safe to leave it on
   everywhere else. */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r)}
.skip{position:absolute;left:var(--s-2);top:-40px;z-index:9;padding:var(--s-1) var(--s-3);background:var(--bg-1);color:var(--fg-1);border-radius:var(--r)}
.skip:focus{top:var(--s-2)}

/* the shell */
/* align-content:start because the grid's min-height is the viewport: with the default stretch, a short page on a
   narrow window distributed the leftover height between the nav strip and the content and left 93px of nothing
   between them. */
.app{display:grid;grid-template-columns:var(--w-sidebar) minmax(0,1fr);min-height:100vh;align-content:start}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;
background:var(--bg-1);border-right:var(--hairline) solid var(--line-1);overflow:hidden}
/* The wordmark is set in Cormorant, the one place in the rail it appears. The flame mark joins it in the slice that
   draws the shell; until then the word stands alone rather than beside a placeholder. */
.sidebar-brand{display:flex;align-items:baseline;gap:var(--s-2);height:var(--h-header);padding:var(--s-3) var(--s-4) 0;
font:var(--w-semibold) var(--t-22)/1 var(--serif);letter-spacing:var(--ls-22);color:var(--fg-1)}
.sidebar-brand .mark{align-self:center;flex:none;display:block;border:0;padding:0;border-radius:0}
.mark-line{fill:none;stroke:var(--fg-1);stroke-width:2.4;stroke-linejoin:round}
.mark-lit{fill:var(--ember)}
.mark-spark-lit{fill:var(--ember)}
.mark-spark-open{fill:var(--bg-1)}
.sidebar-brand small{font:var(--w-regular) var(--t-12)/1 var(--sans);letter-spacing:0;color:var(--fg-3)}
.nav{display:flex;flex-direction:column;gap:var(--s-05);padding:var(--s-2) var(--s-2)}
.nav a{display:flex;align-items:center;gap:var(--s-2);height:var(--h-nav);padding:0 var(--s-3);border-radius:var(--r);
font:var(--w-medium) var(--t-13)/1 var(--sans);letter-spacing:var(--ls-13);color:var(--fg-2);text-decoration:none}
.nav a:hover{background:var(--bg-2);color:var(--fg-1);text-decoration:none}
/* The current page holds the hover step and adds weight, so it is told from the row under the pointer. */
.nav a[aria-current]{background:var(--bg-2);color:var(--fg-1);font-weight:var(--w-semibold)}
.nav .count{margin-left:auto;padding:0 var(--s-15);border-radius:var(--r);background:var(--bg-3);
font-size:var(--t-11);line-height:18px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.nav a[aria-current] .count{background:var(--bg-1);color:var(--fg-1)}
.nav-rule{height:var(--hairline);margin:var(--s-2) var(--s-4);background:var(--line-1)}
/* The status band was a 30px full-width strip on every screen, inside the reading column, saying the same three
   things. It is ambient, so it lives at the foot of the rail where ambient things belong. */
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-05);padding:var(--s-3) var(--s-4) var(--s-4);
border-top:var(--hairline) solid var(--line-1);font-size:var(--t-12);color:var(--fg-4)}
.sidebar-foot b{font-weight:var(--w-regular);color:var(--fg-3);font-variant-numeric:tabular-nums}
/* The role reads as one more ambient line here, not as a badge: .who carries a margin-left:auto for the signer's own
   row header, which in this column would push it off to the right. */
.sidebar-foot .who{margin-left:0;font-size:inherit;color:var(--fg-4)}
/* The health line: one reserved row, so the rail does not shift when the headline and pill arrive. Watching is Bone and
   Look is Stone, each with its own glyph; Not watching and Unknown are the Ember blocks, because they are the two
   states that need a human (OF-11). The word is always printed, so colour is never the only signal. */
.health-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:22px;margin-bottom:var(--s-1)}
.health-line{font-size:var(--t-12);color:var(--fg-3);min-width:0;overflow-wrap:anywhere}
.pill.health{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:auto;font-size:var(--t-12);white-space:nowrap}
.pill.health::before{font-size:var(--t-11)}
.health-watching{color:var(--bone);border-color:var(--bone)}
.health-watching::before{content:"\2713"}
.health-look{color:var(--stone);border-color:var(--edge)}
.health-look::before{content:"\25CB"}
.health-not-watching{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:var(--w-semibold)}
.health-not-watching::before{content:"\00D7"}
.health-unknown{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:var(--w-semibold)}
.health-unknown::before{content:"?"}
/* /health (OB-25). The verdict band carries the verdict on its left rule: Bone when watching, Stone for a look, and the
   brightest ink for failing and unknown, which are drawn alike (unknown is never drawn like healthy). Ember stays on the
   rail's pill. Tiles are one row of links; a tile's state is a word, never colour alone. Missing data and unwatched
   places are SVG hatches defined once per page and coloured here, because no style attribute may carry them. */
.verdict-band{border-left:3px solid var(--line-3);padding:var(--s-2) var(--s-4);margin:0 0 var(--s-4)}
.verdict-band h1{margin:0 0 var(--s-1)}
.verdict-healthy{border-left-color:var(--bone)}
.verdict-attention{border-left-color:var(--stone)}
.verdict-failing,.verdict-unknown{border-left-color:var(--fg-1)}
.verdict-headline{font-size:var(--t-17);color:var(--fg-1);margin:0 0 var(--s-1)}
.verdict-meta,.verdict-outside{font-size:var(--t-13);color:var(--fg-2);margin:0}
.tile-row{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:0 0 var(--s-4)}
.tile{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border:var(--hairline) solid var(--line-1);
border-radius:var(--r);background:var(--bg-1);color:var(--fg-2);text-decoration:none}
a.tile:hover{border-color:var(--line-3);text-decoration:none}
.tile-name{font-size:var(--t-12);color:var(--fg-3)}
.tile-state{font-weight:var(--w-semibold);color:var(--fg-1)}
.tile-ok .tile-state{color:var(--bone)}
.tile-look .tile-state{color:var(--stone)}
.tile-fail,.tile-unknown{border-color:var(--fg-2)}
.tile-note{font-size:var(--t-12);color:var(--fg-3);display:flex;align-items:center;gap:var(--s-1)}
.hatch-defs{position:absolute;width:0;height:0;overflow:hidden}
.hatch{display:inline-block;vertical-align:middle}
.hatch-line{stroke:var(--line-3);stroke-width:2}
.hatch-line-unwatched{stroke:var(--stone);stroke-width:1}
.nodata{font-size:var(--t-12);color:var(--fg-3);margin-left:var(--s-1)}
.needs{list-style:none;margin:0;padding:0}
.need{padding:var(--s-2) 0;border-bottom:var(--hairline) solid var(--line-1)}
.need-status{font-weight:var(--w-semibold);color:var(--fg-1)}
.need-since{font-size:var(--t-12);color:var(--fg-3)}
.window-switch{display:flex;gap:var(--s-2);margin:0 0 var(--s-2);font-size:var(--t-13)}
.window-switch a[aria-current]{font-weight:var(--w-semibold);color:var(--fg-1)}
.estate-counts{display:grid;grid-template-columns:auto auto;gap:var(--s-1) var(--s-4);margin:var(--s-3) 0 0}
.estate-counts dd{margin:0;font-variant-numeric:tabular-nums}
.spark,.step-bar{display:inline-block;vertical-align:middle}
.spark-line{stroke:var(--fg-2);stroke-width:1.5}
.bar-p95{fill:var(--line-3)}
.bar-p50{fill:var(--fg-2)}
.bar-wall{stroke:var(--fg-1);stroke-width:1.5}
.slo td,.timing td,.alarms td{font-variant-numeric:tabular-nums}
.departed{font-weight:var(--w-semibold);color:var(--fg-1);margin:0 0 var(--s-1)}
.step-up{font-size:var(--t-13);color:var(--fg-2)}
.step-up-head{font-weight:var(--w-semibold)}
.assurance-rows{list-style:none;margin:var(--s-2) 0 0;padding:0}
.health-headline{color:var(--fg-1);margin:0 0 var(--s-1)}
/* The watch strip: the last 30 runs, one 4px tick each, oldest to newest. The state is the tick's height as well as
   its shade, and the list item carries it in words for a screen reader. Nothing here is Ember. */
.watch-strip{display:flex;align-items:flex-end;gap:var(--s-05);height:14px;margin:var(--s-2) 0 var(--s-1);padding:0;list-style:none}
.tick{flex:1 1 0;min-width:2px;max-width:5px}
.tick-ok{height:10px;background:var(--bone)}
.tick-partial{height:10px;background:var(--stone)}
.tick-failed{height:14px;background:var(--edge);border-top:2px solid var(--bone)}
.tick-running{height:6px;background:var(--ash)}
.content{display:flex;flex-direction:column;min-width:0}
.pagehead{position:sticky;top:0;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);
min-height:var(--h-header);padding:0 var(--s-6);background:var(--bg-0);border-bottom:var(--hairline) solid var(--line-1)}
.crumb{font:var(--w-medium) var(--t-13)/1 var(--sans);color:var(--fg-1);white-space:nowrap}
.crumb .sep{color:var(--fg-4);margin:0 var(--s-1)}
.head-right{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;min-width:0}
.signout{font-size:var(--t-12);color:var(--fg-3)}
/* A reading page is a centred column with air around it; a list screen is full-bleed (main.flush). */
main{min-width:0;width:100%;max-width:var(--w-content);margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-10)}
/* The list screens hand main their own full-bleed grid, so they take the padding off; a banner that lands above one
   of them keeps the reading margin it needs. */
main.flush{padding:0;max-width:none}
main.flush>.banner,main.flush>.flash{margin:var(--s-3) var(--s-4)}
/* A notice is a raised surface with an Edge line. What kind of notice it is, the sentence says; an error's edge is
   Bone so it is the brightest line on the screen without borrowing the accent. */
.setup-banner,.banner,.flash{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r);
background:var(--bg-1);border:var(--hairline) solid var(--line-3);
color:var(--fg-1);max-width:none;font-size:var(--t-13)}
.flash.error{border-color:var(--fg-1)}
.pagehead .setup-banner{flex-basis:100%;margin:0 0 var(--s-2)}

/* prose and headings */
h1{font:var(--w-semibold) var(--t-30)/1.15 var(--serif);letter-spacing:var(--ls-30);color:var(--fg-1);margin:0 0 var(--s-1)}
h2{font:var(--w-semibold) var(--t-15)/var(--lh-tight) var(--sans);letter-spacing:var(--ls-15);color:var(--fg-1);margin:var(--s-6) 0 var(--s-3)}
h3{font:var(--w-medium) var(--t-13)/var(--lh-tight) var(--sans);color:var(--fg-3);margin:var(--s-5) 0 var(--s-2)}
/* The page title row: the title, and beside it the sentence that says what state the page is in. */
.page-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-5)}
.page-title h1{margin:0}
.page-title .sub{font-size:var(--t-13);color:var(--fg-3);max-width:none;margin:0}
p{margin:0 0 var(--s-3);max-width:var(--w-prose)}
/* Body prose is 15px and no longer competes with the list for the same column: a sentence belongs in the panel, on a
   finding's own page and in an empty state, where somebody is reading. */
main p,.panel p{font-size:var(--t-14);line-height:var(--lh-prose);color:var(--fg-2)}
.lede{color:var(--fg-3);margin:0 0 var(--s-5);font-size:var(--t-14)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-4) var(--s-5);margin:0}
.facts dt{font-size:var(--t-12);color:var(--fg-3);margin:0 0 var(--s-1)}
.facts dd{margin:0;font-size:var(--t-14);overflow-wrap:anywhere}
.fold>summary{cursor:pointer;color:var(--fg-3);font-size:var(--t-13);list-style:none;padding:var(--s-1) 0}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"› ";color:var(--fg-4)}
.fold[open]>summary::before{content:"⌄ "}
.fold>pre{margin-top:var(--s-3)}
main ul,main ol{margin:var(--s-2) 0 var(--s-4);padding-left:var(--s-5);max-width:var(--w-prose)}
main li{margin:0 0 var(--s-2);font-size:var(--t-14);line-height:var(--lh-prose)}
/* A section is a run of prose on the ground, separated from the next by air rather than by a rule to the right
   margin. Without the margin the sections ran together: a heading sat on the last line of the section above it. */
/* A card is a Soot surface on the Char ground with a Cinder hairline, and nothing else: no shadow and no rounding. The
   dashboard is a set of them; the eye finds a section by its edge, not by hunting for a heading in a column of prose. */
section.card,div.card,form.card{background:var(--bg-1);border:var(--hairline) solid var(--line-1);border-radius:var(--r);
padding:var(--s-5);margin:0 0 var(--s-4)}
div.card>h1:first-child,div.card>h2:first-child,form.card>h2:first-child,section.card>h2:first-child{margin-top:0}
div.card>:last-child,form.card>:last-child,section.card>:last-child{margin-bottom:0}
.card[role=alert]{border-color:var(--fg-1)}
/* Cards side by side. A card that spans is a chart or a list; the rest sit two or three up. */
.dash{display:grid;gap:var(--s-4);grid-template-columns:repeat(12,minmax(0,1fr));margin:0 0 var(--s-4)}
.dash>*{margin:0;min-width:0}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-6{grid-column:span 6}.span-4{grid-column:span 4}
@media (max-width:1100px){.span-8,.span-6,.span-4{grid-column:span 12}}
.card .list{margin:0 calc(var(--s-5) * -1);border-top:var(--hairline) solid var(--line-1)}
.card .list .group,.card .list .row,.card .list .rule{padding-left:var(--s-5);padding-right:var(--s-5)}
.card .list .group{position:static}
:target{scroll-margin-top:calc(var(--h-header) + var(--s-6))}
section.card:target,div.card:target{border-color:var(--line-3)}
tr:target>td,tr:target>th[scope=row]{background:var(--bg-2)}

/* stats: four tabular numerals with sentence-case captions, inline and unboxed */
/* A stat is a tile: the caption above, the number below at 24px, tabular so a row of them lines up. */
.grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 var(--s-4)}
.stat,.card.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s-1);
padding:var(--s-4);margin:0;background:var(--bg-1);border:var(--hairline) solid var(--line-1);border-radius:var(--r);
color:var(--fg-2);text-decoration:none}
.card .grid .stat{background:var(--bg-inset)}
a.stat:hover{text-decoration:none;border-color:var(--line-3)}
a.stat:hover .n{color:var(--fg-1);text-decoration:underline;text-decoration-color:var(--line-3)}
.n{font:var(--w-semibold) var(--t-22)/1.2 var(--sans);letter-spacing:var(--ls-22);
font-variant-numeric:tabular-nums;color:var(--fg-1)}
.n .muted{font:var(--w-regular) var(--t-13)/1.25 var(--sans);letter-spacing:0;color:var(--fg-3)}
.l{font-size:var(--t-12);letter-spacing:var(--ls-12);color:var(--fg-3)}
.stat .n.sev-critical{color:var(--sev-critical)}.stat .n.sev-high{color:var(--sev-high)}
/* The headline tiles: five across on the overview, each a link into the list it counts. */
.kpis{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 var(--s-4)}
.status-pill{display:inline-flex;align-items:center;gap:var(--s-15);height:22px;padding:0 var(--s-2) 0 var(--s-15);
border-radius:var(--r);font:var(--w-medium) var(--t-12)/1 var(--sans);background:var(--bg-2);color:var(--fg-2)}
.status-pill::before{content:"";width:6px;height:6px;background:currentColor}
.status-pill.ok{color:var(--ok)}
.status-pill.warn{color:var(--warn)}
.status-pill.bad{color:var(--bad);font-weight:var(--w-semibold)}
/* The trend: a chart, its legend, and the sentence under it. Text on a chart wears text tokens, never a series colour. */
.chart{margin:var(--s-2) 0 var(--s-3)}
.chart svg{width:100%;height:auto;max-width:none}
.chart text{font:var(--w-regular) var(--t-11)/1 var(--sans);fill:var(--fg-3)}
.chart .axis{stroke:var(--line-1)}
.chart .bar-critical{fill:var(--sev-critical)}
.chart .bar-high{fill:var(--sev-high)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-2);font-size:var(--t-12);color:var(--fg-3)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:0;margin-right:var(--s-15);
vertical-align:-1px;background:currentColor}
.legend .sev-critical,.legend .sev-high{color:var(--fg-3)}
.legend .sev-critical::before{background:var(--sev-critical)}
.legend .sev-high::before{background:var(--sev-high)}
/* Severity share: one bar, segments in severity order, each labelled. */
.sevbar{display:block;width:100%;height:10px;border-radius:var(--r);overflow:hidden;background:var(--bg-3);margin:var(--s-3) 0 var(--s-3)}
.sevbar .sev-critical{background:var(--sev-critical)}.sevbar .sev-high{background:var(--sev-high)}
.sevbar .sev-medium{background:var(--sev-medium)}.sevbar .sev-low{background:var(--sev-low)}.sevbar .sev-info{background:var(--sev-info)}
.sevkey{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:var(--s-2);font-size:var(--t-12);color:var(--fg-3)}
.sevkey b{display:block;font:var(--w-semibold) var(--t-15)/1.3 var(--sans);color:var(--fg-1);font-variant-numeric:tabular-nums}

/* tables: the screens that are genuinely tabular keep one, restyled to the ladder. The findings list is not one of
   them any more, so table.findings and its ten explicit column widths are gone. */
.scroll{overflow-x:auto;max-width:100%;margin:0 0 var(--s-4);scrollbar-width:thin}
main>.scroll,main>table{background:var(--bg-1);border:var(--hairline) solid var(--line-1);border-radius:var(--r);padding:var(--s-2) var(--s-4)}
table{width:100%;border-collapse:collapse;background:transparent;font-variant-numeric:tabular-nums;font-size:var(--t-13)}
thead th{text-align:left;vertical-align:bottom;white-space:nowrap;padding:0 var(--s-3) var(--s-2) 0;
border-bottom:var(--hairline) solid var(--line-1);font:var(--w-medium) var(--t-12)/1.4 var(--sans);
letter-spacing:var(--ls-12);color:var(--fg-3)}
td,th[scope=row]{text-align:left;vertical-align:top;padding:var(--s-15) var(--s-3) var(--s-15) 0;
border-bottom:var(--hairline) solid var(--line-2);line-height:var(--lh-row)}
tbody tr:last-child td,tbody tr:last-child th[scope=row]{border-bottom:0}
tbody tr:hover td,tbody tr:hover th[scope=row]{background:var(--bg-2)}
tbody tr:focus-within td,tbody tr:focus-within th[scope=row]{background:var(--bg-2)}
th[scope=row]{width:1%;white-space:nowrap;font:var(--w-medium) var(--t-12)/var(--lh-row) var(--sans);color:var(--fg-3)}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th.num{text-align:right}
td a,th a{color:var(--fg-1)}
td a:hover,th a:hover{color:var(--fg-1)}
table.decision td{font-size:var(--t-13)}

/* THE FINDINGS LIST. One finding is one 36px line that never wraps: a list stays scannable only while every row is the
   same height, and an unwrapped 90-character ARN is what turned the old table's rows into paragraphs. The columns are
   a grid rather than a table so the title takes whatever the fixed slots leave and truncates inside it, and so a
   narrow window drops a column instead of scrolling the list sideways. */
.list{--cols:3px 80px 64px minmax(0,1fr) 164px 148px 44px 20px;
display:flex;flex-direction:column;background:var(--bg-1)}
@media (max-width:1240px){.list{--cols:3px 80px 64px minmax(0,1fr) 164px 44px 20px}.list .c-res{display:none}}
@media (max-width:1040px){.list{--cols:3px 80px 64px minmax(0,1fr) 44px 20px}.list .c-where{display:none}}
@media (max-width:900px){.list{--cols:3px 80px minmax(0,1fr) 44px 20px}.list .c-state{display:none}}
@media (max-width:760px){.list{--cols:3px 80px minmax(0,1fr) 20px}.list .c-age{display:none}}

/* Everything sticky in the list sticks under the same offset, and the offset is one variable so a filter bar that is
   only sometimes there cannot leave a header stuck at the wrong height. */
.flush{--stick:var(--h-header)}
.flush:has(.filterbar){--stick:calc(var(--h-header) + var(--h-bar))}
.list-head{position:sticky;top:var(--stick,var(--h-header));z-index:2;
display:grid;grid-template-columns:var(--cols);align-items:center;gap:0 var(--s-3);
height:var(--h-group);padding:0 var(--s-4);
background:var(--bg-1);border-bottom:var(--hairline) solid var(--line-1);
font:var(--w-medium) var(--t-12)/1 var(--sans);letter-spacing:var(--ls-12);color:var(--fg-3)}
.list-head>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A group header carries its count, so a collapsed group still says how much is behind it. */
.group{position:sticky;top:var(--stick,var(--h-header));z-index:2;display:flex;align-items:center;gap:var(--s-2);
width:100%;height:var(--h-group);padding:0 var(--s-4);text-align:left;
background:var(--bg-2);color:var(--fg-1);border:0;border-bottom:var(--hairline) solid var(--line-1);
border-radius:0;font:var(--w-semibold) var(--t-12)/1 var(--sans);letter-spacing:var(--ls-12);cursor:pointer}
.group .count{margin-left:auto;color:var(--fg-4);font-variant-numeric:tabular-nums}
.group .chev{color:var(--fg-4)}
.group[aria-expanded=false]+.rows{display:none}
/* A rule heading inside a severity group. It carries the rule once and its count, so the rows beneath it can drop
   their title cell: fifty-three rows whose most prominent column is the same sentence is a wall, and what a reader
   needs to compare across them is the account and the resource. It is not sticky — the severity header above it
   already is, and two sticky bars eat the list. */
.rule{display:flex;align-items:center;gap:var(--s-2);width:100%;height:var(--h-group);padding:0 var(--s-4) 0 calc(var(--s-4) + var(--s-3));
background:var(--bg-1);color:var(--fg-2);border:0;border-bottom:var(--hairline) solid var(--line-2);border-radius:0;text-align:left;
font:var(--w-medium) var(--t-12)/1 var(--sans);cursor:pointer}
.rule .rule-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--lh-tight)}
.rule .count{margin-left:auto;color:var(--fg-4);font-variant-numeric:tabular-nums}
.rule .chev{color:var(--fg-4)}
.rule[aria-expanded=false]+.rule-rows{display:none}
/* These two are buttons, and the button rule paints a hovered button accent: a full-width accent bar over the list
   every time the pointer crosses a heading. A heading lifts one step and no more. */
.group:hover{background:var(--bg-3);color:var(--fg-1)}
/* Under a rule heading the title cell holds the resource, in the resource column's face; the severity word is the
   heading's and the group's already, so the row keeps only its rail. */
.row[data-titled] .sev{visibility:hidden}
.row .title.t-res{font-family:var(--mono);font-weight:var(--w-regular);font-size:var(--t-12);color:var(--fg-2);letter-spacing:0}
/* Why a setting is not changeable here, one click away rather than under every field. */
.field-why{padding:0 var(--s-4) var(--s-2);font-size:var(--t-12)}
.field-why>summary{cursor:pointer;color:var(--fg-3);padding:var(--s-1) 0;list-style:none}
.field-why>summary::-webkit-details-marker{display:none}
.field-why>summary::before{content:"› ";color:var(--fg-4)}
.field-why[open]>summary::before{content:"⌄ "}
.field-why .field-note{margin:var(--s-1) 0 0;color:var(--fg-3)}
.rows{display:flex;flex-direction:column}

.row{display:grid;grid-template-columns:var(--cols);align-items:center;gap:0 var(--s-3);
height:var(--h-row);padding:0 var(--s-4);color:var(--fg-2);text-decoration:none;
font:var(--w-regular) var(--t-13)/1 var(--sans);letter-spacing:var(--ls-13)}
/* Every slot truncates. Nothing in this list is ever allowed to become two lines. */
.row>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Hover and the keyboard cursor are one object at two strengths, painted as a background. A border that appears on
   hover moves every row below it by a pixel, and no list survives that. */
.row{border-bottom:var(--hairline) solid var(--line-2)}
.row:hover{background:var(--bg-2);text-decoration:none;color:var(--fg-2)}
/* Hover and the cursor share the Cinder step; the cursor also draws an Edge line inside its own box, so it can be
   told from the row under the pointer without a second ground. */
.row[aria-selected=true]{background:var(--bg-3);outline:var(--hairline) solid var(--line-3);outline-offset:-1px}
.row[aria-selected=true] .title{color:var(--fg-1)}
.row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r)}
@media (prefers-reduced-motion:no-preference){.row{transition:background var(--t-hover) var(--ease)}}

/* Severity is a 3px rail in the row's own left edge plus one word. The word is hidden under a rule heading that already
   says it, so a group of 128 criticals is one Ember block in its header and 128 Ember rails, not an Ember column. The
   colour classes only ever set "color", so the rail and any marker take it together. */
.row .rail{height:16px;border-radius:1px;background:currentColor}
/* The word, sentence case, and its shape: CRITICAL is an Ember block with Char text, HIGH a Bone outline, MEDIUM an
   Edge outline, LOW bare Ash, INFO Ash on a Cinder outline. Every word carries a 1px border, transparent where it has
   no outline, so the five shapes are one width and a column of them stays a column. */
.row .sev,.chip .sev,.group .sev,.sevshown .sev,.group-row .sev{display:inline-flex;align-items:center;height:20px;padding:0 var(--s-2);border-radius:var(--r);
border:var(--hairline) solid transparent;font:var(--w-medium) var(--t-11)/1 var(--sans);white-space:nowrap}
.row.sev-critical .sev,.sev.sev-critical{background:var(--sev-critical);color:var(--on-accent)}
.row.sev-high .sev,.sev.sev-high{border-color:var(--sev-high)}
.row.sev-medium .sev,.sev.sev-medium{border-color:var(--line-3)}
.row.sev-info .sev,.sev.sev-info{border-color:var(--line-1)}
.sev-critical{color:var(--sev-critical)}
.sev-high{color:var(--sev-high)}
.sev-medium{color:var(--sev-medium)}
.sev-low{color:var(--sev-low)}
.sev-info{color:var(--sev-info)}

/* Firekeeper could not read this one. The rail keeps the severity it had, because an unread critical is still a critical
   thing you now know nothing about, and goes dashed — a shape, so it survives greyscale and colour blindness. The rest
   of the row steps down because none of it was measured in this run. */
.row[data-unread] .rail{background:none;border-left:3px dashed currentColor;border-radius:0;height:16px}
.row[data-unread]{color:var(--fg-4)}
.row[data-unread] .title{color:var(--fg-3)}
.row[data-unread] .c-age{color:var(--fg-4)}

/* The title is the only thing in the row a person reads as language, so it is the only proportional text here. */
.row .title{font-weight:var(--w-medium);color:var(--fg-1);letter-spacing:var(--ls-13)}
/* A state word appears only for the four states that need a look; the column keeps its width when it is empty so that
   every title in the list starts on the same x. */
.c-state{font-size:var(--t-12);color:var(--fg-3)}
.c-state[data-look]{color:var(--warn)}
.c-state[data-look=new]{color:var(--bad)}
/* The verifier contradicted the model's claim. This is the one marker that may sit ahead of the title, because it
   changes what the title means. A supported verdict renders nothing. */
.mark-contradicted{color:var(--bad);margin-right:var(--s-1)}
.mark-unsupported{color:var(--warn);margin-right:var(--s-1)}
.c-where,.c-res{font-size:var(--t-12);color:var(--fg-3)}
.c-res{font-family:var(--mono)}
.c-res .more{color:var(--fg-4)}
.c-age{font-size:var(--t-12);color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
.c-held{color:var(--fg-4);text-align:center;font-size:var(--t-12)}

/* What the list could not see at all is a band above the list, never a row inside it: a findings list must not
   silently omit what was never read, and that is a different statement from any row in it. */
.coverage-gap{display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-bar);margin:0;
padding:var(--s-1) var(--s-4);max-width:none;line-height:var(--lh-row);
background:var(--bg-1);border-bottom:var(--hairline) solid var(--line-1);font-size:var(--t-13);color:var(--fg-2)}
main .coverage-gap{font-size:var(--t-13)}
.coverage-gap::before{content:"";flex:0 0 auto;width:3px;height:16px;border-left:3px dashed var(--warn)}

/* No-JS floor for the panel: the row a deep link landed on carries its sentence and its evidence pointer on a line of
   its own, rather than every row carrying one. */
.peek{display:none;padding:0 var(--s-4) var(--s-2) var(--s-6);background:var(--bg-2);
font-size:var(--t-13);color:var(--fg-2)}
.row:target{background:var(--bg-3)}
.row:target+.peek{display:block}
.peek .src{display:block;font:var(--t-12)/1.5 var(--mono);color:var(--fg-3)}

/* the filter bar */
.filterbar{position:sticky;top:var(--h-header);z-index:3;display:flex;align-items:center;flex-wrap:wrap;
gap:var(--s-2) var(--s-3);min-height:var(--h-bar);padding:var(--s-1) var(--s-4);
background:var(--bg-1);border-bottom:var(--hairline) solid var(--line-1)}
.chips{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;min-width:0}
/* A severity chip narrows an already-loaded list, so it is a button and not a link: one click to the criticals, no
   Apply, and no round trip (design.md R5). Without script it is still a link, and the server answers it. */
.chip{display:inline-flex;align-items:center;gap:var(--s-15);height:var(--h-control);padding:0 var(--s-3);
border:var(--hairline) solid var(--line-1);border-radius:var(--r);background:var(--bg-1);color:var(--fg-2);
font:var(--w-medium) var(--t-12)/1 var(--sans);letter-spacing:var(--ls-12);cursor:pointer;text-decoration:none}
.chip:hover{background:var(--bg-2);color:var(--fg-1);text-decoration:none}
.chip[aria-pressed=true]{background:var(--bg-2);border-color:var(--fg-1);color:var(--fg-1)}
.chip .count{color:var(--fg-4);font-variant-numeric:tabular-nums}
.chip[aria-pressed=true] .count{color:var(--fg-3)}
.chip .rail{width:3px;height:12px;border-radius:1px;background:currentColor}
.viewmeta{margin-left:auto;font-size:var(--t-12);color:var(--fg-3);font-variant-numeric:tabular-nums}
.control{display:inline-flex;align-items:center;gap:var(--s-15);height:var(--h-control);padding:0 var(--s-3);
border:var(--hairline) solid var(--line-1);border-radius:var(--r);background:transparent;color:var(--fg-3);
font:var(--w-medium) var(--t-12)/1 var(--sans);letter-spacing:var(--ls-12);cursor:pointer;text-decoration:none}
.control:hover{background:var(--bg-2);color:var(--fg-2);text-decoration:none}
.search{height:var(--h-control);width:220px;max-width:100%;padding:0 var(--s-3);border-radius:var(--r);
border:var(--hairline) solid var(--line-1);background:var(--bg-1);color:var(--fg-1);
font:var(--w-regular) var(--t-13)/1 var(--sans)}
.more-rows{display:flex;align-items:center;justify-content:center;height:var(--h-bar);
border-top:var(--hairline) solid var(--line-1);background:transparent;color:var(--fg-3);
font:var(--w-medium) var(--t-13)/1 var(--sans);cursor:pointer;width:100%}
.more-rows:hover{background:var(--bg-2);color:var(--fg-2);text-decoration:none}

/* the detail panel. It follows the cursor row rather than a click, so arrowing down the list reads the evidence. */
.withpanel{display:grid;grid-template-columns:minmax(0,1fr) var(--w-panel);min-width:0}
.withpanel:has(>.panel[hidden]){grid-template-columns:minmax(0,1fr)}
.panel{position:sticky;top:var(--h-header);align-self:start;max-height:calc(100vh - var(--h-header));overflow:auto;
padding:var(--s-4);background:var(--bg-1);border-left:var(--hairline) solid var(--line-1)}
.panel-title{font:var(--w-semibold) var(--t-17)/var(--lh-tight) var(--sans);letter-spacing:var(--ls-17);
color:var(--fg-1);margin:0 0 var(--s-3)}
.panel p{margin:0 0 var(--s-3)}
.panel-ev{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);background:var(--bg-inset);border-radius:var(--r);
font:var(--t-12)/1.5 var(--mono);color:var(--fg-3);overflow-wrap:anywhere}
.panel-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-15) var(--s-3);margin:0 0 var(--s-4);
font-size:var(--t-12)}
.panel-kv dt{color:var(--fg-3)}
.panel-kv dd{margin:0;color:var(--fg-2);overflow-wrap:anywhere}
.panel-hint{font-size:var(--t-14);color:var(--fg-3)}
/* Below 1440px the panel is an overlay from the right rather than a column, so the list keeps its columns. */
@media (max-width:1439px){.withpanel{grid-template-columns:minmax(0,1fr)}
.panel{position:fixed;top:var(--h-header);right:0;bottom:0;width:min(var(--w-panel),100vw);z-index:5;max-height:none}}
.panel[hidden]{display:none}

/* empty, and the state this product did not have. A dashed edge means the same thing here as on a row: the reading
   did not happen, so nothing below it is a health claim. */
.empty{padding:var(--s-12) var(--s-4);max-width:var(--w-prose)}
.empty h2{font:var(--w-semibold) var(--t-22)/1.25 var(--serif);letter-spacing:var(--ls-22);color:var(--fg-1);margin:0 0 var(--s-3)}
.empty.unread{margin:var(--s-5) var(--s-4);padding:var(--s-4);border:var(--hairline) dashed var(--warn);border-radius:var(--r)}
.empty.filtered{padding:var(--s-4);font-size:var(--t-13)}
.skel{height:var(--h-row);display:grid;grid-template-columns:var(--cols);align-items:center;gap:0 var(--s-3);padding:0 var(--s-4)}
.skel>span{height:10px;border-radius:var(--r);background:var(--bg-2)}

/* the command menu. Cmd/Ctrl+K is the keyboard front door, and its geometry is Linear's, measured from their shipped
   CommandMenu bundle. Its contents are not only navigation: the actions that administer Firekeeper live here too. */
/* The scrim is the ground itself, most of the way opaque: no shadow under the box, and no colour that is not a token. */
.cmdk{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--char) 80%,transparent);display:flex;justify-content:center;padding:0 var(--s-4)}
.cmdk[hidden]{display:none}
.cmdk-box{margin-top:13vh;width:min(720px,100vw - 32px);max-height:min(73vh,500px);display:flex;flex-direction:column;
background:var(--bg-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r);overflow:hidden}
@media (prefers-reduced-motion:no-preference){.cmdk-box{animation:scaleIn var(--t-dialog) var(--ease)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.cmdk-input{height:46px;padding:0 18px;border:0;border-bottom:var(--hairline) solid var(--line-1);background:transparent;
color:var(--fg-1);font:var(--w-regular) var(--t-15)/1 var(--sans);letter-spacing:var(--ls-15);caret-color:var(--fg-1)}
.cmdk-list{margin:0;padding:var(--s-1);list-style:none;overflow:auto}
.cmdk-group{height:30px;display:flex;align-items:center;padding:0 var(--s-3);font-size:var(--t-12);color:var(--fg-3)}
.cmdk-item{display:flex;align-items:center;gap:var(--s-3);min-height:46px;padding:var(--s-2) var(--s-3);
border-radius:var(--r);color:var(--fg-2);font-size:var(--t-13);cursor:pointer}
.cmdk-item[aria-selected=true]{background:var(--bg-3);color:var(--fg-1)}
.cmdk-item .hint{margin-left:auto;color:var(--fg-4);font-size:var(--t-12)}
.cmdk-empty{padding:var(--s-5) var(--s-3);font-size:var(--t-14);color:var(--fg-3)}
kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--s-1);
border:var(--hairline) solid var(--line-1);border-radius:var(--r);background:var(--bg-2);
font:var(--w-medium) var(--t-11)/1 var(--sans);color:var(--fg-3)}
.sheet{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--char) 80%,transparent);display:flex;justify-content:center;padding:0 var(--s-4);overflow:auto}
.sheet[hidden]{display:none}
.sheet-box{margin:13vh 0 auto;width:min(560px,100vw - 32px);padding:var(--s-5);background:var(--bg-1);
border:var(--hairline) solid var(--line-1);border-radius:var(--r)}
.sheet dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:0 0 var(--s-4)}
.sheet dt{color:var(--fg-3)}
.sheet dd{margin:0;color:var(--fg-2)}

/* a setting is a field, and the field states its own provenance (design.md §8). Shared with the Settings and Passkeys
   screens, which are rewritten against these names. */
.fields{display:flex;flex-direction:column;margin:0 0 var(--s-4);border-top:var(--hairline) solid var(--line-1)}
.field{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-bar);padding:var(--s-1) 0;
border-bottom:var(--hairline) solid var(--line-2)}
.field-label{flex:0 0 240px;max-width:40%;font-size:var(--t-13);color:var(--fg-1)}
.field-value{flex:1 1 auto;min-width:0;font-size:var(--t-13);color:var(--fg-2);overflow-wrap:anywhere}
.field-value code{font-size:var(--t-12)}
.field-prov{flex:0 0 auto;margin-left:auto;font-size:var(--t-12);color:var(--fg-3);white-space:nowrap}
.field-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2)}

/* A label names the value beside it: Mono, Ash, in capitals and tracked out. It is the one rule in this file allowed
   either, so a label is recognisable as a label and nothing else can borrow the look. */
.label{font:var(--w-medium) var(--t-13)/var(--lh-tight) var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ash)}

/* state, verdict, identifiers */
.state{white-space:nowrap;font-size:var(--t-12);color:var(--fg-3)}
.st-NEW,.st-REOPENED,.st-FAILED,.st-ERROR,.st-DENIED,.st-STOPPED{color:var(--bad)}
.st-CHANGED,.st-UNOBSERVED,.st-PARTIAL,.st-DEGRADED,.st-THROTTLED{color:var(--warn)}
.st-RESOLVED,.st-COMPLETE,.st-OK{color:var(--ok)}
.verdict{white-space:nowrap;font-size:var(--t-12);color:var(--fg-3)}
.v-supported{color:var(--ok)}
.v-contradicted{color:var(--bad)}
.v-unsupported{color:var(--warn)}
.acct-id{font:var(--w-regular) var(--t-12)/var(--lh-row) var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-3);user-select:all}
td .acct-id{display:block}
.name{font-weight:var(--w-medium);color:var(--fg-1)}
td .res{display:block;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font:var(--t-12)/var(--lh-row) var(--mono)}
td .res .name,td .res .muted,td .name+.muted{user-select:all}
.nolink{color:var(--fg-3)}
/* A pill is a quiet tag now: an outline and sentence case. The filled severity block is gone with the wall of red. */
.pill{display:inline-block;padding:0 var(--s-15);border:var(--hairline) solid var(--line-1);border-radius:var(--r);
background:transparent;color:var(--fg-3);font:var(--w-medium) var(--t-12)/1.5 var(--sans);white-space:nowrap;padding-block:1px}
a.pill{color:var(--fg-2);text-decoration:none}
a.pill:hover{color:var(--fg-1);border-color:var(--line-3);text-decoration:none}
.pill.ok{color:var(--ok)}
.pill.warn{color:var(--warn)}

/* colour. A state is its word first: these only set how loud the word is. */
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.bad{color:var(--bad);font-weight:var(--w-semibold)}
.muted{color:var(--fg-3)}
/* Verified is a Bone check, never green. */
.verified{color:var(--ok)}
.verified::before{content:"✓ "}
p.warn:not(.banner):not(.setup-banner){padding:var(--s-2) var(--s-3);border-radius:var(--r);background:var(--bg-1);border:var(--hairline) solid var(--line-3);color:var(--fg-1);max-width:none;font-size:var(--t-13)}
p.bad:not(.banner){padding:var(--s-2) var(--s-3);border-radius:var(--r);background:var(--bg-1);border:var(--hairline) solid var(--fg-1);color:var(--fg-1);max-width:none;font-size:var(--t-13)}

/* forms */
form.inline{display:inline}
label{display:block;font-size:var(--t-12);color:var(--fg-3);margin:var(--s-3) 0 var(--s-1)}
label:has(input[type=radio]),label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:var(--s-2);
margin:var(--s-15) 0;font-size:var(--t-14);color:var(--fg-2)}
input[type=text],input[type=number],select,textarea{width:100%;min-height:var(--h-input);padding:var(--s-15) var(--s-3);
border:var(--hairline) solid var(--line-3);border-radius:var(--r);background:var(--bg-1);color:var(--fg-1);
font:var(--w-regular) var(--t-13)/var(--lh-row) var(--sans)}
input[type=text]:focus-visible,input[type=number]:focus-visible,select:focus-visible,textarea:focus-visible,.search:focus-visible{
outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
textarea{line-height:var(--lh-prose);resize:vertical}
input[type=text],input[type=number]{max-width:48ch}
.grid input[type=text],.grid input[type=number],.grid select{max-width:none}
input[type=radio],input[type=checkbox]{margin:var(--s-1) 0 0;accent-color:var(--fg-1)}
input::placeholder{color:var(--fg-4)}
fieldset{border:var(--hairline) solid var(--line-1);border-radius:var(--r);padding:0 var(--s-3) var(--s-3);margin:var(--s-4) 0}
legend{padding:0 var(--s-15);font-size:var(--t-12);color:var(--fg-3)}
/* A button is a quiet control: Bone on Soot inside an Edge line. One action on a screen may be the primary one, and
   only that one is Ember, with Char text. The class is the page's statement that this is the thing to do. */
button,.button{display:inline-flex;align-items:center;justify-content:center;height:var(--h-button);padding:0 var(--s-4);
border:var(--hairline) solid var(--line-3);border-radius:var(--r);background:var(--bg-1);color:var(--fg-1);
font:var(--w-medium) var(--t-13)/1 var(--sans);letter-spacing:var(--ls-13);text-decoration:none;cursor:pointer}
button:hover,.button:hover{background:var(--bg-2);color:var(--fg-1);text-decoration:none}
button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.primary:hover,.button.primary:hover{background:var(--accent);color:var(--on-accent);text-decoration:underline}
button.secondary{background:var(--bg-1);border-color:var(--line-1);color:var(--fg-2)}
button.secondary:hover{background:var(--bg-2);color:var(--fg-1)}
button[disabled]{opacity:.45;cursor:not-allowed}
/* The chips, the group headers and the list's own controls are buttons that must not look like a control button. */
button.chip,button.control,button.group,button.rule,button.more-rows,button.panel-close{font-family:var(--sans)}

/* code and data */
code{font:var(--t-12)/var(--lh-row) var(--mono);color:var(--fg-2);overflow-wrap:anywhere}
td code,th code,li code{white-space:nowrap;overflow-wrap:normal}
td>code{user-select:all}
h2 code,h3 code{font-size:inherit;color:inherit}
pre{margin:var(--s-2) 0 var(--s-4);padding:var(--s-3);background:var(--bg-inset);border-radius:var(--r);
color:var(--fg-2);font:var(--t-12)/var(--lh-prose) var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}
pre code{font-size:inherit;color:inherit}

/* the trend */
svg{display:block;max-width:none}
.scroll>svg{margin:var(--s-15) 0 var(--s-1)}
.scroll>svg rect{stroke:var(--bg-0);stroke-width:.75}

/* footer */
footer.prov{margin:var(--s-8) 0 0;padding:var(--s-3) var(--s-4) var(--s-10);
border-top:var(--hairline) solid var(--line-1);color:var(--fg-4);font:var(--t-11)/1.8 var(--mono)}

/* the Config page's fields */
/* A setting is a row: its name, its value, and where the value came from. The row is the list's own height and the
   ladders are the list's own, so Settings and Findings read as one console rather than as two. The old tokens these
   were first written against (--ink, --muted, --line) went with the old stylesheet. */
.fields{display:flex;flex-direction:column}
/* A field is a grid: the name, the value and where it came from on one line, and any control to change it on the line
   beneath, indented to the value. The flex-wrap this replaced let a select, a note box, a button and the tag all
   jostle onto one line at whatever widths they came in. */
.field{display:grid;grid-template-columns:240px minmax(0,1fr) auto;column-gap:var(--s-4);row-gap:var(--s-2);
align-items:center;min-height:var(--h-row);padding:var(--s-3) 0;border-bottom:var(--hairline) solid var(--line-2)}
.fields>.field:last-child{border-bottom:0}
.field-name{grid-column:1;color:var(--fg-2)}
.field-value{grid-column:2;min-width:0;color:var(--fg-1)}
.field>.field-from{grid-column:3}
.field>select,.field>input[type=text],.field>input[type=number],.field>.field-note-input,.field>button{grid-column:2/-1}
.field>select,.field>input[type=text],.field>input[type=number]{max-width:360px}
.field>.field-note-input{max-width:520px}
.field>button{justify-self:start}
.field>input[type=hidden]{display:none}
@media (max-width:760px){.field{grid-template-columns:minmax(0,1fr) auto}.field-name{grid-column:1/-1}.field-value{grid-column:1}.field>.field-from{grid-column:2}.field>select,.field>input[type=text],.field>input[type=number],.field>.field-note-input,.field>button{grid-column:1/-1}}
.field-from{flex:0 0 auto;padding:0 var(--s-2);border-radius:var(--r);background:var(--bg-2);
font:var(--w-medium) var(--t-11)/20px var(--sans);color:var(--fg-3);white-space:nowrap}
.field-note{margin:0 0 var(--s-3);padding-left:0;font-size:var(--t-12);color:var(--fg-3)}
.field-note-input{flex:1 1 220px;min-width:0}
input.copyline{font:var(--t-12)/var(--lh-row) var(--mono);min-width:0;width:auto;max-width:100%}
.copyrow{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
textarea.prompt{font:var(--t-12)/1.5 var(--mono);width:100%;min-height:22em;resize:vertical;white-space:pre-wrap}

/* the signer's own header, which reuses this stylesheet and renders no sidebar */
header.top{display:flex;align-items:center;gap:var(--s-3);height:var(--h-header);padding:0 var(--s-4);
background:var(--bg-1);border-bottom:var(--hairline) solid var(--line-1)}
.brand{display:flex;align-items:baseline;gap:var(--s-2);font:var(--w-semibold) var(--t-17)/1 var(--serif);color:var(--fg-1)}
.brand small{font:var(--w-regular) var(--t-12)/1 var(--sans);color:var(--fg-3)}
.who{margin-left:auto;font-size:var(--t-12);color:var(--fg-3)}
body>main{max-width:960px;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-10)}

/* The command center (Amendment 02 A3.1, 4.1; pages/now.ts). Calm Char ground; the live header ticks; an attack is
   the one full-width Ember band on the screen, with Char text on it and nothing else Ember. The severity component
   (pages/severity.ts) is the badge, its reason and its confidence on one line or a block. */
.livehead{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-12);color:var(--fg-3);white-space:nowrap}
.livehead b{font-weight:var(--w-medium);color:var(--fg-1);font-variant-numeric:tabular-nums}
.livehead .sep{padding-left:var(--s-3);border-left:var(--hairline) solid var(--line-1)}
.livehead .clock{font:var(--w-medium) var(--t-12)/1 var(--mono);color:var(--fg-1);font-variant-numeric:tabular-nums;
padding-left:var(--s-3);border-left:var(--hairline) solid var(--line-1)}
.beat{display:inline-block;width:8px;height:8px;border-radius:1px;background:var(--fg-1);opacity:1}
.beat.quiet,.beat.off{background:transparent;border:var(--hairline) solid var(--fg-3)}
.beat.pulse{opacity:.25}
.beat.stale{background:transparent;border:var(--hairline) dashed var(--fg-1)}
.livehead .stale-mark{color:var(--fg-1)}
/* An attack anywhere is on every page: one full-width Ember line under the header, linking to the case. */
.attack-strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);margin:0;max-width:none;padding:var(--s-2) var(--s-6);
background:var(--ember);color:var(--char);font-size:var(--t-13);line-height:var(--lh-row)}
.attack-strip[hidden]{display:none}
.attack-strip.strip-unread{background:var(--bg-2);color:var(--fg-1);border-left:3px solid var(--fg-1)}
.attack-strip b{font:var(--w-semibold) var(--t-12)/var(--lh-tight) var(--mono)}
.attack-strip a{color:inherit;font-weight:var(--w-semibold);text-decoration-color:currentColor}
.pill.demo{color:var(--fg-2);border-color:var(--line-3);font-size:var(--t-11)}
.now .muted{color:var(--fg-3)}
.now p.muted{font-size:var(--t-13)}
.now .label{font-size:var(--t-11)}
.now-ember .label{color:inherit}
.now-state{margin:0 0 var(--s-6)}
.now-ember{background:var(--ember);color:var(--char);border-radius:var(--r);padding:var(--s-5) var(--s-6);margin:0 0 var(--s-4)}
.now-ember p,.now-ember li,.now-ember dd,.now-ember dt,.now-ember h1,.now-ember h2,.now-ember a,.now-ember b,.now-ember .muted{color:inherit}
.now-ember a{text-decoration-color:currentColor}
.now-ember .sev{background:var(--char);border-color:var(--char);color:var(--bone)}
.now-ember .segs i.on,.now-ember .node.acting{background:var(--char)}
.now-ember .band+.band{margin-top:var(--s-5);padding-top:var(--s-5);border-top:var(--hairline) solid currentColor}
.band-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);margin:0 0 var(--s-2);max-width:none;
font:var(--w-medium) var(--t-12)/var(--lh-tight) var(--mono)}
.band-word{font-weight:var(--w-semibold)}
.band-head{font:var(--w-semibold) var(--t-30)/1.15 var(--serif);letter-spacing:var(--ls-30);margin:0 0 var(--s-2);max-width:56ch}
h2.band-head{font-size:var(--t-22)}
.band-sev{margin:0 0 var(--s-4);max-width:none}
.band-count{font-weight:var(--w-semibold);max-width:none}
h1.band-count{font:var(--w-semibold) var(--t-22)/1.2 var(--serif);letter-spacing:var(--ls-30);margin:0 0 var(--s-4)}
.band-quiet{margin:0 0 var(--s-3);font-size:var(--t-14);max-width:72ch}
.band-related{margin:0 0 var(--s-4)}
.band-related ul,.blind-lines{margin:var(--s-1) 0 0;padding:0;list-style:none}
.band-related li,.blind-lines li{margin:0 0 var(--s-1);font-size:var(--t-14);line-height:var(--lh-row);overflow-wrap:anywhere}
.blind-lines{margin:0 0 var(--s-3)}
.doing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-4);margin:0 0 var(--s-4)}
.doing dt{font:var(--w-medium) var(--t-11)/var(--lh-tight) var(--mono);margin:0 0 var(--s-1);color:var(--fg-3)}
.doing dd{margin:0;font-size:var(--t-14);line-height:var(--lh-row);overflow-wrap:anywhere}
@media (max-width:720px){.doing{grid-template-columns:minmax(0,1fr)}}
.band-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4) var(--s-5);margin:0 0 var(--s-4)}
.band-grid dt{font:var(--w-medium) var(--t-11)/var(--lh-tight) var(--mono);margin:0 0 var(--s-1);color:var(--fg-3)}
.band-grid dd{margin:0;font-size:var(--t-14);line-height:var(--lh-row);overflow-wrap:anywhere}
.now-ember .band-grid dt{color:inherit;opacity:.85}
.band-grid .big{display:block;font:var(--w-semibold) var(--t-22)/1.2 var(--sans);font-variant-numeric:tabular-nums;margin:0 0 var(--s-1)}
main .band-grid ul.reach,main ul.reach{margin:0;padding:0;list-style:none}
main ul.reach li{margin:0 0 var(--s-1);font-size:var(--t-14);line-height:var(--lh-row)}
.cert{font:var(--w-medium) var(--t-11)/1 var(--mono);opacity:.8}
.band-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin:var(--s-4) 0 0;max-width:none}
.button.sign{height:40px;padding:0 var(--s-5);background:var(--char);border-color:var(--char);color:var(--bone);font-weight:var(--w-semibold);font-size:var(--t-14)}
.button.sign:hover{background:var(--char);color:var(--bone);text-decoration:underline}
.button.ghost{background:transparent;border-color:currentColor;color:inherit}
.button.ghost:hover{background:transparent;color:inherit;text-decoration:underline}
.growing{font:var(--w-semibold) var(--t-11)/1 var(--mono);padding:var(--s-05) var(--s-15);border:var(--hairline) solid currentColor;border-radius:var(--r)}
.segs{display:flex;gap:2px;height:8px;margin:var(--s-1) 0 0;max-width:280px}
.segs i{flex:1 1 0;min-width:3px;border-radius:1px;border:var(--hairline) solid currentColor;background:transparent}
.segs i.on{background:var(--fg-1)}
.segs.steps{margin-top:var(--s-2)}
.swarm{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-3);margin:0;padding:var(--s-3) 0 0;border-top:var(--hairline) solid currentColor}
main .swarm ol{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0;padding:0;list-style:none;max-width:none}
main .swarm li{display:flex;flex-direction:column;gap:var(--s-1);margin:0}
.swarm .gen{font:var(--w-medium) var(--t-11)/1 var(--mono)}
.swarm .nodes{display:flex;gap:var(--s-1)}
.node{display:inline-block;width:12px;height:12px;border-radius:1px;border:var(--hairline) solid currentColor;background:transparent}
.node.acting{background:var(--fg-1)}
.quiet-link{font-size:var(--t-13)}
.now-off{border:var(--hairline) solid var(--line-3);border-radius:var(--r);padding:var(--s-5) var(--s-6);margin:0 0 var(--s-6);background:var(--bg-1)}
.now-off .off-head,.now-quiet{font:var(--w-semibold) var(--t-22)/1.25 var(--serif);letter-spacing:var(--ls-22);color:var(--fg-1);margin:0 0 var(--s-2)}
h1.now-quiet{font-size:var(--t-30)}
.watching{margin:0 0 var(--s-4)}
.scope{margin:0 0 var(--s-2)}
.agent-line{font-size:var(--t-13);max-width:none;margin:var(--s-2) 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-4);margin:0 0 var(--s-4)}
.case-card{padding:var(--s-5);border:var(--hairline) solid var(--line-3);border-radius:var(--r);background:var(--bg-1)}
.case-card.suspected{border-color:var(--fg-1)}
.card-head{font:var(--w-semibold) var(--t-22)/1.25 var(--serif);letter-spacing:var(--ls-22);color:var(--fg-1);margin:0 0 var(--s-2)}
.card-head a{text-decoration:none}
.card-head a:hover{text-decoration:underline}
.reach-line{display:flex;gap:var(--s-3);align-items:baseline;margin:0 0 var(--s-3)}
.now-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4);align-items:start;margin:0 0 var(--s-4)}
.now-stack{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.now-stack>.now-sect{margin:0}
.beat-word{font:var(--w-medium) var(--t-11)/1 var(--mono);color:var(--fg-3)}
.now-sect{background:var(--bg-1);border:var(--hairline) solid var(--line-1);border-radius:var(--r);padding:var(--s-5);margin:0 0 var(--s-4);min-width:0}
.now-cols>.now-sect{margin:0}
.now-sect>h2:first-child,.now-sect>h1:first-child{margin-top:0}
.now-sect h2{display:flex;align-items:center;gap:var(--s-2)}
.cnt{padding:0 var(--s-15);border-radius:var(--r);background:var(--bg-2);font:var(--w-medium) var(--t-12)/20px var(--sans);color:var(--fg-1);font-variant-numeric:tabular-nums}
.sub-h{margin:var(--s-5) 0 var(--s-2);font:var(--w-medium) var(--t-11)/1 var(--mono);color:var(--fg-3)}
.empty-line{color:var(--fg-3)}
.more{margin:var(--s-3) 0 0;font-size:var(--t-13)}
main ol.items,main ol.feed,main ol.groups,main ol.features,main ol.cases{margin:0;padding:0;list-style:none;max-width:none}
main .item{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:var(--s-3);align-items:baseline;margin:0;padding:var(--s-3) 0;border-top:var(--hairline) solid var(--line-1)}
main .item:first-child{border-top:0;padding-top:0}
.item .when{font:var(--w-medium) var(--t-11)/1.4 var(--mono);color:var(--fg-3)}
.item.urgency-now .when{color:var(--fg-1);font-weight:var(--w-semibold)}
.item .what p{margin:0;font-size:var(--t-14)}
.item .what>a{font-size:var(--t-14);line-height:var(--lh-row)}
.item .act{font:var(--w-medium) var(--t-12)/1 var(--sans);padding:var(--s-15) var(--s-2);border:var(--hairline) solid var(--line-3);border-radius:var(--r);text-decoration:none}
.item.urgency-now .act{border-color:var(--fg-1)}
.since{white-space:nowrap}
main .feed-item{display:grid;grid-template-columns:64px 118px minmax(0,1fr);gap:var(--s-3);align-items:baseline;margin:0;padding:var(--s-2) 0;border-top:var(--hairline) solid var(--line-1)}
main .feed-item:first-child{border-top:0}
.feed-item time{font:var(--w-regular) var(--t-12)/1.4 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.feed-item .job{font:var(--w-medium) var(--t-11)/1.5 var(--mono);color:var(--fg-3)}
.feed-item.job-defend .job,.feed-item.job-investigate .job{color:var(--fg-1)}
.feed-item .what p{margin:0;font-size:var(--t-13)}
.now .is-new{background:var(--bg-2)}
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4);margin:0 0 var(--s-4)}
.story{padding:var(--s-4);border:var(--hairline) solid var(--line-1);border-radius:var(--r);background:var(--bg-0);min-width:0}
.story-top{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);max-width:none}
.story .rank{font:var(--w-semibold) var(--t-22)/1 var(--serif);color:var(--fg-1)}
.story-head{font:var(--w-medium) var(--t-15)/var(--lh-row) var(--sans);color:var(--fg-1);margin:0 0 var(--s-2);overflow-wrap:anywhere}
.story .fix,.now-ember .fix{margin:var(--s-3) 0 var(--s-2)}
.sevshown{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-2);font-size:var(--t-13)}
.sevshown.inline{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);margin:0}
.sevshown .sev{align-self:flex-start}
.sevshown .because{color:inherit}
.sevshown .conf{font:var(--w-regular) var(--t-12)/var(--lh-row) var(--mono);color:var(--fg-3)}
.now-ember .sevshown .conf,.case-bar .sevshown .conf{color:inherit}
.board-groups .counts{font-size:var(--t-14);max-width:none}
.board-groups .counts b{color:var(--fg-1);font-variant-numeric:tabular-nums}
.trend{display:flex;align-items:flex-end;gap:var(--s-3);margin:0 0 var(--s-3)}
.trend .chart{margin:0}
.trend figcaption{font-size:var(--t-12);color:var(--fg-3)}
main .group-row{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;margin:0;padding:var(--s-15) 0;border-top:var(--hairline) solid var(--line-1);font-size:var(--t-13)}
.group-row .sev{justify-self:start}
.cost-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4);margin:0 0 var(--s-3)}
.money{margin:0}
.money b{font:var(--w-semibold) var(--t-30)/1 var(--serif);color:var(--fg-1);font-variant-numeric:tabular-nums}
.spend{margin:0 0 var(--s-3)}
.spend p{margin:0;max-width:none}
.spend b{color:var(--fg-1);font-variant-numeric:tabular-nums}
.cost-lines td{padding:var(--s-15) var(--s-3) var(--s-15) 0;border-top:var(--hairline) solid var(--line-1)}
.cost-lines td .muted{display:block;font-size:var(--t-12)}
.cost-lines.full td p{margin:var(--s-05) 0 0;font-size:var(--t-12)}
main .feature{margin:0;padding:var(--s-3) 0;border-top:var(--hairline) solid var(--line-1)}
main .feature:first-child{border-top:0;padding-top:0}
.feature p{margin:0 0 var(--s-1);font-size:var(--t-13)}
.f-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);max-width:none}
.f-top b{color:var(--fg-1);font-weight:var(--w-medium)}
.f-top .price{margin-left:auto;font:var(--w-regular) var(--t-12)/1.4 var(--mono);color:var(--fg-2)}
.f-on .f-state{color:var(--fg-3)}
.f-off .f-state{color:var(--fg-1);border-color:var(--fg-1)}
main .case-row{margin:0 0 var(--s-4);padding:var(--s-5);border:var(--hairline) solid var(--line-1);border-radius:var(--r);background:var(--bg-1)}
.case-row.status-active_attack{border-color:var(--fg-1);border-left-width:3px}
.models{max-width:480px;margin:var(--s-3) 0 0}
@media (max-width:1100px){.now-cols{grid-template-columns:minmax(0,1fr)}.band-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.band-grid{grid-template-columns:minmax(0,1fr)}.livehead .sep{display:none}main .feed-item{grid-template-columns:56px minmax(0,1fr)}.feed-item .what{grid-column:1/-1}}
@media (prefers-reduced-motion:no-preference){
.now .is-new{animation:fk-in 120ms var(--ease)}
.now .item,.now .feed-item,.now .story,.segs i,.node,.beat{transition:background-color 120ms var(--ease),opacity 120ms var(--ease)}
}
@keyframes fk-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* the chat (UX-13): docked on Now and the full /chat page. The keeper's question in Bone, the answer in Bone prose,
   the console's own status line in Ash mono. A plan inline is an Edge-lined box with its steps as rows; the single
   primary action in it is Sign, the one Ember on the panel. Nothing here pulses: a step that changes flashes its row
   once, for 120ms, and the words say the rest. */
.chat{margin:var(--s-4) 0 var(--s-6);padding:var(--s-4);background:var(--bg-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r)}
.chat-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-3)}
.chat-head h2{margin:0;font:var(--w-semibold) var(--t-22)/1.15 var(--serif);letter-spacing:var(--ls-22)}
.chat-head a{font-size:var(--t-12)}
.chat-log{display:flex;flex-direction:column;gap:var(--s-3)}
/* On Now the dock keeps to its place: the answer scrolls inside it, and the page below does not move. */
.chat-dock .chat-log{max-height:min(70vh,640px);overflow-y:auto;overscroll-behavior:contain}
.chat-empty,.chat-off-words{margin:0 0 var(--s-3);color:var(--fg-2);max-width:var(--w-prose);line-height:var(--lh-prose)}
.chat-turn{padding:var(--s-3) 0 0;border-top:var(--hairline) solid var(--line-1)}
.chat-log>.chat-turn:first-child{border-top:0;padding-top:0}
.chat-q{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-2);color:var(--fg-1);font-weight:var(--w-medium)}
.chat-q .label,.chat-a>.label{font-size:var(--t-11)}
.chat-q-text{overflow-wrap:anywhere}
.chat-q time{margin-left:auto;font:var(--t-11)/1 var(--mono);color:var(--fg-3);white-space:nowrap}
.chat-a{padding-left:var(--s-3);border-left:var(--hairline) solid var(--line-3)}
.chat-status{margin:var(--s-1) 0 var(--s-2);font:var(--t-12)/var(--lh-row) var(--mono);color:var(--fg-3);overflow-wrap:anywhere}
.chat-working::after{content:" …"}
.chat-error .chat-status{color:var(--fg-1)}
.chat-words p{margin:0 0 var(--s-2);color:var(--fg-1);line-height:var(--lh-prose);max-width:var(--w-prose);overflow-wrap:anywhere}
.chat-gaps{margin:var(--s-2) 0;padding-left:var(--s-3);border-left:2px solid var(--line-3)}
.chat-gaps p{margin:var(--s-1) 0 0;color:var(--fg-2)}
.chat-cites{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);margin:var(--s-2) 0 0;font-size:var(--t-12)}
.chat-cites .label{font-size:var(--t-11)}
.chat-form{display:flex;gap:var(--s-2);margin:var(--s-4) 0 0}
.chat-form input[type=text]{flex:1;min-width:0;max-width:none;height:var(--h-input)}
.chat-suggest{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0 0}
.demo-label{display:inline-block;vertical-align:middle;margin-left:var(--s-2);padding:0 var(--s-15);border:var(--hairline) solid var(--line-3);border-radius:var(--r);font:var(--t-11)/18px var(--mono);letter-spacing:0;color:var(--fg-3)}
.chat-plan{margin:var(--s-3) 0 0;padding:var(--s-3);background:var(--bg-0);border:var(--hairline) solid var(--line-3);border-radius:var(--r)}
.chat-plan .plan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3)}
.chat-plan .plan-state{padding:0 var(--s-15);border:var(--hairline) solid var(--line-3);border-radius:var(--r);font:var(--w-medium) var(--t-12)/18px var(--mono);color:var(--fg-1)}
.chat-plan .plan-progress,.chat-plan .plan-expires{font:var(--t-12)/1 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.chat-plan .plan-expires{margin-left:auto}
.chat-plan .plan-title{margin:var(--s-2) 0;color:var(--fg-1)}
.chat-plan .plan-redraft{margin:var(--s-2) 0 0;font-size:var(--t-12);color:var(--fg-1)}
.chat-plan .plan-steps{list-style:none;margin:0;padding:0;border-top:var(--hairline) solid var(--line-1)}
.chat-plan .step{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:start;gap:var(--s-3);padding:var(--s-15) var(--s-1);border-bottom:var(--hairline) solid var(--line-1)}
.chat-plan .step-n{font:var(--t-12)/var(--lh-row) var(--mono);color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
.chat-plan .step-body{min-width:0}
.chat-plan .step-words{color:var(--fg-2);overflow-wrap:anywhere}
.chat-plan .step-held{margin-left:var(--s-2);padding:0 var(--s-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r);font:var(--t-11)/16px var(--mono);color:var(--fg-3)}
.chat-plan .step-result{display:block;font-size:var(--t-12);color:var(--fg-3)}
.chat-plan .step-more summary{font-size:var(--t-12);color:var(--fg-3);cursor:pointer}
.chat-plan .step-more ul{margin:var(--s-1) 0 0;padding-left:var(--s-4);font-size:var(--t-12);color:var(--fg-3)}
.chat-plan .step-status{min-width:8ch;text-align:right;font:var(--t-12)/var(--lh-row) var(--mono);color:var(--fg-3)}
.chat-plan .step-running{background:var(--bg-2)}
.chat-plan .step-running .step-words,.chat-plan .step-running .step-status{color:var(--fg-1)}
.chat-plan .step-done .step-status{color:var(--fg-1)}
.chat-plan .step-failed .step-status{color:var(--fg-1);font-weight:var(--w-semibold)}
.chat-plan .step-undone .step-words{text-decoration:line-through;text-decoration-color:var(--line-3)}
.chat-plan .plan-follow{margin:var(--s-2) 0 0;font-size:var(--t-12);color:var(--fg-2)}
.chat-plan .plan-tasks{margin:var(--s-2) 0 0}
.chat-plan .plan-tasks ul{margin:var(--s-1) 0 0;padding-left:var(--s-4);color:var(--fg-2)}
.chat-plan .plan-signed{margin:var(--s-2) 0 0;color:var(--fg-1)}
.chat-plan .plan-signed:empty{display:none}
.chat-plan .plan-sign{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:var(--s-3) 0 0}
.chat-plan .plan-sign[hidden]{display:none}
.chat-plan .plan-sign-note,.chat-plan .plan-note{font-size:var(--t-12);color:var(--fg-3)}
.chat-plan .plan-note{margin:var(--s-2) 0 0}
@keyframes chatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes stepFlash{from{background:var(--bg-2)}to{background:transparent}}
@media (prefers-reduced-motion:no-preference){.chat-turn.fresh,.chat-plan.fresh{animation:chatIn var(--t-dialog) var(--ease)}.chat-plan .step.changed{animation:stepFlash var(--t-hover) var(--ease)}}

/* responsive. The sidebar becomes a strip of nav rows above the content; nothing scrolls sideways at any width. */
@media (max-width:860px){
.app{grid-template-columns:minmax(0,1fr)}
.sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
border-right:0;border-bottom:var(--hairline) solid var(--line-1);padding:0 var(--s-2) var(--s-2)}
.nav{flex-direction:row;flex-wrap:wrap;padding:0}
.nav a{padding:0 var(--s-2)}
.nav .count{margin-left:var(--s-1)}
.nav-rule{display:none}
.sidebar-foot{flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:0 var(--s-3);margin:0;padding:var(--s-1) var(--s-2) 0;border-top:0}
.panel{width:100vw}
.chat{padding:var(--s-3)}
.chat-plan .plan-expires{margin-left:0}
}
@media (prefers-contrast:more){
:root{--line-1:var(--line-3);--fg-3:var(--fg-2);--fg-4:var(--fg-2)}
.pill{border-color:currentColor}
td a,th a{text-decoration:underline}
}

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

/* Print: black on white. The brand tokens are redefined for paper, so every rule above prints without a rule of its
   own: grounds go white, text and Edge go black, Cinder becomes a light grey line, and Ember becomes black, so a
   CRITICAL block still prints as a block with its Char text turned white. */
@media print{
:root{color-scheme:light;--char:#ffffff;--soot:#ffffff;--cinder:#cccccc;--edge:#000000;
--ash:#000000;--stone:#000000;--bone:#000000;--ember:#000000}
.sidebar,.pagehead,.filterbar,.cmdk,.sheet,.panel{display:none}
.app{display:block}
main{max-width:none;padding:0}
.scroll{overflow:visible}
a{text-decoration:none}
}
/* Settings (Amendment 03, 5.1, 5.2): a section list beside the sections; on a phone the list is one row of links. */
.settings{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s-6);align-items:start}
.settings-sections{position:sticky;top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-05)}
.settings-sections a{padding:var(--s-1) var(--s-3);border-radius:var(--r);color:var(--fg-2)}
.settings-sections a:hover{color:var(--fg-1);background:var(--bg-1)}
.settings-section{margin:0 0 var(--s-6);scroll-margin-top:var(--s-4)}
.setting{padding:var(--s-3) 0;border-top:var(--hairline) solid var(--line-1)}
.setting-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.setting-head h3{margin:0;font-size:var(--t-15);color:var(--fg-1)}
.setting-prov{font-size:var(--t-12);color:var(--fg-3);white-space:nowrap}
.setting-value{margin:var(--s-1) 0;color:var(--fg-1);overflow-wrap:anywhere}
.setting-states{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin:var(--s-1) 0;font-size:var(--t-13)}
.setting-state.warn{color:var(--warn)}
.setting-change,.setting-details{margin-top:var(--s-1);font-size:var(--t-13)}
.setting-details>summary{cursor:pointer;color:var(--fg-3);list-style:none;padding:var(--s-1) 0;width:max-content}
.setting-details>summary::-webkit-details-marker{display:none}
.setting-details>summary::before{content:"› ";color:var(--fg-4)}
.setting-details[open]>summary::before{content:"⌄ "}
.setting-details dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-1) var(--s-4);margin:var(--s-2) 0 0}
.setting-details dt{color:var(--fg-3)}.setting-details dd{margin:0;overflow-wrap:anywhere}
/* TH-04: the section's second tier of rows sits under a heading, never inside a second disclosure. */
.settings-more{margin-top:var(--s-4)}
.settings-more>h3{margin:0 0 var(--s-1);font-size:var(--t-12);color:var(--fg-3)}
.setting-change>summary.button{list-style:none;cursor:pointer;width:max-content}
.setting-change>summary.button::-webkit-details-marker{display:none}
.setting-change[open]>summary.button{background:var(--bg-2);color:var(--fg-1)}
.policy-form{display:grid;gap:var(--s-1);margin:var(--s-2) 0;max-width:560px}
.policy-form .hint{font-size:var(--t-12);color:var(--fg-3)}
@media (max-width:760px){.settings{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.settings-sections{position:static;flex-direction:row;flex-wrap:wrap}.setting-head{flex-wrap:wrap}}
/* TH-04: one page language. A list screen's title row sits inside the full-bleed list's own gutter; a footer's build
   hashes are one quiet disclosure; a page that owns pages off the rail names them in one line of links. */
.list-title{padding:var(--s-5) var(--s-4) var(--s-3);margin:0}
footer.prov .fold>summary{font-size:var(--t-12)}
.owned{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin:0 0 var(--s-5);font-size:var(--t-13);color:var(--fg-3)}
.owned a{color:var(--fg-2)}
.rule{cursor:default}
/* Tables stack on a phone: each row is a block, each cell a line led by its column's heading (labelTables). */
@media (max-width:640px){
main table:not(.keep-grid) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main table:not(.keep-grid),main table:not(.keep-grid) tbody,main table:not(.keep-grid) tr{display:block;width:100%}
main table:not(.keep-grid) tr{padding:var(--s-2) 0;border-bottom:var(--hairline) solid var(--line-2)}
main table:not(.keep-grid) tbody tr:last-child{border-bottom:0}
main table:not(.keep-grid) td,main table:not(.keep-grid) th[scope=row]{display:block;width:auto;white-space:normal;border-bottom:0;padding:var(--s-05) 0}
main table:not(.keep-grid) td[data-label]::before{content:attr(data-label);display:block;font-size:var(--t-11);color:var(--fg-3)}
}

/* the live frame */
.cc .demo-label{margin:0 0 var(--s-3)}
.case-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin:0 0 var(--s-5);
padding:var(--s-3) var(--s-5);border:var(--hairline) solid var(--line-3);border-radius:var(--r);background:var(--bg-1);color:var(--fg-1)}
.case-bar-main{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
.case-bar .case-status{font:var(--w-semibold) var(--t-17)/1.2 var(--sans);letter-spacing:var(--ls-17)}
.case-bar .because{font-size:var(--t-14)}
.case-bar-basis{flex-basis:100%;font-size:var(--t-13)}
.case-bar-conf{flex-basis:100%;font-size:var(--t-13)}
.case-bar-more{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);font-size:var(--t-13)}
.case-bar-more .case-bar-basis{flex-basis:auto}
.case-bar-exposed{color:inherit}
.case-bar-live{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);font:var(--w-regular) var(--t-12)/1.3 var(--mono)}
.live-dot{display:inline-block;width:8px;height:8px;background:var(--fg-1);opacity:.4}
.cc.cc-pulse .live-dot{opacity:1}
.cc.stale .live-dot{background:var(--fg-3);opacity:1}
.case-bar.case-suspected{border-color:var(--fg-1)}
.case-bar.case-contained,.case-bar.case-closed{border-color:var(--line-1)}
.case-bar.case-attack,.case-bar.case-blind{background:var(--ember);border-color:var(--ember);color:var(--char)}
.case-attack .sev,.case-blind .sev{background:var(--char);border-color:var(--char);color:var(--bone)}
.case-attack .sev.sev-critical,.case-blind .sev.sev-critical{background:var(--char);color:var(--ember)}
.case-attack .live-dot,.case-blind .live-dot{background:var(--char)}
.cases-live{display:flex;align-items:center;gap:var(--s-2);font:var(--w-regular) var(--t-12)/1.3 var(--mono);color:var(--fg-3)}

/* the headline and its figures */
.cc-headline h1{max-width:42ch;margin:0 0 var(--s-2)}
.cc-ref{font:var(--w-regular) var(--t-12)/1.3 var(--mono);color:var(--fg-3);margin:0 0 var(--s-2)}
.cc-who{font-size:var(--t-15);color:var(--fg-2)}
.cc-figures{margin:var(--s-4) 0 var(--s-3)}
.cc-response-line{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.cc-note{font-size:var(--t-13);color:var(--fg-3)}
.cc .muted-line{color:var(--fg-3)}
.cc .mono{font-family:var(--mono)}
.cc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 var(--s-4);align-items:start}
.cc-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.cc-grid,.cc-foot{grid-template-columns:minmax(0,1fr)}}
.cc-section h2{margin-top:0}
.cc .count{color:var(--fg-3);font-weight:var(--w-regular);font-variant-numeric:tabular-nums}

/* the response, read only: the signing panel renders into this section */
.response-state{font-size:var(--t-15);color:var(--fg-1)}
.plan h3{color:var(--fg-1)}
.plan-meta{font-size:var(--t-13);color:var(--fg-3)}
main ol.steps{list-style:none;padding:0;margin:var(--s-2) 0 var(--s-3);max-width:none}
main ol.steps li.step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s-2);margin:0;padding:var(--s-15) 0;
border-top:var(--hairline) solid var(--line-1);font-size:var(--t-13);line-height:var(--lh-row);color:var(--fg-2)}
.step-n{font-family:var(--mono);color:var(--fg-3)}
.step-result{display:block;color:var(--fg-3)}
.step-status{font:var(--w-medium) var(--t-11)/1.6 var(--mono);color:var(--fg-3);white-space:nowrap}
.step-running .step-status,.step-failed .step-status{color:var(--fg-1)}
.step-done .step-status::before{content:"✓ "}
.step-running .step-status::before{content:"› "}
.step-done{color:var(--fg-3)}

/* narrative, cites */
.cc-narrative{font-size:var(--t-15);color:var(--fg-1)}
a.cite{display:inline-block;margin-left:var(--s-05);padding:0 var(--s-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r);
font:var(--w-regular) var(--t-11)/1.4 var(--mono);color:var(--fg-3);text-decoration:none;vertical-align:text-top}
a.cite:hover{color:var(--fg-1);border-color:var(--fg-1)}

/* the timeline */
main ol.timeline{list-style:none;padding:0;margin:0;max-width:none}
main ol.timeline li.tl{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s-3);margin:0;padding:var(--s-2) 0;
border-top:var(--hairline) solid var(--line-1)}
.tl-when{display:flex;flex-direction:column;gap:var(--s-05);font:var(--w-regular) var(--t-12)/1.3 var(--mono);color:var(--fg-3)}
.tl-when .mono{color:var(--fg-2)}
.tl-body p{margin:0;font-size:var(--t-14);color:var(--fg-1)}
main .tl-body p.tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);margin-top:var(--s-1);font-size:var(--t-12);color:var(--fg-3)}
.tl-defend .tl-by,.tl-follow_up_read .tl-by{color:var(--fg-1)}
.tl-defend .tl-by::before{content:"◆ "}
.actor-chip{display:inline-block;padding:0 var(--s-15);border:var(--hairline) solid var(--line-3);border-radius:var(--r);
font:var(--w-regular) var(--t-11)/1.6 var(--mono);color:var(--fg-2);text-decoration:none;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actor-chip.held{border-style:dashed;color:var(--fg-3)}

/* actors, reach, exposure, activity */
table.actors td.estate,table.evidence td{overflow-wrap:anywhere}
.mark{display:inline-block;padding:0 var(--s-15);border:var(--hairline) solid var(--line-3);border-radius:var(--r);font:var(--w-medium) var(--t-11)/1.6 var(--sans);white-space:nowrap}
.mark-active{border-color:var(--fg-1);color:var(--fg-1)}
.mark-held{border-style:dashed;color:var(--fg-3)}
.mark-quiet{color:var(--fg-3)}
tr.actor-held td{color:var(--fg-3)}
.linked-head{margin-top:var(--s-5)}
main ul.exposed .rotate{font:var(--w-semibold) var(--t-12)/1.3 var(--sans);margin-right:var(--s-2)}
main ul.reach,main ul.exposed,main ul.coord,main ul.gaps{list-style:none;padding:0;max-width:none}
main ul.reach li{display:flex;flex-direction:column;gap:var(--s-05);padding:var(--s-2) 0;margin:0;border-top:var(--hairline) solid var(--line-1)}
.reach-cls{font:var(--w-medium) var(--t-11)/1.4 var(--mono);color:var(--fg-3)}
.reach-how{color:var(--fg-1)}
.reach-cert{font-size:var(--t-12);color:var(--fg-3)}
.reach-seen .reach-cls::before{content:"● "}
.reach-allowed .reach-cls::before{content:"○ "}
main ul.exposed li{padding:var(--s-2) 0;margin:0;border-top:var(--hairline) solid var(--line-1)}
main ul.exposed p{margin:0;color:var(--fg-1)}
main ul.exposed p.do{color:var(--fg-2)}
main ul.gaps li::before,main ul.coord li::before{content:"– ";color:var(--fg-3)}
main ol.feed{list-style:none;padding:0;margin:0;max-width:none}
main ol.feed li{margin:0;padding:var(--s-2) 0;border-top:var(--hairline) solid var(--line-1)}
main ol.feed p{margin:0;font-size:var(--t-13)}
main ol.feed p.feed-what{color:var(--fg-1)}
main ol.feed p.feed-why{color:var(--fg-3)}
.job{display:inline-block;margin-right:var(--s-2);font:var(--w-medium) var(--t-11)/1.4 var(--mono);color:var(--fg-3)}
.job-defend{color:var(--fg-1)}
.ev-fold{margin:0 0 var(--s-4)}
.ev-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-2);margin:var(--s-1) 0 0;font:var(--w-regular) var(--t-12)/1.4 var(--mono);color:var(--fg-3)}
.ev-fields dd{margin:0;color:var(--fg-2);overflow-wrap:anywhere}
.ev-id{color:var(--fg-3)}

/* the swarm lineage tree (UX-05) */
.lineage-wrap{overflow-x:auto;margin:0 0 var(--s-3)}
svg.lineage{display:block;min-width:560px;height:auto}
.lineage text{font:var(--w-regular) var(--t-11)/1 var(--mono);fill:var(--fg-3)}
.lineage text.ln-gen{font:var(--w-medium) var(--t-12)/1 var(--sans);fill:var(--fg-1)}
.lineage text.ln-count-held{fill:var(--fg-2)}
.lineage .ln-node rect{fill:var(--bg-1);stroke:var(--fg-1);stroke-width:1}
.lineage .ln-origin rect{stroke-width:2}
.lineage .ln-node text.ln-value{fill:var(--fg-1)}
.lineage .ln-active text .ln-mark{fill:var(--fg-1)}
.lineage .ln-held{opacity:.45}
.lineage .ln-held rect{stroke:var(--line-3);stroke-dasharray:3 3}
.lineage .ln-node:hover rect{fill:var(--bg-2)}
.lineage .ln-edge path{fill:none;stroke:var(--line-3);stroke-width:1}
.lineage .ln-edge-held{opacity:.45}
.lineage .ln-edge-held path{stroke-dasharray:3 3}
.lineage .ln-growing line{stroke:var(--fg-1);stroke-dasharray:4 4}
.lineage .ln-workload rect{rx:10}
.lineage .ln-linked rect{stroke:var(--fg-3);stroke-dasharray:2 4}
.lineage .ln-edge-linked path{stroke:var(--fg-3);stroke-dasharray:2 4}
.lineage .ln-linked-band line{stroke:var(--line-2)}
.lineage .ln-growing text{fill:var(--fg-1)}

/* the Cases list */
.cases-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-4)}
.cases-head .lede{margin:0}
.case-group h2{display:flex;gap:var(--s-2);align-items:baseline}
main ol.case-list{list-style:none;padding:0;margin:0 0 var(--s-5);max-width:none}
main ol.case-list li.case-row{margin:0 0 var(--s-3);border:var(--hairline) solid var(--line-1);border-left-width:4px;border-radius:var(--r);background:var(--bg-1)}
li.case-row.case-suspected{border-left-color:var(--fg-1)}
li.case-row.case-attack,li.case-row.case-blind{border-color:var(--ember)}
a.case-link{display:block;padding:var(--s-4) var(--s-5);color:var(--fg-1);text-decoration:none}
a.case-link:hover{background:var(--bg-2)}
.case-row-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);font-size:var(--t-13)}
.case-row .case-status{font:var(--w-semibold) var(--t-14)/1.2 var(--sans);color:var(--fg-1)}
.case-row .case-ref{margin-left:auto;font-size:var(--t-12);color:var(--fg-3)}
.case-row .because{color:var(--fg-2)}
main .case-row p.case-headline{margin:var(--s-2) 0 var(--s-3);font:var(--w-semibold) var(--t-22)/1.25 var(--serif);color:var(--fg-1);max-width:none}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-2) var(--s-4);margin:0 0 var(--s-2)}
.case-facts dt{font-size:var(--t-12);color:var(--fg-3)}
.case-facts dd{margin:0;font-size:var(--t-13);color:var(--fg-1)}
.case-facts .muted{color:var(--fg-3)}
.growing{font:var(--w-medium) var(--t-11)/1.4 var(--mono);color:var(--fg-1)}
main .case-row p.case-conf{margin:0;font-size:var(--t-12);color:var(--fg-3)}

/* what arrived since the last update */
.cc .fresh,.cc .changed{background:var(--bg-2)}
.cc .tl.fresh .tl-by::after{content:" · new"}
.cc .ln-node.fresh rect,.cc .ln-node.changed rect{fill:var(--bg-2)}
.cc tr.fresh>td,.cc tr.changed>td{background:var(--bg-2)}
@media (prefers-reduced-motion:no-preference){
.cc .fresh,.cc .changed{animation:ccIn var(--t-dialog) var(--ease)}
.cc .live-dot{transition:opacity var(--t-dialog) var(--ease)}
}
@keyframes ccIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}


.response{margin:0 0 var(--s-6);max-width:1080px}
.response [hidden]{display:none}
main ol.steps{max-width:none;padding-left:0}
.response-head{display:flex;align-items:baseline;gap:var(--s-3);margin:0 0 var(--s-3)}
.response-head h2{margin:0}
.response-state{font:var(--w-medium) var(--t-12)/1 var(--mono);color:var(--fg-2)}
.response .mono,.case-line .mono,.live-clock,.live-beat{font-family:var(--mono);font-variant-numeric:tabular-nums}
.live-clock{color:var(--fg-1);font-size:var(--t-12);margin-right:var(--s-3)}
.live-beat{color:var(--fg-3);font-size:var(--t-12);margin-right:var(--s-4)}
.case-line{border-top:3px solid var(--line-3);background:var(--bg-1);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);border-radius:var(--r)}
.case-line.case-attack{border-top-color:var(--ember)}
.case-line p{margin:0 0 var(--s-1)}
.case-headline{font:var(--w-semibold) var(--t-22)/1.25 var(--serif);letter-spacing:var(--ls-22)}
.case-headline a{color:var(--fg-1);text-decoration:none}
.case-conf{color:var(--fg-3);font-size:var(--t-12)}
.case-state .sev{display:inline-flex;align-items:center;height:20px;padding:0 var(--s-2);border-radius:var(--r);border:var(--hairline) solid var(--line-3);font:var(--w-medium) var(--t-11)/1 var(--sans)}
.plan{background:var(--bg-1);border:var(--hairline) solid var(--line-1);border-radius:var(--r);padding:var(--s-5);margin:0 0 var(--s-4)}
.plan-head .label{margin:0 0 var(--s-1)}
.plan-title{font:var(--w-semibold) var(--t-22)/1.25 var(--serif);letter-spacing:var(--ls-22);color:var(--fg-1);margin:0 0 var(--s-2)}
.plan-meta{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0 0 var(--s-4);color:var(--fg-3);font-size:var(--t-12)}
.plan-state{color:var(--fg-1);font-weight:var(--w-semibold);transition:background-color var(--t-hover) var(--ease)}
.plan[data-plan-state=drafted] .plan-state,.plan[data-plan-state=running] .plan-state,.plan[data-plan-state=signed] .plan-state{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.plan-gone,.plan-why{color:var(--fg-2);margin:0 0 var(--s-3)}
.plan-changed{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);border-left:2px solid var(--fg-1);background:var(--bg-2);color:var(--fg-1);font-weight:var(--w-semibold)}
.plan-sign{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4);padding:var(--s-4);background:var(--bg-inset);border:var(--hairline) solid var(--line-3);border-radius:var(--r)}
.plan-sign .button.primary{height:40px;padding:0 var(--s-6);font-size:var(--t-15)}
.plan-seal{margin:0;color:var(--fg-2);flex:1 1 280px}
.plan-signed{color:var(--fg-1);margin:0 0 var(--s-3)}
.plan-control{display:inline-block;margin:0 0 var(--s-3)}
.plan-follow{color:var(--fg-2);margin:0 0 var(--s-4);padding-left:var(--s-3);border-left:2px solid var(--line-3)}
.steps{list-style:none;margin:0 0 var(--s-4);padding:0;border-top:var(--hairline) solid var(--line-1)}
.step{display:grid;grid-template-columns:32px 1fr minmax(120px,auto);gap:var(--s-3);padding:var(--s-3) 0;border-bottom:var(--hairline) solid var(--line-1);border-left:2px solid transparent;padding-left:var(--s-2);transition:background-color var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease)}
.step.changed{background:var(--bg-2)}
.step[data-status=running]{border-left-color:var(--fg-1);background:var(--bg-2)}
.step[data-status=done]{border-left-color:var(--line-3)}
.step[data-status=failed]{border-left-color:var(--fg-1)}
.step[data-status=undone] .step-main,.step[data-status=stopped] .step-main{opacity:.7}
.step-n{color:var(--fg-3);padding-top:2px}
.step-head{margin:0 0 var(--s-1);color:var(--fg-1)}
.step-target{margin:0 0 var(--s-1);color:var(--fg-1);font-size:var(--t-12);overflow-wrap:anywhere}
.step-does{margin:0 0 var(--s-1);color:var(--fg-2)}
.step-facts{margin:0;padding:0;list-style:none;color:var(--fg-3);font-size:var(--t-12)}
.step-result{margin:var(--s-1) 0 0;color:var(--fg-1)}
.step-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);text-align:right}
.step-status{font:var(--w-semibold) var(--t-12)/1.2 var(--mono);color:var(--fg-2);text-transform:uppercase;letter-spacing:.08em}
.step[data-status=running] .step-status,.step[data-status=done] .step-status,.step[data-status=failed] .step-status{color:var(--fg-1)}
.step-time{color:var(--fg-3);font-size:var(--t-11)}
.step-side .plan-control{margin:var(--s-1) 0 0}
.step-side .plan-control button{height:var(--h-control);padding:0 var(--s-3)}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 var(--s-15);margin-left:var(--s-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r);font:var(--w-medium) var(--t-11)/1 var(--mono);color:var(--fg-2)}
.tag.tag-critical{background:var(--ember);border-color:var(--ember);color:var(--char)}
.plan-tasks h3{font:var(--w-semibold) var(--t-13)/var(--lh-tight) var(--sans);color:var(--fg-1);margin:var(--s-4) 0 var(--s-2)}
.plan-tasks ul{margin:0;padding-left:var(--s-5)}
.plan-words{margin:var(--s-4) 0 0}
.plan-words summary{cursor:pointer;color:var(--fg-2)}
.plan-words pre{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--w-regular) var(--t-12)/var(--lh-prose) var(--mono);color:var(--fg-1);background:var(--bg-inset);border:var(--hairline) solid var(--line-1);border-radius:var(--r);padding:var(--s-3) var(--s-4);margin:var(--s-2) 0 0}
.secure-offer{margin:0 0 var(--s-4);background:var(--bg-1);border:var(--hairline) solid var(--line-3);border-radius:var(--r);padding:var(--s-3) var(--s-4);color:var(--fg-1);transition:background-color var(--t-hover) var(--ease)}
.secure-offer.changed{background:var(--bg-2)}
.live-off{color:var(--fg-2)}
@media (max-width:720px){.step{grid-template-columns:24px 1fr}.step-side{grid-column:2;align-items:flex-start;text-align:left}}