/* ============================================================================
   Nudge brand base — tokens + page chrome.

   PORTED, NOT INVENTED. Every value below is copied from usenudge.app's
   stylesheet (nudge-agent-landing/styles.css). This page is deployed in two
   places (its own repo and /comparison on the site), so it carries its own copy
   rather than linking the site's 123KB stylesheet and inheriting rules written
   for a different page. `npm test` diffs the tokens against the site when the
   site repo is present next door, and fails when they drift.
   ========================================================================== */

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

:root {
  --bg:         #ffffff;
  --bg-soft:    #f6f6f4;
  --card:       #ffffff;
  --ink:        #10131c;
  --ink-soft:   #4d5364;
  --ink-faint:  #676d7d;
  --rule:       color-mix(in srgb, var(--ink) 8%, transparent);
  --rule-firm:  color-mix(in srgb, var(--ink) 15%, transparent);
  --accent:     #2447d8;
  --accent-2:   #1a37b0;
  --accent-text:#2447d8;
  --accent-soft:#eef1fd;
  --accent-ink: #ffffff;
  --accent-fill:#2447d8;
  --good:       #0d7050;
  --good-soft:  #e4f4ee;
  --warn:       #b4530a;
  --warn-soft:  #fdeee0;

  --lift-1: 0 1px 2px -1px color-mix(in srgb, var(--ink) 16%, transparent),
            0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent);
  --lift-2: 0 1px 2px -1px color-mix(in srgb, var(--ink) 18%, transparent),
            0 6px 14px -6px color-mix(in srgb, var(--ink) 16%, transparent),
            0 18px 34px -20px color-mix(in srgb, var(--ink) 22%, transparent);
  --lift-3: 0 1px 2px -1px color-mix(in srgb, var(--ink) 20%, transparent),
            0 10px 22px -8px color-mix(in srgb, var(--ink) 18%, transparent),
            0 30px 56px -28px color-mix(in srgb, var(--ink) 28%, transparent);

  --grain-opacity: .035;
  --grid-dot: color-mix(in srgb, var(--ink) 10%, transparent);

  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1180px;
  --pad: 40px;
  --space-section: 104px;
  --space-head:    48px;
  --space-block:   32px;
  --space-row:     20px;
  --radius:    4px 4px 4px 14px;
  --radius-sm: 3px 3px 3px 11px;
  --radius-xs: 2px 2px 2px 7px;
  --radius-btn:4px 4px 4px 12px;
  --nav-h: 66px;
  --spring: cubic-bezier(.22, 1, .28, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0a0c14;
    --bg-soft:    #0f1220;
    --card:       #141827;
    --ink:        #eaedf6;
    --ink-soft:   #a2a9bd;
    --ink-faint:  #7c8498;
    --accent:     #4f74ff;
    --accent-2:   #6f8cff;
    --accent-text:#8fa6ff;
    --accent-soft:#151d3d;
    --accent-ink: #ffffff;
    --accent-fill:#3f63f2;
    --good:       #5fd3a6;
    --good-soft:  #10281f;
    --warn:       #e8a262;
    --warn-soft:  #2a1d10;

    --lift-1: 0 1px 2px -1px rgba(0,0,0,.6), 0 2px 8px -3px rgba(0,0,0,.5);
    --lift-2: 0 1px 2px -1px rgba(0,0,0,.7), 0 8px 18px -8px rgba(0,0,0,.6),
              0 22px 40px -24px rgba(0,0,0,.8);
    --lift-3: 0 1px 2px -1px rgba(0,0,0,.8), 0 12px 26px -10px rgba(0,0,0,.7),
              0 34px 62px -30px rgba(0,0,0,.9);

    --grain-opacity: .06;
    --grid-dot: color-mix(in srgb, #fff 12%, transparent);
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ grain -- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { body::before { mix-blend-mode: screen; } }

/* position only, no z-index: a z-index here makes each a stacking context */
.announce, main, footer, section { position: relative; }

/* ---------------------------------------------------------------- helpers -- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

.sect { padding: var(--space-section) 0; border-top: 1px solid var(--rule); }
.sect.is-soft {
  background:
    radial-gradient(circle at center, var(--grid-dot) .9px, transparent 1px) 0 0 / 22px 22px,
    var(--bg-soft);
}
.sect.is-tight { padding: calc(var(--space-section) * .62) 0; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.5vw, 59px); line-height: 1.06; }
h2 { font-size: clamp(31px, 3.9vw, 50px); line-height: 1.08; }
h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.018em; }
h4 { font-size: 15px; line-height: 1.35; letter-spacing: -.01em; font-weight: 650; }

.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.58; color: var(--ink-soft); margin: 18px 0 0; max-width: 60ch; }
.sect-head { max-width: 68ch; margin-bottom: var(--space-head); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft);
  padding: 7px 13px 7px 11px; border-radius: var(--radius-sm);
  margin: 0 0 22px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.eyebrow.is-plain { color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.eyebrow.is-plain::before { background: var(--ink-faint); }

/* the one hand-drawn stroke, stretched to whatever word it marks */
:root {
  --em-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.4 C 40 4.1, 72 11.6, 108 7.6 C 142 3.8, 176 10.4, 236 5.6' fill='none' stroke='%232447d8' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root { --em-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.4 C 40 4.1, 72 11.6, 108 7.6 C 142 3.8, 176 10.4, 236 5.6' fill='none' stroke='%238fa6ff' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
.em {
  color: var(--accent-text);
  background-image: var(--em-stroke); background-repeat: no-repeat;
  background-position: 0 98%; background-size: 100% .22em;
  padding-bottom: .02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.008em; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .3s var(--spring), box-shadow .3s var(--spring);
}
.btn-primary {
  background: var(--accent-fill); color: var(--accent-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent),
              0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-primary:hover {
  background: var(--accent-2); transform: translateY(-2px);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 44%, transparent),
              0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--rule-firm); box-shadow: var(--lift-1); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn-text { padding: 14px 4px; color: var(--ink); background: none; }
.btn-text:hover { color: var(--accent-text); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: .38; cursor: default; transform: none !important; box-shadow: var(--lift-1); }
.btn .arw { transition: transform .16s; }
.btn:hover:not(:disabled) .arw { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--space-block); }
.cta-note { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; }

/* ---------------------------------------------------- announce bar + nav -- */
.announce { background: var(--accent-fill); color: var(--accent-ink); font-size: 14px; text-align: center; padding: 11px 20px; }
.announce a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.announce a:hover .arw { transform: translateX(3px); }
.announce .arw { transition: transform .16s; }
.announce .tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, #fff 22%, transparent);
  padding: 3px 8px; border-radius: 5px; margin-right: 10px;
}

.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h); display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-in { display: flex; align-items: center; gap: 28px; width: 100%; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: 8px; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* the mark: three rising dots. Neutral by design, never the page accent. */
.mark { display: inline-flex; align-items: center; gap: 3.5px; flex: none; }
.mark-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mark-dot.d1 { opacity: 0.32; }
.mark-dot.d2 { opacity: 0.6; }
.mark-dot.d3 { opacity: 1; }
.mark-word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.032em; line-height: 1; }
.mark-word sup { font-size: 0.44em; font-weight: 500; top: -0.62em; margin-left: 1px; }
.foot-col .mark-word { font-size: 18px; }

@keyframes dotPulse { 0%, 62%, 100% { transform: scale(1); } 22% { transform: scale(1.34); } }
.nav .mark-dot { animation: dotPulse 3.4s var(--spring) infinite; }
.nav .mark-dot.d1 { animation-delay: 0s; }
.nav .mark-dot.d2 { animation-delay: .16s; }
.nav .mark-dot.d3 { animation-delay: .32s; }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: var(--space-head) 0 calc(var(--space-section) * .5); }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 22px; }

/* ---------------------------------------------------------------- footer -- */
.foot { position: relative; overflow: hidden; padding: 28px 0 22px; border-top: 1px solid var(--rule); font-size: 13.4px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .9fr .9fr; gap: 26px; }
.foot-col h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 9px; }
.foot-col a { display: block; padding: 2.5px 0; color: var(--ink-soft); font-size: 13.2px; }
.foot-col a:hover { color: var(--accent-text); }
.foot-blurb { font-size: 13.2px; color: var(--ink-soft); line-height: 1.5; margin: 9px 0 0; max-width: 34ch; }
.foot-base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12.2px; color: var(--ink-faint); }
.foot-top { color: var(--ink-faint); }
.foot-top:hover { color: var(--accent-text); }

@media (max-width: 900px) {
  :root { --pad: 22px; --space-section: 72px; --space-head: 34px; }
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav .mark-dot { animation: none; }
  .btn { transition: none; }
}

/* ============================================================================
   The instrument: two readings of one deal, stepped event by event.

   Colour carries the argument and nothing else. Cobalt is Nudge's line, the
   warn tone is the CRM's. Neither is decorative, so nothing else on the page is
   allowed either of them.
   ========================================================================== */

.cmp { --crm: var(--warn); --nud: var(--accent); }

/* --------------------------------------------------------- who is who -----
   Said once, above the instrument, instead of inside both columns on all
   sixteen steps. It is static text, and repeating it sixteen times was most of
   what made the step feel like a wall. It also defines the two numbers, which
   nothing on the page did. */
.cmp-sides {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px;
  margin-bottom: var(--space-block);
}
.cmp-side {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: baseline; padding-bottom: 2px;
}
.cmp-side .dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.cmp-side[data-side="crm"] .dot { background: var(--crm); }
.cmp-side[data-side="nudge"] .dot { background: var(--nud); }
.cmp-side b { font-family: var(--display); font-size: 16px; font-weight: 650; letter-spacing: -.018em; }
.cmp-side-t { grid-column: 2; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); max-width: 46ch; }
.cmp-side i { font-style: normal; color: var(--ink-soft); font-weight: 500; }

/* ------------------------------------------------------------------ chart -- */
.cmp-chart {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  padding: 18px 26px 0;
}
.cmp-step {
  margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.cmp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmp-svg .mk { cursor: pointer; }
.cmp-svg .mk:focus { outline: none; }
.cmp-svg .mk:focus-visible circle { stroke: var(--ink); stroke-width: 2.4; }
.cmp-svg text { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.cmp-gap {
  margin: 16px 0 0; min-height: 24px;
  font-size: 14.5px; color: var(--ink-soft);
}
.cmp-gap b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.cmp-gap:empty { margin: 0; min-height: 0; }

/* ------------------------------------------------------------- event head -- */
.cmp-event { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: var(--space-block) 0 10px; }
.cmp-day {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--rule-firm); border-radius: var(--radius-xs);
  padding: 4px 9px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-title { font-family: var(--display); font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.024em; line-height: 1.18; }
.cmp-agree {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: var(--radius-xs); padding: 5px 11px; margin-bottom: 18px;
}
.cmp-agree::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.cmp-agree[hidden] { display: none; }

/* ----------------------------------------------------------- the columns --
   Three rows, not five, and one label per column instead of three. The first
   draft gave every field its own uppercase mono heading and its own block, and
   the result was a wall: six labels, two verdicts, an evidence line, a ledger
   and a callout all competing at once. A reader stepping through sixteen events
   needs each step readable in about four seconds. So each side now says who it
   is, what it read, and what to do; everything else is demoted to a supporting
   line or moved out of the columns entirely. */
.cmp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 42px;
}
.cmp-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cmp-div { grid-row: 1 / -1; background: var(--rule); }

.cmp-who { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; line-height: 1.42; }
.cmp-who .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cmp-col[data-side="crm"] .dot { background: var(--crm); }
.cmp-col[data-side="nudge"] .dot { background: var(--nud); }
.cmp-who-name { font-family: var(--display); font-weight: 650; font-size: 15px; letter-spacing: -.018em; color: var(--ink-soft); }
.cmp-score {
  margin-left: auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.cmp-score b {
  font-family: var(--display); font-size: 21px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cmp-col[data-side="nudge"] .cmp-score b { color: var(--accent-text); }

/* The read. This is the page: two sentences about the same day that do not
   agree. Everything else on the step is support, so the verdict is the largest
   thing under the chart and the evidence under it drops a full step in size and
   a full step in contrast. */
.cmp-read { padding-bottom: 22px; }
.cmp-verdict {
  margin: 0;
  font-family: var(--display); font-size: clamp(18px, 1.7vw, 21px); font-weight: 650;
  letter-spacing: -.02em; line-height: 1.32; max-width: 40ch; color: var(--ink);
}
.cmp-ev { margin: 11px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); max-width: 48ch; }

/* -------------------------------------------------------- the mechanism --
   The five tests and the rule sit under BOTH columns, not inside the Nudge one.
   In the column they made one side of a comparison a head taller than the other,
   and they answer a different question: the columns say what each system read,
   this band says how the second one got there. */
.cmp-mech { margin-top: 4px; padding: 18px 0 10px; border-top: 1px solid var(--rule); }
.cmp-mech[hidden] { display: none; }
.cmp-mech-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 11px;
}
.cmp-ledger { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cmp-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.cmp-chk i { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid currentColor; }
.cmp-chk.is-yes { color: var(--accent-text); }
.cmp-chk.is-yes i { background: var(--accent); border-color: var(--accent); }
.cmp-chk.is-no i { background: transparent; }
.cmp-chk.is-na { opacity: .42; }
.cmp-chk.is-na i { border-style: dashed; }

/* ------------------------------------------------------ the recommendation --
   The payload. A score is an opinion; this is the thing a rep does on Tuesday
   morning, and putting the two side by side is the whole comparison. */
.cmp-do {
  border-top: 1px solid var(--rule);
  border-left: 2px solid var(--crm);
  padding: 14px 0 0 15px;
}
.cmp-col[data-side="nudge"] .cmp-do { border-left-color: var(--accent); }
.cmp-do-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.cmp-col[data-side="nudge"] .cmp-do-k { color: var(--accent-text); }
.cmp-do-body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 46ch; }

/* ------------------------------------------------------------- the flags -- */
.cmp-flag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  padding: 4px 9px; border-radius: var(--radius-xs);
}
.cmp-flag.is-nudge { background: var(--accent-soft); color: var(--accent-text); }
.cmp-flag.is-crm   { background: var(--warn-soft); color: var(--warn); }
.cmp-flag.is-weak  { background: transparent; border: 1px dashed var(--rule-firm); color: var(--ink-faint); }
.cmp-flag[hidden] { display: none; }

/* The rule used to be a tinted callout inside the Nudge column, which made that
   column visibly taller and louder than the one it is being compared with. It
   appears on four events out of sixteen, so it belongs under both of them as a
   single quiet line. */
.cmp-rule {
  margin: 16px 0 0; padding-left: 15px; border-left: 2px solid var(--rule-firm);
  font-size: 14px; line-height: 1.55; color: var(--ink-faint); max-width: 76ch;
}
.cmp-rule[hidden] { display: none; }

/* ---------------------------------------------------------- the controls --
   Restored after a line-range rewrite of this file deleted it along with the
   block above: the markup kept the class, the page kept rendering, and the
   buttons quietly lost their layout. tests/verify.cjs now fails on a class that
   is in the markup with no rule here.

   No border-top: the mechanism band directly above carries one, and two
   stacked hairlines read as a mistake. */
.cmp-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 0 13px; border-top: 1px solid var(--rule);
}
/* Smaller than btn-sm. These sit inside the chart and drive it; at the site's
   normal button size they competed with the plot for the eye. */
.cmp-controls .btn {
  padding: 7px 13px; font-size: 13px; gap: 7px;
  border-radius: var(--radius-xs);
}
.cmp-controls .btn-text { padding: 7px 6px; }
.cmp-controls .btn .arw { font-size: 12px; }

/* The keyboard and click shortcuts still work, they are just not announced any
   more. The line explaining them sat beside the buttons at running-text size and
   was the widest thing in the row, which made the instrument look like it came
   with instructions. */

/* ------------------------------------------------------- the no-JS story -- */
/* Everything is in the DOM. The stepper is an enhancement, so the fallback is
   not a message telling people to turn JS on, it is all sixteen events as a
   plain readable list. JS hides it and reveals the instrument, in that order,
   so a crawler and a reader with JS off both get the whole argument. */
.cmp-live { display: none; }
.js-on .cmp-live { display: block; }
.js-on .cmp-static { display: none; }

.cmp-static-ev { padding: 22px 0; border-top: 1px solid var(--rule); }
.cmp-static-ev h3 { margin-bottom: 4px; }
.cmp-static-ev .cmp-day { margin-bottom: 10px; display: inline-block; }
.cmp-static-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 14px; }
.cmp-static-cols h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 8px; }
.cmp-static-cols p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------- the ledger key --
   Five cells, and five is a bad number for auto-fit: at most widths it wraps to
   four plus one and the empty sixth cell showed as a large grey rectangle,
   because the hairlines were a 1px gap letting the container colour through.
   Column counts are explicit now, and the lines are drawn with box-shadow so an
   empty trailing cell is simply empty at every breakpoint. */
.cmp-tests {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmp-test {
  padding: 20px 20px 22px;
  box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
}
.cmp-test-n { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-text); margin-bottom: 9px; }
.cmp-test h3 { font-size: 15.5px; letter-spacing: -.014em; margin-bottom: 7px; }
.cmp-test p { margin: 0; font-size: 13.6px; line-height: 1.5; color: var(--ink-faint); }

@media (max-width: 1040px) { .cmp-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cmp-tests { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- disclosure -- */
.cmp-note {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.2px; line-height: 1.55; color: var(--ink-faint);
  border-left: 2px solid var(--rule-firm); padding-left: 14px; margin: var(--space-block) 0 0; max-width: 72ch;
}

@media (max-width: 880px) {
  .cmp-sides { grid-template-columns: 1fr; gap: 14px; }
  .cmp-cols { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .cmp-col { grid-row: auto; grid-template-rows: none; }
  .cmp-div { grid-row: auto; height: 1px; margin: 6px 0 26px; }
  .cmp-chart { padding: 18px 16px 12px; }
  .cmp-static-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .cmp-title, .cmp-val, .cmp-verdict, .cmp-score b { transition: opacity .18s ease; }
}

/* -------------------------------------------------------- chart internals --
   SVG presentation attributes do not accept var(), so every drawn element is
   styled here by class instead of coloured inline. That also means the whole
   chart follows the theme with no second code path. */
.cmp-grid-line  { stroke: var(--rule); }
.cmp-axis       { fill: var(--ink-faint); font-size: 12px; }
.cmp-closeline  { stroke: var(--rule-firm); stroke-dasharray: 3 4; }
.cmp-closetext  { fill: var(--ink-faint); font-size: 12px; }
.cmp-line-crm   { stroke: var(--crm); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cmp-line-nud   { stroke: var(--nud); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cmp-cursor     { stroke: var(--rule-firm); }
.cmp-flagline   { stroke: var(--nud); }
.cmp-flagtext   { fill: var(--accent-text); font-size: 12.5px; font-weight: 500; }
.cmp-latetext   { fill: var(--crm); font-size: 12.5px; font-weight: 500; }
.cmp-mk-crm     { stroke: var(--crm); stroke-width: 2; fill: var(--card); }
.cmp-mk-nud     { stroke: var(--nud); stroke-width: 2; fill: var(--card); }
.cmp-mk-crm.is-on { fill: var(--crm); }
.cmp-mk-nud.is-on { fill: var(--nud); }
.cmp-svg .mk { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .cmp-svg .mk { transition: none; } }

/* Said to a screen reader, never drawn: the ledger's yes/no is carried by a
   filled or hollow dot, and a dot is not a word. */
.cmp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }