:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2230;
  --muted: #5f6b7a;
  --border: #dfe3e8;
  --grid: #e9ecf0;
  --accent: #2456c7;
  --accent-text: #ffffff;
  --accent-2: #c2410c;
  --ball-main: #2f63d6;
  --ball-supp: #d99a06;
  --ball-powerball: #d1342f;
  --ball-bonus: #7c4ddb;
  --ball-text: #ffffff;
  --tag-bg: #eef2fb;
  --tag-text: #2a4a94;
  --error: #b42318;
  --ok: #1a7f37;
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1218;
    --surface: #171b23;
    --text: #e6e9ef;
    --muted: #97a1af;
    --border: #2a303b;
    --grid: #232833;
    --accent: #6f97f2;
    --accent-text: #0f1218;
    --accent-2: #f08a4b;
    --ball-main: #4c7be6;
    --ball-supp: #e0a91c;
    --ball-powerball: #e2554f;
    --ball-bonus: #9472e8;
    --tag-bg: #1f2738;
    --tag-text: #a9c0f5;
    --error: #f97066;
    --ok: #4ac26b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 0.15rem; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.error { color: var(--error); margin: 0.4rem 0 0; }

/* layout */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
/* in-page links land below the sticky header (its height is measured in base.html) */
html { scroll-padding-top: var(--topbar-h, 3.5rem); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.topbar nav { align-items: center; }
.nav-menu summary { list-style: none; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu[open] summary { color: var(--text); }
.nav-menu summary.active { color: var(--text); font-weight: 600; }
.nav-menu .caret { width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-menu[open] .caret { transform: rotate(-135deg) translateY(-1px); }
/* Desktop mega menu: a full-width panel under the sticky header, laid out on the page grid */
.nav-menu { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  max-height: calc(100vh - var(--topbar-h, 3.5rem)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.22);
  animation: mega-in 0.14s ease-out;
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }
.mega-inner {
  max-width: 1180px; margin: 0 auto; padding: 1.4rem 16px 1.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem 2rem; align-items: start;
}
.mega-col.wide { grid-column: span 2; }
.mega-inner > .mega-feature:only-child { max-width: 380px; }
.mega-heading {
  display: flex; align-items: center; gap: 0.4rem; min-height: 1.5rem; margin: 0 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--grid);
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.topbar nav .mega-heading a { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent); font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.topbar nav .mega-heading a[aria-current="page"] { color: var(--text); }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.mega-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.75rem; }
.topbar nav .mega-link {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; margin: 0 -0.6rem;
  border-radius: 8px; color: var(--text); line-height: 1.3; text-decoration: none;
}
.topbar nav .mega-link:hover { background: var(--tag-bg); text-decoration: none; }
.topbar nav .mega-link:hover .mega-label { color: var(--accent); }
.topbar nav .mega-link[aria-current="page"] { background: var(--tag-bg); }
.topbar nav .mega-link[aria-current="page"] .mega-label { font-weight: 700; }
.mega-link:has(.mega-desc) { align-items: flex-start; }
.mega-icon { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--tag-bg); color: var(--accent); }
.mega-icon .ui-icon { width: 1.15rem; height: 1.15rem; }
.mega-text { display: grid; gap: 0.1rem; min-width: 0; }
.mega-label { font-weight: 600; }
.mega-desc { color: var(--muted); font-size: 0.84rem; }
.mega-count { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.mega-link .sport-icon { margin-right: 0; color: var(--muted); }
/* the "know your spend" column carries the site's message */
.mega-save { margin: -0.6rem -0.2rem; padding: 0.6rem 1rem 0.5rem; border-radius: 12px; background: var(--band-save); }
.mega-save .mega-heading { color: var(--band-save-ink); border-bottom-color: color-mix(in srgb, var(--band-save-ink) 20%, transparent); }
.mega-save .mega-icon { background: var(--surface); color: var(--band-save-ink); }
.topbar nav .mega-save .mega-link:hover, .topbar nav .mega-save .mega-link[aria-current="page"] { background: color-mix(in srgb, var(--surface) 70%, transparent); }
/* a feature card: one page each menu points people to first */
.topbar nav .mega-feature {
  display: grid; align-content: start; gap: 0.45rem; padding: 1.1rem 1.2rem; border-radius: 12px;
  background: var(--band-hero); color: var(--on-hero-muted); text-decoration: none;
}
.topbar nav .mega-feature:hover { text-decoration: none; filter: brightness(1.08); }
.mega-feature-icon { width: 1.8rem; height: 1.8rem; color: var(--on-hero); }
.mega-feature-title { color: var(--on-hero); font-size: 1.1rem; font-weight: 700; }
.mega-feature-text { font-size: 0.9rem; line-height: 1.45; }
.mega-feature-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; color: var(--on-hero); font-weight: 600; font-size: 0.9rem; }
.mega-link .game-dot { flex: none; }
@media (max-width: 1000px) {
  .mega-col.wide { grid-column: auto; }
  .mega-list.two { grid-template-columns: minmax(0, 1fr); }
}
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); }
.topbar nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.site-footer { max-width: 1180px; margin: 0 auto; padding: 1.25rem 16px 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 0.5rem; }
.site-footer strong { color: var(--text); font-weight: 600; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }  /* links inside sentences need more than colour */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-head p { margin: 0; }
.crumbs { font-size: 0.9rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 1rem; }
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.panel { margin-bottom: 1rem; }
.card { display: flex; flex-direction: column; gap: 0.6rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.15rem; }
.card-head h2 a, .card-head h3 a { color: var(--text); }
.draw-meta { margin: 0; color: var(--muted); }
.card-links { margin-top: auto; display: flex; gap: 1rem; padding-top: 0.4rem; border-top: 1px solid var(--grid); }

.grid-2, .grid-3 { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-2 .panel, .grid-3 .panel { margin-bottom: 0; }
.grid-2, .grid-3 { margin-bottom: 1rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.facts dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* balls */
.balls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ball {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--ball-main);
  color: var(--ball-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.ball.supplementary { background: var(--ball-supp); }
.ball.powerball { background: var(--ball-powerball); }
.ball.bonus { background: var(--ball-bonus); }
.balls.small { gap: 0.25rem; }
.balls.small .ball, .small-ball { width: 1.65rem; height: 1.65rem; font-size: 0.8rem; }
.plus { color: var(--muted); font-weight: 600; margin: 0 0.1rem; }
.ball-block { margin-bottom: 1rem; }
.ball-block h2 { font-size: 0.85rem; color: var(--muted); font-weight: 600; }

/* tags & status */
.tag {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}
.status { font-weight: 600; }
.status.success { color: var(--ok); }
.status.failed, .status.partial { color: var(--error); }

/* buttons & forms */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn:disabled { opacity: 0.7; cursor: progress; }
.fetch-status { text-align: right; }
.fetch-status p { font-size: 0.85rem; }
.spinner {
  width: 0.9rem; height: 0.9rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.filters.compact { background: none; border: none; padding: 0; margin: 0; }
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.filters label.check { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.5rem; }
.filters input, .filters select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  max-width: 100%;
}
.filters input[type="number"] { width: 7.5rem; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: middle; }
th { font-size: 0.78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
td.num, th.num { text-align: right; }
table.draws { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table.compact td, table.compact th { padding: 0.3rem 0.4rem; }
th.op, td.op { color: var(--muted); font-size: 0.85rem; }
.result-count { margin: 0 0 0.5rem; }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; }
.pager { display: flex; gap: 0.3rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.pager-top { margin-top: 0; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.results-bar .result-count { margin: 0; }
.page-link {
  min-width: 2.25rem; padding: 0.3rem 0.6rem; text-align: center; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums;
}
a.page-link:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.page-link.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.page-link.disabled { color: var(--muted); opacity: 0.5; }
.page-gap { color: var(--muted); padding: 0 0.2rem; }
.error-cell { max-width: 28rem; }
.error-cell pre { white-space: pre-wrap; font-size: 0.8rem; }

/* charts */
.chart { position: relative; height: 300px; }
.chart.short { height: 220px; }

/* upcoming draws: week grid */
/* Game colours follow each game's brand: Saturday Lotto red, Weekday Windfall purple, Oz
   Lotto green, Powerball blue, Set for Life aqua. Shades are stepped by lightness so they stay
   apart; a game's colour always sits beside its name, never on its own. */
:root {
  --game-saturday_lotto: #e3343f; --game-weekday_lotto: #6a3d9a; --game-oz_lotto: #157a32;
  --game-powerball: #1f7fd0; --game-set_for_life: #2fbccb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --game-saturday_lotto: #e44a52; --game-weekday_lotto: #b48ae6; --game-oz_lotto: #24904a;
    --game-powerball: #2f74d6; --game-set_for_life: #30adb8;
  }
}
:root[data-theme="dark"] {
  --game-saturday_lotto: #e44a52; --game-weekday_lotto: #b48ae6; --game-oz_lotto: #24904a;
  --game-powerball: #2f74d6; --game-set_for_life: #30adb8;
}
.week { table-layout: fixed; min-width: 40rem; }
.week th, .week td { border-bottom: 1px solid var(--grid); padding: 0.55rem 0.4rem; }
.week thead th { text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.week .game-col { width: 9.5rem; text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.week th.game-col { text-transform: none; letter-spacing: 0; }
.week th.game-col a { color: var(--text); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.week .day-col { text-align: center; }
.day-name { display: block; color: var(--text); font-size: 0.9rem; }
.day-date { display: block; font-weight: 400; font-size: 0.78rem; }
.week .today { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.week thead .today .day-name { color: var(--accent); }
.week td.cell { text-align: center; font-variant-numeric: tabular-nums; }
.week .jackpot { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 700; color: var(--text); background: var(--tag-bg); }
.week .jackpot:hover { text-decoration: none; outline: 2px solid var(--accent); }
.week .jackpot.big { background: var(--accent); color: var(--accent-text); }
.week .jackpot sup { font-weight: 400; font-size: 0.65em; margin-left: 0.1em; }
.week .none { color: var(--border); }
.week .tba { color: var(--muted); font-size: 0.8rem; }
.week-list { display: none; list-style: none; margin: 0; padding: 0; }
.week-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
.week-list .game-name { color: var(--text); font-weight: 600; }
.week-list .when { color: var(--muted); font-size: 0.9rem; }
.week-list .jackpot { padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 700; color: var(--text); background: var(--tag-bg); min-width: 3.6rem; text-align: center; }
.week-list .jackpot.big { background: var(--accent); color: var(--accent-text); }
.week-list .tba { color: var(--muted); font-size: 0.8rem; }
.game-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.05em; }
.game-dot.saturday_lotto { background: var(--game-saturday_lotto); }
.game-dot.weekday_lotto { background: var(--game-weekday_lotto); }
.game-dot.oz_lotto { background: var(--game-oz_lotto); }
.game-dot.powerball { background: var(--game-powerball); }
.game-dot.set_for_life { background: var(--game-set_for_life); }

/* at a glance */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--bg); }
.kpi-label { font-size: 0.85rem; color: var(--muted); }
.kpi-value { font-size: 1.85rem; font-weight: 600; line-height: 1.2; margin: 0.15rem 0; color: var(--text); }
.kpi-value a { color: var(--text); }
.kpi-value a:hover { color: var(--accent); }
.kpi-note { font-size: 0.8rem; color: var(--muted); }
.game-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.game-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; }
.game-stat h3 { font-size: 1rem; margin: 0; }
.game-stat h3 a { color: var(--text); }
.game-stat > p { margin: 0 0 0.5rem; }
.game-stat dl { margin: 0; display: grid; gap: 0.45rem; }
.game-stat dt { font-size: 0.78rem; color: var(--muted); }
.game-stat dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
.game-stat dd .small { font-weight: 400; }
.game-stat dd a { color: var(--text); text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.game-stat dd a:hover { color: var(--accent); }
.at-a-glance > .small { margin: 0.75rem 0 0; }

/* game tabs */
.game-head { margin-bottom: 0.5rem; }
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.tabs a { padding: 0.55rem 1rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* stats tab */
.stats-controls { align-items: center; }
.stats-controls > label { max-width: 100%; }
.stats-controls select { max-width: 100%; }
.segmented { border: 0; margin: 0; padding: 0; display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.segmented legend { font-size: 0.8rem; color: var(--muted); float: left; margin-right: 0.5rem; }
.segmented label { flex-direction: row !important; align-items: center; gap: 0.35rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; color: var(--text) !important; font-size: 0.9rem !important; cursor: pointer; }
.segmented label:has(input:checked) { border-color: var(--accent); background: var(--tag-bg); }
.segmented input { margin: 0; accent-color: var(--accent); }
.freq-facts { margin: 0.75rem 0 1rem; }
.freq-facts dd { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.section-title { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }
.subhead { font-size: 0.95rem; margin: 1.25rem 0 0.25rem; }
.table-toggle { margin-top: 1rem; }
.table-toggle summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.table-toggle table { margin-top: 0.5rem; max-width: 46rem; }
table.sortable th button { all: unset; cursor: pointer; }
table.sortable th[aria-sort="ascending"] button::after { content: " ▲"; font-size: 0.7em; }
table.sortable th[aria-sort="descending"] button::after { content: " ▼"; font-size: 0.7em; }
.window-form { margin-top: 0.5rem; }
.pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pattern-grid .panel { margin-bottom: 0; }
.takeaway { font-weight: 600; margin: 0.25rem 0 0.75rem; }
.pattern .table-toggle table { max-width: none; }
.pairs-grid { margin-bottom: 0; }
.pairs-grid td:first-child { white-space: nowrap; }
.pairs-grid .subhead { margin-top: 0.5rem; }
.pair-link:hover { text-decoration: none; }
.pair-link:hover .ball { outline: 2px solid var(--accent); outline-offset: 1px; }
.companions-form label { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; color: var(--muted); }
.companions-form select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; }

/* number grid shaded by times drawn: one hue, light (fewer) to dark (more) */
:root {
  --shade-0: #b7d3f6; --shade-1: #9ec5f4; --shade-2: #86b6ef; --shade-3: #6da7ec;
  --shade-4: #3987e5; --shade-5: #2a78d6; --shade-6: #1c5cab; --shade-7: #104281;
  --shade-ink-light: #1c2230; --shade-ink-dark: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* on a dark surface "more" is brighter: the same ramp, reversed */
    --shade-0: #104281; --shade-1: #184f95; --shade-2: #1c5cab; --shade-3: #2a78d6;
    --shade-4: #3987e5; --shade-5: #6da7ec; --shade-6: #86b6ef; --shade-7: #9ec5f4;
    --shade-ink-light: #ffffff; --shade-ink-dark: #0f1218;
  }
}
.freq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: 0.6rem 0.4rem; max-width: 48rem; }
.freq-cell { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.freq-cell .ball { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
.freq-count { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.freq-cell.limited .ball { outline: 2px dashed var(--muted); outline-offset: 2px; }
.shade-0, .shade-1, .shade-2, .shade-3 { color: var(--shade-ink-light); }
.shade-4, .shade-5, .shade-6, .shade-7 { color: var(--shade-ink-dark); }
.shade-0 { background: var(--shade-0); } .shade-1 { background: var(--shade-1); }
.shade-2 { background: var(--shade-2); } .shade-3 { background: var(--shade-3); }
.shade-4 { background: var(--shade-4); } .shade-5 { background: var(--shade-5); }
.shade-6 { background: var(--shade-6); } .shade-7 { background: var(--shade-7); }
.freq-legend { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); }
.freq-legend .swatch { width: 1.4rem; height: 0.7rem; border-radius: 2px; }
.freq-legend > span:not(.swatch) { margin: 0 0.3rem; }
.legend-note { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 1rem !important; }
.limited-swatch { width: 0.9rem !important; height: 0.9rem !important; border-radius: 50% !important; outline: 2px dashed var(--muted); }

/* winning by state */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 1rem; }
.chips a { display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 0.88rem; }
.chips a:hover { text-decoration: none; border-color: var(--accent); }
.chips a[aria-current="true"] { border-color: var(--accent); background: var(--tag-bg); font-weight: 600; }
.chips .game-dot { margin-right: 0.35rem; }
.state-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); font-weight: 600; white-space: nowrap; }
.state-table .bar-col { width: 36%; min-width: 12rem; }
.bar-row { display: flex; align-items: center; gap: 0.5rem; }
.bar-row .bar { height: 0.8rem; border-radius: 0 4px 4px 0; background: var(--ball-main); min-width: 2px; }
.bar-row .bar-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mobile-detail { display: none; }

/* prize popularity: diverging red (over-picked) - gray - blue (under-picked) */
:root {
  --pop-0: #b42828; --pop-1: #e34948; --pop-2: #f2a3a2; --pop-3: #f0efec;
  --pop-4: #9ec5f4; --pop-5: #3987e5; --pop-6: #1c5cab;
  --pop-ink-light: #1c2230; --pop-ink-dark: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pop-0: #e66767; --pop-1: #b83a3a; --pop-2: #6b2f2f; --pop-3: #383835;
    --pop-4: #1f4677; --pop-5: #2a78d6; --pop-6: #6da7ec;
    --pop-ink-light: #ffffff; --pop-ink-dark: #0f1218;
  }
}
.pop-0 { background: var(--pop-0); color: var(--pop-ink-dark); }
.pop-1 { background: var(--pop-1); color: var(--pop-ink-dark); }
.pop-2 { background: var(--pop-2); color: var(--pop-ink-light); }
.pop-3 { background: var(--pop-3); color: var(--pop-ink-light); }
.pop-4 { background: var(--pop-4); color: var(--pop-ink-light); }
.pop-5 { background: var(--pop-5); color: var(--pop-ink-dark); }
.pop-6 { background: var(--pop-6); color: var(--pop-ink-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pop-0, :root:not([data-theme="light"]) .pop-6 { color: #0f1218; }
  :root:not([data-theme="light"]) .pop-1, :root:not([data-theme="light"]) .pop-2,
  :root:not([data-theme="light"]) .pop-3, :root:not([data-theme="light"]) .pop-4,
  :root:not([data-theme="light"]) .pop-5 { color: #ffffff; }
}
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.7rem, 1fr)); gap: 0.45rem 0.3rem; }
.pop-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.pop-cell .ball { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
.pop-cell.faint { opacity: 0.45; }
.pop-value { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop-legend { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; margin-top: 0.8rem; font-size: 0.78rem; color: var(--muted); }
.pop-legend .swatch { width: 1.3rem; height: 0.7rem; border-radius: 2px; }
.pop-legend > span:not(.swatch) { margin: 0 0.3rem; }
.popularity-grid { margin-bottom: 0; }
.pattern-findings { margin: -0.25rem 0 0.75rem; padding-left: 1.2rem; }
.pattern-findings li { margin-bottom: 0.2rem; }

/* fairness scorecard: status colours always paired with an icon and a word */
:root { --status-good: #0ca30c; --status-warning: #b07a00; --status-critical: #d03b3b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --status-good: #3fbf3f; --status-warning: #fab219; --status-critical: #e66767; }
}
.verdict-banner { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 1rem; }
.verdict-banner > div { display: flex; flex-direction: column; gap: 0.2rem; }
.verdict-banner.verdict-ok { border-color: color-mix(in srgb, var(--status-good) 45%, var(--border)); background: color-mix(in srgb, var(--status-good) 7%, transparent); }
.verdict-banner.verdict-unusual { border-color: color-mix(in srgb, var(--status-critical) 45%, var(--border)); background: color-mix(in srgb, var(--status-critical) 7%, transparent); }
.verdict-banner .verdict-icon { width: 1.6rem; height: 1.6rem; font-size: 0.95rem; flex: none; }
.verdict-icon { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.75rem; margin-right: 0.4rem; }
.verdict-ok .verdict-icon { background: var(--status-good); }
.verdict-watch .verdict-icon { background: var(--status-warning); }
.verdict-unusual .verdict-icon { background: var(--status-critical); }
.verdict { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; }
.fairness-table th[scope="row"] { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 0.92rem; white-space: nowrap; }
.fairness-table .mobile-detail { font-weight: 400; margin-top: 0.15rem; }

/* number trends heatmap (shares the diverging pop-* scale) */
.heatmap-wrap { overflow-x: auto; margin-top: 0.5rem; }
.heatmap { border-collapse: separate; border-spacing: 1px; width: auto; }
.heatmap th, .heatmap td { padding: 0; border: 0; }
.heatmap td { width: 14px; min-width: 14px; height: 12px; border-radius: 2px; }
.heatmap td.hm-none { background: transparent; }
.heatmap tbody th { font-size: 0.68rem; color: var(--muted); font-weight: 400; text-align: right; padding-right: 0.35rem; text-transform: none; letter-spacing: 0; }
.heatmap .year-col { font-size: 0.68rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; height: 1.1rem; vertical-align: bottom; }
.heatmap td.hm:hover { outline: 2px solid var(--text); outline-offset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.droughts { margin-top: 1rem; margin-bottom: 0; }

/* prize trends */
.link-button { all: unset; cursor: pointer; color: var(--accent); font-size: 0.85rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; }
.link-button:hover { text-decoration: underline; }
.link-button:focus-visible { outline: 2px solid var(--accent); }
.link-button[aria-pressed="true"] { background: var(--tag-bg); }
.trends-table td:nth-child(2) { min-width: 12rem; }

/* in-page section links on the stats tab */
.on-this-page { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: baseline; margin: -0.25rem 0 1rem; }
.on-this-page a { font-size: 0.88rem; }
html { scroll-behavior: smooth; }
section[id], [id$="-title"], #patterns, #more-stats { scroll-margin-top: 1rem; }

.chance { display: flex; align-items: center; gap: 0.5rem; }
.chance-bar { flex: 1; height: 0.55rem; background: var(--grid); border-radius: 999px; overflow: hidden; max-width: 9rem; }
.chance-bar > span { display: block; height: 100%; background: var(--ball-main); border-radius: 999px; }
.price-input { font: inherit; width: 4.5rem; padding: 0.25rem 0.4rem; text-align: right; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.mobile-only { display: none; }
.best-tag { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px; background: var(--status-good); color: #fff; font-size: 0.72rem; font-weight: 700; }

/* crowd score */
.crowd-score { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.5rem; }
.crowd-score p { margin: 0; flex: 1; }
.crowd-value { font-size: 2.1rem; font-weight: 700; flex: none; min-width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.crowd-value.pos { color: var(--status-good); }
.crowd-value.neg { color: var(--status-critical); }
.crowd-reasons { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.4rem; }
.crowd-reasons li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.4rem; }
.crowd-reasons li .verdict-icon { margin: 0.15rem 0 0; }
.crowd-reasons li > span:last-child { line-height: 1.7; }
.reason-pos { background: var(--status-good); }
.reason-neg { background: var(--status-critical); }

/* ticket checker */
.checker-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin-bottom: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); min-width: 0; max-width: 100%; }
.field.grow { flex: 1 1 16rem; }
.field input, .field select {
  font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.5rem; max-width: 100%;
}
.field input[type="number"] { width: 6rem; }
.picker-step { font-size: 0.95rem; margin: 0.75rem 0 0.5rem; }
.pb-step { border-radius: var(--radius); padding: 0.1rem 0.5rem 0.25rem; margin: 0 -0.5rem; transition: background 0.2s; }
.pb-step.needs-pick { background: color-mix(in srgb, var(--ball-powerball) 10%, transparent); outline: 2px solid color-mix(in srgb, var(--ball-powerball) 45%, transparent); }
.pick-status { margin: 0.25rem 0 0.75rem; font-weight: 600; color: var(--muted); }
.pick-status.ready { color: var(--ok); }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: 0.35rem; max-width: 40rem; margin-bottom: 0.75rem; }
.pick {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0;
}
.pick:hover { border-color: var(--ball-main); }
.pick[aria-pressed="true"] { background: var(--ball-main); border-color: var(--ball-main); color: var(--ball-text); }
.pick.pb:hover { border-color: var(--ball-powerball); }
.pick.pb[aria-pressed="true"] { background: var(--ball-powerball); border-color: var(--ball-powerball); }
.panel h2 .balls { margin-left: 0.5rem; vertical-align: middle; }
.facts.big dd { font-size: 1.25rem; font-weight: 600; }
.facts .neg { color: var(--error); }
.facts .pos { color: var(--ok); }
tr.hit-row td { background: color-mix(in srgb, var(--ball-main) 7%, transparent); }
.scroll-y { max-height: 26rem; overflow-y: auto; }
.share-col { width: 18%; min-width: 6rem; }
.bar { display: block; height: 0.6rem; min-width: 2px; border-radius: 3px; background: var(--ball-main); }
.filters .full { flex-basis: 100%; margin: 0; }
details.panel summary { cursor: pointer; }
.explain { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.explain li { margin-bottom: 0.4rem; }

@media (max-width: 860px) {
  .pattern-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .crowd-score { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .crowd-value { min-width: 0; text-align: left; }
  /* results filters: a two-column grid that fits the screen */
  .results-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.75rem; padding: 0.75rem; }
  .results-filters label { min-width: 0; }
  .results-filters input, .results-filters select, .results-filters input[type="number"] { width: 100%; min-width: 0; }
  .results-filters input[type="checkbox"] { width: auto; }
  .results-filters label.check { grid-column: 1 / -1; padding-bottom: 0; justify-content: flex-start; }
  .results-filters label:has(select[name="format_id"]) { grid-column: 1 / -1; }
  .results-filters .filter-actions { align-self: end; }
  .results-filters .filter-actions .btn { flex: 1; justify-content: center; }

  /* results table: one compact card per draw */
  table.draws, table.draws tbody { display: block; border: 0; background: none; }
  table.draws thead { display: none; }
  table.draws tr {
    display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; align-items: center;
    padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  table.draws td { display: block; padding: 0; border: 0; }
  table.draws td.date-cell { text-align: right; color: var(--muted); font-size: 0.9rem; }
  table.draws td.balls-cell { grid-column: 1 / -1; }
  table.draws td.div1-cell { display: none; }
  table.draws .balls.small { gap: 0.18rem; }
  table.draws .balls.small .ball { width: 1.72rem; height: 1.72rem; font-size: 0.8rem; }
  table.draws .mobile-detail { margin-top: 0.45rem; }
  .fairness-table .checks-col, .fairness-table .draws-col { display: none; }
  .fairness-table th[scope="row"] { white-space: normal; }
  .fairness-table .verdict { white-space: normal; }
  .state-table th.num, .state-table td.num { display: none; }
  .state-table .bar-col { width: auto; min-width: 0; }
  .state-table .bar-row .bar { max-width: calc(100% - 4.5rem); }
  .mobile-detail { display: block; margin-top: 0.2rem; }
  .stats-controls > label, .stats-controls select { width: 100%; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .kpi { padding: 0.7rem 0.75rem; }
  .kpi-value { font-size: 1.45rem; }
  .game-stat dl { grid-template-columns: repeat(2, 1fr); }
  .upcoming .table-wrap { display: none; }  /* phones get the next-draw list instead */
  .week-list { display: block; }
  h1 { font-size: 1.35rem; }
  .cards { grid-template-columns: 1fr; }
  .fetch-status { text-align: left; }
  .ball { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
}

@media (max-width: 375px) {
  /* narrowest phones: keep up to 10 balls (Oz Lotto) on one line */
  table.draws .balls.small { gap: 0.12rem; }
  table.draws .balls.small .ball { width: 1.58rem; height: 1.58rem; font-size: 0.74rem; }
  table.draws .plus { margin: 0; }
}

/* state luck: diverging bars from a centre line */
.luck { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.luck h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.luck-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); font-weight: 600; white-space: nowrap; }
.luck-table .luck-col { width: 38%; min-width: 12rem; }
.luck-bar { display: flex; align-items: center; gap: 0.5rem; }
.luck-track { position: relative; flex: 1; height: 0.85rem; }
.luck-track::before { content: ""; position: absolute; left: 50%; top: -0.2rem; bottom: -0.2rem; width: 1px; background: var(--muted); }
.luck-fill { position: absolute; top: 0; bottom: 0; }
.luck-fill.up { left: calc(50% + 1px); border-radius: 0 4px 4px 0; }
.luck-fill.down { right: calc(50% + 1px); border-radius: 4px 0 0 4px; }
.luck-fill.pop-3 { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.luck-value { width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .luck-table th.num, .luck-table td.num { display: none; }
  .luck-table .luck-col { width: auto; min-width: 0; }
  .luck-table th[scope="row"] { white-space: normal; width: 5.5rem; font-size: 0.9rem; }
  .luck-table .mobile-detail { display: block; margin-top: 0.2rem; }
}

/* cost of playing regularly */
.play .small-heading { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.play .facts.big dd .small { font-weight: 400; }
@media (max-width: 640px) {
  .play .facts.big dd .back { display: block; }
  .ever-table .odds-col { display: none; }
  .ever-table .mobile-detail { display: block; }
}

/* homepage stats on phones */
.game-stat dt .short { display: none; }
@media (max-width: 640px) {
  .at-a-glance h2 .small { display: block; font-weight: 400; margin-top: 0.15rem; }

  /* at a glance: compact game cards, three short stats per row */
  .game-stats { gap: 0.5rem; }
  .game-stat { padding: 0.7rem 0.8rem; }
  .game-stat h3 { display: inline; }
  .game-stat > p { display: inline; margin-left: 0.4rem; }
  .game-stat dl { grid-template-columns: repeat(3, 1fr); gap: 0.5rem 0.6rem; margin-top: 0.5rem; }
  .game-stat dt .long, .game-stat dd .long { display: none; }
  .game-stat dt .short { display: inline; }
  .game-stat dd { font-size: 1rem; }
  .game-stat dd .when { display: block; font-size: 0.75rem; }

  /* state tables: name on its own line so bars get the full width */
  .state-table tr, .luck-table tr { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
  .state-table thead, .luck-table thead { display: none; }
  .state-table th[scope="row"], .luck-table th[scope="row"] { display: block; padding: 0 0 0.25rem; border: 0; width: auto; white-space: nowrap; font-size: 0.95rem; }
  .state-table td.bar-col, .luck-table td.luck-col { display: block; padding: 0; border: 0; width: auto; }
  .state-table .mobile-detail, .luck-table .mobile-detail { margin-top: 0.25rem; }
}

/* will the jackpot go? one card per game */
.outlook-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.outlook-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.45rem; }
.outlook-card p { margin: 0; }
.outlook-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.outlook-card h3 { margin: 0; font-size: 0.98rem; }
.outlook-card h3 a { color: var(--text); }
.outlook-prize strong { font-size: 1.6rem; line-height: 1.1; }
.outlook-verdict { font-weight: 600; }
.outlook-card .chance-bar { max-width: none; }
.outlook-value { margin: 0.35rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--grid); display: grid; gap: 0.45rem; }
.outlook-value > div { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.outlook-value dt { font-size: 0.85rem; color: var(--muted); }
.outlook-value dd { margin: 0; font-weight: 600; }
.outlook-card .price-input { width: 4.5rem; text-align: right; }
.outlook-card.best { border-color: color-mix(in srgb, var(--status-good) 55%, var(--border)); background: color-mix(in srgb, var(--status-good) 7%, transparent); }

/* explicit dark choice from the header toggle: same rules as the system dark blocks above
   (tests/test_web.py checks they stay in step) */
:root[data-theme="dark"] {
  --bg: #0f1218;
  --surface: #171b23;
  --text: #e6e9ef;
  --muted: #97a1af;
  --border: #2a303b;
  --grid: #232833;
  --accent: #6f97f2;
  --accent-text: #0f1218;
  --accent-2: #f08a4b;
  --ball-main: #4c7be6;
  --ball-supp: #e0a91c;
  --ball-powerball: #e2554f;
  --ball-bonus: #9472e8;
  --tag-bg: #1f2738;
  --tag-text: #a9c0f5;
  --error: #f97066;
  --ok: #4ac26b;
  color-scheme: dark;
}
:root[data-theme="dark"] {
  /* on a dark surface "more" is brighter: the same ramp, reversed */
  --shade-0: #104281; --shade-1: #184f95; --shade-2: #1c5cab; --shade-3: #2a78d6;
  --shade-4: #3987e5; --shade-5: #6da7ec; --shade-6: #86b6ef; --shade-7: #9ec5f4;
  --shade-ink-light: #ffffff; --shade-ink-dark: #0f1218;
}
:root[data-theme="dark"] {
  --pop-0: #e66767; --pop-1: #b83a3a; --pop-2: #6b2f2f; --pop-3: #383835;
  --pop-4: #1f4677; --pop-5: #2a78d6; --pop-6: #6da7ec;
  --pop-ink-light: #ffffff; --pop-ink-dark: #0f1218;
}
:root[data-theme="dark"] .pop-0, :root[data-theme="dark"] .pop-6 { color: #0f1218; }
:root[data-theme="dark"] .pop-1, :root[data-theme="dark"] .pop-2,
:root[data-theme="dark"] .pop-3, :root[data-theme="dark"] .pop-4,
:root[data-theme="dark"] .pop-5 { color: #ffffff; }
:root[data-theme="dark"] { --status-good: #3fbf3f; --status-warning: #fab219; --status-critical: #e66767; }

/* theme toggle */
.topbar nav { flex: 1; }
.theme-toggle { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
@media (max-width: 640px) {
  .topbar { gap: 0.6rem 1rem; }
  .topbar nav { order: 3; flex-basis: 100%; gap: 0.4rem 0.8rem; font-size: 0.93rem; }
  .theme-toggle { margin-left: auto; }
}

/* my numbers */
.mine-lines { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.5rem; }
.icon-btn { width: 2rem; height: 2rem; padding: 0; justify-content: center; font-size: 1.1rem; line-height: 1; }
.ball.miss { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border); }
.mine-latest td { vertical-align: middle; }
@media (max-width: 640px) {
}
@media (max-width: 640px) {
  /* my numbers: each line as a card, numbers on their own row */
  .mine-latest, .mine-latest tbody, .mine-each, .mine-each tbody { display: block; }
  .mine-latest thead, .mine-each thead { display: none; }
  .mine-latest tr, .mine-each tr {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no result" "balls balls";
    gap: 0.35rem 0.75rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--grid);
  }
  .mine-latest td, .mine-each td { display: block; padding: 0; border: 0; }
  .mine-latest .line-no, .mine-each .line-no { grid-area: no; font-weight: 600; }
  .mine-latest .line-result, .mine-each .line-result { grid-area: result; text-align: right; }
  .mine-latest .line-balls, .mine-each .line-balls { grid-area: balls; }
  .mine-latest .mobile-only, .mine-each .mobile-only { display: inline; }
  .mine-each .wide-only, .mine-form ~ #results .wide-only { display: none; }
}
@media (max-width: 640px) {
  .mine-divs { font-size: 0.88rem; }
  .mine-divs th, .mine-divs td { padding-left: 0.3rem; padding-right: 0.3rem; }
  .mine-divs .unknown { display: block; }
  .mine-divs th { font-size: 0.7rem; letter-spacing: 0; }
}
@media (max-width: 640px) { .mine-divs .mobile-only { display: inline; } .mine-divs th .wide-only { display: none; } }

/* system calculator */
.compare-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--text); font-weight: 500; }
#system-form select[name="size"] { min-width: 0; }
@media (max-width: 640px) {
  .hits-table, .hits-table tbody { display: block; }
  .hits-table thead { display: none; }
  .hits-table tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "match value" "wins wins" "chance chance";
    gap: 0.2rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grid);
  }
  .hits-table td { display: block; padding: 0; border: 0; text-align: left; }
  .hits-table .hit-match { grid-area: match; font-weight: 600; }
  .hits-table .hit-value { grid-area: value; text-align: right; font-weight: 600; }
  .hits-table .hit-wins { grid-area: wins; font-size: 0.9rem; }
  .hits-table .hit-chance { grid-area: chance; color: var(--muted); font-size: 0.85rem; }
  .hits-table .mobile-only { display: inline; }
  .sys-divs .wide-only { display: none; }
  .sys-divs .mobile-only { display: inline; }
  .sys-divs th, .sys-divs td { padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.84rem; }
  .sys-divs th { font-size: 0.7rem; letter-spacing: 0; }
  .compare-table th, .compare-table td { padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.85rem; }
}

/* syndicate splitter */
.syn-entry { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.9rem 0.8rem; margin: 0.75rem 0; display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1.25rem; }
.syn-entry legend { padding: 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
.syn-entry .radio { display: inline-flex; align-items: center; gap: 0.35rem; padding-bottom: 0.45rem; }
.syn-entry [hidden] { display: none; }
.syn-members { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.syn-member { display: flex; align-items: center; gap: 0.5rem; }
.syn-member input { font: inherit; padding: 0.35rem 0.5rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.syn-member { min-width: 0; }
.syn-member .member-name { flex: 1 1 0; width: 0; max-width: 16rem; }
.syn-member .member-paid { width: 6.5rem; flex: none; text-align: right; }
.syn-win { margin-top: 1rem; }
.syn-table th[scope="row"] .mobile-detail { font-weight: 400; }
.syn-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .syn-table, .syn-table tbody { display: block; }
  .syn-table thead { display: none; }
  .syn-table tr { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "name name name" "paid share gets"; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
  .syn-table th, .syn-table td { display: block; padding: 0; border: 0; text-align: left; }
  .syn-table th[scope="row"] { grid-area: name; }
  .syn-table td:nth-of-type(1) { grid-area: paid; }
  .syn-table td:nth-of-type(2) { grid-area: share; }
  .syn-table td:nth-of-type(3) { grid-area: gets; text-align: right; }
  .syn-table td:nth-of-type(4) { display: none; }
  .syn-table .mobile-only { display: inline; }
}
.syn-win .field { min-width: 0; max-width: 100%; }
.syn-win select { max-width: 100%; text-overflow: ellipsis; }

/* my numbers: one box per number, so phone number pads work (they have no space key) */
.mine-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.mine-line .line-head { display: contents; }
.mine-line .line-label { order: 0; width: 3.6rem; color: var(--muted); font-size: 0.88rem; flex: none; }
.mine-line .line-boxes { order: 1; display: flex; align-items: center; gap: 0.3rem; }
.mine-line .remove-line { order: 2; }
.mine-line .line-error { order: 3; flex-basis: 100%; margin: 0 0 0 4.35rem; }
.num-box {
  font: inherit; font-variant-numeric: tabular-nums; width: 2.5rem; height: 2.5rem; padding: 0; text-align: center;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 50%;
}
.num-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.num-box.pb-box { border-color: color-mix(in srgb, var(--ball-powerball) 60%, var(--border)); }
.num-box.pb-box::placeholder { font-size: 0.75rem; }
.num-box[aria-invalid="true"] { border-color: var(--error); color: var(--error); }
@media (max-width: 640px) {
  .mine-lines { grid-template-columns: minmax(0, 1fr); }
  .mine-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; min-width: 0; }
  .mine-line .line-head { display: flex; justify-content: space-between; align-items: center; }
  .mine-line .line-label { width: auto; font-size: 0.85rem; }
  .mine-line .line-boxes { gap: 0.22rem; width: 100%; }
  .num-box { flex: 1 1 0; width: auto; min-width: 0; max-width: 2.7rem; height: auto; aspect-ratio: 1; font-size: 1rem; }
  .mine-line .plus { margin: 0; }
  .mine-line .line-error { margin: 0; }
}

/* narrow screens: nothing wider than the screen, tighter table cells */
.field select, .filters select { max-width: 100%; }
@media (max-width: 640px) {
  th, td { padding: 0.45rem 0.4rem; }
}
@media (max-width: 400px) {
  .pairs-grid table th:nth-child(3), .pairs-grid table td:nth-child(3) { display: none; }  /* "vs chance" says it */
}

/* phones: columns that can go, and layouts that fit */
.phone-only { display: none; }
.phone-link { color: inherit; }
@media (min-width: 641px) { .phone-link { pointer-events: none; text-decoration: none; } }
@media (max-width: 640px) {
  .hide-phone { display: none !important; }
  .phone-only { display: inline; }
  .when-cell { white-space: normal; }
  /* prize trends: two-line cards with the Chart button in view */
  .trends-table, .trends-table tbody { display: block; }
  .trends-table thead { display: none; }
  .trends-table tr {
    display: grid; grid-template-columns: 1.6rem 1fr auto; grid-template-areas: "div needs typical" ". range chart" ". change chart";
    gap: 0.15rem 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--grid); align-items: baseline;
  }
  .trends-table td { display: block; padding: 0; border: 0; text-align: left; }
  .trends-table td:nth-child(2) { min-width: 0; }
  .trends-table .t-div { grid-area: div; }
  .trends-table .t-needs { grid-area: needs; }
  .trends-table .t-typical { grid-area: typical; text-align: right; }
  .trends-table .t-range { grid-area: range; font-size: 0.85rem; white-space: normal; }
  .trends-table .t-change { grid-area: change; font-size: 0.85rem; white-space: normal; }
  .trends-table .t-chart { grid-area: chart; align-self: center; }
  /* heatmap: shrink the cells so every year fits without sideways scrolling */
  .heatmap { width: calc(100% - 2px); table-layout: fixed; border-spacing: 1px 1px; }
  .heatmap-wrap { overflow-x: hidden; }
  .heatmap td { width: auto; min-width: 0; height: 8px; border-radius: 1px; }
  .heatmap tbody th { width: 1.4rem; padding-right: 0.2rem; font-size: 0.6rem; }
  .heatmap thead th:first-child { width: 1.4rem; }
  .heatmap .year-col { overflow: visible; font-size: 0.6rem; }
}
@media (max-width: 640px) {
  .state-line { white-space: normal; }
}
@media (max-width: 640px) {
  .check-divs .unknown, .mine-divs .unknown { display: block; }
}
@media (max-width: 640px) {
  th { letter-spacing: 0; }
}
@media (max-width: 400px) {
  table { font-size: 0.86rem; }
  th { font-size: 0.68rem; }
  th, td { padding: 0.4rem 0.3rem; }
  .balls.small .ball, .small-ball { width: 1.5rem; height: 1.5rem; font-size: 0.74rem; }
  .heatmap tbody th, .heatmap thead th:first-child { width: 1.15rem; }
}
@media (max-width: 360px) {
  .hide-tiny { display: none !important; }
  table { font-size: 0.8rem; }
  th { font-size: 0.64rem; }
  th, td { padding: 0.35rem 0.22rem; }
}
@media (max-width: 640px) {
  .heatmap thead th:nth-last-child(-n+3) { direction: rtl; }  /* labels near the edge extend leftwards */
}

/* More games */
.game-dot.more { background: var(--muted); }
.digits { display: inline-flex; gap: 0.3rem; }
.digit { display: inline-grid; place-items: center; width: 2.1rem; height: 2.5rem; border-radius: 6px; background: var(--ball-main); color: #fff; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.digits.small .digit { width: 1.5rem; height: 1.8rem; font-size: 0.85rem; border-radius: 4px; }
.tickets { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.ticket { font-variant-numeric: tabular-nums; padding: 0.1rem 0.45rem; border: 1px dashed var(--border); border-radius: 4px; font-size: 0.9rem; }
.ticket.first { border-style: solid; border-color: var(--ball-main); font-weight: 700; }
.more-draw-numbers { margin: 0.5rem 0 1rem; }
.draw-nav { display: flex; justify-content: space-between; gap: 1rem; }
.more-check { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.digit-input { font: inherit; font-size: 1.2rem; letter-spacing: 0.25em; width: 9rem; padding: 0.35rem 0.5rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.strike-boxes { border: 0; padding: 0; margin: 0; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.strike-boxes legend { padding: 0; margin-bottom: 0.2rem; }
.position-table td.pos-cell { text-align: center; font-variant-numeric: tabular-nums; border: 1px solid var(--surface); }
.position-table th[scope="row"] { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 0.9rem; }
.position-table.tall { max-width: 26rem; }
.position-table:not(.tall) { max-width: 34rem; }
p .verdict { white-space: normal; }
@media (max-width: 640px) {
  /* More games results: one card per draw */
  .more-results, .more-results tbody { display: block; }
  .more-results thead { display: none; }
  .more-results tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date div1" "numbers numbers"; gap: 0.35rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
  .more-results td { display: block; padding: 0; border: 0; }
  .more-results .r-draw { display: none; }
  .more-results .r-date { grid-area: date; }
  .more-results .r-div1 { grid-area: div1; text-align: right; font-size: 0.88rem; }
  .more-results .r-numbers { grid-area: numbers; }
  .more-results .phone-link { color: var(--accent); }
}

/* Keno */
.ball.heads { background: var(--ball-main); }
.ball.tails { background: var(--ball-bonus); }
.keno-balls.small { gap: 0.18rem; }
.keno-balls.small .ball { width: 1.5rem; height: 1.5rem; font-size: 0.72rem; }
.ht-tag { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border); }
.ht-tag.heads { border-color: var(--ball-main); }
.ht-tag.tails { border-color: var(--ball-bonus); }
.keno-boxes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0.75rem; }
.keno-boxes .num-box { width: 2.5rem; height: 2.5rem; }
@media (max-width: 640px) {
  .keno-results, .keno-results tbody { display: block; }
  .keno-results thead { display: none; }
  .keno-results tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when result" "numbers numbers"; gap: 0.35rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
  .keno-results td { display: block; padding: 0; border: 0; }
  .keno-results .kr-game { display: none; }
  .keno-results .kr-when { grid-area: when; }
  .keno-results .kr-result { grid-area: result; text-align: right; white-space: normal; }
  .keno-results .kr-numbers { grid-area: numbers; }
  .keno-boxes .num-box { width: 2.2rem; height: 2.2rem; }
}

/* Sports */
.match-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.match-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--surface); display: flex; flex-direction: column; gap: 0.4rem; }
.match-card h3 { margin: 0; font-size: 1rem; }
.match-card h3 a { color: var(--text); }
.match-card p, .match-card footer { margin: 0; }
.chance-split { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--grid); gap: 2px; }
.chance-split .seg.home { background: var(--ball-main); }
.chance-split .seg.away { background: var(--accent-2); }
.chance-split .seg.draw { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.chance-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 0.75rem; font-size: 0.88rem; }
.chance-labels .cl { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.chance-labels .cl::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; align-self: center; }
.chance-labels .cl.home::before { background: var(--ball-main); }
.chance-labels .cl.away::before { background: var(--accent-2); }
.chance-labels .cl.draw::before { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.chance-labels .cl.draw { order: 3; width: 100%; }
.match-card .lines { color: var(--muted); }
.book-table td.best { font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--status-good) 12%, transparent); }
.book-table th[scope="row"], .margin-table th[scope="row"] { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 0.92rem; font-weight: 600; }
.margin-table .margin-col { width: 55%; }
.upsets { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.match-result { font-size: 1.15rem; }
.book-table th[scope="row"] .mobile-detail { font-weight: 400; }
@media (max-width: 640px) { .book-table th, .book-table td { padding-left: 0.3rem; padding-right: 0.3rem; } }

/* Landing page */
.hero { padding: 1.75rem 0 1.5rem; max-width: 46rem; }
.hero h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.hero-lead { font-size: 1.12rem; line-height: 1.55; margin: 0 0 0.5rem; }
.hero-promise { color: var(--muted); margin: 0 0 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.questions, .sections { margin: 1.25rem 0 1.5rem; }
.questions h2, .sections h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.question-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.75rem; }
.question { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.12s, transform 0.12s; }
.question:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.question h3 { margin: 0; font-size: 1.02rem; color: var(--accent); }
.question p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.question p.live { color: var(--text); }
.question p.live::before { content: "Now"; display: inline-block; margin-right: 0.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--tag-bg); color: var(--tag-text); font-size: 0.7rem; font-weight: 700; vertical-align: 0.1em; }
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0.75rem; }
.section-tile { padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.section-tile h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.section-tile p { margin: 0 0 0.5rem; }
.next-draws { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.who-list { margin: 0 0 0.75rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* About */
.prose { max-width: 48rem; }
.prose .panel p, .prose .panel li { line-height: 1.6; }
.prose ul { padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* About: the article, and every section and tool in a sidebar on the right */
.about-layout { display: grid; grid-template-columns: minmax(0, 48rem) minmax(14rem, 17rem); gap: 1.5rem; align-items: start; }
.about-side { margin: 0; }
.about-side h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; color: var(--muted); }
.about-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.about-side a { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; text-decoration: none; font-weight: 600; }
.about-side a:hover { text-decoration: underline; }
.about-side .ui-icon { color: var(--muted); }
@media (max-width: 900px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); }
  .about-side ul { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
.decisions { margin: 0; display: grid; gap: 0.75rem; }
.decisions dt { font-weight: 600; }
.decisions dd { margin: 0.15rem 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) {
  .hero { padding-top: 0.75rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero-lead { font-size: 1.02rem; }
}


/* Phones: one header row, and the menu as a full-screen panel */
.menu-toggle, .mobile-menu { display: none; }
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .topbar nav { display: none; }
  .theme-toggle { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem; height: 2.25rem; padding: 0 0.75rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
    font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  }
  .menu-toggle svg { width: 1.15rem; height: 1.15rem; }
  .menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
  .menu-toggle[aria-expanded="true"] { border-color: var(--accent); }
  .mobile-menu:not([hidden]) {
    display: block; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    top: var(--topbar-h, 3.5rem); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-top: 1px solid var(--border); padding: 0.5rem 16px 2rem;
  }
  body.menu-open { overflow: hidden; }
  .mobile-menu section { padding: 0.75rem 0; border-bottom: 1px solid var(--grid); }
  .mobile-menu section:last-child { border-bottom: 0; }
  .mobile-menu h2 { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .m-grid a {
    display: flex; align-items: center; gap: 0.45rem; min-height: 2.9rem; padding: 0.45rem 0.7rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
    font-size: 0.95rem; line-height: 1.25; text-decoration: none;
  }
  .m-grid a:active { background: var(--tag-bg); }
  .m-grid a[aria-current="page"] { border-color: var(--accent); background: var(--tag-bg); font-weight: 600; }
  .m-grid .game-dot { flex: none; }
  .m-label { min-width: 0; overflow-wrap: anywhere; }
  .m-count { margin-left: auto; padding-left: 0.4rem; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
}

/* Sports pictures: icons, team colours, banners */
.sport-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.16em; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; flex: none; }
.team-chip { display: inline-block; flex: none; width: 0.8em; height: 0.8em; margin-right: 0.35em; border-radius: 50%; vertical-align: -0.04em;
  background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.team-chip.unknown { background: var(--grid); }
.match-card { position: relative; overflow: hidden; padding-top: 1rem; }
.match-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--home-c) 0 50%, var(--away-c) 50% 100%); }
.match-card h3 .team { white-space: nowrap; }
.match-card h3 .vs { margin: 0 0.15rem; }
.sport-banner { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0.5rem 0 1rem; background: var(--grid); }
.sport-banner img { display: block; width: 100%; height: 13rem; object-fit: cover; }
.sport-banner.strip img { height: 6.5rem; }
.sport-banner.match img { height: 9rem; }
.sport-banner::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 22, 0.55); pointer-events: none; }
.sport-banner-text { position: absolute; z-index: 1; left: 1.1rem; right: 1.1rem; bottom: 0.9rem; color: #fff; }
.sport-banner-text h1, .sport-banner-text h2 { margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.sport-banner-text h1 { font-size: 2rem; }
.sport-banner-text h2 { font-size: 1.3rem; }
.sport-banner-text p { margin: 0.25rem 0 0; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; }
.photo-credit { position: absolute; z-index: 1; right: 0.5rem; top: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.68rem; color: rgba(255, 255, 255, 0.9); background: rgba(10, 14, 22, 0.45); text-decoration: none; }
.photo-credit:hover { color: #fff; text-decoration: underline; }
.banner-link { display: block; color: inherit; text-decoration: none; }
.banner-link:hover { text-decoration: none; }
.banner-link:hover .sport-banner img { transform: scale(1.02); }
.sport-banner img { transition: transform 0.25s ease; }
.sport-week .sport-banner { margin-top: 0; }
.breadcrumb { margin: 0 0 0.25rem; }
.section-tile.with-photo { padding-top: 0; overflow: hidden; }
.tile-photo { display: block; width: calc(100% + 2rem); max-width: none; height: 7rem; object-fit: cover; margin: 0 -1rem 0.75rem; }
.credits { padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.92rem; }

.m-grid .sport-icon { color: var(--muted); margin-right: 0; }
@media (max-width: 640px) {
  .sport-banner img { height: 9rem; }
  .sport-banner.strip img { height: 5.5rem; }
  .sport-banner.match img { height: 7rem; }
  .sport-banner-text h1 { font-size: 1.45rem; }
  .sport-banner-text h2 { font-size: 1.1rem; }
  .sport-banner-text p { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .sport-banner img { transition: none; } .banner-link:hover .sport-banner img { transform: none; } }

/* Odds in perspective */
.perspective-games { margin-bottom: 1rem; }
.perspective-games a { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; color: var(--text); font-size: 0.9rem; text-decoration: none; background: var(--surface); }
.perspective-games a[aria-current] { border-color: var(--accent); background: var(--tag-bg); font-weight: 600; }
.dot-field { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 1.25rem; align-items: center; margin: 0.5rem 0 0; }
.dot-field canvas { width: 100%; aspect-ratio: 1; height: auto; display: block; }
.dot-field figcaption p { margin: 0 0 0.6rem; }
.myth { border-top: 1px solid var(--grid); padding-top: 0.75rem; margin-top: 1rem; }
.myth:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.myth h3 { font-size: 1rem; margin: 0 0 0.35rem; }
@media (max-width: 640px) {
  .dot-field { grid-template-columns: 1fr; }
  .dot-field canvas { max-width: 320px; }
}

/* Spend check and spending diary */
.spend-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem 1rem; margin-bottom: 0.5rem; }
.money-input { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text); font-size: 1rem; }
.money-input input { width: 100%; min-width: 0; }
.spend-kinds .money-input { width: 100%; }
.limit-checks { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.limit-checks li { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; }
.budget { margin: 0 0 1rem; }
.budget-track { height: 0.6rem; border-radius: 999px; background: var(--grid); overflow: hidden; }
.budget-fill { height: 100%; width: 0; border-radius: 999px; background: var(--status-good); }
.budget.over .budget-fill { background: var(--status-critical); }
.budget-text { margin: 0.35rem 0 0; }
.diary-form .filter-actions { align-self: flex-end; }
.panel > .card-head { flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.savings-hero { text-align: center; border-color: color-mix(in srgb, var(--ball-main) 35%, var(--border)); background: color-mix(in srgb, var(--ball-main) 5%, var(--surface)); }
.savings-lead { font-size: 1.15rem; margin: 0; }
.savings-big { font-size: clamp(2.6rem, 9vw, 4.25rem); font-weight: 700; line-height: 1.05; margin: 0.15rem 0; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.savings-sub { color: var(--muted); margin: 0 0 1rem; }
.savings-years { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-bottom: 1.25rem; }
.savings-years .link-button { border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.savings-years .link-button[aria-pressed="true"] { border-color: var(--accent); }
.savings-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; text-align: left; }
.savings-split > div { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; background: var(--surface); }
.savings-split dt { font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.savings-split dd { margin: 0.15rem 0 0; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; }
.swatch.put { background: var(--ball-main); }
.swatch.interest { background: var(--ball-supp); }
.savings-chart { margin: 0; text-align: left; }
.savings-chart figcaption { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .savings-split { grid-template-columns: 1fr; }
  .savings-split > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
  .savings-split dd { margin: 0; font-size: 1.1rem; }
}
.savings-compare { margin: 0.2rem 0 0; }
@media (max-width: 640px) {
  .savings-split > div:has(.savings-compare) { flex-wrap: wrap; }
  .savings-compare { flex-basis: 100%; }
}

/* iPhone Safari zooms into any field whose text is under 16px when it's tapped, which also
   leaves the page scrolling sideways. On touch screens every field is at least 16px. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not(.digit-input), select, textarea { font-size: 16px !important; }
}

/* Homepage: full-width bands ------------------------------------------------------------ */
:root {
  --band-hero: #13203f; --band-hero-2: #1d3366; --on-hero: #ffffff; --on-hero-muted: #c3d0ee;
  --band-tint: #eef2fa; --band-save: #e9f6ee; --band-save-ink: #146c35;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-hero: #121b31; --band-hero-2: #1b2b52; --on-hero: #ffffff; --on-hero-muted: #b4c3e6;
    --band-tint: #141a26; --band-save: #12201a; --band-save-ink: #6fd295;
  }
}
:root[data-theme="dark"] {
  --band-hero: #121b31; --band-hero-2: #1b2b52; --on-hero: #ffffff; --on-hero-muted: #b4c3e6;
  --band-tint: #141a26; --band-save: #12201a; --band-save-ink: #6fd295;
}
main.full { max-width: none; padding: 0; }
.band > .wrap { max-width: 1180px; margin: 0 auto; padding: 3rem 16px; }
.band-tint { background: var(--band-tint); }
.band-title { font-size: 1.6rem; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
.ui-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; background: currentColor; flex: none;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.btn .ui-icon { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }

/* hero */
.band-hero { background: var(--band-hero); color: var(--on-hero); }
.band-hero .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.band-hero .hero { padding: 0; max-width: 40rem; }
.band-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1rem; color: var(--on-hero); }
.band-hero .hero-lead { color: var(--on-hero-muted); font-size: 1.15rem; margin: 0 0 1.5rem; }
.band-hero .btn { padding: 0.65rem 1.1rem; font-size: 1rem; }
.band-hero .btn.primary { background: #ffffff; border-color: #ffffff; color: var(--band-hero); }
.btn.ghost, .btn.on-dark { background: transparent; color: var(--on-hero); border-color: color-mix(in srgb, var(--on-hero) 45%, transparent); }
.btn.ghost:hover, .btn.on-dark:hover { border-color: var(--on-hero); }
.trust { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--on-hero-muted); font-size: 0.9rem; }
.hero-grid > .trust { grid-column: 1 / -1; justify-content: center; margin: 0.5rem 0 0; }
.trust li { display: flex; align-items: center; gap: 0.4rem; }
.trust .ui-icon { color: var(--on-hero); }
.hero-art { width: 100%; max-width: 380px; justify-self: end; overflow: visible; }
.hero-ball { animation: bob 6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-ball { animation: none; } }

/* this week's jackpots */
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.band-head h2 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.band-head a { font-weight: 600; }
.jackpot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
.jackpot-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  border-top: 5px solid var(--game); color: var(--text); text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.jackpot-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--game) 60%, transparent); }
.jackpot-game { font-weight: 600; font-size: 0.95rem; }
.jackpot-amount { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.jackpot-when { color: var(--muted); font-size: 0.88rem; }
.jackpot-chance { display: grid; gap: 0.35rem; margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.jackpot-chance strong { color: var(--text); }
.chance-track { height: 0.45rem; border-radius: 999px; background: var(--grid); overflow: hidden; }
.chance-fill { display: block; height: 100%; border-radius: 999px; background: var(--game); }

/* questions */
.ask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.ask { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.25rem; align-items: start; padding: 1.15rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color 0.12s, transform 0.12s; }
.ask:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.ask-icon { grid-row: span 2; width: 2.6rem; height: 2.6rem; padding: 0.6rem; border-radius: 12px; box-sizing: border-box;
  background: var(--tag-bg); color: var(--accent); -webkit-mask: none; mask: none; position: relative; }
.ask-icon::after { content: ""; position: absolute; inset: 0.6rem; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ask h3 { margin: 0; font-size: 1.05rem; }
.ask p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.45; }
.ask p strong { color: var(--text); }

/* odds in perspective */
.band-deep { background: var(--band-hero); color: var(--on-hero); }
.big-stat { font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 0.75rem; font-variant-numeric: tabular-nums; }
.big-stat-note { font-size: 1.08rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 36rem; }
.band-deep .big-stat-note { color: var(--on-hero-muted); }
.band-deep .big-stat-note strong { color: var(--on-hero); }
.myth-card { padding: 1.5rem; border-radius: 16px; background: color-mix(in srgb, var(--on-hero) 8%, transparent); border: 1px solid color-mix(in srgb, var(--on-hero) 18%, transparent); }
.myth-card .myth-icon { width: 2rem; height: 2rem; color: #ffb347; }
.myth-card h3 { margin: 0.6rem 0 0.4rem; font-size: 1.2rem; color: var(--on-hero); }
.myth-card p { margin: 0 0 0.9rem; color: var(--on-hero-muted); line-height: 1.5; }
.myth-card p strong { color: var(--on-hero); }
.myth-card a, .band-deep a:not(.btn) { color: var(--on-hero); font-weight: 600; }

/* if you saved it instead */
.band-save { background: var(--band-save); }
.band-save .stat-title, .band-save .big-stat { color: var(--band-save-ink); }
.save-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.save-links a { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.save-links a:hover { border-color: var(--band-save-ink); text-decoration: none; }
.save-links .ask-icon { grid-row: auto; background: color-mix(in srgb, var(--band-save-ink) 14%, transparent); color: var(--band-save-ink); }
.save-links span:not(.ui-icon) { display: grid; gap: 0.15rem; color: var(--muted); font-size: 0.9rem; }
.save-links strong { color: var(--text); font-size: 1rem; }
.save-links .save-arrow { flex: none; margin-left: auto; width: 1.25rem; height: 1.25rem; color: var(--band-save-ink); transition: transform 0.18s ease; }
.save-links a:hover .save-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .save-links a:hover .save-arrow { transform: none; } }

/* explore */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.explore-grid.fill { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.explore-group { margin: 1.25rem 0 0.75rem; }
.explore-group:first-of-type { margin-top: 0; }
.explore { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: transform 0.12s, border-color 0.12s; }
.explore:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.explore h3 { margin: 1rem 1.1rem 0.3rem; font-size: 1.1rem; }
.explore p { margin: 0 1.1rem 1.1rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.explore-photo { display: block; width: 100%; height: 8rem; object-fit: cover; }
.explore-art { display: grid; place-items: center; height: 8rem; color: #fff; background: var(--game-weekday_lotto); }
.explore-art .ui-icon { width: 3rem; height: 3rem; }
.explore-art.keno { background: var(--game-set_for_life); }
.explore-art.more { background: var(--game-saturday_lotto); }

/* who it's for */
.who-grid { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0.75rem; }
.who-card { display: flex; align-items: center; gap: 0.9rem; height: 100%; box-sizing: border-box; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.who-card:hover, .who-card:focus-visible { border-color: var(--accent); }
.who-card:hover .who-go { transform: translateX(3px); }
.who-chip { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tag-bg); }
.who-chip .who-icon { width: 1.35rem; height: 1.35rem; color: var(--accent); }
.who-text { flex: 1; min-width: 0; display: grid; align-content: start; gap: 0.15rem; }
.who-text strong { font-size: 1rem; }
.who-text span { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.who-go { flex: none; color: var(--accent); transition: transform 0.15s; }
.who-more { margin: 0; }
.who-more a { font-weight: 600; }
.who-updated { margin: 0.35rem 0 0; }
/* Phones: a two-by-three grid of compact tiles, icon on top, no arrow */
@media (max-width: 560px) {
  .who-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .who-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.8rem; }
  .who-chip { width: 2.2rem; height: 2.2rem; }
  .who-chip .who-icon { width: 1.15rem; height: 1.15rem; }
  .who-text strong { font-size: 0.95rem; line-height: 1.25; }
  .who-text span { font-size: 0.85rem; }
  .who-go { display: none; }
}
@media (max-width: 340px) { .who-grid { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .band > .wrap { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .band-hero .wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
@media (max-width: 480px) {
  .band-hero .hero-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .jackpot-amount { font-size: 2rem; }
}
@media (max-width: 640px) {
  /* jackpots: a row you swipe through, the next card peeking in */
  .jackpot-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0.25rem 16px 0.75rem; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .jackpot-cards::-webkit-scrollbar { display: none; }
  .jackpot-card { scroll-snap-align: start; }
  /* explore: image beside the text */
  .explore { display: grid; grid-template-columns: 6.5rem 1fr; grid-template-rows: auto 1fr; }
  .explore-photo, .explore-art { grid-row: span 2; height: 100%; min-height: 6.5rem; }
  .explore-art .ui-icon { width: 2.2rem; height: 2.2rem; }
  .explore h3 { margin: 0.85rem 0.9rem 0.2rem; }
  .explore p { margin: 0 0.9rem 0.85rem; font-size: 0.88rem; }
  .ask { padding: 0.95rem; }
}

/* Odds ladder and chances over time */
.ladder-wrap { overflow-x: auto; margin: 0 -0.25rem; }
.ladder { display: block; width: 100%; min-width: 620px; height: auto; font-family: inherit; }
.ladder-grid { stroke: var(--grid); stroke-width: 1; }
.ladder-tick { font-size: 11px; fill: var(--muted); }
.ladder-label { font-size: 11px; font-weight: 700; fill: var(--text); }
.ladder-label.muted-label { font-weight: 600; fill: var(--muted); }
.ladder-name { font-size: 12px; font-weight: 600; fill: var(--text); }
.ladder-dot { stroke: var(--surface); stroke-width: 2; }
.ladder-coin { fill: var(--muted); opacity: 0.7; }
.ladder-current { fill: var(--tag-bg); }
.odds-calc { margin-top: 0.5rem; }
.calc-money { border-left: 4px solid var(--accent-2); padding: 0.5rem 0 0.5rem 0.9rem; margin-top: 0.25rem; }
.calc-money p { margin: 0; }
.imagine { margin: -0.6rem 0 1.4rem; max-width: 36rem; color: var(--text); font-weight: 600; }
.jackpot-yours { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); font-size: 0.85rem; color: var(--muted); }
.jackpot-yours strong { color: var(--text); }

/* Pokies by area */
.pokies-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pokies-states .panel { margin: 0; }
.pokies-state .big-stat { color: var(--text); font-size: clamp(2.2rem, 5vw, 3rem); }
.pokies-search { max-width: 28rem; }
.pokies-card { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-left: 4px solid var(--accent-2); border-radius: var(--radius); background: var(--bg); }
.pokies-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.pokies-total { margin: 0 0 0.5rem; font-size: 1.05rem; }
.pokies-parts { margin: 0 0 0.6rem; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.credit { margin-top: 0.75rem; }
.explore-art.pokies { background: var(--accent-2); }
.explore-art.rent { background: #17784f; }
.area-hero .big-stat { color: var(--text); }
.compare-bars { display: grid; gap: 0.6rem; margin: 0.25rem 0 1rem; max-width: 40rem; }
.compare-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; gap: 0.75rem; align-items: center; }
.compare-label { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.compare-track { height: 0.8rem; border-radius: 999px; background: var(--grid); overflow: hidden; }
.compare-fill { display: block; height: 100%; border-radius: 999px; }
.compare-fill.area { background: var(--accent-2); }
.compare-fill.state { background: var(--muted); }
.compare-value { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.5rem; text-align: right; }
.save-panel .savings-split dd { color: var(--band-save-ink); }
.near-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.35rem; }
.crumbs { margin: 0 0 0.5rem; color: var(--muted); }

/* Where each dollar goes; division 1 letdowns */
.dollar { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--grid); }
.dollar-out { margin-top: 0.75rem; }
.dollar-bar { display: flex; height: 1.5rem; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); max-width: 40rem; }
.dollar-bar .seg { display: block; height: 100%; }
.seg.kept, .swatch.kept { background: var(--muted); }
.seg.small, .swatch.small { background: var(--ball-main); }
.seg.jackpot, .swatch.jackpot { background: var(--ball-supp); }
.dollar-legend { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.3rem; }
.dollar-legend li { display: flex; align-items: center; gap: 0.45rem; }
.letdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; margin-bottom: 0.5rem; }
.letdown { border: 1px solid var(--border); border-top: 4px solid var(--game); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--bg); }
.letdown h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.letdown p { margin: 0 0 0.4rem; }
.letdown-stat strong { font-size: 1.6rem; }

/* What Australians lose: chart series (validated: blue, red, purple, gold) and loss bars */
:root { --series-1: #2f63d6; --series-2: #d1342f; --series-3: #7c4ddb; --series-4: #b98200; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --series-1: #4c7be6; --series-2: #e2554f; --series-3: #9472e8; --series-4: #ad7e0c; }
}
:root[data-theme="dark"] { --series-1: #4c7be6; --series-2: #e2554f; --series-3: #9472e8; --series-4: #ad7e0c; }
.loss-bars { display: grid; gap: 0.55rem; margin: 0.25rem 0 1rem; }
.loss-row { display: grid; grid-template-columns: minmax(7rem, 13rem) 1fr minmax(8.5rem, auto); gap: 0.75rem; align-items: center; }
.loss-label { font-weight: 600; font-size: 0.92rem; }
.loss-track { display: block; height: 0.8rem; border-radius: 4px; background: var(--grid); overflow: hidden; }
.loss-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--series-2); }
.loss-fill.lotto { background: var(--series-4); }
.loss-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.state-bar-cell { width: 35%; }
.state-bar-cell .loss-fill { background: var(--series-1); }
@media (max-width: 560px) {
  .loss-row { grid-template-columns: 1fr auto; }
  .loss-row .loss-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .div-desc.phone-only { display: block; font-weight: 400; margin-top: 0.1rem; }
}

/* Guides (/guides) */
.guide, .guide-help, .guide-related { max-width: 46rem; }
.guide-lead { font-size: 1.1rem; }
.guide-body { font-size: 1.05rem; }
.guide-body p, .guide-body li { line-height: 1.65; }
.guide-body h2 { margin: 1.6rem 0 0.5rem; font-size: 1.25rem; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.guide-body a, .guide-try a, .guide-help a { text-decoration: underline; }
.guide-try { border-left: 4px solid var(--accent); }
.guide-help { background: var(--band-save); border-color: transparent; }
.guide-help h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem; color: var(--band-save-ink); margin-top: 0; }
.guide-topic { margin-bottom: 1.5rem; }
.guide-cards { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.guide-card { display: grid; gap: 0.35rem; height: 100%; box-sizing: border-box; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.guide-card:hover, .guide-card:focus-visible { border-color: var(--accent); }
.guide-card strong { font-size: 1.05rem; color: var(--accent); }
.guide-card span:not(.ui-icon) { color: var(--muted); line-height: 1.45; font-size: 0.95rem; }
.guide-card-icon { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.guide-related h2 { font-size: 1.2rem; }
.guide-photo { margin: 0 0 1rem; }
.guide-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--grid); }
.guide-photo figcaption { margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.guide-photo figcaption a { color: inherit; }
.guide-card.has-photo { padding-top: 0; overflow: hidden; }
.guide-card-photo { display: block; width: calc(100% + 2.2rem); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 -1.1rem 0.4rem; }

/* ==========================================================================================
   Refresh (October 2026): Geist type, softer layered surfaces, a frosted sticky header, pill
   buttons, roomier sections, a bento Explore grid and a column footer. Overrides the rules
   above, so it can be read (or rolled back) on its own.
   ========================================================================================== */
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-latin-wght.woff2") format("woff2-variations"), url("/static/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #f7f8fb;
  --border: #e4e7ee;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.05);
  --shadow-md: 0 2px 4px rgb(16 24 40 / 0.04), 0 12px 28px -10px rgb(16 24 40 / 0.14);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-bg: rgb(255 255 255 / 0.72);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0f15; --surface: #141821; --border: #252b37;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 32px -12px rgb(0 0 0 / 0.6);
    --header-bg: rgb(12 15 21 / 0.7);
  }
}
:root[data-theme="dark"] {
  --bg: #0c0f15; --surface: #141821; --border: #252b37;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 32px -12px rgb(0 0 0 / 0.6);
  --header-bg: rgb(12 15 21 / 0.7);
}

body { font-family: var(--font); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
table, .num, .facts dd, .big-stat, .jackpot-amount, .ball { font-variant-numeric: tabular-nums; }
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; margin-bottom: 0.4rem; }
h2 { font-size: 1.15rem; font-weight: 650; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* header: frosted glass that the page scrolls under */
.topbar {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.brand { font-size: 1.15rem; letter-spacing: -0.03em; }
@media (min-width: 641px) {
  .topbar nav { gap: 0.15rem; }
  .topbar nav > a, .nav-menu summary { padding: 0.4rem 0.75rem; border-radius: 999px; font-weight: 500; transition: background 0.15s, color 0.15s; }
  .topbar nav > a:hover, .nav-menu summary:hover, .nav-menu[open] summary { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); text-decoration: none; }
  .topbar nav > a[aria-current="page"], .nav-menu summary.active { background: var(--tag-bg); color: var(--accent); font-weight: 600; }
  .mega { border-bottom: 0; box-shadow: var(--shadow-md); background: var(--surface); }
}

/* page heads and surfaces */
main { padding-top: 2.25rem; padding-bottom: 4rem; }
.page-head { margin-bottom: 1.75rem; }
.page-head .muted { font-size: 1.05rem; max-width: 48rem; line-height: 1.55; }
.crumbs { font-size: 0.85rem; letter-spacing: 0.01em; }
.card, .panel { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.35rem 1.5rem; }
.panel { margin-bottom: 1.25rem; }
.panel h2, .card h2 { font-size: 1.2rem; }
.kpi, .game-stat, .outlook-card, .match-card, .question, .section-tile, .savings-split > div, .syn-entry, .verdict-banner { border-radius: var(--radius); }
.grid-2, .grid-3, .cards { gap: 1.25rem; }
.facts dt { font-size: 0.74rem; letter-spacing: 0.06em; font-weight: 600; }

/* buttons and fields */
.btn { border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 550; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s; box-shadow: var(--shadow-sm); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; transition: none; } }
input[type="text"], input[type="search"], input[type="number"], input:not([type]), select, textarea { border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* tables: quieter heads, a row highlight */
th { font-size: 0.74rem; letter-spacing: 0.05em; font-weight: 600; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* homepage bands: more air, softer tints */
.band > .wrap { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.band-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.band-head h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.band-tint { background: var(--band-tint); }

/* hero: big type over a soft mesh of the game colours */
.band-hero { background: var(--band-hero); }
.band-hero .wrap { padding-top: 5.5rem; padding-bottom: 5rem; }
.band-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 750; }
.band-hero .hero-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 36rem; }
.band-hero .btn { padding: 0.75rem 1.35rem; }
.band-hero .btn.primary { background: #fff; color: var(--band-hero); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5); }
.btn.ghost, .btn.on-dark { background: rgb(255 255 255 / 0.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; }
.trust { gap: 0.6rem; }
.trust li { padding: 0.35rem 0.75rem; border-radius: 999px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); font-size: 0.85rem; }
.hero-art { max-width: 420px; filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.35)); }

/* cards across the homepage share one look */
.jackpot-card, .ask, .save-links a, .explore, .who-card, .guide-card, .myth-card { border-radius: var(--radius-lg); }
.jackpot-card, .ask, .save-links a, .explore, .who-card, .guide-card { box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s; }
.jackpot-card:hover, .ask:hover, .save-links a:hover, .explore:hover, .who-card:hover, .guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.jackpot-card { border-top-width: 1px; position: relative; overflow: hidden; }
.jackpot-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--game); }
.jackpot-amount { font-size: 2.6rem; letter-spacing: -0.04em; font-weight: 750; }
.big-stat { letter-spacing: -0.045em; font-weight: 750; }
.band-save { background: var(--band-save); }
.band-deep { background: var(--band-hero); }
.myth-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Explore: a bento grid, one big feature tile, wide and full-width horizontal cards */
.explore-grid.bento { gap: 1.25rem; }
.explore-group { margin: 2rem 0 0.9rem; }
.explore-group:first-of-type { margin-top: 0; }
.explore-art, .explore-photo { height: 9rem; }
.explore-art .ui-icon { width: 3.25rem; height: 3.25rem; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.25)); }
.explore-body { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: 0.35rem; }
.explore .explore-body h3, .explore .explore-body p { margin: 0; }
.explore .explore-body h3 { font-size: 1.15rem; }
@media (min-width: 900px) {
  .explore-grid.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .explore.big { grid-column: span 2; grid-row: span 2; }
  .explore.big .explore-art { flex: 1; min-height: 14rem; }
  .explore.big .explore-art .ui-icon { width: 5rem; height: 5rem; }
  .explore.big .explore-body h3 { font-size: 1.5rem; }
  .explore.big .explore-body p { font-size: 1rem; }
  .explore.wide { grid-column: span 2; }
  .explore.long { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .explore.long .explore-art, .explore.long .explore-photo { width: 34%; height: auto; min-height: 9rem; flex: none; }
  .explore.long .explore-body { align-content: center; padding: 1.5rem 1.75rem; }
  .explore.long .explore-body h3 { font-size: 1.35rem; }
}

/* footer: brand, link columns, then the fine print */
.site-footer { max-width: none; margin-top: 2rem; padding: 3.5rem 16px 2.5rem; background: var(--surface); border-top: 1px solid var(--border); font-size: 0.9rem; }
.site-footer > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.2fr); gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.footer-brand .brand { margin-bottom: 0.75rem; }
.footer-brand p { max-width: 24rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1.5rem; }
.footer-cols h2 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin: 0 0 0.75rem; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .footer-cols a { color: var(--muted); text-decoration: none; }
.site-footer .footer-cols a:hover { color: var(--accent); }
.footer-help { padding-top: 1.5rem; }
.site-footer p.footer-help, .site-footer p.footer-legal { margin-top: 0.75rem; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-footer > p { margin-left: auto; margin-right: auto; }

/* Labels over big figures: a plain sentence-case heading, never an uppercase eyebrow */
.stat-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; }
.stat-title .ui-icon { width: 1.15em; height: 1.15em; }
.band-deep .stat-title { color: var(--on-hero-muted); }
.pokies-state .stat-title, .area-hero .stat-title { color: var(--muted); }
.save-panel .stat-title { color: var(--band-save-ink); }
.explore-group { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; color: var(--muted); }

/* Pokies: losses over time (Queensland council pages) */
.history-chart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 11rem auto; gap: 0.25rem 0.5rem; margin: 0.5rem 0 0.75rem; max-width: 46rem; }
.history-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.75rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; margin: -0.45em 0; }
.history-plot { display: grid; grid-template-columns: repeat(var(--bars), 1fr); gap: 2px; align-items: end; border-bottom: 1px solid var(--muted); border-top: 1px dashed var(--grid); min-width: 0; }
.history-bar { display: block; min-height: 1px; background: var(--accent-2); border-radius: 4px 4px 0 0; box-sizing: border-box; }
.history-bar:hover { opacity: 0.75; }
.history-bar.partial, .history-bar.so-far { background: transparent; border: 2px solid var(--accent-2); border-bottom: 0; }
.history-bar.so-far { border-style: dashed; }
.history-labels { grid-column: 2; display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }
.history-key { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.history-key li { display: flex; align-items: center; gap: 0.4rem; }
.history-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--accent-2); flex: none; box-sizing: border-box; }
.history-swatch.partial, .history-swatch.so-far { background: transparent; border: 2px solid var(--accent-2); }
.history-swatch.so-far { border-style: dashed; }

/* Money: bank products (Consumer Data Right) */
.money-nav { margin: -0.5rem 0 1.5rem; }
.money-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.money-tiles .panel { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.money-tile .stat-title { color: var(--muted); }
.money-tile .big-stat { color: var(--text); font-size: clamp(2.2rem, 5vw, 3rem); }
.money-tile .btn { margin-top: auto; }
.money-notice { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--tag-bg); padding: 0.75rem 1rem; margin: 0.75rem 0; line-height: 1.5; }
.money-table td { vertical-align: top; }
.money-table td:first-child, .money-table td:nth-child(2) { overflow-wrap: break-word; min-width: 7rem; }
.money-cond { min-width: 14rem; max-width: 26rem; }
.money-conds { margin: 0 0 0.25rem; padding-left: 1.1rem; }
.money-conds li { margin: 0.1rem 0; }
.money-words summary { cursor: pointer; color: var(--accent); }
.money-words p { margin: 0.35rem 0 0.25rem; color: var(--muted); white-space: pre-line; }
.money-table .tag { white-space: nowrap; }
.sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
th:not([aria-sort]) .sort-mark::after { content: "↕"; color: var(--muted); font-size: 0.8em; }
th.num .sort-btn { justify-content: flex-end; text-align: right; }
.money-filter { margin: 0.25rem 0 0.5rem; }
.money-filter legend { float: none; width: 100%; margin: 0 0 0.4rem; }
.money-fixed { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem 1rem; margin: 0.25rem 0 0.75rem; width: 100%; }
.money-fixed dt { color: var(--muted); font-size: 0.9rem; }
.money-fixed dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.money-formula .formula { overflow-x: auto; font-size: 1.05rem; }
.money-formula code { white-space: normal; }
.money-banks { columns: 3 14rem; column-gap: 1.5rem; padding-left: 1.1rem; margin: 0.5rem 0; }
.money-banks li { break-inside: avoid; margin: 0.2rem 0; }
.loss-fill.money { background: var(--series-1); }
.explore-art.money { background: #0f766e; }
.explore-art.area { background: #7c3aed; }
.explore-art.fuel { background: #b45309; }
.explore-art.power { background: #0e7490; }
.power-tiles { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 640px) {
  .money-cond { min-width: 11rem; }
  .money-banks { columns: 1; }
}

/* Your area */
.area-search { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; max-width: 34rem; }
.area-search .field { flex: 1 1 14rem; }
.area-results { margin: 1rem 0 0.5rem; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.area-results a { font-weight: 600; }
.area-what { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.area-what li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.area-what .icon { margin-top: 0.2rem; }
.area-az { margin: 0; padding: 0; list-style: none; columns: 14rem auto; column-gap: 1.5rem; }
.area-az li { padding: 0.15rem 0; break-inside: avoid; }
.area-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.area-tiles .panel { margin: 0; }
.area-tiles.quad { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.area-tile .big-stat { color: var(--text); }
.area-tile > :last-child { margin-bottom: 0; }
.area-crime + .area-crime { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--grid); }
.area-crime h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.bonus-checks { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.bonus-checks li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.bonus-checks .ui-icon { margin-top: 0.15rem; }
.bonus-checks strong { display: block; }
.bonus-met .ui-icon { color: var(--ok); }
.bonus-missed .ui-icon { color: var(--error); }
.bonus-check .ui-icon { color: var(--muted); }
.suburb-table th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: 0.95rem; font-weight: 500; color: var(--text); }
.suburb-table thead th { white-space: normal; }
.suburb-sub { font-size: 1rem; margin: 0.75rem 0 0.4rem; }
.school-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.35rem; }
.school-list .small { display: block; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--grid); }
.compare-table thead th { font-size: 1.05rem; }
.compare-table thead th a { font-weight: 700; }
.compare-table th[scope="row"] { font-weight: 600; white-space: nowrap; color: var(--muted); }
.compare-table th[scope="row"] .ui-icon { margin-right: 0.4rem; vertical-align: -0.15em; }
.compare-table td strong { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.compare-table td .small, .compare-table th .small { display: block; font-weight: 400; margin-top: 0.15rem; }
@media (max-width: 640px) {
  .compare-table th[scope="row"] { white-space: normal; }
  .compare-table th, .compare-table td { padding: 0.65rem 0.4rem; }
}