/* Tether get-the-bits page. The only motion is the platform panel settling when
   the shown platform changes — that encodes a real state change (which platform
   these steps are for), and it collapses under prefers-reduced-motion. */

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}

.get {
  max-width: 54rem;
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
  min-width: 0;
}

.get__header { margin-bottom: var(--s-7); }

.get h1 {
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: var(--s-3);
}

.get__sub {
  text-wrap: pretty;
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
}

.empty-state {
  margin-bottom: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--fail);
  border-radius: var(--r-lg);
  /* Calm surface, red only as the edge accent and on the verdict badges: a wall of
     red tint made the honest "nothing yet" state read as an error page. */
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.empty-state h2 {
  font-size: var(--t-24);
  margin-bottom: var(--s-3);
}

.empty-state__body,
.empty-state__note {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
}

.empty-state__note { margin-top: var(--s-4); }

/* The one thing that changed since the honest "nothing published" framing
   above: a local, hash-pinned macOS install path now works (tools/install.sh
   --archive, verified 2026-09-18). --info, not --pass, because this is a
   local dev-loop capability, not a released, signed artifact -- the empty
   state above it stays exactly as pessimistic as measurement requires. */
.local-install {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--info-line);
  border-radius: var(--r-lg);
  background: var(--tint-info);
  box-shadow: var(--depth-1);
}
.local-install__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info);
  box-shadow: var(--e-1), inset 0 1px 0 var(--overlay-up);
}
.local-install__icon svg { width: 20px; height: 20px; }
.local-install h2 {
  font-size: var(--t-18);
  margin-bottom: var(--s-2);
}
.local-install__body {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
}
.local-install__body a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 34rem) {
  .local-install { flex-direction: column; }
}

.evidence {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
}

.evidence > div {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-1);
  min-width: 0;
}

.evidence dt {
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Real inline SVG per evidence row and per platform panel (CSP-legal markup,
   same technique as web/landing/styles.css .feature__icon) -- these lists
   had a label and a verdict badge, nothing that told a fact from a fact or a
   platform from a platform at a glance. */
.evidence__icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

.evidence dd {
  margin: 0;
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
}

.verdict {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 600;
}
/* --tint-* not --*-dim: state-coloured TEXT on a translucent tint measures ~4.2:1 in
   light mode, below AA. The tint vars are opaque in light and identical to the -dim
   tints in dark, so the treatment is unchanged where it already passed. */
.verdict--fail { color: var(--fail); background: var(--tint-fail); border-color: var(--fail-line); }
.verdict--warn { color: var(--warn); background: var(--tint-warn); border-color: var(--warn-line); }
.verdict--pass { color: var(--pass); background: var(--tint-pass); border-color: var(--pass-line); }

.platforms { margin-bottom: var(--s-8); }

.platforms h2 {
  font-size: var(--t-24);
  line-height: 1.22;
  margin-bottom: var(--s-2);
}

.platforms__lead,
.platforms__fallback {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
  max-width: var(--measure);
  margin-bottom: var(--s-4);
}

.detect {
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(127, 176, 227, 0.28);
  border-radius: var(--r-md);
  background: var(--info-dim);
  margin-bottom: var(--s-4);
}

/* display: flex / block below would otherwise beat the [hidden] UA rule, so a
   no-JavaScript visitor would see a switcher that cannot switch anything. */
.detect[hidden],
.switcher[hidden],
.platforms__fallback[hidden] { display: none; }

.detect__line {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.5;
}

.detect__value { color: var(--text-1); }

.detect__source {
  font-family: var(--mono);
  font-size: var(--t-12);
  /* --text-3 on the detect panel measured 4.45:1 in light mode (pixels); --text-2 clears 4.5:1. */
  color: var(--text-2);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.switcher__label {
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: var(--s-1);
}

.switcher__btn {
  /* Keep a full 44 CSS px after Chromium's fractional font/layout rounding. */
  min-height: 45px;
  min-width: 44px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-13);
}

.switcher__btn[aria-pressed="true"] {
  background: var(--surface-3);
  border-color: rgba(127, 176, 227, 0.62);
  color: var(--text-1);
}

.detect a:focus-visible,
.switcher__btn:focus-visible,
.get a:focus-visible,
.site-nav a:focus-visible,
.pagefoot a:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
/* Same specificity + later source order was clobbering shared.css's
   .btn--primary:focus-visible outline-color fix (--info on an --info fill
   measures ~1:1). Restore it here. */
.site-nav a.btn--primary:focus-visible {
  outline-color: var(--focus-ring);
}
/* .local-install is a --tint-info box (--info-dim in dark mode, --surface-1
   in light mode); a plain --info outline on a link inside it has the same
   near-1:1 problem. --on-info is the wrong swap here: it is tuned for a
   *solid* --info fill (.btn--primary above) and flips to white in light
   mode, invisible on the light --surface-1 tint. --text-1 contrasts against
   the tint in both schemes. */
.local-install a:focus-visible {
  outline-color: var(--text-1);
}

.panel {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--depth-2);
  margin-bottom: var(--s-4);
  min-width: 0;
  /* Settles when the shown platform changes. shared.css zeroes this under
     prefers-reduced-motion: reduce. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  opacity: 1;
  transform: translateY(0);
}

/* display:none -> block cannot run the opacity transition above, so a deliberate
   platform switch plays a short entrance instead. First paint never animates
   (download.js sets data-panel-motion only on a user switch); shared.css zeroes
   animation under prefers-reduced-motion: reduce. */
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-panel-motion="on"] .panel[data-active="true"] {
  animation: panel-enter var(--dur) var(--ease) both;
}

.panel[data-active="false"] {
  opacity: 0;
  transform: translateY(4px);
}

.panel[hidden] { display: none; }

.panel h3 {
  font-size: var(--t-20);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.panel__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--info);
}

.panel__note {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: var(--s-4);
}

/* A step's outcome is the input the next step checks (build -> its sha256 ->
   an install that verifies that sha before unpacking -> a pair that needs that
   install). The connecting spine says so instead of leaving four numbered
   cards to look like four independent options. Structural only: a static
   border-image, nothing here is state or transitions under reduced motion. */
.steps-list {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0 0 0 var(--s-2);
  display: grid;
  gap: var(--s-5);
  position: relative;
}

.steps-list::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: calc(var(--s-5) + 6px);
  left: calc(var(--s-2) + var(--s-5) / 2 - 1px);
  width: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, var(--info-line) 0%, var(--info-line) 100%);
}

.steps-list li {
  counter-increment: step;
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-7);
  position: relative;
  min-width: 0;
}

.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s-5);
  height: var(--s-5);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--info-line);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 600;
  z-index: 1;
}

.steps-list__depends {
  font-size: var(--t-12);
  color: var(--text-3);
  font-family: var(--mono);
}
.steps-list__depends::before { content: "\2192\0020"; }

.steps-list__what {
  font-size: var(--t-13);
  color: var(--text-1);
  line-height: 1.5;
}

/* One code block: the command and its Copy control live in a single bordered box
   (download.js adds .cmdbox). Without JavaScript there is no Copy control, so .cmd
   keeps its own border and the page reads the same minus the button. */
.cmd {
  display: block;
  padding: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--t-12);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cmdbox {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--sunk);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.cmdbox:hover, .cmdbox:focus-within { border-color: var(--info-line); }
.cmdbox .cmd {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  align-self: center;
}

.cmd-copy {
  flex: none;
  align-self: stretch;
  min-height: var(--tap);
  min-width: 4.5rem;
  padding: 0 var(--s-3);
  border: 0;
  border-left: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--t-11)/1 var(--sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.cmd-copy:hover { color: var(--text-1); background: var(--surface-1); }
.cmd-copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cmd-copy[data-copy-state="done"] { color: var(--pass); background: var(--tint-pass); }
.cmd-copy[data-copy-state="failed"] { color: var(--fail); background: var(--tint-fail); }

.verify h2 {
  font-size: var(--t-24);
  line-height: 1.22;
  margin-bottom: var(--s-2);
}

.verify__lead {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}

/* One gate chain, not eight independent cards: each check only runs because
   the one above it did not refuse first. counter() states the real order;
   the connecting rail between numbers says a check with nothing above or
   below it in the rail is not part of the same chain. Structural, no motion. */
.checks {
  list-style: none;
  counter-reset: gate;
  margin: 0 0 var(--s-6);
  padding: 0 0 0 var(--s-2);
  display: grid;
  gap: var(--s-4);
  position: relative;
}

.checks::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: calc(var(--s-4) + 6px);
  left: calc(var(--s-2) + var(--s-6) / 2 - 1px);
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--pass-line);
}

.check {
  counter-increment: gate;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-8);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--pass);
  border-radius: var(--r-md);
  background: var(--surface-1);
  min-width: 0;
  position: relative;
}

.check::before {
  content: counter(gate);
  position: absolute;
  left: var(--s-2);
  top: var(--s-4);
  width: var(--s-6);
  height: var(--s-6);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--pass-line);
  background: var(--surface-2);
  color: var(--pass);
  font-family: var(--mono);
  font-size: var(--t-13);
  font-weight: 600;
  z-index: 1;
}

.check h3 {
  font-size: var(--t-15);
  margin-bottom: var(--s-2);
}

.check p {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
}

.shape {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--depth-2);
}

.shape h3 {
  font-size: var(--t-18);
  margin-bottom: var(--s-3);
}

.shape__note {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
}

.shape__list {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.shape__list li {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--t-12);
  color: var(--text-2);
  line-height: 1.5;
}

.key {
  display: inline-block;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--t-11);
}

@media (max-width: 34rem) {
  .cmdbox { flex-direction: column; }
  .cmd-copy { border-left: 0; border-top: 1px solid var(--hairline-strong); }
  .switcher { gap: var(--s-2); }
  .switcher__btn { flex: 1 1 auto; }
}


/* Depth pass: evidence rows and the empty state get the shared lit edge. */
.evidence > div { box-shadow: var(--depth-1); }
.empty-state { box-shadow: var(--depth-1); }
.cmd { box-shadow: var(--sunk); }
.cmd-copy:focus-visible { outline-width: 3px; outline-offset: -3px; }

/* The release block. Present only when the deploy shipped a verified archive
   (tools/tether_download_release.py renders it into the marked region). */
.dl {
  margin-bottom: var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--depth-1);
}
.dl h2 { font-size: var(--t-18); margin-bottom: var(--s-3); }
.dl__action { margin: 0 0 var(--s-4); }
.dl__btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.dl__facts { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.dl__facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-3);
  font-size: var(--t-13);
}
.dl__facts dt { color: var(--text-2); }
.dl__facts dd { margin: 0; min-width: 0; color: var(--text-1); }
.dl__sha { display: block; overflow-wrap: anywhere; user-select: all; margin-bottom: var(--s-1); }
.dl__facts a, .feed-note a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.dl__facts a:focus-visible, .dl__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.dl__unsigned { font-size: var(--t-13); color: var(--text-2); line-height: 1.6; margin: 0; }
.feed-note { margin-bottom: var(--s-7); color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
.feed-note h2 { font-size: var(--t-15); margin-bottom: var(--s-2); }
.local-install .steps-list { margin-top: var(--s-4); }
@media (max-width: 34rem) {
  .dl__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Artifact list (tools/tether_download_manifest.py renders it into the marked region).
   One card per slot: an available file with its facts, or a "not published yet" card with no link. */
.artifacts { margin-bottom: var(--s-7); }
.artifacts h2 { font-size: var(--t-18); margin-bottom: var(--s-2); }
.artifacts__lead, .artifacts__manifest { color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
/* One column everywhere by default; two only where a card still has room for a 64-hex
   hash on one line (~24rem each). The breakpoint is the page's 54rem measure, not the
   viewport, so the grid cannot outgrow the text column it sits in. */
.artifacts__list { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 44rem) {
  .artifacts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.art {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--depth-1);
  min-width: 0;
}
.art--missing { border-style: dashed; background: transparent; box-shadow: none; }
.art__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.art__name { font-size: var(--t-15); margin: 0; }
/* Badge, not a verdict: `Latest` is a pass-state chip only because it is the one thing on
   an older-vs-newest pair a reader has to see first. The older number is deliberately
   inert (--text-3 on the plain surface) so it cannot compete with the real one. */
.version-badge {
  flex: none;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.version-badge--latest { color: var(--pass); background: var(--tint-pass); border: 1px solid var(--pass-line); }
.version-badge--older { color: var(--text-3); background: transparent; border: 1px solid var(--hairline-strong); }
.art__state { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.art__reason { margin: 0; color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
/* A fact about a PUBLISHED file the verdicts do not carry, e.g. that the Windows
   build has never been run on Windows. Same voice as the missing-row reason. */
.art__note { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
.art__facts { display: grid; gap: var(--s-2); margin: 0; }
.art__facts > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-13); }
.art__facts dt { color: var(--text-2); font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.art__facts dd { margin: 0; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.art__size-human { color: var(--text-2); }
/* The hash and its Copy control share one sunk box, the same shape as .cmdbox on the
   command blocks below, so the two copy affordances on this page read as one thing. */
.art__sha-line {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--sunk);
  overflow: hidden;
  margin-bottom: var(--s-1);
  transition: border-color var(--dur-fast) var(--ease);
}
.art__sha-line:hover, .art__sha-line:focus-within { border-color: var(--info-line); }
.art__sha {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-12);
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
}
.btn-copy {
  flex: none;
  align-self: stretch;
  min-height: var(--tap);
  min-width: 4.5rem;
  padding: 0 var(--s-3);
  border: 0;
  border-left: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--t-11)/1 var(--sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-copy:hover { color: var(--text-1); background: var(--surface-1); }
.btn-copy:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.btn-copy[data-copy-state="done"] { color: var(--pass); background: var(--tint-pass); }
.btn-copy[data-copy-state="failed"] { color: var(--fail); background: var(--tint-fail); }
.art__facts a, .artifacts__manifest a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.art__facts a:focus-visible, .artifacts__manifest a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.art-legend { margin-bottom: var(--s-7); color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
.art-legend h2 { font-size: var(--t-15); margin-bottom: var(--s-2); }
.art-legend__list { display: grid; gap: var(--s-2); margin: 0 0 var(--s-2); }
.art-legend__list > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.art-legend__list dd { margin: 0; }
.art-legend__fields { margin: 0; }
@media (max-width: 34rem) {
  .art__facts > div, .art-legend__list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .art__sha-line { flex-direction: column; }
  .btn-copy { border-left: 0; border-top: 1px solid var(--hairline-strong); }
}

/* Windows smoke-report box: the one command plus the paste field the page reads. */
.smoke-report { margin-top: var(--s-4); border-top: 1px solid var(--hairline); padding-top: var(--s-3); color: var(--text-2); font-size: var(--t-13); line-height: 1.6; }
.smoke-report h4 { font-size: var(--t-14); color: var(--text-1); margin: 0 0 var(--s-2); }
.smoke-report__lead { margin: 0 0 var(--s-2); }
.smoke-report__label { display: block; margin: var(--s-2) 0 var(--s-1); font-weight: 600; }
.smoke-report__paste { width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: var(--s-2); border: 1px solid var(--hairline-strong); border-radius: var(--radius, 6px); background: var(--surface-1); color: var(--text-1); font: 500 var(--t-13)/1.5 var(--mono, monospace); resize: vertical; }
.smoke-report__paste:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.smoke-report__verdict[data-state="ran"] { color: var(--pass); }
.smoke-report__verdict[data-state="partial"] { color: var(--warn, #b98a00); }
.smoke-report__verdict[data-state="refused"], .smoke-report__verdict[data-state="empty"] { color: var(--fail); }