/* Server-rendered, crawlable card & set pages (`web/pages.py`).
 *
 * A search engine's own copy of `theme.css`'s tokens - these pages carry no
 * JavaScript state and share no DOM with the SPA, so they load `theme.css`
 * for the palette and this file for layout, rather than `app.css`/
 * `views.css`, which assume a client-side router and framework-driven
 * classes neither page has.
 *
 * `.pageviz` re-points the custom properties `research/charts.py`'s inline
 * SVG expects (`--surface-1`, `--series-1`, `--axis`, `--muted`) at this
 * product's own tokens, so a chart built for the printable report reads as
 * this site's palette instead of its own. `--grid`, `--pos` and `--neg`
 * already share both the name and the role in `theme.css`, so they need no
 * alias.
 */

.pageviz {
  --surface-1: var(--bg-elevated);
  --series-1: var(--accent);
  --axis: var(--border);
  --muted: var(--fg-muted);
}

* { box-sizing: border-box; }
html, body { background: var(--bg-app); }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg-app);
  font-family: var(--sans);
  font-size: var(--fs-prose);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 860px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }
h1, h2 { text-wrap: balance; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- nav ---- */
.pv-nav {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.pv-brand { font-weight: 600; color: var(--fg); font-size: var(--fs-heading); }
.pv-crumb {
  font-size: var(--fs-small); color: var(--fg-muted); display: flex;
  gap: var(--s1); flex-wrap: wrap;
}
.pv-crumb a { color: var(--fg-muted); }
.pv-crumb a:hover { color: var(--accent); }
.pv-crumb span:not(.pv-sep) { color: var(--fg-dim); }
.pv-sep { color: var(--fg-faint); }

/* --------------------------------------------------------------- hero ---- */
.pv-hero { margin-bottom: var(--s6); }
.pv-hero h1 { font-size: var(--fs-lead); margin: 0 0 var(--s1); font-weight: 600; }
.pv-sub { color: var(--fg-muted); font-size: var(--fs-body); margin: 0 0 var(--s3); }
.pv-lead { font-size: var(--fs-prose); color: var(--fg-dim); max-width: 68ch; }
.pv-badges { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.pv-pill {
  display: inline-block; font-size: var(--fs-caption); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pv-note { color: var(--fg-muted); font-size: var(--fs-body); margin-top: var(--s3); }

/* -------------------------------------------------------------- stats ---- */
.pv-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}
.pv-stat {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.pv-stat-k {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-muted);
}
.pv-stat-v {
  font-size: var(--fs-title); margin-top: 4px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pv-stat-n { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 3px; }

/* -------------------------------------------------------------- blocks --- */
.pv-block { margin-top: var(--s6); }
.pv-block h2 {
  font-size: var(--fs-heading); font-weight: 600; margin: 0 0 var(--s3);
}
.pv-prose { color: var(--fg-dim); max-width: 68ch; margin: var(--s2) 0; }
.pv-prose b { color: var(--fg); }
.pv-caveat {
  color: var(--fg-faint); font-size: var(--fs-small); max-width: 68ch;
  margin-top: var(--s3);
}

/* -------------------------------------------------------------- answers -- */
.pv-answers { display: flex; flex-direction: column; gap: var(--s4); }
.pv-answer {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
}
.pv-q {
  margin: 0 0 4px; font-size: var(--fs-small); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.pv-verdict { margin: 0 0 6px; font-size: var(--fs-heading); font-weight: 600; }
.pv-detail { margin: 0; color: var(--fg-dim); font-size: var(--fs-body); }
.pv-evrow { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.pv-ev {
  display: flex; flex-direction: column; font-size: var(--fs-small);
  color: var(--fg-muted);
}
.pv-ev b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tables - */
.tablewrap {
  overflow-x: auto; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-top: var(--s2);
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); min-width: 460px; }
th, td { padding: 9px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
th {
  font-weight: 600; color: var(--fg-muted); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: .04em; background: var(--bg-elevated);
}
td.l, th.l { text-align: left; white-space: normal; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-hover); }
.pv-metric-note { color: var(--fg-muted); font-size: var(--fs-small); }
.pv-muted { color: var(--fg-muted); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- related  */
.pv-related-grid { display: flex; flex-direction: column; gap: 1px; }
.pv-related {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-dim);
}
.pv-related:hover { background: var(--bg-hover); color: var(--fg); }
.pv-related span { color: var(--fg-muted); font-size: var(--fs-small); }

/* ----------------------------------------------------------------- charts  */
.chart {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); margin: var(--s2) 0 0; padding: 14px 16px 10px;
  position: relative;
}
.chart figcaption { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: 6px; }
.tick { fill: var(--fg-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-label { fill: var(--fg-muted); font-size: 12px; }
.bar-value { fill: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tooltip {
  position: absolute; transform: translate(-50%, -100%); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px;
  pointer-events: none; font-size: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.tooltip b { font-variant-numeric: tabular-nums; }
.tooltip span { color: var(--fg-muted); margin-left: 7px; }
.empty { color: var(--fg-muted); font-style: italic; }

/* ----------------------------------------------------------------- footer  */
.pv-foot {
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--hairline);
}
.pv-cta {
  display: inline-block; background: var(--accent); color: var(--bg-app);
  font-weight: 600; padding: 10px 18px; border-radius: var(--r-md);
  font-size: var(--fs-body);
}
.pv-cta:hover { background: var(--pos-strong); text-decoration: none; }
.pv-links { margin-top: var(--s3); font-size: var(--fs-small); color: var(--fg-muted); }
.pv-links a { color: var(--fg-muted); }
.pv-links a:hover { color: var(--accent); }
.pv-disclaimer { margin-top: var(--s2); font-size: var(--fs-caption); color: var(--fg-faint); }

/* ------------------------------------------------------------- legal ------ */
.pv-legal h2 { margin-top: var(--s5); }
.pv-legal h2:first-child { margin-top: 0; }
.pv-legal ul { padding-left: 1.2em; }
.pv-legal li { margin: var(--s1) 0; }
.pv-legal code {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--bg-panel); padding: 1px 5px; border-radius: 4px;
}

/* ------------------------------------------------------------ contact form  */
.pv-form {
  display: flex; flex-direction: column; gap: var(--s4); max-width: 520px;
}
.pv-field { display: flex; flex-direction: column; gap: 5px; }
.pv-field span { font-size: var(--fs-small); color: var(--fg-muted); }
.pv-field input, .pv-field textarea {
  width: 100%; padding: 9px 11px; font-size: var(--fs-body); color: var(--fg);
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); font-family: var(--sans);
}
.pv-field textarea { resize: vertical; line-height: 1.5; }
.pv-field input:focus, .pv-field textarea:focus {
  outline: none; border-color: var(--accent);
}
/* The honeypot: present in the DOM for a script that fills in every field it
   finds, but off-screen and unreachable by keyboard for an actual person -
   see `web/contact.py`'s module docstring. `display: none` would make some
   spam scripts skip it entirely, which defeats the point. */
.pv-honeypot {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.pv-submit {
  align-self: flex-start; background: var(--accent); color: var(--bg-app);
  font-weight: 600; padding: 10px 20px; border: none; border-radius: var(--r-md);
  font-size: var(--fs-body); cursor: pointer;
}
.pv-submit:hover { background: var(--pos-strong); }
.pv-submit:disabled { opacity: 0.6; cursor: default; }
.pv-form-note { font-size: var(--fs-small); min-height: 1.4em; }
.pv-form-note.tone-good { color: var(--good); }
.pv-form-note.tone-critical { color: var(--crit); }

/* --------------------------------------------------------------- tones --- */
/* `.tone-*` for good/warning/serious/critical/neutral/muted/accent/positive/
   negative already come from theme.css; nothing here overrides them, so a
   verdict on this page and the same verdict in the interactive app always
   read as the same colour. */

@media (max-width: 640px) {
  .wrap { padding: var(--s4) var(--s3) 72px; }
  table { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}