/* AI News Brief — editorial stylesheet. Light + dark, no dependencies. */

:root {
  color-scheme: light dark;

  --paper:      #fbfaf7;
  --paper-2:    #f3f1ea;
  --ink:        #1b1b18;
  --ink-muted:  #6c6a63;
  --rule:       #e3e0d7;
  --accent:     #a8431a;
  --accent-dim: #c9713f;

  --callout-bg:     #fff6e0;
  --callout-border: #e0a800;
  --callout-ink:    #4a3a08;

  --tag-act-bg:   #fbe3dc;  --tag-act-ink:   #8c2d10;
  --tag-ship-bg:  #dcefe0;  --tag-ship-ink:  #17573a;
  --tag-watch-bg: #e2e5ec;  --tag-watch-ink: #3d4757;

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #15151a;
    --paper-2:    #1d1d24;
    --ink:        #e9e7e1;
    --ink-muted:  #9b998f;
    --rule:       #2f2f37;
    --accent:     #e6845a;
    --accent-dim: #c9713f;

    --callout-bg:     #2b2413;
    --callout-border: #a8811a;
    --callout-ink:    #f3e6c4;

    --tag-act-bg:   #4a2118;  --tag-act-ink:   #f3b39c;
    --tag-ship-bg:  #16382a;  --tag-ship-ink:  #8fd7ab;
    --tag-watch-bg: #262c36;  --tag-watch-ink: #adb9cb;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 19px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

.masthead {
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2rem;
  padding: 1.75rem 0 1rem;
}
.masthead-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.masthead .brand { order: 1; }
.masthead nav { order: 2; margin-left: auto; }
.masthead h1, .masthead .brand {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.masthead .brand a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; }
.brand-mark { width: 2.7rem; height: 2.7rem; flex: none; }
.brand-mark rect { fill: var(--accent); }
.brand-mark text { fill: var(--paper); font-family: var(--serif); font-size: 34px; font-weight: 700; }
.masthead nav { display: flex; gap: 1rem; font-size: 0.9rem; }
.nav-thread { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-thread .thread-icon { color: var(--accent); }

/* ---------- brief header ---------- */

.brief-date {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}
.edition-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-muted);
  text-align: right;
  margin: 0 0 1.25rem;
}
.brief-meta {
  color: var(--ink-muted);
  font-size: 0.83rem;
  font-family: var(--mono);
  margin: 0 0 1.75rem;
  overflow-wrap: anywhere;
}

/* ---------- the one thing ---------- */

.one-thing {
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-left: 5px solid var(--callout-border);
  border-radius: 3px;
  color: var(--callout-ink);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2.25rem;
}
.one-thing .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.4rem;
}
.one-thing p { margin: 0; font-size: 1.06rem; line-height: 1.55; }

/* ---------- sections ---------- */

section { margin: 0 0 2.25rem; }

h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}

/* A heading that carries its section's source icons, stacked at the far end. */
.h2-marks {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.5rem;
}
.h2-marks .marks { margin-left: auto; }

.entry { margin: 0 0 1.1rem; }
.entry:last-child { margin-bottom: 0; }

/* The Signals heading carries the faces or logos of everyone the section
   draws on. --hue is set per source inline by the build, and stays the same
   for a given source across editions; each signal's rail repeats the hue of
   its own first source. */
.signal {
  margin: 0 0 1.25rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rail, var(--rule));
}
.signal:last-child { margin-bottom: 0; }
.signal h3, .entry h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.entry-body { display: block; margin: 0; }
.entry-body::-webkit-details-marker { display: none; }
.entry-body::marker { content: ""; }
/* Decorative, and redundant with the browser's own expanded/collapsed
   announcement for a <summary> — shown only under the mobile clamp below. */
.entry-hint { display: none; }

.marks {
  display: flex;
  flex: none;
}
.marks .mark + .mark { margin-left: -0.5rem; }

.mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--hue, var(--accent));
  position: relative;
}
/* Later marks in a stack sit under earlier ones, so the first source reads
   first. --z is set per mark by the build, counting down from the stack size,
   so the order holds for a stack of any length. */
.marks .mark { z-index: var(--z, 1); }

.mark-mono {
  display: grid;
  place-items: center;
  background: var(--hue, var(--accent));
  color: #fff;
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (max-width: 480px) {
  .mark { width: 24px; height: 24px; }
  .mark-mono { font-size: 0.62rem; }
  .h2-marks { gap: 0.6rem; }
}
.entry .src, .signal .src { font-size: 0.88rem; white-space: nowrap; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: 0 0 0.7rem; padding-left: 1.15rem; position: relative; }
ul.plain li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 0.45rem; height: 0.45rem;
  background: var(--accent);
  border-radius: 50%;
}

.act li::before { border-radius: 1px; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.42rem;
  border-radius: 3px;
  vertical-align: 0.09em;
  margin-right: 0.4rem;
}
.tag-act   { background: var(--tag-act-bg);   color: var(--tag-act-ink); }
.tag-ship  { background: var(--tag-ship-bg);  color: var(--tag-ship-ink); }
.tag-watch { background: var(--tag-watch-bg); color: var(--tag-watch-ink); }

.note { color: var(--ink-muted); font-size: 0.92rem; font-style: italic; }

/* Marks an entry filed after the morning edition — see build.mjs editionBadge. */
.edition-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05rem 0.36rem;
  vertical-align: 0.14em;
  margin-left: 0.4rem;
}

.long-view { background: var(--paper-2); border-radius: 4px; padding: 1rem 1.15rem; }
.long-view p { margin: 0; }

.also-noted { font-size: 0.94rem; }

/* ---------- ad slot ---------- */

.ad {
  margin: 2.5rem 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  min-height: 0;
}
.ad-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.ad ins { display: block; }

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

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.archive-list .a-date {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-muted);
  display: block;
}
.archive-list .a-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--ink);
}
.archive-list .a-title:hover { color: var(--accent); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  font-size: 0.9rem;
}

/* ---------- prose (about / privacy) ---------- */

.prose h2 { margin-top: 2rem; }
.prose p, .prose li { color: var(--ink); }

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

footer {
  border-top: 1px solid var(--rule);
  margin-top: 3.5rem;
  padding: 1.5rem 0 3rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.6rem; }
footer p { margin: 0.35rem 0; }

.empty {
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
}

/* ---------- update toast ---------- */

.update-toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  animation: update-toast-in 0.2s ease-out;
}
.update-toast span { flex: 1 1 auto; }
.update-toast button {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.update-toast button:hover { background: var(--accent-dim); border-color: var(--accent-dim); }

@keyframes update-toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .update-toast { animation: none; }
}

@media (max-width: 34rem) {
  body { font-size: 19.5px; }
  .wrap { padding: 0 1rem; }
  .masthead nav { margin-left: 0; }
  .masthead .brand { flex: 1 1 100%; }
  .entry .src, .signal .src { white-space: normal; }

  /* Signal, news, and thread-entry bodies all collapse to two lines. Only
     .entry-clamp — the span inside a disclosure's <summary> — is clamped,
     not .entry-body itself. The hint lives inside the <summary> too, right
     after the clamped span, so it shares the summary's native click-to-toggle
     area rather than sitting outside it where a tap would do nothing. */
  .entry-body { cursor: pointer; }
  .entry-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .entry-details[open] .entry-clamp {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
  .entry-hint {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
  }
  .entry-hint::before { content: "Read more \25be"; }
  .entry-details[open] .entry-hint::before { content: "Show less \25b4"; }
}

/* ---------- threads ---------- */

/* The mark an entry carries when it belongs to a thread. It trails the title
   (or the source line, on an item with no title) rather than taking a line of
   its own, so an entry that is part of a thread is no taller than one that
   isn't. */
.thread-mark {
  display: inline-flex;
  vertical-align: -0.1em;
  margin-left: 0.45rem;
  color: var(--ink-muted);
  opacity: 0.75;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.thread-mark:hover { color: var(--accent); opacity: 1; }

/* The "#" that trails every item on a brief page (see build.mjs anchorLink).
   Same treatment as .thread-mark: a quiet, always-present self-link rather
   than one that appears only on hover, so it's reachable by touch too. */
.anchor-link {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: none;
  opacity: 0.6;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.anchor-link:hover, .anchor-link:focus-visible { color: var(--accent); opacity: 1; }

.thread-icon { width: 0.95rem; height: 0.95rem; }
.thread-icon-lg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }

@media (max-width: 34rem) {
  .thread-icon { width: 0.7rem; height: 0.7rem; }
  .thread-icon-lg { width: 1.1rem; height: 1.1rem; }
}

.thread-title { display: flex; align-items: flex-start; gap: 0.55rem; }
.thread-title .thread-icon-lg { margin-top: 0.3em; }

.thread-summary {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.6rem;
}

.thread-close {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 0.8rem 1rem;
  margin: 0 0 1.6rem;
}

/* The same line that connects the entries on the index runs down the thread
   page, drawn once on the list with the dots on top of it so it stays
   continuous however long the thread is. It replaces the rules that used to
   divide the entries — two separators competing was what made the index
   timeline unreadable. */
.thread-entries {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  position: relative;
}
.thread-entries::before {
  content: "";
  position: absolute;
  left: 0.24rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  opacity: 0.45;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent-dim) 0.8rem,
    var(--accent-dim) calc(100% - 0.8rem),
    transparent
  );
}

.thread-entry {
  position: relative;
  margin: 0 0 1.9rem;
}
.thread-entry:last-child { margin-bottom: 0; }
.thread-entry::before {
  content: "";
  position: absolute;
  left: -1.48rem;
  top: 0.3rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--accent-dim);
}
/* Oldest first, so the last dot is the most recent entry. */
.thread-entry:last-child::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }

.thread-when {
  margin: 0 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.thread-when a { color: var(--ink-muted); text-decoration: none; }
.thread-when a:hover { color: var(--accent); }

.thread-entry h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin: 0 0 0.3rem;
}
.thread-entry .src { font-size: 0.88rem; }

/* An entry linked to from a thread gets a brief tint so the eye lands on the
   one that was meant, rather than on the top of the edition. */
:target {
  animation: entry-found 2.4s ease-out;
  scroll-margin-top: 1.5rem;
}
@keyframes entry-found {
  0%, 55% { background: var(--callout-bg); box-shadow: 0 0 0 0.5rem var(--callout-bg); }
  100% { background: transparent; box-shadow: 0 0 0 0.5rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
  :target { animation: none; }
}

/* ---------- threads index ---------- */

.thread-list { list-style: none; margin: 0; padding: 0; }
.thread-list > li {
  margin: 0 0 1.75rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.thread-list > li:last-child { border-bottom: 0; padding-bottom: 0; }

.thread-list .t-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.thread-list .t-title .thread-icon { color: var(--accent); flex: none; margin-top: 0.3em; }
.thread-list .t-title:hover { color: var(--accent); }
.thread-list .t-summary { margin: 0.35rem 0 0.6rem; }

/* The entry count is the disclosure control. */
.thread-timeline summary {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
  border-bottom: 1px dotted var(--rule);
}
.thread-timeline summary::-webkit-details-marker { display: none; }
.thread-timeline summary::marker { content: ""; }
.thread-timeline summary::before {
  content: "+";
  display: inline-block;
  width: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}
.thread-timeline[open] summary::before { content: "\2212"; }
.thread-timeline summary:hover { color: var(--ink); }

/* The line that connects the entries. It is drawn once on the list and the
   dots sit on top of it, so it stays continuous however long the thread is. */
.tl {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0 0 0 1.15rem;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 0.24rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  opacity: 0.45;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent-dim) 0.6rem,
    var(--accent-dim) calc(100% - 0.6rem),
    transparent
  );
}

.tl-step { position: relative; margin: 0 0 0.6rem; }
.tl-step:last-child { margin-bottom: 0; }
.tl-step::before {
  content: "";
  position: absolute;
  left: -1.03rem;
  top: 0.42rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--accent-dim);
}
.tl-step:last-child::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }

.tl-step a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
  padding: 0.05rem 0;
}
.tl-step a:hover .tl-what { color: var(--accent); text-decoration: underline; }

.tl-date {
  flex: none;
  width: 5.2rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.tl-what { font-size: 0.93rem; line-height: 1.4; }

@media (max-width: 480px) {
  .tl-step a { display: block; }
  .tl-date { display: block; width: auto; margin-bottom: 0.1rem; }
}

/* ---------- thread page: layout ---------- */

/* A thread page is the one page wide enough to earn a second column. The
   masthead and footer widen with it so the page keeps one edge. Below the
   breakpoint everything is the single column every other page uses, with
   the rail after the entries. */
.thread-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "entries"
    "rail";
}
.thread-head { grid-area: head; }
.thread-page .thread-entries { grid-area: entries; }
.thread-rail { grid-area: rail; margin-top: 3rem; }

.thread-head .brief-meta { margin-bottom: 1.75rem; }

@media (min-width: 60rem) {
  .layout-wide .wrap { max-width: 68rem; }
  .thread-page {
    grid-template-columns: minmax(0, 42rem) minmax(17rem, 20rem);
    grid-template-areas:
      "head rail"
      "entries rail";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .thread-rail {
    margin-top: 0.5rem;
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for the source marks' rings, which sit outside their boxes. */
    padding: 0.25rem 0.25rem 0.25rem 0;
  }
}

/* ---------- thread page: analysis rail ---------- */

.rail-block { margin: 0 0 2.1rem; }
.rail-block:last-child { margin-bottom: 0; }
figure.rail-block { padding: 0; }

.rail-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin: 0 0 0.75rem;
}

.rail-note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* The date an item was filed, linking down the page to that day's entry. */
.filed {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
a.filed:hover { color: var(--accent); text-decoration: underline; }

/* The number: one figure, set large, with its unit beside it and the claim
   it carries beneath. */
.hero { margin: 0.1rem 0 0.35rem; line-height: 1; }
.hero-v {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.hero-u {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
}
.hero-l { margin: 0; font-size: 0.88rem; line-height: 1.45; }

/* The quote. */
.rail-quote { margin: 0 0 2.1rem; }
.rail-quote blockquote {
  margin: 0 0 0.4rem;
  padding: 0 0 0 0.85rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--ink);
}
.rail-quote blockquote::before { content: "\201C"; }
.rail-quote blockquote::after { content: "\201D"; }
.rail-quote figcaption {
  padding-left: 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* Bars. A label line, a track, and the value at the bar's end in text, so
   the number never depends on reading a length. */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { margin: 0 0 0.7rem; }
.bars li:last-child { margin-bottom: 0; }
.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.86rem;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}
.bar-track {
  display: block;
  position: relative;
  height: 0.75rem;
  background: var(--paper-2);
  border-radius: 0 3px 3px 0;
  overflow: hidden;
}
.bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  min-width: 2px;
}
.bar-whole { background: var(--accent); opacity: 0.28; }
.bar-part { background: var(--accent); }
.bar-range { background: var(--accent); opacity: 0.35; }
.bar-value {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.bar-legend {
  display: flex;
  gap: 1rem;
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bar-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.key { display: inline-block; width: 0.7rem; height: 0.5rem; border-radius: 2px; background: var(--accent); }
.key-whole { opacity: 0.28; }

/* By the numbers: figure first, its claim beneath. */
.figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures li { display: flex; flex-direction: column; }
.fig-v {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.fig-l { font-size: 0.78rem; line-height: 1.4; color: var(--ink-muted); margin-top: 0.15rem; }

/* The tally. */
.rail-table-wrap { overflow-x: auto; }
.rail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  line-height: 1.35;
}
.rail-table th, .rail-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.5rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.rail-table thead th {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--ink-muted);
}
.rail-table tbody th { font-weight: 600; color: var(--ink); }
.rail-table td:last-child { padding-right: 0; white-space: nowrap; }
.rail-table tbody tr:last-child th, .rail-table tbody tr:last-child td { border-bottom: 0; }

.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { margin: 0 0 0.6rem; }
.rail-list li:last-child { margin-bottom: 0; }

/* What to watch: the conditions that would move the thread's claim. */
.watch li {
  font-size: 0.86rem;
  line-height: 1.45;
  padding-left: 1rem;
  position: relative;
}
.watch li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.4rem; height: 0.4rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

/* The claims: each signal the thread has filed, in order, linking down the
   page to the entry that made it. */
.claims a { display: block; text-decoration: none; color: var(--ink); }
.claims a:hover .rail-what { color: var(--accent); text-decoration: underline; }
.rail-date {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.1rem;
}
.rail-what {
  display: block;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Sources: the same marks the Signals heading wears, one per line with how
   many entries cited it. */
.sources li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.sources .mark { flex: none; width: 24px; height: 24px; }
.sources .mark-mono { font-size: 0.76rem; }
.src-host { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.src-n {
  flex: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

@media (max-width: 34rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-v { font-size: 2.2rem; }
}