/* ===================================================================
   The Daily Read

   The product's only real asset is knowing which outlets agreed and
   which didn't. So consensus is drawn, not described: every story
   carries a strip of marks, one per outlet, in fixed order. Filled
   means they covered it. Gold means they reported a different figure.
   Hollow means they didn't run it.

   Column position is pinned to the configured feed list, so a given
   column is the same outlet on every strip and on every day's page.
   Hovering any mark traces that outlet across the whole brief.
   =================================================================== */

/* --- tokens --------------------------------------------------------- */

:root {
  --surface:    #F3F5F6;
  --paper:      #F3F5F6;
  --raised:     #FFFFFF;
  --ink:        #0C1418;
  --ink-2:      #47565F;
  --ink-3:      #8395A0;
  --hairline:   #DDE4E8;
  --split:      #8F6200;
  --split-soft: #F5E9CC;
  --shadow:     0 1px 2px rgba(12, 20, 24, 0.06),
                0 8px 24px -12px rgba(12, 20, 24, 0.18);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --tick-w: 3px;
  --tick-gap: 3px;

  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-2:  clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --step-3:  clamp(2.75rem, 1.8rem + 4.6vw, 5.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:    #090E12;
    --paper:      #090E12;
    --raised:     #111A20;
    --ink:        #E9EFF3;
    --ink-2:      #94A6B2;
    --ink-3:      #5E7381;
    --hairline:   #1E2C36;
    --split:      #F2B93D;
    --split-soft: #2A2314;
    --shadow:     0 1px 2px rgba(0, 0, 0, 0.5),
                  0 8px 28px -12px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --surface:    #05090C;
  --paper:      #05090C;
  --raised:     #0C1319;
  --ink:        #E4EDF3;
  --ink-2:      #8DA2B0;
  --ink-3:      #55697A;
  --hairline:   #16212B;
  --split:      #F5B841;
  --split-soft: #1C1708;
  --shadow:     0 1px 2px rgba(0, 0, 0, 0.5),
                0 8px 28px -12px rgba(0, 0, 0, 0.8);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Newsreader, Georgia, serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.grotesk {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-optical-sizing: none;
}

/* Numbers and readouts get a monospace so columns line up and figures stay
   comparable down the page. */
.idx, .count, .bar-pos, .readout-stat, .split-claim, .axis-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding-inline: var(--gutter); }

/* --- reading progress ----------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--split);
  z-index: 50;
}

/* --- condensing header ----------------------------------------------- */

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--gutter);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease);
}

.bar.on { opacity: 1; pointer-events: auto; border-bottom-color: var(--hairline); }

.bar-name { font-size: var(--step--1); font-weight: 600; letter-spacing: -0.01em;
            color: inherit; text-decoration: none; }
.bar-pos  { font-size: var(--step--1); color: var(--ink-3); margin-left: auto;
            font-variant-numeric: tabular-nums; }

.ctl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 1px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  min-width: 4.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.ctl:hover { color: var(--ink); border-color: var(--ink-3); }
.ctl[aria-pressed="true"] { color: var(--split); border-color: var(--split); }

.ctl.install-btn {
  color: var(--ink);
  border-color: var(--split);
  background: color-mix(in srgb, var(--split) 12%, transparent);
}
.ctl.install-btn:hover {
  color: #000;
  background: var(--split);
}
.ctl.install-btn[hidden] {
  display: none !important;
}

/* --- outlet readout (appears while tracing an outlet) ----------------- */

.readout {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 8px);
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.readout.on { opacity: 1; transform: translate(-50%, 0); }
.readout-name { font-size: var(--step--1); font-weight: 600; }
.readout-stat { font-size: var(--step--1); color: var(--ink-3);
                font-variant-numeric: tabular-nums; }
.readout-stat b { font-weight: 500; color: var(--split); }

/* --- hero -------------------------------------------------------------- */

.hero { padding-top: clamp(5rem, 14vh, 9rem); padding-bottom: 4rem; }

.eyebrow { font-size: var(--step--1); font-weight: 500; color: var(--ink-3);
           margin: 0 0 1.5rem; }

.archive-banner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.4rem 0.85rem;
  margin: -0.75rem 0 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.archive-banner span {
  font-weight: 600;
  color: var(--gold);
}
.archive-banner a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.archive-banner a:hover {
  color: var(--gold);
}

.hero h1 {
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.hero .promise {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 30ch;
  margin: 1.5rem 0 0;
  line-height: 1.35;
}

.stale { font-size: var(--step--1); color: var(--split); margin: 0 0 1.25rem; }

/* --- overview ---------------------------------------------------------- */

.overview {
  margin-top: clamp(3.5rem, 9vh, 6rem);
  border-top: 1px solid var(--hairline);
  padding-top: 2rem;
}

.overview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.overview-head p { margin: 0; font-size: var(--step--1); color: var(--ink-3);
                   max-width: 36ch; }

.legend { display: flex; gap: 1.125rem; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem;
               font-size: var(--step--1); color: var(--ink-3); }
.chip { width: 3px; height: 13px; border-radius: 1px; display: inline-block; }
.chip.covered { background: var(--ink); }
.chip.split   { background: var(--split); }
.chip.absent  { background: var(--hairline); }

.ov-axis { display: none; }

.ov-section {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  margin: 1.75rem 0 0.25rem;
  letter-spacing: 0.01em;
}

.ov-section:first-of-type { margin-top: 0; }

.ov-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: padding-inline 0.35s var(--ease);
}

.ov-row:hover, .ov-row:focus-visible { padding-inline: 0.5rem; }

.ov-title { font-size: var(--step-0); line-height: 1.3;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- the tick strip ------------------------------------------------------ */

.strip { display: flex; gap: var(--tick-gap); align-items: flex-end; }

.tick {
  width: var(--tick-w);
  border-radius: 1px;
  background: var(--hairline);
  height: 10px;
  transform-origin: 50% 100%;
  transform: scaleY(0.25);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease),
              background-color 0.18s var(--ease);
}

.strip.lit .tick { transform: scaleY(1); opacity: 1; }

.tick.fifth { margin-left: calc(var(--tick-gap) * 1.9); }
.axis-label.fifth { margin-left: calc(var(--tick-gap) * 1.9); }

.tick.covered { background: var(--ink); height: 18px; }
.tick.split   { background: var(--split); height: 24px; }

.strip.big { --tick-w: 4px; --tick-gap: 5px; }
.strip.big .tick { height: 14px; }
.strip.big .tick.covered { height: 26px; }
.strip.big .tick.split   { height: 34px; }

/* tracing one outlet across every strip on the page */

body.tracing .tick:not(.trace) { opacity: 0.22; }
body.tracing .tick.trace.absent { background: var(--ink-3); }
.tick.trace { opacity: 1; }

body.tracing .srcs a:not(.trace) { opacity: 0.35; }
.srcs a.trace { color: var(--ink); border-color: var(--ink-2); }
.srcs a.trace.dissent { color: var(--split); border-color: var(--split); }

/* --- stories ------------------------------------------------------------- */

.stories { padding-top: clamp(3rem, 8vh, 5rem); }

.section-head {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.section-head:first-child { margin-top: 0; }
.section-head + .story { border-top-color: var(--ink-3); }

.story {
  padding: clamp(3rem, 8vh, 5.5rem) 0;
  border-top: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.story.lit { opacity: 1; transform: none; }

.story-meta {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}

.idx {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.count { font-size: var(--step--1); font-weight: 600;
         font-variant-numeric: tabular-nums; color: var(--ink-2); }
.count em { font-style: normal; color: var(--ink-3); font-weight: 400; }

/* A story two outlets ran should not shout as loudly as one eleven ran. */
.story[data-weight="thin"] h2 { font-size: calc(var(--step-2) * 0.72); opacity: 0.88; }
.story[data-weight="mid"]  h2 { font-size: calc(var(--step-2) * 0.86); }

.story h2 {
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 1.25rem;
  max-width: 22ch;
  text-wrap: balance;
}

.prose { max-width: var(--measure); margin: 0 0 1.75rem; }

/* divergence — the only gold on the page */

.split-block {
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.375rem;
  background: var(--split-soft);
  border-left: 2px solid var(--split);
}

.split-label { font-size: var(--step--1); font-weight: 600; color: var(--split);
               margin: 0 0 0.5rem; }

.split-claim {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: var(--step--1);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.split-why { font-size: var(--step--1); color: var(--ink-2); margin: 0.625rem 0 0; }
.split-why.none { font-style: italic; }

.agreed {
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--ink-3);
  margin: 0 0 1.75rem;
  padding-left: 1.375rem;
  border-left: 2px solid var(--hairline);
}

.framing {
  max-width: var(--measure);
  font-size: calc(var(--step-0) * 0.95);
  color: var(--ink-2);
  margin: 0 0 1.75rem;
}

.framing b { font-weight: 500; color: var(--ink); }

/* sources */

.srcs { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.srcs a {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--raised);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              opacity 0.2s var(--ease);
}

.srcs a:hover, .srcs a:focus-visible { color: var(--ink); border-color: var(--ink-3); }
.srcs a.dissent { color: var(--split); border-color: var(--split); }
.srcs a .src-author {
  font-weight: 400;
  opacity: 0.88;
  font-size: 0.92em;
}

/* --- archive ------------------------------------------------------------- */

.archive { list-style: none; padding: 0; margin: 0; }
.archive li { border-top: 1px solid var(--hairline); }
.archive li:last-child { border-bottom: 1px solid var(--hairline); }

.archive a {
  display: block;
  padding: 1rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  transition: padding-inline 0.35s var(--ease), color 0.2s var(--ease);
}

.archive a:hover, .archive a:focus-visible { padding-inline: 0.5rem; color: var(--split); }

.backlink { margin: 2rem 0 0; font-size: var(--step--1); }
.backlink a, .promise a { color: var(--ink); text-decoration-color: var(--ink-3); }

/* --- footer -------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--hairline);
  padding: 3rem 0 5rem;
  margin-top: 3rem;
}

footer p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 1rem;
}

footer .last { color: var(--ink-3); }
footer .last a { color: var(--ink-2); }

/* --- labelled axis, wide screens only ------------------------------------ */

@media (min-width: 62rem) {
  .overview { --tick-w: 4px; --tick-gap: 10px; }

  .ov-axis {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .ov-axis::before { content: ""; }

  .axis { display: flex; gap: var(--tick-gap); align-items: flex-end; }

  .axis-label {
    width: var(--tick-w);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color 0.18s var(--ease);
  }

  .axis-label.trace { color: var(--ink); }
  body.tracing .axis-label:not(.trace) { opacity: 0.3; }
}

/* --- quality floor -------------------------------------------------------- */

a:focus-visible, .ov-row:focus-visible, button:focus-visible {
  outline: 2px solid var(--split);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .story { opacity: 1; transform: none; }
  .tick { opacity: 1; transform: none; }
}

@media (max-width: 40rem) {
  .overview-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ov-section {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  margin: 1.75rem 0 0.25rem;
  letter-spacing: 0.01em;
}

.ov-section:first-of-type { margin-top: 0; }

.ov-row { grid-template-columns: 1fr; gap: 0.625rem; }
  .story h2 { max-width: none; }
  .readout { left: var(--gutter); right: var(--gutter); bottom: 1rem;
             transform: translateY(8px); justify-content: space-between; }
  .readout.on { transform: none; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
  .progress, .bar, .readout, .overview, .strip, footer .last { display: none; }
  .section-head { font-size: 10pt; margin: 1.5rem 0 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { padding-top: 0; }
  .hero h1 { font-size: 22pt; }
  .story { opacity: 1; transform: none; page-break-inside: avoid;
           padding: 1.25rem 0; }
  .split-block { background: none; border-left: 2px solid #000; }
  .srcs a { border: none; padding: 0; color: #000; }
  .srcs a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ===================================================================
   Instrument layer
   Added for density: a navigation rail, a compact reading mode, and
   keyboard movement. At 40+ outlets and a dozen stories the brief
   stops being a page you read top to bottom and becomes something you
   scan, so it needs the affordances of an instrument rather than an
   article.
   =================================================================== */

/* --- navigation rail (desktop) --------------------------------------- */

.rail {
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.rail.on { opacity: 1; }

.rail a {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--hairline);
  border-radius: 1px;
  transition: background-color 0.18s var(--ease), width 0.18s var(--ease);
}

.rail a:hover { width: 22px; background: var(--ink-3); }
.rail a.split { background: color-mix(in srgb, var(--split) 55%, transparent); }
.rail a.here { width: 22px; background: var(--ink); }
.rail a.here.split { background: var(--split); }

@media (min-width: 78rem) { .rail { display: flex; } }

/* --- compact mode ------------------------------------------------------ */

.compact .prose,
.compact .framing,
.compact .agreed,
.compact .split-why,
.compact .srcs,
.compact .split-label { display: none; }

.compact .story { padding: 1.5rem 0; }
.compact .story h2 { font-size: var(--step-1); margin-bottom: 0.75rem;
                     max-width: 40ch; }
.compact .story[data-weight="thin"] h2,
.compact .story[data-weight="mid"] h2 { font-size: var(--step-1); }
.compact .story-meta { margin-bottom: 0.625rem; }
.compact .split-block { padding: 0.5rem 0 0 0.875rem; background: none;
                        margin-bottom: 0; }
.compact .section-head { margin-top: 2rem; }
.compact .hero { padding-bottom: 2rem; }
.compact .overview { display: none; }

/* --- keyboard focus on a story ----------------------------------------- */

.story:target h2, .story.here h2 { color: var(--ink); }
.story.here { position: relative; }

.story.here::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--split);
  opacity: 0.55;
}

/* --- keyboard hint ------------------------------------------------------ */

.hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 1.5rem 0 0;
}

.hint kbd {
  font: inherit;
  border: 1px solid var(--hairline);
  border-radius: 1px;
  padding: 0.05rem 0.3rem;
  margin: 0 0.1rem;
}

@media (max-width: 62rem) { .hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rail a { transition: none; }
}

@media print {
  .rail, .hint { display: none; }
}

/* ===================================================================
   Identity — The Protocal

   The mark is a fragment of the page's own instrument: five outlets,
   one of them reporting a different figure. The thing the site is for,
   small enough to sit in a favicon.
   =================================================================== */

.mark { height: 0.95em; width: auto; display: block; flex: none; }
.mark-split { fill: var(--split); }

/* --- masthead ---------------------------------------------------------- */

.masthead {
  padding-top: clamp(2.25rem, 6vh, 3.5rem);
  padding-bottom: 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}

.wordmark .mark { height: 1.15rem; }

.wordmark-text {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.005em;
  line-height: 1;
}

.standfirst {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0.75rem 0 0;
}

.bar-name { display: inline-flex; align-items: center; gap: 0.5rem; }
.bar-name .mark { height: 0.8rem; }

/* the hero no longer needs its own top padding under the masthead */
.masthead + .hero { padding-top: clamp(3rem, 8vh, 5rem); }

/* --- run record --------------------------------------------------------- */

.runline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.runline span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
}

.runline em {
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.compact .runline { display: none; }

/* --- the procedure page -------------------------------------------------- */

.method { counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 1.5rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--hairline);
}

.step-n {
  grid-column: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--split);
  margin: 0.45rem 0 0;
  letter-spacing: 0.04em;
}

.step h2 {
  grid-column: 2;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem;
  max-width: 24ch;
  text-wrap: balance;
}

.step .prose {
  grid-column: 2;
  margin: 0 0 0.875rem;
}
.step .prose:last-child { margin-bottom: 0; }
.step.limits .step-n { color: var(--ink-3); }

.hint a { color: var(--ink-3); text-decoration-color: var(--hairline); }
.hint a:hover { color: var(--ink-2); }

@media (max-width: 40rem) {
  .step { grid-template-columns: 1fr; gap: 0; }
  .step-n { margin: 0 0 0.5rem; }
  .runline { gap: 1rem 1.25rem; }
}

@media print {
  .masthead { padding-top: 0; }
  .standfirst { color: #555; }
}

/* ===================================================================
   Watermark

   Outlined rather than filled. Stroke-only type at very low opacity
   reads as a mark printed on the surface — a technical drawing, a
   document stamp — where faded solid text just looks like a mistake.

   Fixed, so it sits still while the brief scrolls over it. Behind
   everything, and never interactive.
   =================================================================== */

.watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.watermark span {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: clamp(4rem, 17vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  opacity: 0.05;
  transform: rotate(-4deg);
}

@supports not ((-webkit-text-stroke: 1px currentColor)) {
  .watermark span { color: var(--ink); opacity: 0.025; }
}

/* Light theme needs a touch more, dark a touch less. */
:root[data-theme="light"] .watermark span { opacity: 0.07; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .watermark span { opacity: 0.07; }
}

/* A second, quieter mark down the right edge — the kind of repeat you
   see on a printed proof. Wide screens only, where there's room. */

.watermark::after {
  content: "THE PROTOCAL · THE PROTOCAL · THE PROTOCAL · THE PROTOCAL";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.5em;
  color: var(--ink);
  opacity: 0.055;
  display: none;
}

@media (min-width: 90rem) { .watermark::after { display: block; } }

/* Compact mode is for scanning — take the watermark down further so it
   never competes with dense text. */
.compact .watermark span { opacity: 0.03; }
.compact .watermark::after { opacity: 0.035; }

@media print { .watermark { display: none; } }

/* ===================================================================
   Section colours

   One rule governs the whole palette: warm means sources disagreed.
   Nothing else on the page is allowed to be warm, which is why the
   section accents are drawn exclusively from the cool half of the
   wheel. Topic-literal colour would have broken this immediately —
   energy's obvious colours are amber and yellow, the exact hues the
   divergence marker owns.

   Assigned by position, so adding a section to config.yaml picks up
   the next colour with no code change.
   =================================================================== */

/* Seven hues, evenly spaced across the cool half of the wheel (160° to
   295°). This is the practical ceiling — an eighth would sit close enough
   to a neighbour that the coding stops working, and anything past 300°
   starts reading warm, which is reserved. */
:root {
  --sec-0: #17805A;   /* 160  spring green */
  --sec-1: #17797C;   /* 180  teal         */
  --sec-2: #1E6F9E;   /* 200  azure        */
  --sec-3: #2F5FAF;   /* 220  blue         */
  --sec-4: #4A4FB8;   /* 245  indigo       */
  --sec-5: #6B3FA8;   /* 270  violet       */
  --sec-6: #8E3A94;   /* 295  plum         */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sec-0: #4FD9A0;
    --sec-1: #45D2D2;
    --sec-2: #4FB8F0;
    --sec-3: #6BA0F7;
    --sec-4: #8C90F5;
    --sec-5: #A87CF0;
    --sec-6: #CE7EDC;
  }
}

:root[data-theme="dark"] {
  --sec-0: #4FD9A0;
  --sec-1: #45D2D2;
  --sec-2: #4FB8F0;
  --sec-3: #6BA0F7;
  --sec-4: #8C90F5;
  --sec-5: #A87CF0;
  --sec-6: #CE7EDC;
}

[data-sec="0"] { --sec: var(--sec-0); }
[data-sec="1"] { --sec: var(--sec-1); }
[data-sec="2"] { --sec: var(--sec-2); }
[data-sec="3"] { --sec: var(--sec-3); }
[data-sec="4"] { --sec: var(--sec-4); }
[data-sec="5"] { --sec: var(--sec-5); }
[data-sec="6"] { --sec: var(--sec-6); }
/* An eighth section and beyond falls back to neutral rather than reusing a
   hue — a repeated colour is worse than no colour. */

/* --- section heading, given the weight of a real divider -------------- */

.section-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--sec, var(--ink-3));
  margin: clamp(3rem, 7vh, 4.5rem) 0 0;
  padding-bottom: 0.875rem;
}

.section-head::before {
  content: "";
  width: 3px;
  height: 1.05em;
  border-radius: 1px;
  background: var(--sec, var(--ink-3));
  flex: none;
}

.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--sec, var(--ink-3)) 45%, transparent),
    transparent);
}

.section-head:first-child { margin-top: 0; }
.section-head + .story { border-top-color: transparent; padding-top: 1rem; }

/* --- overview label, same accent, smaller voice ----------------------- */

.ov-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--sec, var(--ink-3));
  letter-spacing: 0.01em;
  margin: 1.75rem 0 0.35rem;
}

.ov-section::before {
  content: "";
  width: 2px;
  height: 0.85em;
  border-radius: 1px;
  background: var(--sec, var(--ink-3));
  flex: none;
}

.ov-section:first-of-type { margin-top: 0; }

/* --- the accent follows the story, quietly ---------------------------- */

.story .idx { color: var(--sec, var(--ink-3)); opacity: 0.8; }

.story.here::before { background: var(--sec, var(--split)); opacity: 0.75; }

/* rail marks tint by section, so the rail shows the shape of the brief */
.rail a[data-sec] { background: color-mix(in srgb, var(--sec) 30%, transparent); }
.rail a[data-sec].here { background: var(--sec); }
.rail a.split { background: color-mix(in srgb, var(--split) 55%, transparent); }
.rail a.split.here { background: var(--split); }

@media print {
  .section-head { color: #000; }
  .section-head::before { background: #000; }
  .section-head::after { display: none; }
  body::before {
    content: "PROTECTED CONTENT — © 2026 EADigitalLabs. All rights reserved.";
    display: block;
    font-size: 11pt;
    color: #990000;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
}

/* --- Intellectual Property & Anti-Theft Protection --- */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow text highlighting of core story prose for legitimate readers, while protecting UI & structure */
.prose, .split-claim, .split-why, .framing {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img, svg, .mark, .strip, .tick, .bar, .rail, .legend, .masthead, .hero, .story-meta {
  -webkit-user-drag: none;
  user-select: none;
}

.copyright {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* --- Web Push Retention Prompts ----------------------------------- */

.push-hero-prompt {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding: 0.45rem 0.85rem;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.push-hero-prompt.fade-out {
  opacity: 0;
  transform: translateY(-4px);
}

.push-prompt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--split);
  box-shadow: 0 0 0 2px var(--split-soft);
  flex-shrink: 0;
  animation: pulse-dot 2.5s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}

.push-prompt-text {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.push-action-btn,
.push-footer-btn {
  border: none;
  background: var(--ink);
  color: var(--surface);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.push-action-btn:hover,
.push-footer-btn:hover {
  opacity: 0.85;
}

.push-action-btn:disabled,
.push-footer-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.push-action-btn.active,
.push-footer-btn.active {
  background: var(--split);
  color: #fff;
}

.push-dismiss-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.push-dismiss-btn:hover {
  color: var(--ink);
}

.footer-push-prompt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding: 0.65rem 0.95rem;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* --- Feature 2: Core Moat — Discrepancy Hook ---------------------- */

.discrepancy-radar {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--split) 45%, var(--hairline));
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.radar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.radar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--split);
  background: var(--split-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--split) 30%, transparent);
}

.radar-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--split);
  animation: pulse-dot 2s infinite ease-in-out;
}

.radar-summary {
  font-size: var(--step--1);
  color: var(--ink-2);
  font-weight: 500;
}

.radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.radar-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 60%, var(--raised));
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--split);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.radar-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--split) 60%, var(--hairline));
}

.radar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
}

.radar-sec {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-3);
}

.radar-outlets {
  color: var(--split);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.radar-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.35;
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
}

.radar-title a {
  color: var(--ink);
  text-decoration: none;
}

.radar-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.radar-claim {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  flex-grow: 1;
}

.radar-jump {
  align-self: flex-start;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--split);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.15s ease;
}

.radar-jump:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.consensus-seal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 1.75rem;
  padding: 0.65rem 1rem;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: var(--step--1);
  color: var(--ink-2);
}

.seal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1b8a43;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Overview Row Split Tags */
.ov-row.has-split .ov-title {
  font-weight: 500;
}

.ov-split-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--split);
  background: var(--split-soft);
  border: 1px solid color-mix(in srgb, var(--split) 40%, transparent);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.45rem;
  vertical-align: 1px;
}

/* Story Card Badges */
.story-split-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--split);
  background: var(--split-soft);
  border: 1px solid color-mix(in srgb, var(--split) 45%, transparent);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--split);
  animation: pulse-dot 2s infinite ease-in-out;
}

.story.story-split {
  border-left: 2px solid color-mix(in srgb, var(--split) 50%, transparent);
  padding-left: 1rem;
}

/* --- Feature 3: Shareable Comparison Cards ----------------------- */

.split-block-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.share-split-btn,
.radar-share-btn,
.story-share-btn,
.masthead-share-btn,
.hero-share-btn,
.bar-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}

.story-share-btn {
  margin-left: auto;
}

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero-top-row .eyebrow {
  margin-bottom: 0;
}

.story-share-btn:hover,
.masthead-share-btn:hover,
.hero-share-btn:hover {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

.share-split-btn:hover,
.radar-share-btn:hover {
  background: var(--split-soft);
  color: var(--split);
  border-color: color-mix(in srgb, var(--split) 50%, transparent);
}

.radar-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
}

/* Modal Overlay */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.share-modal[hidden] {
  display: none;
}

.share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 12, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.share-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  animation: modal-enter 0.2s var(--ease);
}

@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.share-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.share-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--split);
  margin-bottom: 0.2rem;
}

.share-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-family: Newsreader, Georgia, serif;
}

.share-close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.2rem;
  transition: color 0.15s ease;
}

.share-close-btn:hover {
  color: var(--ink);
}

/* Card Preview in Modal */
.share-preview-wrapper {
  margin-bottom: 1.4rem;
}

.share-card {
  background: #090E12;
  color: #E4EDF3;
  border: 1px solid #1E2C36;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.share-card-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #16212B;
}

.share-card-logo {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #F5B841;
}

.share-card-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #2A2314;
  color: #F2B93D;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(242, 185, 61, 0.3);
}

.share-card-meta {
  display: block;
  font-size: 0.72rem;
  color: #8DA2B0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.share-card-headline {
  margin: 0 0 0.75rem;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #FFFFFF;
}

.share-card-discrepancy {
  background: #111A20;
  border-left: 3px solid #F5B841;
  padding: 0.65rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #E9EFF3;
  border-radius: 0 4px 4px 0;
  margin-bottom: 0.85rem;
}

.share-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #55697A;
  padding-top: 0.6rem;
  border-top: 1px solid #16212B;
}

.share-card-footer strong {
  color: #8DA2B0;
}

.share-card-url {
  color: #8DA2B0;
  font-family: 'JetBrains Mono', monospace;
}

/* Modal Actions */
.share-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .share-actions-grid {
    grid-template-columns: 1fr;
  }
}

.share-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  transition: all 0.15s ease;
}

.share-action-btn:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.share-download-btn {
  background: var(--split-soft);
  color: var(--split);
  border-color: color-mix(in srgb, var(--split) 40%, transparent);
}

.share-download-btn:hover {
  background: var(--split);
  color: #fff;
  border-color: var(--split);
}

.share-email-btn svg {
  color: #3B82F6;
  transition: color 0.15s ease;
}
.share-action-btn:hover.share-email-btn svg {
  color: currentColor;
}

.share-sms-btn svg {
  color: #10B981;
  transition: color 0.15s ease;
}
.share-action-btn:hover.share-sms-btn svg {
  color: currentColor;
}

.share-toast {
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--split);
  color: var(--split);
  font-size: var(--step--1);
  text-align: center;
  font-weight: 500;
  display: block;
  animation: toastFadeIn 0.2s ease-out;
}
.share-toast[hidden] {
  display: none !important;
}
@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Section Filter Tabs (60-Second Triage) ---------------------------- */

.section-tabs-bar {
  position: sticky;
  top: 0;
  z-index: 85;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 0.65rem 0;
  margin: 1.5rem 0 2rem;
  transition: box-shadow 0.2s ease;
}

.section-tabs-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.section-tabs-scroller {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  flex: 1;
}

.section-tabs-scroller::-webkit-scrollbar {
  display: none;
}

.sec-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 9999px;
  font-size: var(--step--1);
  font-weight: 500;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: all 0.16s var(--ease);
  outline: none;
  flex-shrink: 0;
  user-select: none;
}

.sec-tab:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.sec-tab.active {
  background: var(--ink);
  color: var(--surface) !important;
  border-color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sec-tab.active .sec-tab-label {
  color: var(--surface) !important;
}

.sec-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding: 0.1rem 0.42rem;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-3);
  transition: all 0.16s ease;
}

.sec-tab.active .sec-tab-count {
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  color: var(--surface) !important;
  font-weight: 700;
}

.sec-tab-split-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--split);
  margin-left: 1px;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 6px var(--split);
}

.sec-tabs-status {
  font-size: var(--step--1);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .sec-tabs-status {
    display: none;
  }
}

/* Filter state classes */
.story.hidden-by-tab,
.section-head.hidden-by-tab {
  display: none !important;
}

.ov-row.dimmed-by-tab {
  opacity: 0.22;
  filter: grayscale(0.8);
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}

.ov-section.dimmed-by-tab {
  opacity: 0.25;
  transition: opacity 0.2s var(--ease);
}

/* --- Media Accountability: Outlet Divergence Profiles ------------------ */

.tick,
.axis-label,
.srcs a[data-outlet] {
  cursor: pointer;
}

.tick:hover {
  filter: brightness(1.3);
  transform: scaleY(1.15);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.axis-label:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outlet-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.outlet-modal[hidden] {
  display: none !important;
}

.outlet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.outlet-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  background: #0d1217;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--split);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  animation: outletDialogIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes outletDialogIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.outlet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.outlet-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.outlet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(212, 168, 83, 0.14);
  color: var(--split);
  border: 1px solid rgba(212, 168, 83, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.outlet-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.outlet-sub {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: #7f8f9f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.outlet-close-btn {
  background: transparent;
  border: none;
  color: #7f8f9f;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.outlet-close-btn:hover {
  color: #fff;
}

.outlet-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 580px) {
  .outlet-stats-grid {
    grid-template-columns: 1fr;
  }
}

.outlet-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.outlet-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #7f8f9f;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.outlet-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.outlet-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: 0.15rem 0;
}

.outlet-progress-fill {
  height: 100%;
  background: var(--split);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.outlet-stat-sub {
  font-size: 0.7rem;
  color: #9ab0c2;
}

.outlet-stories-section {
  padding: 1.25rem 1.5rem;
  flex: 1;
  overflow-y: auto;
  max-height: 38vh;
}

.outlet-section-heading {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7f8f9f;
}

.outlet-stories-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.outlet-story-item {
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.15s ease;
}

.outlet-story-item.is-split {
  border-left: 3px solid var(--split);
  background: rgba(212, 168, 83, 0.06);
}

.outlet-story-link {
  color: #d1dbe5;
  font-size: 0.88rem;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
}

.outlet-story-link:hover {
  color: #fff;
  text-decoration: underline;
}

.outlet-story-split-tag {
  font-size: 0.72rem;
  color: var(--split);
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.outlet-actions-bar {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1217;
}

.outlet-trace-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #d1dbe5;
  cursor: pointer;
  transition: all 0.15s ease;
}

.outlet-trace-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.outlet-dismiss-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--split);
  background: var(--split);
  color: #000;
  cursor: pointer;
  transition: all 0.15s ease;
}

.outlet-dismiss-btn:hover {
  background: #e5b964;
  border-color: #e5b964;
}

/* --- In-App Morning Drop Toast & App Badging --------------------------- */

.inapp-drop-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #0d1217;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--split);
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.inapp-drop-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.inapp-toast-content {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  color: #e1e7ec;
}

.inapp-toast-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--split);
  box-shadow: 0 0 8px var(--split);
  animation: pulse-dot 2s infinite ease-in-out;
  flex-shrink: 0;
}

.inapp-toast-action {
  background: var(--split);
  color: #0b0f14;
  border: 1px solid var(--split);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.inapp-toast-action:hover {
  background: #e5b964;
  border-color: #e5b964;
  transform: translateY(-1px);
}

.inapp-toast-close {
  background: transparent;
  border: none;
  color: #7f8f9f;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.inapp-toast-close:hover {
  color: #fff;
}

/* Smart Install Mode for push buttons */
.push-footer-btn.is-install,
.push-action-btn.is-install {
  background: var(--split);
  color: #000;
  border-color: var(--split);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.push-footer-btn.is-install:hover,
.push-action-btn.is-install:hover {
  background: #e5b964;
  border-color: #e5b964;
}

/* ===================================================================
   Market Movers & Catalysts (Stocks & Crypto)
   =================================================================== */

.mover-tab-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #13795A;
  display: inline-block;
  margin-right: 3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mover-tab-pip { background: #4FD9A0; }
}
:root[data-theme="dark"] .mover-tab-pip { background: #4FD9A0; }