/* ============================================================
   ENDUURR · THE ARTICLE LAYER
   Loaded only on journal entries, on top of style.css.

   Principles:
   · Use the whole page. The text column is one lane, not the layout.
   · Every figure is drawn (SVG), themeable, and animates on arrival.
   · Interactivity must teach something, calculators over decoration.
   · All colour comes from the four-system tokens. No new palette.
   ============================================================ */

/* ---------- Reading progress ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 1); background: transparent; pointer-events: none;
}
.read-progress i {
  display: block; height: 100%; width: 0%;
  background: var(--accent); transition: width .1s linear;
}
[data-theme="noir"] .read-progress i { background: var(--ink); }

/* ============================================================
   ARTICLE HERO · full-bleed, with a drawn plate
   ============================================================ */
.a-hero {
  position: relative;
  padding: calc(84px + 3vh) 0 clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
[data-theme="lab"] .a-hero { border-bottom-color: var(--ink); }
.a-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.a-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.a-title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); line-height: var(--display-lh);
  letter-spacing: var(--display-spacing);
  font-size: clamp(1.9rem, 4.4vw, 3.8rem);
}
.a-standfirst { margin-top: 18px; color: var(--dim); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 46ch; }
.a-meta { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--faint); align-items: center; }
.a-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }

/* The drawn plate that replaces a stock photo */
.a-plate { position: relative; }
.a-plate svg { width: 100%; height: auto; display: block; overflow: visible; }
.a-plate-cap { margin-top: 12px; color: var(--faint); }

/* ============================================================
   ARTICLE BODY GRID · TOC · text · margin
   ============================================================ */
.a-body { padding: clamp(30px, 4vw, 54px) 0 clamp(50px, 7vw, 90px); }

/* Sidebar + content stream.
   The stream is a breakout grid: body text sits in the `content` lane while
   figures widen into the gutter. Text and figures are SIBLINGS in reading
   order, an earlier version nested all the prose in one grid cell, which
   pushed every figure to the very end of the article. Don't reintroduce that. */
.a-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
.a-stream {
  display: grid;
  grid-template-columns:
    [content-start] minmax(0, 68ch) [content-end] minmax(0, 1fr) [full-end];
  column-gap: clamp(20px, 2.6vw, 44px);
  /* .prose caps itself at 70ch, the stream must span the full column so
     figures have a gutter to break out into. */
  max-width: none;
  padding: 0;
}
.a-stream > * { grid-column: content; min-width: 0; }
.a-stream > .fig-wide,
.a-stream > .pull,
.a-stream > .statline { grid-column: content-start / full-end; }

/* Sticky contents rail, fills the space that used to be empty */
.toc { position: sticky; top: 96px; }
.toc-label { color: var(--faint); margin-bottom: 14px; display: block; }
.toc ol { border-left: 1px solid var(--line); }
.toc li a {
  display: block; padding: 8px 0 8px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--dim); font-size: .82rem; line-height: 1.35;
  transition: color .2s, border-color .2s, padding-left .2s;
}
.toc li a:hover { color: var(--ink); padding-left: 18px; }
.toc li a.is-current { color: var(--ink); border-left-color: var(--accent); }
[data-theme="noir"] .toc li a.is-current { border-left-color: var(--ink); }

.toc-share { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.toc-share button {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--btn-radius); padding: 7px 10px; color: var(--dim);
  transition: color .2s, border-color .2s;
}
.toc-share button:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="noir"] .toc-share button:hover { color: var(--ink); border-color: var(--line-strong); }

/* The text lane. Prose styling is inherited from style.css; the stream
   controls width, so this only resets the column constraints. */
.a-stream .prose-block { max-width: none; padding: 0; }
.a-stream > p, .a-stream > ul, .a-stream > ol, .a-stream > h2, .a-stream > h3 { max-width: 68ch; }
.a-lede { font-size: 1.1em; color: var(--ink); }

/* Aside note, sits in the flow, no sticky overlap risk */
.m-note {
  border-left: 2px solid var(--accent);
  padding: 12px 0 12px 16px; margin: 26px 0;
  color: var(--dim); font-size: .88rem; line-height: 1.55;
}
[data-theme="noir"] .m-note { border-left-color: var(--line-strong); }
.m-note b { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }

/* ============================================================
   FIGURES · break out of the text lane
   ============================================================ */
.fig { margin: clamp(30px, 4vw, 52px) 0; }
.fig-wide { grid-column: 2 / -1; }      /* text lane + margin column */
.fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.fig-n { color: var(--accent); }
[data-theme="noir"] .fig-n { color: var(--dim); }
.fig-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.fig-cap { margin-top: 12px; color: var(--faint); font-size: .8rem; line-height: 1.5; }
.fig-frame {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2); padding: clamp(18px, 2.6vw, 30px);
}
[data-theme="lab"] .fig-frame { border-color: var(--ink); }
.fig-frame svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Drawn-chart primitives, all animate when scrolled into view */
.chart text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; fill: var(--dim); text-transform: uppercase; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .plot-ink { stroke: var(--ink); fill: none; stroke-width: 2; }
.chart .plot-accent { stroke: var(--accent); fill: none; stroke-width: 2; }
[data-theme="noir"] .chart .plot-accent { stroke: var(--dim); }
.chart .fill-accent { fill: var(--accent); opacity: .14; }
[data-theme="noir"] .chart .fill-accent { fill: var(--dim); opacity: .16; }
.chart .fill-ink { fill: var(--ink); opacity: .08; }
.chart .label-ink { fill: var(--ink); }
.chart .label-accent { fill: var(--accent); }
[data-theme="noir"] .chart .label-accent { fill: var(--ink); }

/* Line-draw animation */
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.in-view .draw { animation: draw 1.5s var(--ease-soft) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Area/bar grow */
.grow { transform: scaleY(0); transform-origin: bottom; }
.in-view .grow { animation: grow .9s var(--ease-soft) forwards; }
@keyframes grow { to { transform: scaleY(1); } }
.grow-x { transform: scaleX(0); transform-origin: left; }
.in-view .grow-x { animation: growx 1s var(--ease-soft) forwards; }
@keyframes growx { to { transform: scaleX(1); } }
.fade-seq { opacity: 0; }
.in-view .fade-seq { animation: fadeseq .5s ease forwards; animation-delay: var(--fd, .4s); }
@keyframes fadeseq { to { opacity: 1; } }

/* ============================================================
   BIG STAT · counts up on arrival
   ============================================================ */
.statline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: clamp(28px, 4vw, 46px) 0; }
[data-theme="lab"] .statline, [data-theme="lab"] .statline .stat { border-color: var(--ink); }
.stat { background: var(--bg-2); padding: 20px 18px; }
.stat b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.stat b em { font-style: normal; color: var(--accent); font-size: .55em; }
[data-theme="noir"] .stat b em { color: var(--dim); }
.stat span { display: block; margin-top: 8px; color: var(--dim); }

/* ============================================================
   PULL QUOTE · breaks the lane
   ============================================================ */
.pull {
  grid-column: 2 / -1;
  margin: clamp(30px, 4vw, 50px) 0;
  font-family: var(--font-display); text-transform: var(--display-transform);
  font-size: clamp(1.4rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: var(--display-spacing);
  color: var(--ink); padding-left: clamp(16px, 2vw, 26px); border-left: 3px solid var(--accent);
}
[data-theme="noir"] .pull { border-left-color: var(--line-strong); }
[data-theme="lab"] .pull { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: clamp(1.6rem, 3.4vw, 2.8rem); }

/* ============================================================
   INTERACTIVE: CALCULATOR
   ============================================================ */
.calc { border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden; }
[data-theme="noir"] .calc { border-color: var(--line-strong); }
.calc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.calc-head .mono-label { color: var(--accent); }
[data-theme="noir"] .calc-head .mono-label { color: var(--ink); }
.calc-body { padding: clamp(18px, 2.6vw, 28px); }
.calc-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-bottom: 24px; }
.calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.calc-field label span:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.calc-val { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-theme="noir"] .calc-val { color: var(--ink); }
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
  background: var(--line); outline: none; cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  background: var(--accent); border-radius: 50%; cursor: pointer; border: 0;
}
[data-theme="noir"] .calc-field input[type="range"]::-webkit-slider-thumb { background: var(--ink); }
.calc-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 0;
}
[data-theme="startline"] .calc-field input[type="range"]::-webkit-slider-thumb,
[data-theme="lab"] .calc-field input[type="range"]::-webkit-slider-thumb { border-radius: 0; }

.calc-seg { display: flex; border: 1px solid var(--line); border-radius: var(--btn-radius); overflow: hidden; }
.calc-seg button {
  flex: 1; padding: 10px 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  border-right: 1px solid var(--line); transition: background-color .2s, color .2s;
}
.calc-seg button:last-child { border-right: 0; }
.calc-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Output */
.calc-out { border-top: 1px solid var(--line); padding-top: 22px; }
.calc-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.calc-row:last-child { border-bottom: 0; }
.calc-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
[data-theme="noir"] .calc-when { color: var(--dim); }
.calc-what { color: var(--dim); font-size: .88rem; }
.calc-num { font-family: var(--font-mono); font-weight: 500; font-size: clamp(.95rem, 1.5vw, 1.15rem); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-note { margin-top: 16px; color: var(--faint); font-size: .78rem; line-height: 1.5; }

/* Live dose timeline inside the calculator */
.dose-track { position: relative; height: 46px; margin: 20px 0 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.dose-track::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line); }
.dose-pip {
  position: absolute; top: 14px; width: 17px; height: 17px; margin-left: -8.5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-2);
  transition: left .35s var(--ease-soft);
}
[data-theme="noir"] .dose-pip { background: var(--ink); }
[data-theme="startline"] .dose-pip, [data-theme="lab"] .dose-pip { border-radius: 0; }
.dose-pip span {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; color: var(--dim); white-space: nowrap;
}
.dose-ends { display: flex; justify-content: space-between; color: var(--faint); }

/* ============================================================
   INTERACTIVE: STATION EXPLORER
   ============================================================ */
.stations { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
[data-theme="lab"] .stations { border-color: var(--ink); background: var(--ink); }
.st {
  background: var(--bg-2); padding: 14px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 9px; cursor: pointer; transition: background-color .2s;
}
.st:hover, .st[aria-pressed="true"] { background: var(--bg-3); }
.st[aria-pressed="true"] { background: var(--ink); }
.st[aria-pressed="true"] .st-n, .st[aria-pressed="true"] .st-name { color: var(--bg); }
.st[aria-pressed="true"] svg { stroke: var(--bg); }
.st-n { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--faint); }
.st svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.st-name { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: center; line-height: 1.3; }
.st-detail { border: 1px solid var(--line); border-top: 0; padding: clamp(16px, 2.4vw, 24px); background: var(--bg-2); }
[data-theme="lab"] .st-detail { border-color: var(--ink); }
.st-detail h4 { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(1.1rem, 2.2vw, 1.6rem); margin-bottom: 8px; letter-spacing: var(--display-spacing); }
.st-detail p { color: var(--dim); font-size: .88rem; max-width: 62ch; }
.st-detail .st-work { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: block; }
[data-theme="noir"] .st-detail .st-work { color: var(--dim); }

/* ============================================================
   INTERACTIVE: COMPARISON TOGGLE
   ============================================================ */
.compare { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
[data-theme="lab"] .compare { border-color: var(--ink); }
.compare-tabs { display: flex; border-bottom: 1px solid var(--line); }
.compare-tabs button {
  flex: 1; padding: 14px 10px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  border-right: 1px solid var(--line); transition: background-color .2s, color .2s;
}
.compare-tabs button:last-child { border-right: 0; }
.compare-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.compare-panel { padding: clamp(18px, 2.6vw, 28px); }
.compare-panel[hidden] { display: none; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: 18px; }
.compare-metric b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.compare-metric span { display: block; margin-top: 5px; color: var(--faint); }
.compare-verdict { color: var(--dim); font-size: .9rem; max-width: 64ch; }

/* ============================================================
   CHECKLIST · the protocol you can tick
   ============================================================ */
.checklist { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); }
[data-theme="lab"] .checklist { border-color: var(--ink); }
.checklist-head { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.check-count { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-theme="noir"] .check-count { color: var(--ink); }
.checklist ul { padding: 6px 0; }
.checklist li { border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: grid; grid-template-columns: 20px 88px 1fr; gap: 14px; align-items: baseline; padding: 14px 18px; cursor: pointer; transition: background-color .2s; }
.checklist label:hover { background: var(--bg-3); }
.checklist input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 2px;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s; position: relative; top: 3px;
}
.check-box::after { content: "✓"; font-size: 10px; color: var(--bg); opacity: 0; transition: opacity .15s; }
.checklist input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
[data-theme="noir"] .checklist input:checked + .check-box { background: var(--ink); border-color: var(--ink); }
.checklist input:checked + .check-box::after { opacity: 1; }
.checklist input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-when { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.check-what { color: var(--ink); font-size: .9rem; }
.checklist input:checked ~ .check-what { color: var(--faint); text-decoration: line-through; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .a-grid { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .a-hero-grid { grid-template-columns: 1fr; }
  .a-grid { grid-template-columns: 1fr; }
  .a-stream { grid-template-columns: [content-start] minmax(0, 1fr) [content-end full-end]; }
  .toc { position: static; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 28px; }
  .toc ol { max-height: 168px; overflow-y: auto; }
  .stations { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .stations { grid-template-columns: repeat(2, 1fr); }
  .calc-row { grid-template-columns: 76px 1fr; }
  .calc-num { grid-column: 2; }
  .checklist label { grid-template-columns: 20px 1fr; }
  .check-when { grid-column: 2; }
  .check-what { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .draw, .grow, .grow-x, .fade-seq { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; }
  .read-progress { display: none; }
}