/* "A": a sailing yacht's hull carrying a trading terminal. The structure is the yacht's: deep-sea
   page, gunmetal-green panels with a metallic sheen, a chamfered "bow" corner on each month panel,
   the header above a waterline, and headings in a wide grotesk, like a name on a hull. The data
   language is the terminal's: mono figures (tabular), up green and down red, and amber for what is
   selected, and nothing else (the tab, the slider's needle, the chart's month band, the card's
   edge, an open chip). Type: Archivo (expanded) for headings and labels, IBM Plex Sans for
   reading, IBM Plex Mono for figures. The chart's colors are COLORS in app.js; keep the two in
   step. */
:root {
  --page: #0a0e0f;             /* deep sea */
  --card: #162023;             /* gunmetal-green */
  --panel: linear-gradient(170deg, #1e2a2d 0%, #162023 36%, #11191b 100%);  /* the hull's sheen */
  --surface: var(--page);      /* behind the sticky chart and slider, stacked */
  --tint: #172125;             /* release boxes, evidence cards, the panel heads */
  --ink: #edf1ee;              /* sail white */
  --ink-2: #d5dcd9;
  --muted: #8f9d99;
  --hull: #8fa6a0;             /* silver-green: labels */
  --rule: #1f2a2b;             /* hairlines */
  --rule-2: #314040;
  --edge-light: rgba(196, 220, 214, 0.24);  /* light caught on an edge */
  --accent: #ff9f1c;           /* amber: what is selected */
  --accent-ink: #0a0a0a;
  --accent-wash: rgba(255, 159, 28, 0.13);
  --up: #3ddc84;
  --down: #ff5a4e;
  --price: #f2f5f3;
  --nogrowth: #2ec4d6;         /* sea cyan: the earnings floor (and the release boxes' edge) */
  --share: #3ddc84;
  --pvgo: rgba(64, 156, 255, 0.2);
  --release: #4a5a58;
  --market: #8fa6a0;
  --company: #e055e0;
  --stands-out: rgba(224, 85, 224, 0.14);
  --wide: "Archivo", "IBM Plex Sans", system-ui, sans-serif;  /* always with font-stretch: 125% */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bow: 22px;                 /* the chamfered corner */
  --radius: 2px;
  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-2) var(--page); }

body {
  margin: 0;
  background: var(--page) linear-gradient(180deg, #0d1314 0, var(--page) 900px) no-repeat;
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

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

:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Page tabs, shared by every page: the current one underlined in amber */
.site-nav { background: rgba(5, 8, 9, 0.85); border-bottom: 1px solid var(--rule); }
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab {
  flex: none;
  padding: 11px 12px 9px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 0.66rem/1.2 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.tabs .tab:first-child { margin-left: -12px; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.site-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px var(--gutter) 12px;
}
.site-header { padding-bottom: 28px; border-bottom: 1px solid rgba(46, 196, 214, 0.28); }  /* the waterline */


.site-header h1 {
  margin: 0 0 14px;
  font: 300 clamp(1.8rem, 3.2vw, 2.8rem)/1.05 var(--wide);
  font-stretch: 125%;
  letter-spacing: -0.03em;
}
.title-run { display: block; }
.lede { margin: 0; max-width: 760px; color: var(--ink-2); font-size: 1rem; line-height: 1.65; font-weight: 300; }
.lede strong { color: var(--ink); font-weight: 500; }
.repo-link { margin: 10px 0 0; font: 0.78rem var(--mono); }

/* Chart + slider. With room for it, the whole block is sticky and the text scrolls beneath.
   On small screens only the slider bar is: .viz drops its box, so the bar sticks to the page. */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.viz { display: contents; }
.viz-chart { padding-top: 12px; }
.viz-controls {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 4px 0 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) and (min-height: 700px) {
  .viz {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .viz-controls { position: static; border-bottom: 0; padding-bottom: 8px; }
}

.chart-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}
.chart-title {
  margin: 0;
  font: 500 0.62rem/1.45 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 0.68rem/1.5 var(--mono);
  color: var(--muted);
}
.legend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.key { display: inline-block; flex: none; }
.key-line { width: 16px; height: 2px; background: var(--c); }
.key-area { width: 12px; height: 10px; background: var(--pvgo); }
.key-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--price); }
.key-dotted { width: 0; height: 12px; border-left: 1px dashed var(--muted); }
.key-month { width: 12px; height: 10px; background: var(--accent-wash); border: 1px solid var(--accent); }
.key-stands-out { width: 12px; height: 10px; background: var(--stands-out); }

.chart {
  width: 100%;
  height: clamp(360px, 50vh, 540px);  /* three panels: price, growth share, the market / company split */
}

.slider-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.slider-wrap { flex: 1; min-width: 0; }
.step {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 1.1rem/1 var(--mono);
  cursor: pointer;
}
.step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.step:disabled { color: var(--rule-2); border-color: var(--rule); cursor: default; }

/* The slider: a hairline track and an amber needle */
#month-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
}
#month-slider::-webkit-slider-runnable-track { height: 1px; background: var(--rule-2); }
#month-slider::-moz-range-track { height: 1px; background: var(--rule-2); }
#month-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 20px;
  margin-top: -10px;
  border: 0;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--card), 0 0 14px rgba(255, 159, 28, 0.45);
}
#month-slider::-moz-range-thumb {
  width: 6px;
  height: 20px;
  border: 0;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--card), 0 0 14px rgba(255, 159, 28, 0.45);
}
#month-slider:focus-visible { outline: none; }
#month-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--accent); }

/* Each label centered under its stop: the needle's center runs from 3px to the width less 3px, so
   the grid reaches past the track by m, where m + (100% + 2m) / 2n = 3px */
.ticks {
  display: grid;
  grid-template-columns: repeat(var(--n, 12), 1fr);
  margin: 0 calc((3px * var(--n, 12) - 50%) / (var(--n, 12) - 1));
  font: 0.64rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticks button {
  position: relative;
  padding: 4px 0 3px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.ticks button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 3px;
  background: var(--rule-2);
}
.ticks button:hover { color: var(--ink); }
.ticks button[aria-current="true"] { color: var(--accent); font-weight: 600; }
.ticks button[aria-current="true"]::before { background: var(--accent); }

.month-label {
  margin: 4px 0 0;
  min-height: 1.5em;
  font: 0.74rem/1.5 var(--mono);
  text-align: center;
  color: var(--muted);
}
.month-label strong { color: var(--accent); margin-right: 2px; font-weight: 600; text-transform: uppercase; }

/* Explanations */
.content {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px var(--gutter) 40vh;
}
.footnote {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font: 300 0.76rem/1.65 var(--sans);
  color: var(--muted);
}

.explanations { font-size: 0.9rem; line-height: 1.62; color: var(--ink-2); }
/* The run's opening (settings, label table, notes), a collapsed summary in the top panel. Open, it
   flows into columns (up to 3, each at least 360px); no paragraph, list or table splits across two. */
.intro {
  margin-top: 24px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: rgba(10, 14, 15, 0.55);
  backdrop-filter: blur(6px);
}
.intro[open] { background: var(--panel); border-color: var(--rule); }
.intro > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font: 500 0.66rem/1.4 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
.intro > summary::-webkit-details-marker { display: none; }
.intro > summary::before { content: "+"; font: 400 1rem/1 var(--mono); color: var(--accent); width: 10px; }
.intro[open] > summary::before { content: "−"; }
.intro > summary:hover { background: rgba(255, 255, 255, 0.02); }
.intro[open] > summary { border-bottom: 1px solid var(--rule); }
.intro-body {
  padding: 18px 18px 4px;
  font-size: 0.86rem;
  columns: 360px 3;
  column-gap: 36px;
  column-rule: 1px solid var(--rule);
}
.intro-body > * { break-inside: avoid; }
.intro .intro-body table { min-width: 0; width: 100%; }
.intro .intro-body th { line-height: 1.35; }
.intro-part { padding-bottom: 8px; }
.intro .intro-part h3 {
  margin: 0 0 8px;
  font: 600 0.64rem/1.4 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hull);
}
.explanations h1 { font: 500 1.4rem/1.2 var(--sans); color: var(--ink); margin: 8px 0 12px; }
.explanations h2 { font-size: 1rem; margin: 0 0 8px; line-height: 1.35; color: var(--ink); }
.explanations p { margin: 0 0 12px; }
.explanations ul { padding-left: 1.1em; margin: 0 0 14px; }
.explanations li { margin-bottom: 8px; }
.explanations li::marker { content: "▪  "; color: var(--rule-2); font-size: 0.8em; }
.explanations strong { font-weight: 500; color: var(--ink); }
.explanations em { color: var(--ink); }
.explanations code { font: 0.86em var(--mono); color: var(--nogrowth); }

/* Figures that carry a sign, up green and down red (app.js marks them) */
.pos { color: var(--up); }
.neg { color: var(--down); }
.explanations .pos strong, .explanations .neg strong { color: inherit; font-weight: 600; }

/* A month's heading: a panel head, its name lettered wide, and the growth share's move */
.month h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
}
.month-name {
  font: 400 1.05rem/1.3 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.month-sub { font: 400 0.74rem/1.3 var(--mono); color: var(--muted); }

/* An earnings release: a sea-edged box between the period items, tighter than the text around it */
.explanations .release {
  margin: 6px 0 16px;
  padding: 10px 14px 8px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--nogrowth);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(46, 196, 214, 0.06), transparent 40%), var(--tint);
  font-size: 0.84rem;
  line-height: 1.5;
}
.explanations .release p { margin: 0 0 2px; }
.explanations .release p:first-child { margin-bottom: 8px; }
.explanations .release p:first-child strong {
  font: 500 0.66rem var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nogrowth);
}
.explanations .release em {
  font: normal 600 0.6rem var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hull);
}
.explanations .release ul { margin: 0 0 8px; padding-left: 1.1em; }
.explanations .release li { margin-bottom: 2px; }
.explanations .release .cites { margin: 6px 0 2px; }

.table-wrap { overflow-x: auto; margin: 0 0 18px; }
.explanations table { border-collapse: collapse; font-size: 0.84rem; min-width: 560px; }
.explanations th, .explanations td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.explanations th {
  border-bottom-color: var(--rule-2);
  color: var(--hull);
  font: 600 0.58rem/1.45 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.explanations th:first-child, .explanations td:first-child { padding-left: 0; }
.explanations td.pos, .explanations td.neg, .explanations td.num { font-family: var(--mono); font-size: 0.8rem; }
/* A month's bridge: the parts down, their pp right-aligned, the total under a rule */
.month table { width: 100%; min-width: 0; }
.month th:last-child, .month td:last-child { text-align: right; padding-right: 0; }
.month tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.month tbody tr:last-child td { border-top: 1px solid var(--rule-2); border-bottom: 0; }
.month tbody tr:last-child:hover td { background: none; }

.month {
  margin: 0 0 18px -14px;
  padding: 16px 0 6px 11px;
  border-left: 3px solid transparent;
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--sticky-h, 0px);
}
.month.active { border-left-color: var(--accent); }

.loading, .error { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }

/* Evidence: chips under each cause and release box; a chip opens its card inline under them. */
.cites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
}
.cites-label {
  margin-right: 6px;
  font: 600 0.56rem var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  padding: 1px 6px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font: 0.68rem/1.55 var(--mono);
  cursor: pointer;
}
.chip:hover { border-color: var(--hull); color: var(--ink); }
.chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

.ev-card {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--tint);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.ev-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 0.62rem var(--mono);
  color: var(--muted);
}
.ev-badge { font: 600 0.56rem var(--wide); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hull); }
.ev-id { font-family: var(--mono); padding-right: 8px; }
.explanations .ev-quote, .ev-quote {
  margin: 6px 0 8px;
  padding-left: 10px;
  border-left: 1px solid var(--rule-2);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}
.ev-tag { font: 0.7rem var(--mono); color: var(--muted); }
.ev-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.ev-title:hover { text-decoration: underline; }
.explanations .ev-source, .ev-source, .explanations .ev-topics, .ev-topics {
  margin: 2px 0 0;
  font: 0.68rem/1.5 var(--mono);
  color: var(--muted);
}
.ev-inline { margin: 6px 0 8px; }
.ev-recon { margin: 2px 0 6px; font: 0.7rem var(--mono); color: var(--muted); }
.ev-recon summary { cursor: pointer; }
.ev-recon pre { max-height: 220px; overflow: auto; margin: 4px 0 0; font: 0.66rem/1.5 var(--mono); white-space: pre; color: var(--ink-2); }

/* The design overview (index.html): the flowchart and the pitch's sections as panels in the same
   hull. The flowchart keeps square corners, like the chart; the sections are cut like the month
   panels. Its two lanes: the words in brass (--news), the growth share's green for the core and the
   output. */
.design {
  --news: #e3a65c;
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px var(--gutter) 64px;
}
.eyebrow {
  margin: 0 0 12px;
  font: 600 0.62rem/1.4 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hull);
}
.formula {
  display: grid;
  gap: 4px;
  overflow-x: auto;
  padding: 12px 16px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
  font: 0.82rem/1.6 var(--mono);
  color: var(--ink);
}
.formula span { white-space: nowrap; }
.formula em { font-style: normal; color: var(--muted); }

.design-panel {
  position: relative;
  margin: 0;
  padding: 0 22px 20px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--edge-light), inset 1px 0 0 rgba(196, 220, 214, 0.06);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.design-panel.cut { clip-path: polygon(0 0, calc(100% - var(--bow)) 0, 100% var(--bow), 100% 100%, 0 100%); }
.design-panel.cut::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% - var(--bow));
  width: calc(var(--bow) * 1.4142);
  height: 1px;
  background: var(--edge-light);
  transform: rotate(45deg);
  transform-origin: 0 0;
  pointer-events: none;
}
.design-panel h2 {
  margin: 0 -22px 18px;
  padding: 13px 22px 11px;
  border-bottom: 1px solid var(--rule);
  font: 400 1.05rem/1.3 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.design-panel p { margin: 0; }
.design-panel strong, .design-panel b { font-weight: 500; color: var(--ink); }
.design-panel .note { margin-top: 14px; max-width: 90ch; color: var(--muted); font-size: 0.86rem; }
.design-panel table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.design-panel th {
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font: 600 0.58rem/1.45 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hull);
}
.design-panel td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

/* The flowchart: the SVG's own classes, prefixed fc- */
.flowchart { padding-top: 16px; }
.flowchart .scroller { overflow-x: auto; }
.flowchart svg { display: block; width: 100%; min-width: 920px; height: auto; }
.flowchart .hint { display: none; margin-top: 8px; font: 0.7rem var(--mono); color: var(--muted); }
.flowchart figcaption { margin-top: 14px; max-width: 110ch; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
@media (max-width: 960px) { .flowchart .hint { display: block; } }
.fc-box { fill: #1a2629; stroke: var(--rule-2); stroke-width: 1.25; }
.fc-box-news { stroke: var(--news); }
.fc-box-test { fill: rgba(0, 0, 0, 0.22); stroke: var(--rule-2); }
.fc-box-core { stroke: var(--share); stroke-width: 1.5; }
.fc-box-check { stroke: var(--muted); stroke-dasharray: 4 3; }
.fc-box-out { stroke: var(--share); stroke-width: 2; }
.fc-chip { fill: #243235; }
.fc-chip-check { fill: #243235; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 4 3; }
.fc-rule { stroke: var(--rule-2); stroke-width: 1; }
.fc-flow { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.fc-flow-news { stroke: var(--news); }
.fc-flow-accent { stroke: var(--share); }
.fc-flow-check { stroke-dasharray: 4 3; }
.fc-ah-muted { fill: var(--muted); }
.fc-ah-news { fill: var(--news); }
.fc-ah-accent { fill: var(--share); }
.fc-t-title { font: 600 13.5px var(--sans); fill: var(--ink); }
.fc-t-sub { font: 600 12.5px var(--sans); fill: var(--ink); }
.fc-t-body { font: 400 12px var(--sans); fill: var(--ink-2); }
.fc-t-row { font: 400 11.5px var(--sans); fill: var(--ink); }
.fc-t-code { font: 600 10.5px var(--mono); fill: var(--news); letter-spacing: 0.02em; }
.fc-t-math { font: 500 11.5px var(--mono); fill: var(--ink); }
.fc-t-chip { font: 500 12px var(--sans); fill: var(--ink); }
.fc-t-label { font: 500 11px var(--sans); fill: var(--muted); }
.fc-t-label-news { fill: var(--news); }
.fc-t-label-accent { fill: var(--share); }
.fc-t-num { font: 600 13px var(--mono); fill: var(--share); }
.fc-t-tag { font: 600 9.5px var(--wide); font-stretch: 125%; letter-spacing: 0.12em; fill: var(--hull); }
.fc-t-tag-news { fill: var(--news); }
.fc-t-tag-accent { fill: var(--share); }
.fc-badge { fill: var(--ink); }
.fc-t-badge { font: 600 10px var(--mono); fill: var(--page); letter-spacing: 0.02em; }

/* Two models */
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.model {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}
.model .role {
  font: 600 0.58rem/1 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hull);
}
.model .role.news { color: var(--news); }
.model h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font: 400 1.1rem/1.3 var(--wide);
  font-stretch: 125%;
  color: var(--ink);
}
.model h3 span { font: 0.74rem var(--mono); font-stretch: normal; color: var(--muted); }
.model dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.model dt {
  font: 600 0.56rem/2.4 var(--wide);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.model dd { margin: 0; }

/* Costco */
.costco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}
.stat .v { font: 500 1.3rem/1.15 var(--mono); color: var(--ink); }
.stat .v .to { color: var(--share); }
.stat .k { font-size: 0.82rem; color: var(--muted); }
.bridge { min-width: 0; }
.bridge th:last-child, .bridge td:last-child { text-align: right; padding-right: 0; }
.bridge td:last-child { font: 0.82rem var(--mono); white-space: nowrap; padding-left: 16px; }
.bridge td small { display: block; color: var(--muted); font-size: 0.78rem; }
.bridge tr.total td { font-weight: 500; color: var(--ink); border-top: 1px solid var(--rule-2); border-bottom: 0; }
.bridge tr.total td.pos { color: var(--up); }

/* Trust */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 0; padding: 0; list-style: none; }
.trust li { display: grid; gap: 6px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--rule-2); }
.trust b { font-weight: 500; }
.trust span { color: var(--ink-2); font-size: 0.86rem; }

/* Better data */
.upgrade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.table-scroll { overflow-x: auto; min-width: 0; }
.compare td:first-child { color: var(--muted); white-space: nowrap; }
.compare td:last-child { color: var(--share); }

@media (max-width: 860px) {
  .models, .costco, .upgrade, .trust { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ticks { font-size: 0.54rem; letter-spacing: 0; }
  .month { margin-left: -10px; padding-left: 7px; }
}

/* Wide screens: the tabs and header span the top and scroll away; the header sets the title beside
   the introduction and its note. Below them, on a page at most 1600px wide (--edge is the margin
   either side), the chart and slider are a sticky panel on the left, beside the text's month
   panels; each month panel's top right corner is cut like a bow. The design overview's panels span
   the same width. The same media query as SIDE_BY_SIDE in app.js. */
@media (min-width: 1100px) and (min-height: 650px) {
  :root { --edge: max(40px, calc((100% - 1600px) / 2)); }
  .layout {
    display: grid;
    grid-template-columns: minmax(40px, 1fr) minmax(0, 860px) minmax(0, 740px) minmax(40px, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "nav nav nav nav" "header header header header" ". viz main .";
  }
  .site-nav { grid-area: nav; }
  .site-header { grid-area: header; }
  .content { grid-area: main; }
  .site-nav .wrap, .site-header, .design {
    max-width: none;
    margin: 0;
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
    padding-top: 52px;
  }
  .site-header { padding-bottom: 36px; }
  /* The title across the top, the introduction and the method's note side by side beneath it */
  .site-header h1 { grid-column: 1 / -1; margin: 0 0 26px; font-size: clamp(1.7rem, 2.4vw, 2.35rem); }
  .site-header .lede { grid-column: 1; }
  .site-header > :not(h1):not(.intro):not(.lede):not(.eyebrow) { grid-column: 2; }
  .site-header .eyebrow { grid-column: 1 / -1; }
  .site-header .footnote { margin: 0; padding: 2px 0 0 24px; border-top: 0; border-left: 1px solid var(--rule-2); }
  .site-header .intro { grid-column: 1 / -1; margin-top: 40px; }
  .lede, .footnote { max-width: none; }

  .month { clip-path: polygon(0 0, calc(100% - var(--bow)) 0, 100% var(--bow), 100% 100%, 0 100%); }
  /* Light along the cut */
  .month::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(100% - var(--bow));
    width: calc(var(--bow) * 1.4142);
    height: 1px;
    background: var(--edge-light);
    transform: rotate(45deg);
    transform-origin: 0 0;
    pointer-events: none;
  }

  .viz {
    grid-area: viz;
    align-self: start;
    top: 16px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    margin: 20px 8px 16px 0;
    background: var(--panel);
    border: 0;
    box-shadow: inset 0 1px 0 var(--edge-light), inset 1px 0 0 rgba(196, 220, 214, 0.06);
    overflow: hidden;
  }
  .viz .wrap { max-width: none; width: 100%; padding: 0 20px; }
  .viz-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 0; }
  .chart-head { margin: 0 -20px 4px; padding: 12px 20px 10px; border-bottom: 1px solid var(--rule); }
  .viz-controls { padding: 6px 0 10px; background: transparent; border-top: 1px solid var(--rule); }
  .chart { flex: 1; min-height: 0; height: auto; }

  .content { max-width: none; margin: 0; padding: 20px 0 40vh 8px; }
  .month {
    position: relative;
    margin: 0 0 14px;
    padding: 0 20px 8px;
    background: var(--panel);
    border: 0;
    box-shadow: inset 0 1px 0 var(--edge-light), inset 1px 0 0 rgba(196, 220, 214, 0.06);
    scroll-margin-top: 16px;
  }
  .month.active { box-shadow: inset 0 1px 0 var(--edge-light), inset 2px 0 0 var(--accent); }
  .month h2 {
    margin: 0 -20px 12px;
    padding: 13px 20px 11px;
    border-bottom: 1px solid var(--rule);
  }
  .month.active h2 { background: linear-gradient(90deg, var(--accent-wash), transparent 55%); }
}