/* ============================================================
   proxy.report — shared styles
   Discipline: every value below :root MUST come from a token.
   No new hex, no new px, no new line-heights — extend :root instead.
   Breakpoints (raw px in @media — CSS vars don't work there):
     640px  · 760px  · 920px
   ============================================================ */

:root {
  /* colors */
  --ink: #0e1116;
  --bg: #ffffff;
  --surface: #f5f6f8;
  --border: #e2e5ea;
  --muted: #4b5360;
  --faint: #7a8491;
  --accent: #f1c811;
  --accent-soft: #ffe8cc;
  --code-bg: #101010;
  --code-fg: #f8f8f2;

  /* type sizes */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 18px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 44px;

  /* line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  /* font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 56px;
  --s-10: 80px;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* border widths */
  --bw-thin: 1px;
  --bw-thick: 2px;

  /* fonts */
  --font-sans: Inter, ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* container widths */
  --w-prose: 820px;
  --w-wide: 1120px;

  /* reading widths (per-element max-width, in ch) */
  --mw-h1: 30ch;
  --mw-h2: 30ch;
  --mw-h3: 32ch;
  --mw-body: 55ch;
  --mw-lede: 50ch;

  /* card grid minimum — grid decides column count via auto-fit */
  --card-min: 260px;

  /* shadow */
  --shadow-hard: 5px 5px 0 0 var(--ink);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
button,
input {
  font-family: inherit;
}
::selection {
  background: var(--accent-soft);
}

/* ---------- vertical rhythm (locked base heading rules) ---------- */
h1 {
  font-size: clamp(var(--fs-xl), 6vw, var(--fs-2xl));
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
  max-width: var(--mw-h1);
}
h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
  max-width: var(--mw-h2);
}
h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
  max-width: var(--mw-h3);
}
p {
  margin-bottom: var(--s-4);
  max-width: var(--mw-body);
}
p:last-child {
  margin-bottom: 0;
}

/* ---------- containers ---------- */
/* Layout is centered on the viewport. Elements inside sit naturally
   left-anchored to the container's left edge (block flow). Per-element
   reading width is controlled by --mw-* tokens on h1/h2/h3/p. */
.container,
.container-wide {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s-5), 5vw, var(--s-8));
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--bw-thin) solid var(--border);
}
.header-inner {
  height: var(--s-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s-5), 5vw, var(--s-8));
}
.logo {
  display: flex;
  flex-direction: column;
}
.logo-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.logo-by {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--faint);
  line-height: var(--lh-snug);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav a {
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color 0.2s;
  padding: var(--s-1) 0;
}
.nav a:hover {
  color: var(--ink);
}
.nav a.active {
  color: var(--ink);
  font-weight: var(--fw-medium);
}
.header-cta {
  flex: none;
}
@media (max-width: 760px) {
  .nav {
    display: none;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  line-height: var(--lh-snug);
  white-space: nowrap;
  color: var(--ink);
}
.btn:hover {
  text-decoration: underline;
  text-underline-offset: var(--s-1);
}
.btn-primary {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.btn-secondary {
  color: var(--muted);
}
.btn-secondary:hover {
  color: var(--ink);
}

/* ---------- typography helpers ---------- */
.marker {
  font-weight: var(--fw-semi);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--s-3);
}
.mono {
  font-family: var(--font-mono);
}

/* ---------- sections ---------- */
.section {
  border-top: var(--bw-thin) solid var(--border);
  padding-block: var(--s-10);
}
.section-tinted {
  background: var(--surface);
}
.section-head {
  margin-bottom: var(--s-6);
}
section[id] {
  scroll-margin-top: var(--s-8);
}

/* ---------- chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: var(--bw-thin) solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  transition:
    border-color 0.2s,
    background 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover {
  background: var(--bg);
}
.chip-active {
  border-color: var(--ink);
  background: var(--accent-soft);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.chip-count {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--accent);
}

/* ---------- grids ----------
   All card grids share the same auto-fit behavior — the browser picks
   the column count based on --card-min and available width. Rows wrap
   naturally. Class name (grid-2/3/4) is now advisory, not prescriptive. */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--s-4);
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card .index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
}
.card h3 {
  margin-top: var(--s-3);
}
.card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--s-2);
  margin-bottom: 0;
}
.card .tag {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--faint);
}
.card-report {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.card-report h3 {
  margin-top: 0;
}
.card-report .tag {
  color: var(--accent);
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: mqr 32s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.marquee-dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--accent);
}
@keyframes mqr {
  to {
    transform: translateX(-33.333%);
  }
}

/* ---------- comparison table ---------- */
.tbl-wrap {
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  overflow-x: auto;
  background: var(--bg);
  width: fit-content;
  max-width: 100%;
}
.com-table {
  min-width: 620px;
}
.com-table.mini-com {
  min-width: 0;
}
.com-table .trow {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.com-table .trow + .trow {
  border-top: var(--bw-thin) solid var(--border);
}
.com-table .cell {
  padding: var(--s-3) var(--s-4);
  min-width: 0;
}
.com-table .cell.lab {
  font-weight: var(--fw-medium);
  color: var(--muted);
}
.com-table .cell:not(:first-child) {
  border-left: var(--bw-thin) solid var(--border);
}
.com-table .cell.winner {
  background: var(--accent-soft);
  font-weight: var(--fw-semi);
}
.com-table .trow.head {
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--faint);
}
.com-table .trow.head .cell {
  border-bottom: var(--bw-thin) solid var(--border);
}

/* ---------- data table (leaderboard / matrix) ---------- */
.data-wrap {
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
}
.data-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
  background: var(--bg);
}
.data-table th {
  border-bottom: var(--bw-thin) solid var(--border);
  font-size: var(--fs-xs);
  color: var(--faint);
  font-weight: var(--fw-medium);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}
.data-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.data-table th .arr {
  display: inline-block;
  margin-left: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--faint);
}
.data-table th[data-sort].active .arr {
  color: var(--ink);
}
.data-table td {
  border-bottom: var(--bw-thin) solid var(--border);
  padding: var(--s-3) var(--s-4);
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table .num {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.data-table .pov {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.data-table .rank {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--faint);
}
.table-foot {
  font-size: var(--fs-xs);
  color: var(--faint);
  font-family: var(--font-mono);
  margin-top: var(--s-2);
}

/* ---------- badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: var(--bw-thin) solid;
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.badge svg {
  width: var(--s-3);
  height: var(--s-3);
}
.badge-accent {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.badge-soft {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface);
}
.badge-strong {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg);
}
.badge-faint {
  color: var(--faint);
  border-color: var(--border);
  background: var(--bg);
}

/* ---------- score bars ---------- */
.bar-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.bar-lb {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  flex: 1;
  min-width: 0;
}
.bar-tr {
  flex: 2;
  height: var(--s-3);
  border: var(--bw-thick) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--bg);
}
.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  width: 0%;
}
.bar-val {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  min-width: var(--s-8);
  text-align: right;
}

/* ---------- terminal ---------- */
.terminal {
  border: var(--bw-thick) solid var(--ink);
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  padding: var(--s-5);
  overflow-x: auto;
}
.terminal .prompt {
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.terminal .dim {
  color: var(--faint);
}
.terminal .ok {
  color: var(--accent);
}
.terminal .wrn {
  color: var(--faint);
}

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: var(--mw-body);
}
details.faq-item {
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 var(--s-5);
}
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}
summary::-webkit-details-marker {
  display: none;
}
.faq-x {
  font-size: var(--fs-xl);
  font-weight: var(--fw-normal);
  color: var(--faint);
  transition: transform 0.2s;
  flex: none;
}
details[open] .faq-x {
  transform: rotate(45deg);
}
.faq-body {
  padding-bottom: var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* ---------- subscribe ---------- */
.subscribe-form {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 520px;
  margin-top: var(--s-6);
}
.input {
  flex: 1;
  min-width: 0;
  border: var(--bw-thick) solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--ink);
}
.input::placeholder {
  color: var(--faint);
}
.small-print {
  font-size: var(--fs-xs);
  color: var(--faint);
  margin-top: var(--s-3);
}

/* ---------- footer ---------- */
.site-footer {
  border-top: var(--bw-thin) solid var(--border);
}
.footer-inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: var(--s-8) clamp(var(--s-5), 5vw, var(--s-8));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 920px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.footer-brand p {
  font-size: var(--fs-sm);
  color: var(--faint);
  line-height: var(--lh-body);
  margin-top: var(--s-3);
  max-width: 240px;
}
.footer h4 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s-3);
}
.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.footer a {
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color 0.2s;
}
.footer a:hover {
  color: var(--ink);
}
.footer-bot {
  border-top: var(--bw-thin) solid var(--border);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--faint);
}

/* ---------- compare page ---------- */
.chip-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.logo-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.gen-logo {
  width: 54px;
  height: 54px;
  border: var(--bw-thick) solid var(--ink);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.gen-logo.soft {
  background: var(--accent-soft);
}
.gen-logo.dim {
  border: var(--bw-thin) solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.vs-lb {
  font-size: var(--fs-xs);
  color: var(--faint);
  font-weight: var(--fw-medium);
}
.vs-lb.sep {
  padding-bottom: var(--s-5);
}
.tick-line,
.cross-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  margin-top: var(--s-3);
}
.tick-line {
  color: var(--accent);
}
.cross-line {
  color: var(--faint);
}
.mini {
  width: var(--s-4);
  height: var(--s-4);
  flex: none;
}

/* ---------- prose links (auto-style inside p / faq / log) ---------- */
p a,
.log-msg a,
.faq-body a {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: var(--s-1);
  color: inherit;
  transition:
    text-decoration-color 0.2s,
    color 0.2s;
}
p a:hover,
.log-msg a:hover,
.faq-body a:hover {
  text-decoration-color: var(--ink);
  color: var(--ink);
}

/* ---------- hero ---------- */
.hero {
  padding-block: var(--s-10);
}
.lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-5);
  max-width: var(--mw-lede);
}
.hero-ctas {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.hero-meta {
  font-size: var(--fs-xs);
  color: var(--faint);
  margin-top: var(--s-5);
}

/* ---------- axis list (done / todo items inside a plan card) ---------- */
.axis-list {
  list-style: none;
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.axis-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.ax-mark {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  flex: none;
  width: var(--s-3);
  text-align: center;
}
.ax-mark.done {
  color: var(--accent);
}
.ax-mark.todo {
  color: var(--faint);
}

/* ---------- activity log ---------- */
.log {
  list-style: none;
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
}
.log-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.log-item + .log-item {
  border-top: var(--bw-thin) solid var(--border);
}
.log-date {
  font-size: var(--fs-xs);
  color: var(--faint);
  white-space: nowrap;
}
.log-msg {
  font-size: var(--fs-sm);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}

/* ---------- follow links row ---------- */
.follow-links {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* ---------- provider page: header + tabs ---------- */
.provider-hero {
  padding-block: var(--s-8) var(--s-5);
}
.provider-hero .eyebrow {
  color: var(--muted);
}
.provider-title {
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-2xl));
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  max-width: none;
}
.provider-lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: var(--lh-body);
  max-width: var(--mw-lede);
  margin-bottom: var(--s-4);
}
.provider-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  margin-top: var(--s-3);
}
.provider-meta a {
  color: var(--faint);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: var(--s-1);
}
.provider-meta a:hover {
  color: var(--ink);
}

/* tab bar + panel switching via :target */
.tab-container {
  padding-block: var(--s-5) var(--s-10);
  border-top: var(--bw-thin) solid var(--border);
}
.tab-bar {
  display: flex;
  gap: var(--s-6);
  border-bottom: var(--bw-thin) solid var(--border);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.tab {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--muted);
  padding: var(--s-3) 0;
  border-bottom: var(--bw-thick) solid transparent;
  margin-bottom: calc(var(--bw-thick) * -1);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.tab:hover {
  color: var(--ink);
}
.tab-bar .tab[href="#review"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab-container:has(#report:target) .tab-bar .tab[href="#review"] {
  color: var(--muted);
  border-bottom-color: transparent;
}
.tab-container:has(#report:target) .tab-bar .tab[href="#report"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.panel-review {
  display: block;
}
.panel-report {
  display: none;
}
.tab-container:has(#report:target) .panel-review {
  display: none;
}
.tab-container:has(#report:target) .panel-report {
  display: block;
}
.tab-container :target {
  scroll-margin-top: var(--s-10);
}

/* two-column layout inside a tab panel */
.provider-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 920px) {
  .provider-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--s-8);
  }
}
.provider-main {
  min-width: 0;
}

/* ---------- sidebar widgets ---------- */
.side {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.widget {
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: var(--s-3) var(--s-4);
}
.widget-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  max-width: none;
  line-height: var(--lh-snug);
}
.widget-body p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-3);
  max-width: none;
}
.widget-body p:last-child {
  margin-bottom: 0;
}
.widget-lead {
  color: var(--ink);
  font-weight: var(--fw-semi);
}
.deal-entry {
  padding: var(--s-3) 0;
  border-top: var(--bw-thin) solid var(--border);
  border-bottom: var(--bw-thin) solid var(--border);
  margin-bottom: var(--s-3);
}
.deal-date {
  display: block;
  font-size: var(--fs-xs);
  color: var(--faint);
  margin-bottom: var(--s-1);
}
.deal-note {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: var(--lh-body);
  margin: 0;
}
.widget-foot {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-top: var(--s-3);
}
.widget-entry {
  padding: var(--s-3) 0;
  border-top: var(--bw-thin) solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.widget-entry:first-of-type {
  border-top: none;
  padding-top: var(--s-2);
}
.widget-entry:last-of-type {
  padding-bottom: var(--s-2);
}
.widget-entry .log-date {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--faint);
}
.widget-entry .log-msg {
  color: var(--ink);
}

/* ---------- essay elements ---------- */
.headline-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: var(--bw-thin) solid var(--border);
  border-bottom: var(--bw-thin) solid var(--border);
  padding: var(--s-5) 0;
  margin-bottom: var(--s-6);
  max-width: var(--mw-body);
}
.headline-list li {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}
.headline-list strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.essay-section {
  margin-top: var(--s-8);
}
.essay-section:first-child {
  margin-top: 0;
}
.essay-section h2 {
  max-width: 40ch;
}
.inline-data {
  margin: var(--s-5) 0;
}
.inline-data:has(> .bar-row) {
  max-width: 560px;
}
.inline-caption {
  font-size: var(--fs-xs);
  color: var(--faint);
  font-family: var(--font-mono);
  margin-top: var(--s-2);
}

/* tldr block */
.tldr {
  border: var(--bw-thick) solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  max-width: var(--mw-body);
  background: var(--bg);
  box-shadow: var(--shadow-hard);
}
.tldr-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.tldr p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s-3);
  max-width: none;
}
.tldr dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  margin-top: var(--s-3);
}
.tldr dt {
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.tldr dd {
  color: var(--muted);
}

/* update log inside review */
.update-log {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: var(--mw-body);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.update-log li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.update-log time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  flex: none;
}

/* alternatives / untested lists */
.simple-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: var(--mw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.simple-list li {
  color: var(--muted);
}
.simple-list strong {
  color: var(--ink);
  font-weight: var(--fw-semi);
}

/* mini com-table (2-col, 3-col variants) */
.mini-com .trow {
  grid-template-columns: 1.2fr 1fr;
}
.mini-com.cols-3 .trow {
  grid-template-columns: 1.4fr 1fr 1fr;
}

/* report panel blocks */
.report-block {
  margin-top: var(--s-8);
}
.report-block:first-child {
  margin-top: 0;
}
.report-block h3 {
  margin-top: 0;
  margin-bottom: var(--s-2);
  max-width: none;
}
.report-block > p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s-4);
  max-width: var(--mw-body);
}

/* stat grid for report overview */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--s-3);
}
.stat {
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--surface);
}
.stat-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.stat-lbl {
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-top: var(--s-2);
  font-weight: var(--fw-medium);
}
.stat-sub {
  font-size: var(--fs-xs);
  color: var(--faint);
  margin-top: var(--s-1);
}

/* ---------- reduced motion (global override) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}