/* Nutgraph — shared styles
   Pure white, single sans-serif, one blue accent, muted red for missed claims only. */

:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-faint: #86868b;
  --border: #d2d2d7;
  --border-strong: #c7c7cc;
  --accent: #0071e3;
  --pill-bg: #f5f5f7;
  --muted-red: #a6291e;
  --muted-green: #2f7a4d;
  --muted-amber: #9c6b1f;
  --content-width: 692px;
  --header-width: 980px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Reserves the vertical scrollbar's width on every page, whether or not
     that page is actually tall enough to need one. Without this, main/
     header/footer (all centered via margin: 0 auto) re-center into a
     viewport that's ~15px wider or narrower depending on the previous
     page's content height — since every topic has a different amount of
     content, that recentering happens on almost every navigation and
     reads as the whole page shifting sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.site-header-inner {
  max-width: var(--header-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover {
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a,
.site-nav span {
  font-size: 13px;
  color: var(--text-secondary);
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

.site-nav .disabled {
  color: var(--text-faint);
}

/* ---------- Layout ---------- */

/* main is a direct flex child of body (display: flex; flex-direction:
   column). A flex item with auto margins on the cross axis (left/right,
   here) doesn't get stretched to fill the container the way a normal
   block box would — per spec it's sized to fit its own content first,
   THEN centered by the auto margins. Without an explicit width, main's
   actual box was "however wide its current content happens to be, capped
   at 692px" — which silently changed size (and therefore centered
   position) every time the visible topics changed, since different
   titles/filter states have different natural content widths. width:
   100% forces a deterministic full-width flex-basis before max-width
   clips it down to 692px, so the box size no longer depends on content.
   header/footer don't have this bug because their centering lives on an
   inner wrapper div (.site-header-inner / .site-footer-inner) that isn't
   itself a flex item — main applies it directly, which is the actual
   root cause. */
main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Homepage hero (About page only — the homepage leads with the
   filter pills instead) ---------- */

.hero {
  padding: 72px 0 48px 0;
}

.pills-section {
  padding-top: 32px;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px 0;
  color: var(--text);
}

.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 560px;
}

/* ---------- Section heading ---------- */

.section-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 4px 0;
}

.section-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px 0;
}

.section-heading-row .section-heading {
  margin: 0;
}

/* ---------- Category filter pills ---------- */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 40px 0;
}

.filter-pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--pill-bg);
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
}

.filter-pill.active {
  background: var(--text);
  color: #ffffff;
}

.empty-state {
  padding: 32px 0;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ---------- Signal index (homepage list) ---------- */

.signal-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

/* Flex items default to min-width: auto, which refuses to shrink below the
   content's natural width — a long title/meta line can then silently push
   this row wider than the page's fixed column instead of wrapping, and
   since which title is longest changes every time a different topic is
   visible, the resulting overflow (and any horizontal shift it causes)
   changes too. min-width: 0 lets the wrapper actually shrink to fit and
   wrap normally like everything else on the page. */
.signal-row-main {
  min-width: 0;
}

.signal-index li.is-last-visible .signal-row {
  border-bottom: none;
}

a.signal-row:hover .signal-row-title {
  color: var(--accent);
}

a.signal-row:hover {
  text-decoration: none;
}

.signal-row-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px 0;
  overflow-wrap: break-word;
}

.signal-row-meta {
  font-size: 14px;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.signal-row-status {
  flex-shrink: 0;
  padding-top: 2px;
}

/* ---------- Status pills / labels ---------- */

.pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.status-pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.status-pill.missed {
  background: #fbeae8;
  color: var(--muted-red);
}

.status-pill.hit {
  background: #e7f2ea;
  color: var(--muted-green);
}

.status-pill.partial {
  background: #f8f0e2;
  color: var(--muted-amber);
}

/* ---------- Signal detail page ---------- */

.back-link {
  display: inline-block;
  margin: 32px 0 0 0;
  font-size: 14px;
}

.signal-header {
  padding: 20px 0 24px 0;
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}

.signal-header h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.meta-item .label {
  display: block;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.meta-item .value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* The nut graph: one sentence, sourced from the same homepage_meta teaser
   shown on the index page, that tells a reader why the story matters
   before they commit to the full narrative below. This is the literal
   product concept the site is named for, so it's set in full dark text
   (not the muted secondary gray used elsewhere) and explicitly labeled —
   it should read as the single most important line on the page, not a
   caption. */
.synopsis {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 20px 0 0 0;
}

.synopsis-label {
  font-weight: 700;
}

/* ---------- Body copy ---------- */

.body-copy {
  padding: 32px 0 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--text);
}

.body-copy p {
  margin: 0 0 20px 0;
}

.body-copy strong {
  font-weight: 600;
}

/* ---------- Segmented control (e.g. then/now toggle) ---------- */

.segmented {
  display: inline-flex;
  gap: 2px;
  margin: 28px 0 0 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--pill-bg);
}

.segmented-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.segmented-btn.active {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.toggle-panel {
  display: none;
}

.toggle-panel.active {
  display: block;
}

/* ---------- Plot Movement chart (Bounded Claim strength scale and Living
   Topic pole spectrum both reuse these — axis/tick lines and pole labels
   are inline SVG attributes on generated markup, not separate classes). ---------- */

.chart-section {
  padding: 32px 0 8px 0;
}

.chart-section svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-labels {
  display: flex;
  padding: 10px 0 24px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.chart-labels div {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.chart-labels div:last-child {
  text-align: right;
}

.chart-labels .ev-date {
  display: block;
  color: var(--text-faint);
  margin-bottom: 2px;
}

/* Evenly-spaced calendar ticks spanning the chart's actual date range —
   replaces trying to label every individual evidence point, which just
   doesn't scale past a handful of items. Since the chart's x-position is
   already linear in real time, evenly-spaced dates land at evenly-spaced
   pixel positions on their own — a plain flex row reproduces that exactly. */
.chart-time-axis {
  display: flex;
  justify-content: space-between;
  padding: 4px 0 20px 0;
  margin: 4px 0 20px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
}

.chart-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

/* ---------- Bordered callout card (Plot in Progress/Outcome for Bounded
   Claims, Plot Status for Living Topics) ---------- */

.card {
  margin: 8px 0 40px 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 28px;
}

.card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.card-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 10px 0;
}

.card-status {
  font-size: 14px;
  color: var(--text-secondary);
}

.card-status.missed {
  color: var(--muted-red);
}

/* ---------- Definition list (About / methodology) ---------- */

.definition-section {
  padding: 8px 0 32px 0;
  border-bottom: 1px solid var(--border);
}

.definition-list {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
}

.definition-item {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.definition-item:first-child {
  border-top: none;
}

.definition-term {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.definition-text {
  display: block;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Evidence list ---------- */

.evidence-section {
  padding: 8px 0 32px 0;
  border-bottom: 1px solid var(--border);
}

.evidence-list {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
}

.evidence-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.evidence-item:first-child {
  border-top: none;
}

.evidence-number {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  margin-top: 1px;
}

.evidence-tier {
  flex-shrink: 0;
  margin-top: 1px;
}

.evidence-text {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text);
}

.evidence-direction {
  display: block;
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
}

.evidence-date {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 8px;
}

/* The cited source's own favicon — a plain citation icon, not a logo
   endorsement. Small and muted so it reads as metadata, not a badge. */
.evidence-favicon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 3px;
  vertical-align: -2px;
  opacity: 0.85;
}

/* ---------- Evidence "show more" accordion (native <details>) ---------- */

.evidence-more {
  margin: 0;
}

.evidence-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--accent);
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.evidence-more > summary::-webkit-details-marker {
  display: none;
}

.evidence-more > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--accent);
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.evidence-more[open] > summary::before {
  transform: rotate(-180deg);
}

.evidence-more .evidence-list {
  margin-top: 0;
}

/* ---------- Watching ---------- */

.watching {
  padding: 32px 0;
}

.watching .section-heading {
  margin-bottom: 10px;
}

.watching p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
}

.site-footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 32px 24px 64px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer-inner p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0;
}

.footer-nav {
  display: flex;
  gap: 16px;
}

.footer-nav a {
  font-size: 13px;
  color: var(--text-faint);
}

.footer-nav a:hover {
  color: var(--text-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .hero {
    padding: 48px 0 32px 0;
  }

  .signal-row {
    flex-direction: column;
    gap: 8px;
  }

  .meta-row {
    gap: 20px;
  }

  .body-copy {
    font-size: 17px;
  }
}