/* RAID Test Console, in the RAID demo's design language (RAID_Demo_v17):
   dark navy layered surfaces, teal identity, hairline borders, the severity
   ladder, Fraunces for the brand voice, Inter for UI, DM Mono for every number.
   Class names are unchanged from Console v1 so the JS binds untouched; the
   legacy accent names (--violet et al.) are kept as ALIASES into this palette
   so inline var() references keep working. */
:root{
  /* THE TYPE TAXONOMY. Four sizes, named, and nothing on the Welcome page is
     allowed a size outside them. The architecture diagram's own labels resolve
     to the same four, so a token means the same pixels inside the picture as it
     does in the prose beside it.

       big     the page title, once per page
       medium  body copy, box names, section headings
       small   secondary and muted text, table cells, sub-labels
       teeny   pills, chips, mono codes, legend, table headers

     Kept here rather than in the Welcome block because it is meant to be the
     vocabulary the rest of the console adopts next; today only Welcome uses it,
     and archDiagram() mirrors the three it needs. If you change a number here,
     change FS_PX in archDiagram() to match. */
  --fs-lg:20px; --fs-md:14px; --fs-sm:12px; --fs-xs:10px;
  /* surfaces + text (v17 tokens) */
  --bg:#071E2C; --s1:#0d2538; --s2:#102d42; --s3:#1a3a52;
  --text:#ffffff; --text2:#c8d0e0; --text3:#8b93a8;
  --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.22);
  /* identity + severity ladder */
  --teal:#00c2a8; --teal-d:rgba(0,194,168,0.08); --teal-b:rgba(0,194,168,0.22);
  --crit:#e05252; --crit-d:rgba(224,82,82,0.12);
  --high:#e07c35; --high-d:rgba(224,124,53,0.12);
  --amber:#d4a017; --amber-d:rgba(212,160,23,0.12);
  --green:#4caf7d; --green-d:rgba(76,175,125,0.12);
  --norm:#4a90d9; --norm-d:rgba(74,144,217,0.12);
  /* legacy aliases used by console.js inline styles */
  --ink:var(--text); --muted:var(--text3); --line:var(--border);
  --card:var(--s1); --accent:var(--teal); --good:var(--green);
  --warn:var(--high); --violet:var(--amber); --red:var(--crit);
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--text2);background:var(--bg);
  line-height:1.5;font-size:13.5px}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ---- chrome: the gnav idiom ---- */
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--s1);
  border-bottom:1px solid var(--border);padding:9px 18px;position:sticky;top:0;z-index:5}
.topbar .brand{display:flex;align-items:center;gap:10px;margin-right:14px}
.brand-mark{width:30px;height:30px;background:var(--teal);display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:15px;font-weight:600;
  color:#071E2C;flex-shrink:0;border-radius:2px}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-name{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--text)}
.brand-sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--teal)}
.badge{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:3px;
  background:var(--s3);color:var(--text2);border:1px solid var(--border)}
.badge.real{background:var(--green-d);color:var(--green);border-color:rgba(76,175,125,.3)}
.badge.sandbox{background:var(--amber-d);color:var(--amber);border-color:rgba(212,160,23,.3)}
.badge.shape{background:var(--teal-d);color:var(--teal);border-color:var(--teal-b)}
.topbar label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3)}
.layout{display:flex;min-height:calc(100vh - 92px)}
.nav{width:200px;flex:none;padding:14px 8px;border-right:1px solid var(--border);
  background:rgba(13,37,56,.5)}
.nav a{display:block;padding:7px 12px;border-left:2px solid transparent;color:var(--text3);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  margin:1px 0}
.nav a:hover{color:var(--text);border-left-color:var(--border2);text-decoration:none}
.nav a.active{color:var(--teal);border-left-color:var(--teal);background:rgba(0,194,168,0.12)}
.nav .sub{margin-left:10px;font-size:10px}
.main{flex:1;min-width:0;padding:18px 22px 70px;max-width:1080px}
/* The Welcome page is the one screen that gets read from across a room: it is
   what a screen share opens on, and the architecture diagram scales to its
   container, so the 1080px column that suits a reading screen was throwing away
   half a wide display and shrinking the diagram to match. Wide raises the cap
   and lifts the page's own type with it. Every other screen keeps 1080, where a
   measured column is the right call for reading. */
.main.wide{max-width:min(1600px, 94vw)}
.main.wide h2{font-size:var(--fs-lg)}
.main.wide h3{font-size:var(--fs-md)}
.main.wide .card{padding:17px 19px}
/* The diagram stops growing with the column. It is an SVG scaled to its
   container, so a fluid width meant its labels grew past the page's own type
   the wider the window got: at 1836px they rendered at 23px, larger than the
   title. Capped here, and archDiagram() sizes its text against this exact
   number, which is what makes a token mean the same pixels in both places. */
.main.wide .wl-diagram{max-width:1500px;margin:6px 0}
/* Welcome's type scale: THREE sizes, and the markup carries none of them.
   The page had drifted to 15.5 / 14 / 13.5 / 13 / 12.5 / 11 / 10 through
   successive tweaks, which reads as noise rather than hierarchy, and meant a
   size change had to be made in a dozen inline styles. Body, small, micro. */
.main.wide .what,
.main.wide .wl-body,
.main.wide .wl-stepitem{font-size:var(--fs-md);line-height:1.55}
/* Everything below is a size some OTHER rule sets, pulled onto the scale. Left
   alone the page renders nine distinct sizes; these are the six that were not
   deliberate, each one a global default that happened to land here. */
.main.wide .wl-small,
.main.wide table,
.main.wide .outputs-name,
.main.wide .outputs-action,
.main.wide td.mono,
.main.wide .btn{font-size:var(--fs-sm)}
.main.wide .wl-micro,
.main.wide .pill,
.main.wide .outputs-chip,
.main.wide th{font-size:var(--fs-xs)}
/* Prose keeps its measure even though the column no longer does. The page runs
   wide so the diagram can be read from across a room; a 1900px line of text
   would be the opposite of readable. */
.main.wide .what{max-width:96ch}
.main.wide .wl-lead{margin:0 0 12px}
/* The three operation cards drop to small. They are supporting material for the
   diagram below them, and at medium they carried the same weight as the body
   copy of the thing they introduce. Their headings stay medium, so each card
   reads title-then-detail rather than one flat block. */
.main.wide .wl-op .what{font-size:var(--fs-sm)}
/* 1.85 was giving the three cards a lot of air for two lines of text. */
.main.wide .wl-steps{line-height:1.6;max-width:70ch}
.main.wide .wl-stepitem{margin:9px 0;max-width:110ch}
.foot{color:var(--text3);font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;
  border-top:1px solid var(--border);padding:10px 18px;background:var(--s1)}

/* ---- shared idiom ---- */
h2{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--text);
  margin:6px 0 10px;letter-spacing:-.2px}
h2 .muted{font-family:var(--sans);font-weight:400}
h3{font-size:13px;font-weight:600;color:var(--text);margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.card{background:var(--s1);border:1px solid var(--border);border-radius:10px;
  padding:15px 17px;margin:11px 0}
.what{color:var(--text3);font-size:12.5px;margin:2px 0 10px;max-width:80ch}
.what b{color:var(--text2)}
.row{display:flex;flex-wrap:wrap;gap:18px;margin:8px 0;align-items:center}
.stat{min-width:96px;align-self:flex-start}
.stat .n{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--text);
  letter-spacing:-.02em}
.stat .l{font-family:var(--mono);font-size:8.5px;color:var(--text3);
  text-transform:uppercase;letter-spacing:.14em;margin-top:2px}
/* the driver's move in its own market units, under the severity it renders.
   Its own element rather than a line inside .l, which uppercases and
   letter-spaces at 8.5px and made a dollar figure read as a clipped label. */
/* the driver's move in market units, riding on the label. Bumped off the
   label's 8.5px because this is a number a desk reads, not a caption. */
/* --s2 is a SURFACE token, so this painted the shock in the card's own
   background and it has never been legible. It is the market-unit reading of
   the severity beside it, which is the thing Dani asked to see. */
.stat .unit{color:var(--text2);font-size:11px;letter-spacing:.03em;text-transform:none;
  white-space:nowrap}
.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;
  margin:2px 5px 2px 0;border:1px solid transparent}
.pill.good{background:var(--green-d);color:var(--green);border-color:rgba(76,175,125,.3)}
.pill.warn{background:var(--high-d);color:var(--high);border-color:rgba(224,124,53,.3)}
.pill.plain{background:var(--s3);color:var(--text2);border-color:var(--border)}
.pill.red{background:var(--crit-d);color:var(--crit);border-color:rgba(224,82,82,.3)}
.pill.violet{background:var(--amber-d);color:var(--amber);border-color:rgba(212,160,23,.3)}
.pill.blue{background:var(--norm-d);color:var(--norm);border-color:rgba(74,144,217,.3)}
/* A SEVERITY NOT BACKED BY HISTORY. Sasha, 2026-08-19: where the evidence base
   is not good, the number itself prints amber, so a reader can see at a glance
   that the figure is simulated rather than measured. The line is drawn once, in
   story_severity.for_story, and read here through sevAmber(). The dotted rule
   under it is what says there is something to hover for. */
.sev-simulated{color:var(--amber);border-bottom:1px dotted rgba(212,160,23,.55);cursor:help}
.bar{height:7px;border-radius:4px;background:var(--s3);overflow:hidden;flex:1;min-width:90px}
.bar>span{display:block;height:100%;background:var(--teal)}
table{border-collapse:collapse;width:100%;font-size:12.5px;margin-top:4px}
td,th{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.12em;font-weight:500}
tr:hover td{background:rgba(255,255,255,0.02)}
td.r{text-align:right;color:var(--text2);font-family:var(--mono);font-size:12px;white-space:nowrap}
/* A numeric heading belongs over its numbers. Without this every right-aligned
   column had its label parked at the far left of the column, which reads as a
   misalignment even when the figures underneath are perfectly ranged. */
th.r{text-align:right}
td b{color:var(--text)}
.mono{font-family:var(--mono);font-size:11px}
.muted{color:var(--text3)}
.note{background:var(--teal-d);border:1px solid var(--teal-b);border-radius:8px;
  padding:11px 13px;margin:10px 0;font-size:12.5px;color:var(--text2)}
.note b{color:var(--text)}
.btn{font-size:12px;font-weight:600;color:#071E2C;background:var(--teal);border:none;
  border-radius:5px;padding:8px 14px;cursor:pointer;font-family:var(--sans);
  letter-spacing:.01em}
.btn:hover{filter:brightness(1.08)}
.btn.violet{background:var(--amber);color:#071E2C}
.btn.plain{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.btn.small{font-size:11px;padding:5px 10px}
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:8px 0;border-bottom:1px solid var(--border)}
.tabs .btn{background:transparent;color:var(--text3);border:none;border-bottom:2px solid transparent;
  border-radius:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 12px}
.tabs .btn.on{color:var(--teal);border-bottom-color:var(--teal);background:rgba(0,194,168,0.12)}
input[type=number],input[type=text],select{font-family:var(--mono);font-size:12px;
  padding:6px 8px;border:1px solid var(--border2);border-radius:5px;background:var(--s2);
  color:var(--text)}
select option{background:var(--s2);color:var(--text)}
label{font-size:11.5px;color:var(--text3);font-weight:500}
/* THE PER-COLUMN FILTER ROW. A control under each heading, filtering the column
   it sits under, which is what a reader of a table expects and what a single
   search box cannot express: "equities, over fifty trades, not solved yet" is
   three columns and one box cannot say it. Generic on purpose so the other
   tables in the product can adopt it rather than growing their own. */
/* The heading and its filter are one unit, so only the pair carries a rule
   under it; a border on each drew a double line across the whole table. */
tr.sorthead th{border-bottom:none;padding-bottom:3px}
tr.colfilter th{padding:2px 8px 6px;vertical-align:middle}
tr.colfilter input,tr.colfilter select{width:100%;min-width:0;padding:3px 5px;
  font-size:10.5px;border-radius:4px}
tr.colfilter input::placeholder{color:var(--text3);opacity:.75}
tr.colfilter .on{border-color:var(--teal);color:var(--teal)}
textarea{width:100%;min-height:56px;font-size:12.5px;border:1px solid var(--border2);
  border-radius:5px;padding:7px 9px;font-family:var(--sans);background:var(--s2);
  color:var(--text)}
details summary{cursor:pointer}

/* ---- sweep axis + curve ---- */
.axis{position:relative;height:52px;margin:14px 0 4px}
.axis .track{position:absolute;top:26px;left:0;right:0;height:3px;background:var(--s3);border-radius:2px}
.axis .mk{position:absolute;top:5px;transform:translateX(-50%);text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);white-space:nowrap}
.axis .mk .dot{width:8px;height:8px;border-radius:50%;margin:0 auto 3px}
.axis .mk .mono{color:var(--text2);font-size:10.5px}
.curve{width:100%;height:120px;margin-top:6px}
.curve polyline{stroke:var(--teal) !important}

/* ---- stations ---- */
.station-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
@media (max-width:900px){.station-grid{grid-template-columns:1fr}}
.chip{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:3px;
  background:var(--s3);color:var(--text3);margin-left:8px;vertical-align:middle;
  border:1px solid var(--border)}
.chip.edited{background:var(--amber-d);color:var(--amber);border-color:rgba(212,160,23,.3)}
.delta-up{color:var(--crit);font-weight:700;font-family:var(--mono)}
.delta-down{color:var(--green);font-weight:700;font-family:var(--mono)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12.5px}
.kv div:nth-child(odd){font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);padding-top:2px}
pre.json{background:#05161f;border:1px solid var(--border);border-radius:8px;
  padding:10px;font-size:11px;color:var(--text2);overflow:auto;max-height:420px;
  font-family:var(--mono)}
.loading{color:var(--text3);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:16px 0}
.err{color:var(--crit);font-size:12.5px;padding:10px 0;white-space:pre-wrap;
  font-family:var(--mono)}

/* transit rail: the between-gates progress animation on Propose. Vertical
   dots fill top to bottom while the engine's non-interactive passes run;
   gates (where the officer acts) are the only chevron tabs. */
.transit{position:relative;margin:8px 0 2px 6px;padding-left:24px}
.transit .tstep{position:relative;padding:0 0 16px 0;opacity:.28;transition:opacity .35s}
.transit .tstep:last-child{padding-bottom:2px}
.transit .tstep:before{content:'';position:absolute;left:-24px;top:3px;width:11px;height:11px;
  border-radius:50%;background:var(--s3);border:2px solid var(--border2);box-sizing:border-box;
  transition:background .3s,border-color .3s}
.transit .tstep:after{content:'';position:absolute;left:-19px;top:16px;bottom:1px;width:2px;background:var(--border)}
.transit .tstep:last-child:after{display:none}
.transit .tstep.now{opacity:1}
.transit .tstep.now:before{background:var(--bg);border-color:var(--teal);animation:tpulse 1.1s ease-in-out infinite}
.transit .tstep.done{opacity:.8}
.transit .tstep.done:before{background:var(--green);border-color:var(--green)}
.transit .tstep.done:after{background:var(--green-d)}
.transit .tt{font-size:12.5px;color:var(--text2)}
.transit .tstep.now .tt{color:var(--text)}
.transit .td{font-size:11px;color:var(--text3);margin-top:2px}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,194,168,.4)}50%{box-shadow:0 0 0 7px rgba(0,194,168,0)}}
/* animated connector between gate pills while a transit is running */
.tdots i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--teal);
  margin:0 2px;vertical-align:middle;animation:tblink 1s infinite}
.tdots i:nth-child(2){animation-delay:.22s}
.tdots i:nth-child(3){animation-delay:.44s}
@keyframes tblink{0%,100%{opacity:.15}50%{opacity:1}}
/* Reverse's rail while Steps 2 and 3 are being carried from the originating
   scenario. Breathes rather than blinks: nothing is computing, the step is
   being handed across, and a hard blink would read as work in progress. */
@keyframes rvcarry{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- outputs table (Welcome, directly under the architecture card) ----
   What each of the four architecture outputs lets a user DO, and who does it.
   Rides the shared .card / h3 / .what / table idiom rather than repainting it,
   so the source's #0b1622 card, #5eead4 accent and slate greys resolve to the
   console's own --s1 / --teal / --text3. The only new paint is the role chips:
   those are mixed-case job titles, not labels, so they take a rounded chip
   instead of the 9px uppercase .pill/.chip used everywhere else. */
table.outputs-table{table-layout:fixed}
table.outputs-table col.c-output{width:15%}
table.outputs-table col.c-action{width:24%}
table.outputs-table col.c-desc{width:41%}
table.outputs-table col.c-users{width:20%}
.outputs-table th{padding-bottom:10px}
.outputs-table td{padding:14px 8px;line-height:1.6}
.outputs-table tbody tr:last-child td{border-bottom:none}
.outputs-name{color:var(--text);font-weight:600;font-size:13px;line-height:1.4}
.outputs-action{color:var(--teal);font-weight:600}
.outputs-users{display:flex;flex-wrap:wrap;gap:6px}
.outputs-chip{font-size:10.5px;color:var(--text2);background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px;white-space:nowrap}
h3 .outputs-sub{color:var(--teal);font-weight:500;margin-left:9px}
/* under 900px four columns stop fitting side by side, so each row becomes its
   own stacked block and the header goes away (same breakpoint as .station-grid) */
@media (max-width:900px){
  .outputs-table,.outputs-table thead,.outputs-table tbody,
  .outputs-table th,.outputs-table td,.outputs-table tr{display:block}
  .outputs-table col{width:auto}
  .outputs-table thead{display:none}
  .outputs-table td{padding:4px 10px;border-bottom:none}
  .outputs-table tbody tr{border:1px solid var(--border);border-radius:8px;
    padding:10px 0;margin-bottom:10px}
}

/* ---- the co-author dialogue thread (v0.3 Forward) ---- */
.thread{max-height:420px;overflow-y:auto;padding:2px 2px 2px 0;margin-top:4px}
.msg{display:flex;gap:8px;margin:9px 0;align-items:flex-start}
.msg .pill{flex:0 0 auto;margin-top:2px}
.msg .bubble{flex:1;font-size:13px;line-height:1.55;background:var(--s3);
  border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.msg .bubble .btn{margin:2px 4px 2px 0}

/* ---- the deployment architecture diagram (Welcome, bottom) ----
   Nested boxes rather than an SVG with arrows, because the thing this diagram
   has to carry is CONTAINMENT: what sits inside what, and which boundary a
   packet would have to cross. Nesting says that natively and reflows on a
   narrow screen, where a fixed-viewBox SVG of this density does not.

   The flow statements the original drew as arrows are carried as sub-labels on
   the boxes themselves (":443, from Front Door only", "no outbound internet
   route at all"), which is where they were already written. */
.az{border:1px dashed var(--norm);border-radius:10px;padding:9px 10px 11px;
  margin-top:8px;background:rgba(74,144,217,0.04)}
.az-t{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--norm);margin-bottom:7px}
.az-vnet{border:1px dashed var(--teal);background:rgba(0,194,168,0.04)}
.az-vnet>.az-t{color:var(--teal)}
.az-sub{border:1px dashed var(--border2);background:transparent;margin-top:8px}
.az-sub>.az-t{color:var(--text3)}
.az-out{border:1px dashed var(--border2);background:transparent}
.az-out>.az-t{color:var(--text3)}
.az-row{display:flex;flex-wrap:wrap;gap:8px}
.az-row>*{flex:1 1 168px;min-width:0}
.az-b{border:1px solid var(--border2);border-radius:8px;padding:7px 9px;
  background:var(--s2)}
.az-b b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.az-b span{display:block;font-size:10.5px;color:var(--text3);line-height:1.45;
  margin-top:2px}
.az-b .mono{font-family:var(--mono);font-size:10px;letter-spacing:.02em}
.az-app{border-color:var(--teal);background:rgba(0,194,168,0.10);flex-basis:280px}
.az-app b{color:var(--teal)}
.az-app .az-here{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.az-cpu{border-color:var(--amber);background:rgba(212,160,23,0.07);flex-basis:280px}
.az-svc{border-color:var(--norm);background:rgba(74,144,217,0.07)}
.az-data{border-color:var(--green);background:rgba(76,175,125,0.07)}
.az-ext{border-style:dashed;border-color:var(--border2);background:transparent}
.az-ext b{color:var(--text2)}
.az-key{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:9px;
  font-size:10.5px;color:var(--text3);align-items:center}
.az-key i{display:inline-block;width:15px;height:10px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;border:1px solid var(--border2)}

/* ---------------------------------------- the news read, at reading size (ASP-234)
   Sasha, from the SMBC session: the news read is too small to read on a shared
   screen. It is a shared screen in a session whose whole point is that the
   other person operates the tool, so the floor matters more here than the
   density does.

   MEASURED BEFORE CHANGING ANYTHING, on the live build at console v260: 1277
   pieces of text on this screen, 489 of them under 11px and 283 at 9 or 9.5px.
   Of the text under 12px, 596 elements carried an INLINE font-size and 117 got
   it from a class. So the inline literals are raised in the painters, where
   they are written, and this block raises the rest.

   The floor is 11.5px and body copy is 14px, which is the design system's own
   --fs-md. Scoped to .newsread so no other screen moves; the taxonomy at the
   top of this file is what the console adopts next, and this is a step toward
   it rather than a private scale. */
.newsread .mono{font-size:13px}
.newsread th{font-size:11.5px}
.newsread table{font-size:14px}
.newsread td.r{font-size:13.5px}
.newsread .what{font-size:14px}
.newsread .note{font-size:14px}
.newsread .pill{font-size:11.5px}
.newsread .btn.small{font-size:12.5px}
.newsread h3{font-size:14.5px}
.newsread .stat .l{font-size:10.5px}