/* Commodus leads-gen report — the visual system of the 2026-09-11 lead-quality site,
   unchanged: same two typefaces, same tokens, same light/dark palettes, same tables,
   charts, navigation and language switcher. Only the pieces this report needs and that
   one did not have are new, and they are grouped at the bottom under their own heading:
   the source tabs, the two money toggles, and the tooltip card. */

:root {
  color-scheme: light;
  --bg: #f7f6f2;
  --surface: #fcfcfb;
  --ink: #1c1b18;
  --ink-2: #57544c;
  --ink-3: #8a877d;
  --rule: #e4e2da;
  --rule-2: #cfccc2;
  --accent: #1c5cab;
  --accent-soft: #e3edf9;
  --s1: #2a78d6;   /* series 1 */
  --s2: #eb6834;   /* series 2 */
  --grey-mark: #c9c6bc;
  --warn-bg: #fff4e5;
  --warn-ink: #7a4a00;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161614;
    --surface: #1e1e1c;
    --ink: #f1efe8;
    --ink-2: #c3c1b6;
    --ink-3: #8f8c82;
    --rule: #2d2d2a;
    --rule-2: #44443f;
    --accent: #7fb0f0;
    --accent-soft: #1f2d40;
    --s1: #3987e5;
    --s2: #d95926;
    --grey-mark: #4a4945;
    --warn-bg: #33270f;
    --warn-ink: #f0c98a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161614;
  --surface: #1e1e1c;
  --ink: #f1efe8;
  --ink-2: #c3c1b6;
  --ink-3: #8f8c82;
  --rule: #2d2d2a;
  --rule-2: #44443f;
  --accent: #7fb0f0;
  --accent-soft: #1f2d40;
  --s1: #3987e5;
  --s2: #d95926;
  --grey-mark: #4a4945;
  --warn-bg: #33270f;
  --warn-ink: #f0c98a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* only a table may ever scroll sideways, never the page */
}
.page { max-width: 1080px; margin: 0 auto; padding: 40px 28px 72px; display: flex; flex-direction: column; gap: 44px; }
header.top { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; max-width: 22ch; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0; letter-spacing: .02em; color: var(--ink-2); }
p { margin: 0; max-width: 66ch; }
p.lede { font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
section { display: flex; flex-direction: column; gap: 20px; }
.section-head { display: flex; flex-direction: column; gap: 8px; }
.section-head .num { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cap { font-size: 14px; color: var(--ink-3); line-height: 1.45; max-width: 80ch; }

/* ---- navigation, language switcher ---- */
.topnav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.topnav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--ink); }
.topnav a.current { color: var(--accent); border-bottom-color: var(--accent); }
.topnav .pill { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-bg); padding: 3px 9px; border-radius: 999px; }
.bottomnav { padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.bottomnav a { color: var(--accent); text-decoration: none; }
.langs { display: inline-flex; gap: 2px; margin-left: auto; }
.langs a { padding: 3px 9px; border-radius: 6px; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); text-decoration: none; border-bottom: 0; }
.langs a:hover { color: var(--ink); background: var(--rule); }
.langs a.current { color: var(--accent); background: var(--accent-soft); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

/* ---- the snapshot header block ---- */
.hdr { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.hdr .row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hdr .row span { white-space: nowrap; }
.hdr b { color: var(--ink); font-weight: 600; }
.hdr .long { max-width: 100ch; white-space: normal; }
.hdr .k { color: var(--ink-3); }
@media (max-width: 760px) { .hdr .row span { white-space: normal; } }

/* ---- "how to read this" clauses, folded away until they are asked for ---- */
section[aria-label="Snapshot"] { display: flex; flex-direction: column; gap: 12px; }
details.help { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
details.help > summary { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); cursor: pointer; list-style: none; padding: 2px 0; }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary::before { content: "+"; display: inline-block; width: 1em; font-weight: 700; }
details.help[open] > summary::before { content: "–"; }
details.help ul { margin: 10px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; max-width: 92ch; }
details.help li { max-width: 92ch; }
details.help b { color: var(--ink); font-weight: 600; }

/* ---- house rules in the footer ---- */
.houserules { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.houserules h3 { font-size: 13px; }
.houserules ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 92ch; }

/* ---- tables ---- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; vertical-align: bottom; line-height: 1.25; background: var(--surface); position: sticky; top: 0; z-index: 2; }
th:first-child, td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tr.total td { border-top: 2px solid var(--rule-2); font-weight: 600; }
td.hi { font-weight: 600; color: var(--ink); }
td.dim { color: var(--ink-3); }
td.counts { color: var(--ink-3); font-style: italic; }
th.rowhead, td.rowhead { min-width: 24ch; white-space: normal; }
tbody tr.group td { background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tag { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-bg); border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.tag.calm { color: var(--ink-3); background: var(--rule); }
.gt { color: var(--ink-3); font-size: .88em; }
.warn { color: var(--warn-ink); }

/* the KPI name column stays put while the months scroll under it */
th.rowhead, td.rowhead { position: sticky; left: 0; background: var(--surface); z-index: 1; border-right: 1px solid var(--rule); }
thead th.rowhead { z-index: 3; }
tbody tr.group td.rowhead { background: var(--accent-soft); }
/* the total column, set apart from the months */
th.totalcol, td.totalcol { border-left: 2px solid var(--rule-2); font-weight: 600; }

/* a month whose refunds are still arriving: dimmed, and the column head carries the tag */
td.prov { color: var(--ink-3); background: var(--bg); }
tbody tr.group td.prov { background: var(--accent-soft); }
th.prov { color: var(--ink-3); }

/* every label and every cell opens a tooltip — say so with the cursor, quietly */
td[data-tip], th[data-tip] { cursor: help; }
td[data-tip]:hover, th[data-tip]:hover, td[data-tip]:focus, th[data-tip]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
td[data-tip].open, th[data-tip].open { background: var(--accent-soft); }

/* ---- charts ---- */
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.charts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .charts, .charts.two { grid-template-columns: minmax(0, 1fr); } }
.chart { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.chart h3 { font-size: 14px; }
.chart .sub { font-size: 13px; color: var(--ink-3); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.axis text { fill: var(--ink-3); font-family: var(--font-body); font-size: 12px; font-variant-numeric: tabular-nums; }
.axis line, .grid line { stroke: var(--rule); stroke-width: 1; }
.dl { fill: var(--ink-2); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.bar.s1 { fill: var(--s1); } .bar.s2 { fill: var(--s2); } .bar.grey { fill: var(--grey-mark); }
.hit { fill: transparent; }
.bar:hover { filter: brightness(.92); }

/* ---- definitions page ---- */
.defs { display: flex; flex-direction: column; gap: 34px; }
.def { display: flex; flex-direction: column; gap: 10px; }
.def h2 { font-size: 20px; }
.def p, .def li { max-width: 88ch; font-size: 16px; }
.def ul, .def ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
table.grid td, table.grid th { white-space: normal; }
table.grid th, table.grid td { text-align: left; vertical-align: top; }
table.grid th.rowhead, table.grid td.rowhead { position: static; min-width: 18ch; border-right: 0; }
table.grid td.rowhead { font-weight: 600; color: var(--ink); }
table.grid td { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
table.grid td.src { color: var(--ink-3); font-size: 13.5px; min-width: 16ch; }

/* ============================ new to this report ============================ */

/* ---- source tabs: one live, two waiting for their numbers ---- */
.srctabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.srctab { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.srctab[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.srctab.soon { color: var(--ink-3); border-style: dashed; cursor: default; }
.srctab.soon .soonmark { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--rule); border-radius: 999px; padding: 1px 7px; }

/* ---- the two money toggles ---- */
.picker { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.tgroup { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tgroup .pklabel { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.tgroup .pk { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.tgroup .pk:hover { border-color: var(--accent); color: var(--ink); }
.tgroup .pk[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---- the tooltip card: four parts, a hover on a mouse and a popover on a finger ---- */
.tipcard {
  position: fixed; z-index: 40; pointer-events: none;
  width: max-content; max-width: min(380px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-left: 3px solid var(--accent); border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
  padding: 12px 15px; font-size: 14px; line-height: 1.45;
  display: flex; flex-direction: column; gap: 9px;
}
.tipcard[hidden] { display: none; }
.tipcard.pinned { pointer-events: auto; }
.tipcard .t-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.25; white-space: normal; }
.tipcard .t-part { display: flex; flex-direction: column; gap: 2px; }
.tipcard .t-h { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tipcard .t-b { color: var(--ink-2); white-space: normal; }
.tipcard .t-b b { color: var(--ink); font-weight: 600; }
.tipcard .t-now { color: var(--ink); font-variant-numeric: tabular-nums; }
.tipcard .t-src { color: var(--ink-3); font-size: 13px; }
.tipcard .t-prov { background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 7px 10px; font-size: 13px; white-space: normal; }
.tipcard .t-close { align-self: flex-end; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.tipcard:not(.pinned) .t-close { display: none; }

/* ---- page footer ---- */
.pagefoot { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.pagefoot b { color: var(--ink-2); font-weight: 600; }

/* ---- small screens: the table scrolls inside its own box, the page never does ---- */
@media (max-width: 520px) {
  .page { padding: 24px 14px 56px; gap: 32px; }
  body { font-size: 16px; }
  .topnav { gap: 6px 12px; }
  .topnav .langs { margin-left: 0; }
  .srctab { font-size: 13px; padding: 7px 13px; }
  th.rowhead, td.rowhead { min-width: 17ch; max-width: 17ch; font-size: 13px; }
  th, td { padding: 7px 9px; font-size: 14px; }
  details.help ul { padding-left: 16px; }
  .def p, .def li, details.help li { max-width: none; }
  table.grid th.rowhead, table.grid td.rowhead { max-width: none; }
  .tipcard { max-width: calc(100vw - 20px); }
}

/* ---- paper: the report prints as it reads, minus the controls ---- */
@media print {
  @page { size: A4 landscape; margin: 12mm 14mm; }
  html, body { background: #fff; }
  body { font-size: 10pt; color: #000; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page { max-width: none; padding: 0; gap: 18px; }
  .topnav, .bottomnav, .langs, .pill, .picker, .tipcard { display: none !important; }
  h1 { font-size: 19pt; max-width: none; }
  h2 { font-size: 13pt; }
  p, .cap, .def p, .def li, details.help li, .houserules ul { max-width: none; }
  .tablewrap { overflow: visible !important; break-inside: auto; }
  table { font-size: 8pt; }
  th, td { padding: 3px 5px; }
  th { position: static; font-size: 7.5pt; white-space: normal; }
  th.rowhead, td.rowhead { position: static; min-width: 0; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
  td.prov { background: #eeebe3 !important; }
  .chart, .hdr, .houserules, .def, .section-head { break-inside: avoid; }
  .section-head, h1, h2, h3 { break-after: avoid; }
  details.help { display: none; }
}