/* ===================================================================
   ProcIntel V2 — HOME / EXECUTIVE INTELLIGENCE BRIEFING
   Stage 2 of the approved V1 UI/UX redesign.

   BUILT ON STAGE 1, NOT BESIDE IT. Every value here is a Stage 1 token;
   there are no new colours, no new spacing values and no second design
   system. Where Home needs a specialised treatment it is a variant of a
   V2 primitive, not a replacement for one.

   Loaded after css/shell.css, so it may refine shell-level rules for
   this page without touching them globally.
   =================================================================== */

/* -------------------------------------------------------------------
   THE BRIEFING HERO

   Deliberately short. The mockup's dramatic globe is inspiration, not a
   requirement, and a tall decorative hero on a daily working page costs
   a reader the thing they came for. No background image is loaded.
   ------------------------------------------------------------------- */
/* TWO COLUMNS, DECLARED AS TWO COLUMNS.

   This was a three-child wrapping flexbox with `align-items: flex-end`,
   which was right for Stage 2's layout (text, a short SVG pulse, meta)
   and wrong the moment Stage 2.2 put a block of prose in the middle
   slot. Two things went wrong together in production:

     - flex-end bottom-aligned the briefing block against the much
       taller readout, so the masthead sat at the bottom of the row with
       a large blank area above it;
     - the date/freshness, as a third flex item, had nowhere left to go
       and wrapped onto its own line, detached from the title it
       describes.

   The fix is structural rather than cosmetic: the meta moved INTO the
   briefing block in the markup, leaving exactly two children, and this
   is now a real two-column grid that centres them against each other.
   No negative margins and no absolute positioning -- the previous
   layout's symptoms came from asking a wrapping flex row to behave like
   a grid, and the cure is to use one. */
.briefing-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-8) var(--sp-10);
  padding: 0 0 var(--sp-8);
  margin-bottom: var(--sp-9);
  border-bottom: 1px solid var(--border-subtle);
  border-left: none;
}
.briefing-head-main { min-width: 0; }
.briefing-eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}
/* One gold mark per heading: the eyebrow. Legacy draws a gold left rule
   on the title as well, and indents the standfirst to match it. */
.briefing-head .briefing-title { border-left: none; padding-left: 0; }
.briefing-head .briefing-sub { margin-left: 0; }
.briefing-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  max-width: 22ch;
}
.briefing-sub {
  margin: var(--sp-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 62ch;
}
/* Part of the briefing block now, so it reads left with everything else
   above it rather than being right-aligned across the row from it.
   `text-align` is set explicitly rather than merely dropped: the V1
   stylesheet still carries `.briefing-head-meta { text-align: right }`
   (style.css:3615), which was correct while this sat across the row
   from the title. Removing the V2 declaration would silently hand the
   element back to the legacy rule -- V2 supersedes V1 by source order,
   which only works for properties V2 actually declares. */
.briefing-head-meta {
  margin-top: var(--sp-6);
  text-align: left;
}
.briefing-date {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
}
.briefing-freshness {
  margin: var(--sp-3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
/* A state dot, not a "live" animation. It is shown only when a real
   collection run recorded a completion time, and it does not pulse:
   nothing here is streaming, and a pulsing dot would imply it was. */
.briefing-freshness-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--status-positive);
  flex: none;
}

/* -------------------------------------------------------------------
   EXECUTIVE STATE RAIL

   One surface divided by hairlines, not four separate tiles. A row of
   bordered cards is the accounting-dashboard look the brief rules out;
   this reads as a single statement of state.
   ------------------------------------------------------------------- */
.pulse-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--sheen-top);
  margin-bottom: var(--sp-8);
  overflow: hidden;
}
.pulse-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-7);
  text-decoration: none;
  border-left: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pulse-item:first-child { border-left: none; }
/* Legacy style.css zeroes the first item's left padding at (0,2,0), which
   put the first figure flush against the panel edge. */
.pulse-strip .pulse-item,
.pulse-strip .pulse-item:first-child,
.pulse-strip .pulse-item:not(:first-child) { padding: var(--sp-7); }
.pulse-item:hover { background: var(--surface-raised); }
.pulse-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pulse-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
/* ZERO IS A REAL ANSWER. A quiet week is intelligence, not an error, so
   a zero is quietened rather than alarmed — never red, never hidden. */
.pulse-item.is-zero .pulse-value { color: var(--text-disabled); }
.pulse-item:hover .pulse-value { color: var(--accent-primary); }

/* -------------------------------------------------------------------
   THE TWO COLUMNS

   Asymmetric by intent. Primary intelligence earns more width than
   supporting context; a 50/50 split would say they matter equally.
   ------------------------------------------------------------------- */
.brief-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-9);
}
.brief-column { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }

/* -------------------------------------------------------------------
   SHARED SECTION FURNITURE
   ------------------------------------------------------------------- */
.brief-section {
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--panel-padding);
  box-shadow: var(--sheen-top);
}
.brief-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.brief-section-title {
  margin: 0;
  /* Title case, not the legacy uppercase. An all-caps section heading
     reads as a form label; this page is a briefing, and its sections
     are headings in a document. */
  text-transform: none;
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.brief-section-link {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.brief-section-link:hover { color: var(--accent-primary); }
.brief-section-standfirst {
  margin: 0 0 var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  max-width: 72ch;
}

/* EMPTY STATES. One honest line, no illustration, no bordered box.
   "Nothing crosses this threshold" is useful intelligence and should
   not be given more room than intelligence itself. */
.brief-empty {
  margin: var(--sp-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-meta);
}
.brief-empty-note {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
.brief-section.is-empty { background: transparent; box-shadow: none; }

/* -------------------------------------------------------------------
   NEEDS ATTENTION — the highest-value block on the page.
   ------------------------------------------------------------------- */
.attention-panel { border-left: 2px solid var(--status-critical); }
.attention-panel.is-empty { border-left-color: var(--border-default); }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--sp-3); }
.attention-card {
  padding: var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.attention-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.attention-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-4);
}
.attention-card-flags { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.attention-type { color: var(--text-muted); font-size: var(--fs-caption); }
.attention-pri {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}
.attention-headline {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none;
  text-wrap: balance;
}
.attention-headline:hover { color: var(--accent-primary); }
.attention-why {
  margin: var(--sp-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  max-width: 76ch;
}
/* ProcIntel's own interpretation stays visually marked as such, on the
   entry page as everywhere else. The gold rule is the Stage 1
   provenance channel for an assessment; the deterministic variant uses
   the neutral channel because it is not an interpretation at all. */
.attention-why-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: var(--sp-3);
  padding: 1px var(--sp-4);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-xs);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.attention-why-deterministic .attention-why-label {
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.attention-provisional {
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--status-warning);
}
.attention-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
  color: var(--text-muted); font-size: var(--fs-caption);
}
.meta-sep { color: var(--text-disabled); }

/* -------------------------------------------------------------------
   KEY DEVELOPMENTS — a stream, not cards. Visually lighter than Needs
   Attention on purpose: same population, lower claim.
   ------------------------------------------------------------------- */
.development-list { list-style: none; margin: 0; padding: 0; }
.development-item {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-subtle);
}
.development-item:first-child { border-top: none; padding-top: 0; }
.development-headline {
  display: block;
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  text-decoration: none;
}
.development-headline:hover { color: var(--accent-primary); }
.development-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-caption);
}
/* Significance keeps its own five-way vocabulary and is never merged
   with PRI band or confidence. Outlined, not filled -- a filled chip on
   this row would outweigh the headline. */
.sig-chip {
  padding: 1px var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sig-chip-critical { color: var(--status-critical); border-color: var(--status-critical); }
.sig-chip-high     { color: var(--status-warning);  border-color: var(--status-warning); }
.sig-chip-material { color: var(--accent-primary);  border-color: var(--accent-muted); }

/* -------------------------------------------------------------------
   GEOGRAPHIC ACTIVITY — real counts, honest bars, no map.
   ------------------------------------------------------------------- */
.geography-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--sp-4); }
.geography-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-meta);
}
.geography-name {
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geography-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  overflow: hidden;
}
.geography-bar-fill { display: block; height: 100%; background: var(--accent-muted); }
.geography-count {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  min-width: 2ch; text-align: right;
}

/* -------------------------------------------------------------------
   INTELLIGENCE LANDSCAPE — existing significance distribution.
   ------------------------------------------------------------------- */
.landscape-bars { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--sp-4); }
/* V1 PREMIUM UX -- THE CHART WAS MISLEADING. This rule targeted
   `.landscape-bar`, which in the markup is the FILL, not the row: it made
   the fill a grid and left legacy colours in charge. The track then drew
   in its light fallback (the --border-subtle token was invalid), so every
   ZERO band showed a full-length pale bar that read as a large value,
   while the one real value was a dark navy fill barely visible on the
   dark panel. A reader saw the opposite of the data.

   Now: a faint track that reads as empty space, and a fill in the SAME
   colour the significance badge for that band uses everywhere else. The
   width is still the stored proportion, zero-based and linear. */
.landscape-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--sp-5);
}
.landscape-row .landscape-label { color: var(--text-secondary); font-size: var(--fs-meta); }
.landscape-row.is-empty { opacity: 1; }
/* The band NAME is content even when the band is empty; only the zero
   count recedes. */
.landscape-row.is-empty .landscape-label { color: var(--text-muted); }
.landscape-row.is-empty .landscape-count { color: var(--text-disabled); }
.landscape-row .landscape-track {
  height: 8px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.landscape-track .landscape-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
}
.landscape-track .landscape-bar-critical { background: var(--status-critical); }
.landscape-track .landscape-bar-high     { background: var(--status-warning); }
.landscape-track .landscape-bar-material { background: var(--accent-muted); }
.landscape-track .landscape-bar-moderate { background: var(--text-muted); }
.landscape-track .landscape-bar-low      { background: var(--status-neutral); }
.landscape-row .landscape-count {
  color: var(--text-primary);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* -------------------------------------------------------------------
   DEVELOPING INTELLIGENCE — must not look like another Event list.

   A situation is a different KIND of object: it has a lifecycle, an
   evidence level and a history. The violet provenance channel, the
   heavier card and the stage chip together say "this is unfolding",
   which a row of headlines cannot.
   ------------------------------------------------------------------- */
.developing-panel { border-left: 2px solid var(--provenance-synthesis); }
.developing-panel.is-empty { border-left-color: var(--border-default); }
.developing-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
}
.developing-item {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.developing-item:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.developing-state { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.developing-lifecycle {
  padding: 1px var(--sp-4);
  border-radius: var(--radius-xs);
  /* No wash fill: composited over the card it put the 10px label at
     4.30:1, just under AA. On the card surface itself the same text
     reaches 5.09:1, and the border alone still carries the violet
     situation channel. Measured, not assumed. */
  background: transparent;
  border: 1px solid var(--provenance-synthesis);
  color: var(--provenance-synthesis);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.developing-strength { color: var(--text-muted); font-size: var(--fs-caption); }
.developing-title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  text-decoration: none;
}
.developing-title:hover { color: var(--accent-primary); }
.developing-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-caption);
}

/* -------------------------------------------------------------------
   FOR YOU — a marker on existing intelligence, never a separate corpus.
   ------------------------------------------------------------------- */
.foryou-panel { border-left: 2px solid var(--accent-muted); }
.foryou-list { list-style: none; margin: 0; padding: 0; }
.foryou-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-subtle);
}
.foryou-item:first-child { border-top: none; padding-top: 0; }
.foryou-headline {
  flex: 1 1 24ch; min-width: 0;
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--text-primary); text-decoration: none;
}
.foryou-headline:hover { color: var(--accent-primary); }
/* The reason is the whole point: personalisation must always say WHY
   something was surfaced, never silently re-rank. */
.foryou-reason {
  flex: none;
  padding: 1px var(--sp-4);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-pill);
  color: var(--accent-primary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

/* -------------------------------------------------------------------
   LATEST SIGNALS — deliberately the quietest block on the page.
   ------------------------------------------------------------------- */
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { padding: var(--sp-4) 0; border-top: 1px solid var(--border-subtle); }
.feed-item:first-child { border-top: none; padding-top: 0; }
.feed-headline {
  display: block; font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none; line-height: var(--lh-snug);
}
.feed-headline:hover { color: var(--accent-primary); }

/* -------------------------------------------------------------------
   RESPONSIVE — the Stage 1 breakpoints, no new ones.
   ------------------------------------------------------------------- */

/* < 1180 — one column. Two narrow columns would make both unreadable,
   and supporting context follows primary intelligence rather than
   competing with it. */
@media (max-width: 1179.98px) {
  .brief-columns { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  /* The hero stacks at the SAME existing breakpoint the rest of Home
     uses -- briefing first, readout second, straight from DOM order. */
  .briefing-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* < 900 — the metric rail halves rather than shrinking to four slivers. */
@media (max-width: 899.98px) {
  .pulse-strip { grid-template-columns: repeat(2, 1fr); }
  .pulse-item:nth-child(3) { border-left: none; }
  .pulse-item:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}

/* < 640 — reading and monitoring. The rail stacks to two rows of two
   rather than one tall column of four. */
@media (max-width: 639.98px) {
  .pulse-item { padding: var(--sp-6) var(--sp-5); }
  .pulse-value { font-size: 28px; }
  .attention-headline { font-size: var(--fs-card-title); }
  .developing-list { grid-template-columns: minmax(0, 1fr); }
  .brief-section { padding: var(--sp-6); }
  .geography-row { grid-template-columns: minmax(0, 1fr) 40px auto; gap: var(--sp-4); }
}


/* ===================================================================
   TODAY'S READOUT
   Stage 2.2.

   Editorial, not a KPI card: it is prose about the current state, so it
   is set as prose. Sits in the hero's right-hand space with a single
   gold rule marking it as ProcIntel's own interpretation.
   =================================================================== */
.readout {
  align-self: stretch;
  min-width: 0;
  padding-left: var(--sp-7);
  border-left: 2px solid var(--accent-muted);
}
.readout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.readout-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.readout-date {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.readout-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.readout-statement {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-card-title);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 46ch;
}
/* The first statement is the day's headline judgement and carries the
   most weight; the rest support it. */
.readout-statement:first-child { font-weight: var(--fw-medium); }
.readout-statement:not(:first-child) {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}
.readout-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.readout-context-label {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.readout-context-value {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.readout-provenance {
  margin: var(--sp-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}

@media (max-width: 1179.98px) {
  .readout {
    /* `order: 3` used to live here, to push the readout past the meta
       block when the hero had three children. The meta is now inside the
       briefing block, so plain DOM order already puts briefing first and
       readout second -- an order property that no longer orders anything
       is just a trap for whoever reads this next. */
    grid-column: 1 / -1;
    padding-left: var(--sp-6);
  }
}
@media (max-width: 639.98px) {
  .readout-statement { font-size: var(--fs-body); }
  .readout-head { flex-direction: column; gap: var(--sp-2); }
}