/* ============================================================
   home-v2.css — S4 homepage redesign (page-scoped).
   Source of truth: design.pen screens qm4We (desktop) / xsIJI (mobile).
   Loaded only on the homepage via RootLayout extraStyles. Tokens come from
   base.css + theme-*.css; this sheet adds layout + the redesign components.
   ============================================================ */

/* --- Dark-island token scope --------------------------------
   Re-binds the theme tokens to their dark values locally, so the Pulse Band
   and Footer v3 render as forced-dark islands regardless of page theme
   (faithful to the .pen frames' theme:{mode:dark} override). */
.surface-dark {
  --surface: #211d17;
  --text: #ece6dd;
  --text-muted: #a39a8c;
  --border: #352f27;
  --border-subtle: #2a251f;
  --accent: #5b9bd5;
  --accent-hover: #7fb3e0;
  --brand-logo: #5b9bd5;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --on-accent: #16130f;
  color: var(--text);
}

/* The redesign manages its own widths/padding (matching the .pen canvas), so
   neutralise the global #app gutter + cap on the homepage. Full-bleed islands
   span the viewport; .s4-home__main provides the content column + padding. */
body.home-v2 #app { padding: 0; max-width: none; }
body.home-v2 .page-main { padding: 0; margin: 0; max-width: none; }

/* --- Full-bleed helper (escapes the centered #app container) --- */
.s4-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* --- Home layout shell -------------------------------------- */
.s4-home__main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Legacy feed (below the redesigned fold, replaced in later slices) — keep it
   in the same centered content column with its own gutter, since #app's gutter
   is neutralised on the homepage. */
.s4-home__legacy {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-7);
}
@media (max-width: 860px) {
  .s4-home__legacy { padding: 0 var(--space-4) var(--space-6); }
}

/* ============================================================
   PULSE BAND (.pen lIeRh) — full-bleed dark island
   ============================================================ */
.s4-pulse-band {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.s4-pulse-band__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.s4-pulse-band__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.s4-pulse-band__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.s4-live { display: flex; align-items: center; gap: var(--space-2); }
.s4-live__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--noise-extreme);
}
.s4-live__label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 1px; color: var(--text);
}
.s4-pb-div { width: 1px; height: 30px; background: var(--border); flex: none; }
.s4-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.s4-cell__label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: 1px; color: var(--text-muted);
}
.s4-cell__value {
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700;
  line-height: 1; color: var(--text);
}
.s4-cell__value--breaking { color: var(--noise-high); }
.s4-cell--sources { gap: var(--space-2); }
.s4-sources { display: flex; align-items: center; gap: var(--space-3); }
.s4-source { display: flex; align-items: center; gap: var(--space-1); }
.s4-source__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--noise-low);
}
.s4-source__dot--idle { background: var(--text-muted); opacity: 0.5; }
.s4-source__name {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text);
}
.s4-throughput { display: flex; align-items: center; gap: var(--space-3); }
.s4-vol { display: flex; flex-direction: column; gap: 1px; }
.s4-vol__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 1px; color: var(--text-muted);
}
.s4-vol__num {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
  line-height: 1; color: var(--text);
}
/* Throughput sparkline — 2-tone deep/bright ink-blue, brighter "now" bar
   (deep + bright are the fixed brand ink-blues, defined here as the sole
   place this two-tone signature lives). */
.s4-spark {
  --spark-deep: #1f4e79;
  --spark-bright: #5b9bd5;
  display: flex; align-items: flex-end; gap: 2px; height: 24px;
}
.s4-spark__bar {
  width: 3px; border-radius: 1px;
  background: color-mix(in srgb, var(--spark-deep) 45%, transparent);
}
.s4-spark__bar--recent { background: var(--spark-deep); }
.s4-spark__bar--now { background: var(--spark-bright); }
.s4-pb-asof {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
}

/* ============================================================
   HERO — "The Level" (.pen z7okJ)
   ============================================================ */
.s4-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
}
.s4-hero__eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.s4-hero__catdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.s4-hero__cat,
.s4-hero__state,
.s4-hero__upd,
.s4-hero__sep {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
  letter-spacing: 1px;
}
.s4-hero__cat { font-weight: 700; }
.s4-hero__state {
  font-weight: 700; color: var(--accent); letter-spacing: 1px;
  background: var(--accent-subtle); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.s4-hero__sep, .s4-hero__upd { font-weight: 400; }
.s4-hero__title {
  font-family: var(--font-headline); font-size: var(--lead); font-weight: 700;
  line-height: 1.05; color: var(--text); margin: 0;
}
.s4-hero__title a { color: inherit; text-decoration: none; }
.s4-hero__title a:hover { color: var(--accent); }
.s4-hero__why {
  font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5;
  color: var(--text-muted); margin: 0;
}
/* Level bar — percentage geometry from --noise-pct / --peak-pct */
.s4-level { display: flex; flex-direction: column; gap: var(--space-3); }
.s4-level__head { display: flex; align-items: flex-end; justify-content: space-between; }
.s4-level__readout { display: flex; align-items: flex-end; gap: var(--space-2); }
.s4-level__num {
  font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700;
  line-height: 1; color: var(--noise-high);
}
.s4-level__noise-lbl {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 1px;
  color: var(--text-muted);
}
.s4-level__delta-wrap { display: flex; align-items: center; gap: var(--space-2); }
.s4-level__delta {
  /* Neutral ink, not --noise-high: at 14px the orange fails AA on the light page
     / white card (3.0:1). Direction is carried by the +/- sign and ▲/▼ glyph
     (hero-spec §3: <18px delta inherits --text). The big readout stays orange. */
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
  color: var(--text);
}
/* Flat (rounded-to-0 24h delta): muted, no arrow — never a misleading ▲/▼. */
.s4-level__delta--flat { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); }
.s4-level__peak {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted);
}
.s4-level__bar { position: relative; height: 16px; }
.s4-level__track {
  position: absolute; left: 0; top: 3px; width: 100%; height: 10px;
  border-radius: 5px; background: var(--border);
}
.s4-level__fill {
  position: absolute; left: 0; top: 3px; width: var(--noise-pct); height: 10px;
  border-radius: 5px; background: var(--noise-high);
}
.s4-level__peaktick {
  position: absolute; left: var(--peak-pct); top: 0; width: 2px; height: 16px;
  transform: translateX(-1px); background: var(--text-muted);
}
.s4-level__now {
  position: absolute; left: var(--noise-pct); top: 1px; width: 14px; height: 14px;
  transform: translateX(-7px); border-radius: 50%;
  background: var(--noise-high); border: 2px solid var(--bg);
}
.s4-level__scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
}
.s4-hero__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.s4-hero__parties { display: flex; gap: var(--space-2); }
.s4-party {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--chip-bg); border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}
.s4-party__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.s4-party--critic .s4-party__dot { background: var(--text-muted); }
.s4-party--defender .s4-party__dot { background: var(--accent); }
.s4-party--neutral .s4-party__dot { background: var(--border); }
.s4-party__txt { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text); }
.s4-hero__cta {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--accent); white-space: nowrap;
}

/* ============================================================
   CATEGORY RAIL (.pen cLftJ)
   ============================================================ */
.s4-rail { display: flex; flex-direction: column; gap: var(--space-3); }
.s4-rail__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 1px; color: var(--text-muted);
}
.s4-rail__pills { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.s4-rail__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-full);
  border: 1px solid var(--border);
}
.s4-rail__pill--all { background: var(--accent); border-color: var(--accent); }
.s4-rail__pill--all .s4-rail__name { color: var(--on-accent); font-weight: 600; }
.s4-rail__pill--all .s4-rail__count { color: var(--on-accent); }
.s4-rail__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.s4-rail__name {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--text);
}
.s4-rail__count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }

/* ============================================================
   ACTIVE CONTROVERSIES feed (.pen l4J9Up)
   ============================================================ */
.s4-ac { display: flex; flex-direction: column; gap: var(--space-4); }
.s4-ac__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.s4-ac__eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 1px; color: var(--text-muted);
}
.s4-ac__sort { display: flex; align-items: center; gap: var(--space-4); }
.s4-ac__sort-opt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.s4-ac__sort-opt--active { color: var(--text); font-weight: 700; }
.s4-ac__stream { display: flex; flex-direction: column; gap: var(--space-3); }
.s4-ac__row { display: flex; align-items: center; gap: var(--space-3); }
.s4-ac__rank {
  width: 40px; flex: none; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700;
  line-height: 1; color: var(--text-muted);
}
.s4-ac__news { padding-left: 52px; }
.s4-ac__news-strip {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--accent-subtle); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.s4-ac__news-icon { color: var(--accent); flex: none; }
.s4-ac__news-copy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.s4-ac__news-title { font-family: var(--font-body); font-weight: 600; color: var(--text); }
.s4-ac__news-sub { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.s4-ac__news-btn {
  flex: none; background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
}
.s4-ac__news-btn:hover { color: var(--on-accent); background: var(--accent-hover); }
.s4-ac__showall {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--accent);
}

/* --- FeedCard (.pen ScandalCard ulDIs) --- */
.s4-fc {
  display: flex; gap: var(--space-5); height: 196px; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; align-items: stretch;
}
.s4-fc__gauge { position: relative; width: 14px; flex: none; }
.s4-fc__gauge-track {
  position: absolute; left: 4px; top: 0; bottom: 0; width: 6px;
  border-radius: 3px; background: var(--noise-track);
}
.s4-fc__gauge-fill {
  position: absolute; left: 4px; bottom: 0; width: 6px; height: var(--noise-pct);
  border-radius: 3px; background: var(--noise-color, var(--noise-high));
}
.s4-fc__gauge-notch {
  position: absolute; left: 1px; width: 12px; height: 12px;
  background: var(--noise-color, var(--noise-high)); bottom: calc(var(--noise-pct) - 6px);
}
/* Anchor content to the top and the chips to the bottom so every fixed-196 card
   fills consistently — centred content left uneven voids on variable-length live
   copy (read as "different-size" cards). */
.s4-fc__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); }
.s4-fc__content { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s4-fc__meta { display: flex; align-items: center; gap: var(--space-2); }
.s4-fc__state {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 1px; color: var(--text);
}
.s4-fc__fresh { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.s4-fc__title {
  margin: 0; font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s4-fc__title a { color: var(--text); }
.s4-fc__title a:hover { color: var(--accent); }
.s4-fc__tldr {
  margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.4; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s4-fc__badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.s4-fc__chip-cat {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--chip-bg); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
}
.s4-fc__cat-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.s4-fc__cat-lbl { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.s4-fc__chip-ongoing {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 1px;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.s4-fc__tracking { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.s4-fc__readout { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--space-1); }
.s4-fc__noise-lbl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 1px; color: var(--text-muted); }
.s4-fc__noise-num { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--noise-color, var(--noise-high)); }
.s4-fc__noise-delta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; line-height: 1; color: var(--text-muted); }
.s4-fc__noise-delta--flat { font-weight: 400; }

/* ============================================================
   7-DAY PULSE (.pen Dvpys)
   ============================================================ */
.s4-week { display: flex; flex-direction: column; gap: var(--space-4); }
.s4-week__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.s4-week__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-week__legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.s4-week__lg { display: flex; align-items: center; gap: var(--space-2); }
.s4-week__lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.s4-week__lg-t { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.s4-week__container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.s4-week__strip { display: flex; align-items: flex-end; justify-content: space-between; }
.s4-week__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.s4-week__bar { width: 40px; border-radius: 4px; }
.s4-week__day { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================================
   TRACKED VOICES (.pen NtOjJ) + StarCard Name-First (eCA5p)
   ============================================================ */
.s4-tv { display: flex; flex-direction: column; gap: var(--space-4); }
.s4-tv__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.s4-tv__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-tv__viewall { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.s4-tv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.s4-sc { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; min-height: 130px; }
.s4-sc__rule { width: 3px; flex: none; background: var(--accent); }
.s4-sc__content { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; min-width: 0; }
.s4-sc__row1 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.s4-sc__name { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.s4-sc__name a { color: var(--text); }
.s4-sc__name a:hover { color: var(--accent); }
.s4-sc__tier { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--accent); white-space: nowrap; }
.s4-sc__source { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.s4-sc__quote {
  margin: 0; font-family: var(--font-body); font-size: var(--text-sm); font-style: italic;
  line-height: 1.45; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================
   FORECAST SPOTLIGHT (.pen TX3uh) — the 2nd & last Playfair moment
   ============================================================ */
.s4-forecast { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-left: 4px solid var(--accent); }
.s4-forecast__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-forecast__quote { margin: 0; font-family: var(--font-headline); font-size: var(--text-3xl); font-style: italic; font-weight: 400; line-height: 1.28; color: var(--text); }
.s4-forecast__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.s4-forecast__on { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.s4-forecast__cta { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--accent); white-space: nowrap; }

/* Pulse Band variant visibility — desktop default. */
.s4-pb--mobile { display: none; }

/* ============================================================
   RETURN DELTA (.pen "Return Delta") — block 2, returning visitors only
   ============================================================ */
.s4-return {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.s4-return__left { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.s4-return__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-return__chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.s4-return__chip {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text);
  background: var(--chip-bg); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
}
.s4-return__cta { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.s4-return__cta:hover { text-decoration: underline; }

/* ============================================================
   AUTHORITY CLOSE (.pen "Authority Close") — light, in the main column
   ============================================================ */
.s4-authority { display: flex; flex-direction: column; gap: var(--space-5); }
.s4-authority__cols { display: flex; gap: var(--space-7); align-items: stretch; }
.s4-authority__news, .s4-authority__numbers {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.s4-authority__news { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.s4-authority__numbers { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-5); justify-content: center; }
.s4-authority__news-title { margin: 0; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; color: var(--text); }
.s4-authority__news-sub { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.s4-authority__form { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.s4-authority__input {
  flex: 1 1 0; min-width: 0; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font-family: var(--font-body); font-size: var(--text-sm);
}
.s4-authority__input::placeholder { color: var(--text-muted); }
/* Keep the global :focus-visible ring (do NOT outline:none) + colour the border
   and add the site's box-shadow spread, so keyboard focus stays clearly visible. */
.s4-authority__input:focus { border-color: var(--accent); }
.s4-authority__input:focus-visible { box-shadow: 0 0 0 3px var(--accent-subtle); }
.s4-authority__btn {
  padding: var(--space-3) var(--space-5);
  border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; cursor: pointer; min-height: 44px;
}
.s4-authority__btn:hover { background: var(--accent-hover); }
.s4-authority__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-authority__numrow { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.s4-authority__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.s4-authority__num { font-family: var(--font-mono); font-size: 2.5rem; line-height: 1; font-weight: 700; color: var(--text); }
.s4-authority__stat-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 1px; color: var(--text-muted); }
.s4-authority__close { display: flex; gap: var(--space-2); align-items: center; justify-content: center; flex-wrap: wrap; }
.s4-authority__close-txt { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.s4-authority__close-link { font-family: var(--font-body); font-size: var(--text-sm); color: var(--accent); text-decoration: none; }
.s4-authority__close-link:hover { text-decoration: underline; }

/* ============================================================
   FOOTER v3 (.pen Y9l1l) — full-bleed dark island (.surface-dark)
   ============================================================ */
.s4-footer { background: var(--surface); }
.s4-footer__inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--space-7) var(--space-7) 40px;
  display: flex; flex-direction: column; gap: var(--space-7);
}
.s4-footer__brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.s4-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 380px; }
.s4-footer__logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.s4-footer__tile {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-logo); color: var(--surface); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 1.25rem; font-weight: 700;
}
.s4-footer__word { font-family: var(--font-headline); font-size: 1.75rem; font-weight: 700; color: var(--brand-logo); }
.s4-footer__tagline { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.s4-footer__credentials { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-end; }
.s4-footer__correction {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--accent); text-decoration: none;
}
.s4-footer__correction:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.s4-footer__gn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.s4-footer__gn-icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.s4-footer__hairline { height: 1px; background: var(--border); }
.s4-footer__nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.s4-footer__col { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 0; min-width: 140px; }
.s4-footer__col-head { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.s4-footer__link { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text); text-decoration: none; }
.s4-footer__link:hover { color: var(--accent); }
.s4-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.s4-footer__legal-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.s4-footer__legal-right { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.s4-footer__copy, .s4-footer__indep { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
.s4-footer__div { width: 1px; height: 12px; background: var(--border); flex: none; }
.s4-footer__legal-link { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; }
.s4-footer__legal-link:hover { color: var(--text); }
.s4-footer__echo { display: inline-flex; align-items: center; gap: var(--space-2); }
.s4-footer__echo-name { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); }
.s4-footer__echo-sep { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
.s4-footer__echo-email { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); text-decoration: none; }
.s4-footer__echo-email:hover { text-decoration: underline; }

/* ============================================================
   MOBILE (≤860px) — design.pen xsIJI
   ============================================================ */
@media (max-width: 860px) {
  .s4-home__main { padding: var(--space-5) var(--space-4); gap: var(--space-6); }

  /* Pulse Band → 2-row variant */
  .s4-pb--desktop { display: none; }
  .s4-pb--mobile { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .s4-pulse-band__inner { padding: var(--space-3) var(--space-4); }
  .s4-pb-r1 { display: flex; align-items: center; justify-content: space-between; }
  .s4-pb-r2 { display: flex; align-items: flex-end; justify-content: space-between; }
  .s4-pb-r2 .s4-cell { gap: 1px; }
  .s4-pb-r2 .s4-cell__value { font-size: var(--text-base); }
  .s4-live__dot { width: 7px; height: 7px; }

  /* Hero → white surface card */
  .s4-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    gap: var(--space-4);
  }
  .s4-hero__title { font-size: 1.75rem; line-height: 1.1; }
  .s4-hero__why { font-size: var(--text-sm); }
  .s4-hero__state { background: none; padding: 0; }
  .s4-hero__upd-word { display: none; }
  .s4-level__num { font-size: var(--text-2xl); }
  .s4-level__delta-unit { display: none; }
  .s4-level__bar { height: 14px; }
  .s4-level__track, .s4-level__fill { top: 3px; height: 8px; }
  .s4-level__now { width: 12px; height: 12px; top: 1px; transform: translateX(-6px); }
  .s4-hero__cta { font-size: var(--text-sm); }
  .s4-hero__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* Feed → no rank column, taller cards, smaller title (xsIJI O2NjB3).
     Sort stays fully reachable (all 3 links), wrapping under the heading —
     no fake dropdown caret. */
  .s4-ac__rank { display: none; }
  .s4-ac__head { flex-wrap: wrap; gap: var(--space-2); }
  .s4-ac__news { display: none; }
  .s4-fc { height: 222px; gap: var(--space-4); padding: var(--space-4); }
  .s4-fc__title { font-size: var(--text-base); }
  .s4-fc__delta-unit { display: none; }

  /* 7-Day Pulse: narrower bars to fit 7 across; Tracked Voices: 1-up; Forecast: smaller quote */
  .s4-week__container { padding: var(--space-5); }
  .s4-week__bar { width: 28px; }
  .s4-tv__grid { grid-template-columns: 1fr; }
  .s4-forecast { padding: var(--space-4); }
  .s4-forecast__quote { font-size: var(--text-xl); }

  /* Authority Close → stacked cards; Footer → 2-col nav, stacked brand + legal */
  .s4-authority__cols { flex-direction: column; gap: var(--space-5); }
  .s4-authority__numbers { flex: 1 1 auto; }
  .s4-authority__numrow { gap: var(--space-5); }
  .s4-footer__inner { padding: var(--space-6) var(--space-4) var(--space-5); gap: var(--space-6); }
  .s4-footer__brand-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .s4-footer__brand { max-width: none; }
  .s4-footer__credentials { align-items: flex-start; }
  .s4-footer__nav { gap: var(--space-5); }
  .s4-footer__col { flex: 1 1 42%; min-width: 130px; }
  .s4-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}