/* pages.css — composition for four small pages: compare (#/compare), about
 * (#/about, "How this works"), feedback (#/feedback) and the not-found page.
 *
 * Composition only. Every figure, band, button, field, state and provenance
 * list is the system's (data.css, layout.css, controls.css, states.css); this
 * sheet arranges them and adds the few page-shaped pieces those pages need:
 *
 *   compare   .vs-*       the person picker, the face-off, the verdict, the log
 *   about     .essay-*    the article, the coverage figure, the activity chart
 *   feedback  .letter-*   the form and its disclosure
 *   404       .stop-press the front-page correction
 *
 * Prefixes are new on purpose: legacy.css loads AFTER this sheet and still
 * carries the old .compare-*, .fb-*, .coverage-* rules, so none are reused.
 */

/* =================================================================
 * COMPARE — two people, side by side
 * ================================================================= */

.band-vs .band-head { margin-bottom: var(--s-5); }

/* ---- the form: picker, "and", picker; then the window and the button. */
.vs-pickers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
}

/* The "and" / "vs" between two things: the publication's italic, never a glyph. */
.vs-and {
  align-self: center;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-style: italic;
  font-weight: 380;
  line-height: 1;
}
.vs-pickers > .vs-and { align-self: start; padding-top: 2.1rem; }

.vs-pick { position: relative; }
.vs-pick-label { font-size: var(--t-sm); color: var(--ink); }

.vs-pick-box {
  position: relative;
  display: flex; align-items: center;
  gap: var(--s-2);
}
.vs-pick-input {
  min-height: 48px;
  font-size: var(--t-base);          /* 16px+: no zoom-on-focus on phones */
}

/* The face slot: an empty dashed ring until a person is chosen, then their face. */
.vs-pick-face {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: var(--bw-1) dashed var(--rule);
  border-radius: var(--r-full);
}
.vs-pick.is-chosen .vs-pick-face { border-color: transparent; }
.vs-pick.is-chosen .vs-pick-input { font-weight: 600; }
.vs-pick.is-chosen .vs-pick-hint { font-family: var(--font-mono); letter-spacing: 0.02em; }

.vs-pick-list {
  position: absolute; z-index: 30;
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 20rem; overflow-y: auto;
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--halo);
}
.vs-pick-opt {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--edge-hair);
  cursor: pointer;
}
.vs-pick-opt:last-child { border-bottom: 0; }
/* Pointer and keyboard draw the same highlight. */
.vs-pick-opt:hover,
.vs-pick-opt[aria-selected='true'] { background: var(--ink-wash); }
.vs-pick-opt[aria-selected='true'] { box-shadow: inset 2px 0 0 var(--accent); }
.vs-pick-opt[aria-selected='true'] .vs-pick-opt-name { color: var(--accent); }
.vs-pick-opt-body { display: grid; flex: 1; min-width: 0; }
.vs-pick-opt-name { font-weight: 600; font-size: var(--t-sm); }
.vs-pick-opt-id,
.vs-pick-opt-side {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  font-variant-numeric: tabular-nums;
}
.vs-pick-opt-side { flex: none; font-family: var(--font-text); font-size: var(--t-2xs); }
.vs-pick-none {
  padding: var(--s-3);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
}

.vs-form-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--edge-soft);
}
.vs-window-wrap { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.vs-window { border-bottom: 0; }

.vs-form-msg:empty { display: none; }
.vs-form-msg {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: var(--bw-2) solid var(--danger);
  color: var(--danger);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* ---- before two people are chosen: a primer on reading the answer. */
.vs-primer-kicker { margin-top: var(--s-6); }
.vs-primer {
  counter-reset: primer;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-5);
}
.vs-primer-item { counter-increment: primer; display: grid; gap: var(--s-1); align-content: start; }
.vs-primer-item::before {
  content: counter(primer);
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-style: italic;
  font-weight: 380;
  line-height: 1;
}
.vs-primer-term { font-weight: 650; }
.vs-primer-text { color: var(--ink-2); font-size: var(--t-sm); text-wrap: pretty; }

/* ---- the face-off: two people, mirrored across an italic "and". */
.vs-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: end;
}
.vs-people {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: var(--edge-double);
}
.vs-person {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  min-width: 0;
}
.vs-person[data-side='b'] { justify-items: end; text-align: right; }
.vs-person-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  transition: color var(--dur-2) var(--ease-out);
}
.vs-person:hover .vs-person-name { color: var(--accent); }
.vs-person-id { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-3xs); }

/* ---- the verdict: the one giant numeral on the page. */
.vs-verdict { display: grid; gap: var(--s-3); }
.vs-verdict-fig { gap: var(--s-2); }
.vs-verdict-fig .fig-value { color: var(--accent); text-shadow: var(--glow-hot); }
.vs-verdict-unit {
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 400;
}
.vs-verdict-dek { max-width: var(--w-text); }

/* ---- the two quantities the verdict is the difference of, on one scale. */
.vs-sides {
  align-items: start;
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--edge);
}
.vs-sides > .vs-and { align-self: center; font-size: var(--t-xl); }
.vs-side { display: grid; gap: var(--s-2); min-width: 0; }
.vs-bar {
  display: block;
  height: var(--viz-bar-h);
  margin-top: var(--s-1);
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.vs-bar-fill {
  display: block;
  height: 100%;
  background: var(--viz-series);
  border-radius: inherit;
  transform: scaleX(var(--r, 0));
  transform-origin: left center;
}
/* Chance is the second series: told apart by texture, never by a hue. */
.vs-side[data-kind='chance'] .vs-bar-fill {
  background: repeating-linear-gradient(135deg,
    var(--viz-series-2) 0 3px, transparent 3px 6px);
}
@media (prefers-reduced-motion: no-preference) {
  .vs-bar-fill { animation: vs-grow var(--dur-4) var(--ease-out) both; }
  .vs-side[data-kind='chance'] .vs-bar-fill { animation-delay: 80ms; }
}
@keyframes vs-grow { from { transform: scaleX(0); } }

.vs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  column-gap: var(--s-5);
  margin-top: var(--s-6);
  border-top: var(--edge-strong);
}
.vs-fact { padding-block: var(--s-3); border-bottom: var(--edge-hair); min-width: 0; }
.vs-fact-term { color: var(--ink-3); font-size: var(--t-2xs); }
.vs-fact-value {
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-fig);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-fig);
}

.vs-now {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
}
.vs-now[data-state='live'] { color: var(--live); }
.vs-now[data-state='stale'] { color: var(--ink-2); font-weight: 500; }

.vs-answer > .note { margin-top: var(--s-4); }

/* ---- the evidence: a dated log, newest first. The date leads because the
 * list is ordered by it; the length is a quiet figure, not the loud one. */
.vs-log { border-top: var(--edge); }
.vs-log-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: var(--edge-soft);
}
.vs-log-when {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.vs-log-body { min-width: 0; }
.vs-log-group {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 520;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-snug);
}
.vs-log-meta { margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); }
.vs-log-len {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =================================================================
 * ABOUT — the method, as an article
 * ================================================================= */

.band-essay .band-head { margin-bottom: var(--s-6); }

/* The standfirst paragraph, with a drop cap in the display face. */
.essay-lede {
  font-size: var(--t-lg);
  line-height: 1.6;
}
.essay-lede::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 3.55em;
  font-weight: 520;
  line-height: 0.82;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .essay-lede::first-letter {
    float: none;
    margin: 0 0.12em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

.essay-body > * + * { margin-top: var(--s-5); }

.essay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.essay-controls > .seg { border-bottom: 0; }

/* ---- coverage: the percentage is the section's headline figure. */
.essay-cov-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s-2) var(--s-5);
}
.essay-cov-claim { display: grid; gap: var(--s-1); padding-bottom: 0.4rem; }
.essay-cov-line {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-snug);
}
.essay-cov-grade[data-tone='warn'] { color: var(--warn); }

.essay-cov-track {
  height: var(--viz-bar-h);
  margin-top: var(--s-4);
  max-width: var(--w-text);
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.essay-cov-fill {
  display: block;
  height: 100%;
  background: var(--ink-2);
  border-radius: inherit;
  transform: scaleX(var(--r, 0));
  transform-origin: left center;
}
.essay-cov-track[data-tone='warn'] .essay-cov-fill { background: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  .essay-cov-fill { animation: vs-grow var(--dur-4) var(--ease-out) both; }
}
.essay-cov-sub { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }

.essay-ledger .provenance-def .fig { display: flex; }
.essay-ledger-note { display: block; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--t-2xs); }

/* ---- definition lists set as a glossary: term left, text right. */
.essay-terms { max-width: var(--w-text); border-top: var(--edge-strong); }
.essay-term {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--edge-hair);
}
.essay-term-name { font-weight: 650; font-size: var(--t-sm); padding-top: 0.1em; }
.essay-term-def { line-height: var(--lh-normal); text-wrap: pretty; }
.essay-term-mark { font-size: var(--t-base); }

.essay-aside-line { color: var(--ink-2); font-size: var(--t-sm); font-style: italic; }

.essay-list > li { position: relative; padding-left: 1.5em; }
.essay-list > li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--ink-3);
}

/* ---- activity: figures, then the chart. chart.js emits the class names
 * below; they are scoped here so the chart reads in the system's voice (ink
 * and a dashed second series, no hue) wherever legacy.css also styles them. */
.essay-activity > * + * { margin-top: var(--s-5); }

.essay-chart .chart-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-5);
}
.essay-chart .chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  color: var(--ink-2);
  font-size: var(--t-2xs);
}
.essay-chart .legend-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.essay-chart .legend-swatch {
  width: 18px; height: 0;
  background: none;
  border-top: var(--bw-2) solid currentColor;
}
.essay-chart .legend-item.series-b .legend-swatch { border-top-style: dashed; }

.essay-chart .chart-readout {
  position: static;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: var(--t-xs);
}
.essay-chart .chart-plot { position: relative; margin-top: var(--s-3); }

.essay-chart .series-a { color: var(--viz-series); }
.essay-chart .series-b { color: var(--viz-series-2); }
.essay-chart .chart-svg { display: block; width: 100%; height: auto; }
.essay-chart .chart-svg .line {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--viz-series-w);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.essay-chart .chart-svg .line.series-b { stroke-width: 1.25; stroke-dasharray: 4 3; }
.essay-chart .chart-svg .area { fill: currentColor; opacity: 0.1; stroke: none; }
.essay-chart .chart-svg .dot,
.essay-chart .chart-svg .cursor-dot { fill: currentColor; }
.essay-chart .chart-svg .grid { stroke: var(--viz-grid); stroke-width: var(--viz-grid-w); }
.essay-chart .chart-svg .axis-label {
  fill: var(--ink-3);
  font-family: var(--viz-font);
  font-size: var(--viz-tick-size);
}
.essay-chart .chart-svg .cursor-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.essay-chart .chart-svg .chart-overlay { fill: transparent; }
.essay-chart .chart-caption { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-2xs); }

/* =================================================================
 * FEEDBACK — a letter to the site
 * ================================================================= */

.band-letter .band-head { margin-bottom: var(--s-6); }

.letter-kind { min-height: 44px; font-size: var(--t-base); }
.letter-message { min-height: 12rem; font-size: var(--t-base); }
.letter-form .field-input[type='text'] { min-height: 44px; font-size: var(--t-base); }
.letter-form .field-label { font-size: var(--t-sm); color: var(--ink); }
.letter-optional { color: var(--ink-3); font-weight: 400; }

.letter-under {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}

.letter-form .field-input[aria-invalid='true'] { border-color: var(--danger); }
.letter-invalid {
  padding-left: var(--s-2);
  border-left: var(--bw-2) solid var(--danger);
  color: var(--danger);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* The honeypot: out of sight and out of reach. It also carries tabindex=-1
 * and aria-hidden, because a field hidden only by stylesheet is still
 * reachable by keyboard. */
.letter-trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.letter-status:empty,
.letter-problem:empty { display: none; }
.letter-problem .state { padding-block: var(--s-3); }

.letter-aside > .provenance { margin-top: var(--s-3); }

.letter-done { display: grid; gap: var(--s-4); justify-items: start; }
.band > .letter-done > * + * { margin-top: 0; }

/* =================================================================
 * NOT FOUND — stop press
 * ================================================================= */

.stop-press-body {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding-top: var(--s-3);
  border-top: var(--edge-double);
}
.band > .stop-press-body > * + * { margin-top: 0; }

/* The numeral is set, not measured, so it is the display face — and drawn in
 * outline, like a late plate. Decorative: aria-hidden in the markup. */
.stop-press-num {
  color: var(--rule);
  font-family: var(--font-display);
  font-size: clamp(6rem, 2.5rem + 15vw, 15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.04em;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .stop-press-num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink-3);
  }
}
.stop-press-title { max-width: 15ch; }
.stop-press-dek { max-width: var(--w-text); }
.stop-press-path {
  padding: 0 0.3em;
  background: var(--surface-2);
  border-radius: var(--r-1);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.stop-press-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* =================================================================
 * breakpoints
 * ================================================================= */

/* One column: the two pickers stack, the "and" becomes a small line between. */
@media (max-width: 44.9375rem) {
  .vs-pickers { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
  .vs-pickers > .vs-and { padding-top: 0; font-size: var(--t-lg); }
  .vs-form-foot { align-items: stretch; }
  .vs-form-foot > .btn { flex: 1 1 100%; }
  .vs-people { margin-bottom: var(--s-5); }
  .vs-duel { column-gap: var(--s-3); }
}

@media (max-width: 29.9375rem) {
  .vs-person .avatar { --avatar-size: 44px !important; }
  .vs-person-name { font-size: var(--t-xl); }
  .vs-sides .fig[data-size='xl'] .fig-value { font-size: var(--t-fig-lg); }
  .vs-log-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .vs-log-when { grid-column: 1 / -1; }
  .essay-term { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
}

/* =================================================================
 * WHAT'S NEW — #/changes (views/changelog.js)
 *
 * A dated log set like the essay's glossary: the date as a small display
 * head on a strong rule, then each change as kicker-left, copy-right rows
 * on hairlines. The kind is said in WORDS (New / Improved / Fixed), so the
 * one colour accent never carries the meaning alone. Prefix .cl-*.
 * ================================================================= */

.cl-log { max-width: var(--w-text); }
.cl-day + .cl-day { margin-top: var(--s-7); }

.cl-date {
  padding-top: var(--s-2);
  border-top: var(--edge-strong);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 450;
  line-height: var(--lh-snug);
}
/* Not shipped yet: italic, like a forthcoming notice — and no date to imply one. */
.cl-day[data-soon] .cl-date { font-style: italic; color: var(--ink-2); }

.cl-items { margin-top: var(--s-2); }
.cl-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: var(--edge-hair);
}
.cl-kind { padding-top: 0.3em; }
.cl-kind[data-kind='new'] { color: var(--accent); }

.cl-copy > * + * { margin-top: var(--s-2); }
.cl-title {
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 650;
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.cl-text { color: var(--ink-2); line-height: var(--lh-normal); text-wrap: pretty; }
.cl-link {
  display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px;
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-foot { margin-top: var(--s-6); color: var(--ink-2); font-size: var(--t-sm); }
.cl-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Phone: the kind sits above the title instead of beside it. */
@media (max-width: 29.9375rem) {
  .cl-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
  .cl-kind { padding-top: 0; }
}