/* All Knowing — shared styles.
   Colours come from tokens.css only. Mobile first:
   640px and up switches to the wide layout, 960px and up shows the full header. */

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
}

a {
  color: var(--link);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* On the ink band the focus ring is amber */
:is(.site-header, .band, .join-card) :focus-visible {
  outline-color: var(--band-accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
}

.container {
  --gutter: 20px;
  max-width: calc(1280px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 640px) {
  .container {
    --gutter: var(--space-8);
  }
}

/* Buttons. Content-box, as in the reference: the 1px border sits outside the minimum height,
   so outline buttons are 46px (or 50px) tall and filled ones 44px (or 48px). */

.btn {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn-lg {
  min-height: 48px;
  padding-inline: 22px;
  font-size: var(--text-body);
}

/* Primary: amber with dark text, on the page and on the band */
.btn-primary {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
}

/* Secondary: outlined. On the ink band */
.btn-band {
  border-color: var(--band-line-strong);
  color: var(--band-ink);
}

.btn-band:hover {
  border-color: var(--band-muted);
}

/* On the page */
.btn-line {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-line:hover {
  border-color: var(--ink-muted);
}

/* AK monogram tile (placeholder until the logo files are ready) */

.tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Ink band: header, hero, stats and last-10 strip (the membership block uses the same colours) */

.band {
  background: var(--band-bg);
  color: var(--band-ink);
}

/* In dark mode the page is darker than the band, so a hairline keeps its edge visible */
[data-theme="dark"] .band {
  border-bottom: 1px solid var(--band-line);
}

/* Profit by sign on the band: the bright result colours, since the band is dark in both modes */
.band .is-gain {
  color: var(--win);
}

.band .is-loss {
  color: var(--loss);
}

/* Header (part of the ink band) */

.site-header {
  border-bottom: 1px solid var(--band-line);
  background: var(--band-bg);
  color: var(--band-ink);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  margin-right: auto;
  color: var(--band-ink);
  text-decoration: none;
}

.brand .tile {
  width: 34px;
  height: 34px;
  background: var(--band-accent);
  color: var(--band-on-accent);
  font-size: 14px;
}

.brand-name {
  font-weight: 700;
}

/* Below 360px the header row can't fit the name: show the tile only, keep the name for screen readers */
@media (max-width: 359.98px) {
  .brand .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.header-subscribe {
  order: 1;
  padding-inline: 14px;
  font-size: var(--text-small);
}

.menu-button {
  display: flex;
  order: 2;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--band-ink);
  cursor: pointer;
}

.menu-button .icon-close,
.menu-button[aria-expanded="true"] .icon-open {
  display: none;
}

.menu-button[aria-expanded="true"] .icon-close {
  display: block;
}

/* Phones and tablets: the menu is a panel under the header row */
.site-menu {
  display: none;
  order: 3;
  flex-basis: 100%;
  margin-top: var(--space-1);
  padding-block: var(--space-2) var(--space-1);
  border-top: 1px solid var(--band-line);
}

@media (max-width: 959.98px) {
  .menu-button[aria-expanded="true"] + .site-menu {
    display: block;
  }

  .site-nav {
    display: flex;
    flex-direction: column;
  }

  .site-nav a {
    color: var(--band-ink);
    font-size: var(--text-body);
  }

  /* Every link is bright in the panel, so the current page is underlined instead */
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .menu-actions {
    padding-block: var(--space-2);
  }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--band-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--band-ink);
}

.menu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Bet calculator: an icon button in the header row on every screen, left of Subscribe; amber on
   the calculator page itself. "Bet calculator" also sits in the phone menu (never in the desktop nav). */
.calc-button {
  display: inline-flex;
  flex-shrink: 0;
  order: 1;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--band-ink);
}

.calc-button:hover {
  border-color: var(--band-muted);
}

.calc-button[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* Discord: icon only, the white Discord logo on Discord's blurple, in the header and the menu */
.discord-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-md);
  background: var(--discord);
  color: var(--on-discord);
}

@media (min-width: 960px) {
  .site-header-inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding-block: 14px;
  }

  .brand {
    gap: 10px;
    margin-right: 0;
  }

  .brand .tile {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .brand-name {
    font-size: 17px;
  }

  .menu-button {
    display: none;
  }

  .site-menu {
    display: contents;
  }

  .site-nav {
    display: flex;
    gap: 28px;
    margin-inline: auto;
    padding-inline: 10px;
  }

  /* After the nav: the calculator button, Discord, Subscribe */
  .site-nav .nav-calculator {
    display: none;
  }

  .calc-button {
    order: 0;
  }

  .menu-actions {
    order: 1;
  }

  .header-subscribe {
    order: 2;
    padding-inline: 18px;
    font-size: 15px;
  }
}

/* Hero */

.hero {
  padding-block: 36px var(--space-6);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--band-accent);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 var(--space-4);
  color: var(--band-ink);
  font-size: var(--text-hero-mobile);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.hero-lede {
  margin: 0 0 var(--space-6);
  color: var(--band-muted);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  .hero {
    padding-block: var(--space-16) var(--space-12);
  }

  /* Text left, record right; the record drops below when there isn't room for both */
  .hero-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
  }

  .hero-copy {
    flex: 1 1 480px;
    min-width: 0;
  }

  .hero-record {
    flex: 1 1 520px;
    min-width: 0;
  }

  .eyebrow {
    margin-bottom: 18px;
    line-height: inherit;
  }

  .hero h1 {
    margin-bottom: 20px;
    font-size: var(--text-hero);
    line-height: 1.04;
  }

  .hero-lede {
    max-width: 520px;
    margin-bottom: var(--space-8);
    font-size: var(--text-body-lg);
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* Headline record: stat cards and the sport split, live from the sheet */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.stat {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--band-surface);
}

.stat dt {
  color: var(--band-muted);
  font-size: var(--text-eyebrow);
}

.stat dd {
  margin: var(--space-1) 0 0;
  color: var(--band-ink);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
}

.split {
  margin: 0;
  padding: var(--space-1) 14px;
  border-radius: var(--radius-md);
  background: var(--band-surface);
  font-family: var(--font-mono);
  font-size: 13px;
  list-style: none;
}

.split li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
}

.split li + li {
  border-top: 1px solid var(--band-line);
}

.split-sport,
.split-units {
  color: var(--band-ink);
}

.split-picks {
  color: var(--band-muted);
}

[aria-busy="true"] .stat dd,
[aria-busy="true"] .split-units {
  color: var(--band-muted);
}

.record-error {
  margin: 0;
  padding: var(--space-4) 18px;
  border-radius: var(--radius-md);
  background: var(--band-surface);
  color: var(--band-muted);
  font-size: var(--text-small);
}

@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
  }

  .stat {
    padding: var(--space-4) 18px;
  }

  .stat dd {
    font-size: var(--text-stat);
  }

  .split {
    padding: 6px 18px;
  }
}

/* Last 10 graded strip, across the bottom of the band */

.last10 {
  border-top: 1px solid var(--band-line);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

.last10-inner {
  padding-block: 14px var(--space-4);
}

.last10-label {
  margin: 0 0 var(--space-2);
  color: var(--band-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.last10-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.last10-pills:empty {
  display: none;
}

.last10-none {
  color: var(--band-muted);
}

/* Pills and logo squares are content-box, as in the reference: the minimum width excludes padding */
.band-pill {
  box-sizing: content-box;
  display: inline-block;
  min-width: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 20px;
  text-align: center;
}

/* Solid result pills, the same on the band as on the page */
.band-pill.is-won {
  background: var(--win);
  color: var(--on-win);
}

.band-pill.is-lost {
  background: var(--loss);
  color: var(--on-loss);
}

.band-pill.is-push {
  background: var(--push-bg);
  color: var(--push-ink);
}

.last10-note {
  margin: 0;
  color: var(--band-muted);
}

@media (min-width: 640px) {
  .last10-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-block: 14px;
  }

  .last10-label,
  .last10-pills {
    margin: 0;
  }

  .last10-pills {
    gap: 6px;
  }

  .band-pill {
    padding-inline: 6px;
  }

  .last10-note {
    margin-left: auto;
  }
}

/* Homepage body: data log preview with the side column */

.home-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-8);
}

.home-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .home-grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
    padding-block: var(--space-12) 72px;
  }

  .log {
    box-sizing: content-box;
    flex: 999 1 640px;
    min-width: 0;
  }

  .home-aside {
    flex: 1 1 300px;
    min-width: 0;
    gap: var(--space-6);
  }
}

/* Data log preview. Phones: heading and filters above a card of stacked rows.
   Wider: one card with a header row, a table and a footer row. */

.log-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.log-sub {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

/* The sport toggle: under the heading on phones, beside it from 640px. The 5px is the wrapper's
   tap-area padding, taken back out (see .seg-scroll). */
.log-head .seg-scroll {
  margin-block: calc(var(--space-4) - 5px);
}

.log-body {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.log-status {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.log-table-wrap {
  display: none;
}

.log-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.log-item {
  padding: 8.75px var(--space-4);
}

.log-item + .log-item {
  border-top: 1px solid var(--line);
}

.log-item-top,
.log-who,
.log-book {
  display: flex;
  align-items: center;
}

.log-item-top,
.log-who {
  gap: var(--space-3);
}

.log-book {
  gap: var(--space-2);
}

/* Headshot placeholder until headshots are decided */
.avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--push-bg);
  color: var(--ink-muted);
}

/* Player photo from ESPN (see CLAUDE.md, "Player photos"); grey behind it while it loads */
.avatar {
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  background: var(--push-bg);
  object-fit: cover;
  object-position: top;
}

/* Bookmaker logo, from /assets/img/books/ (see CLAUDE.md, "Bookmaker logos") */
.book-logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.log-item-who {
  flex: 1;
  min-width: 0;
}

.log-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

/* [league logo] Points · 26 Oct */
.log-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-eyebrow);
}

.log-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-item-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.log-item-units {
  font-family: var(--font-mono);
  font-size: 13px;
}

.log-item-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: 48px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

/* Units by sign: the result text colours for a gain or a loss, neutral for zero */
.log .is-gain {
  color: var(--win-text);
}

.log .is-loss {
  color: var(--loss-text);
}

.log .is-even {
  color: var(--push);
}

.result-pill {
  box-sizing: content-box;
  display: inline-block;
  min-width: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

/* Solid result pills: W in bright green and L in bright red, both with dark text; P in grey */
.result-pill.is-won {
  background: var(--win);
  color: var(--on-win);
}

.result-pill.is-lost {
  background: var(--loss);
  color: var(--on-loss);
}

.result-pill.is-push {
  background: var(--push-bg);
  color: var(--push-ink);
}

.log-foot {
  padding: 14px var(--space-4);
  border-top: 1px solid var(--line);
}

.log-count {
  margin: 0 0 10px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

.log-foot .btn {
  display: flex;
}

@media (min-width: 640px) {
  .log {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
  }

  .log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 20px var(--space-6);
    border-bottom: 1px solid var(--line);
  }

  .log-head .seg-scroll {
    margin-block: -5px;
  }

  .log-body {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .log-status {
    padding-inline: var(--space-6);
  }

  .log-list {
    display: none;
  }

  /* Relative so the screen-reader-only text in the pills scrolls with the table instead of widening the page */
  .log-table-wrap {
    position: relative;
    display: block;
    overflow-x: auto;
  }

  .log-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
  }

  .log-count {
    margin: 0;
  }

  .log-foot .btn {
    display: inline-flex;
  }
}

.log-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.log-table thead tr {
  background: var(--surface);
  text-align: left;
}

.log-table th {
  padding: 10px var(--space-3);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.log-table td {
  padding: 8.75px var(--space-3);
}

.log-table th:first-child,
.log-table td:first-child {
  padding-inline: var(--space-6);
}

.log-table th:last-child,
.log-table td:last-child {
  padding-right: var(--space-6);
}

.log-table tbody tr {
  border-top: 1px solid var(--line);
}

.log-table .cell-end {
  text-align: right;
}

/* Odds share one centre line, so 412 sits with −120 */
.log-table .cell-mid {
  text-align: center;
}

.log-table .log-name {
  font-size: inherit;
}

.log-table .book-name {
  color: var(--ink-muted);
}

/* Side column cards */

.how {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.unit-card {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card-title {
  margin: 0 0 var(--space-4);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.unit-card .card-title {
  margin-bottom: 6px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  font-size: var(--text-small);
  list-style: none;
}

.steps li {
  display: flex;
  gap: var(--space-3);
}

.step-num {
  padding-top: 2px;
  color: var(--link);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
}

.steps strong {
  font-weight: 700;
}

.step-text {
  color: var(--ink-muted);
}

.unit-intro {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-body);
}

.unit-result {
  margin: 14px 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 15px;
}

.unit-result output {
  font-weight: 500;
}

.text-link {
  font-size: var(--text-small);
  font-weight: 500;
}

@media (min-width: 640px) {
  .how,
  .unit-card {
    padding: var(--space-6);
  }

  .field {
    font-size: 15px;
  }
}

/* Membership block */

.join {
  padding: var(--space-8) 20px 0;
}

/* As in the reference, the 1280px maximum is the card's content width, so on very wide
   screens the card reaches a little past the content above it */
.join-card {
  box-sizing: content-box;
  max-width: 1280px;
  margin-inline: auto;
  padding: 28px 22px;
  border: 1px solid var(--band-bg);
  border-radius: var(--radius-lg);
  background: var(--band-bg);
  color: var(--band-ink);
}

[data-theme="dark"] .join-card {
  border-color: var(--band-line);
}

.join-card h2 {
  margin: 0 0 var(--space-3);
  color: var(--band-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.join-features {
  margin: 0 0 20px;
  padding: 0;
  color: var(--band-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  line-height: 1.9;
  list-style: none;
}

.join-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 18px;
}

.join-amount {
  color: var(--band-ink);
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

.join-period {
  color: var(--band-muted);
}

.join-subscribe {
  display: flex;
}

.join-note {
  margin: var(--space-3) 0 0;
  color: var(--band-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  text-align: center;
}

@media (min-width: 640px) {
  .join {
    padding: 0 var(--space-8) 80px;
  }

  .join-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px var(--space-12);
    padding: 36px 40px;
  }

  .join-copy {
    flex: 1 1 360px;
    min-width: 0;
  }

  .join-card h2 {
    margin-bottom: var(--space-2);
    font-size: var(--text-h2);
    line-height: 1.2;
  }

  /* One line on wider screens: Written analysis · Members' Discord · … */
  .join-features {
    margin: 0;
    font-size: 13px;
    line-height: inherit;
  }

  .join-features li {
    display: inline;
  }

  .join-features li + li::before {
    content: "· ";
  }

  .join-more,
  .join-note {
    display: none;
  }

  .join-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
  }

  .join-price {
    margin: 0;
  }

  .join-amount {
    font-size: 36px;
  }

  .join-subscribe {
    display: inline-flex;
    padding-inline: 26px;
  }
}

/* Tracker page */

.page-head {
  padding-block: var(--space-8) var(--space-6);
}

.page-head h1 {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page-lede {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
}

@media (min-width: 640px) {
  .page-head h1 {
    font-size: var(--text-h1);
  }
}

.tracker-status {
  margin: 0 0 var(--space-16);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.tracker {
  padding-bottom: var(--space-16);
}

/* Filter bar: a row of filter chips (filter-chips.js) and the count beside it */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

/* Phones: the row scrolls sideways without wrapping. The padding keeps the 44px tap areas
   inside the scroll box, and the negative margin cancels it in the layout. */
@media (max-width: 639.98px) {
  .filter-bar {
    flex-wrap: nowrap;
    max-width: 100%;
    margin-block: -7px;
    padding-block: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }
}

/* Filter chips. Inactive (All): outlined, name and chevron. Active: amber, "League: NBA",
   chevron and a × that clears it. 32px to look at, 44px to tap. */
.filter-chip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.filter-chip:not(.is-active):hover {
  border-color: var(--ink-muted);
}

.filter-chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.filter-chip-main,
.filter-chip-clear {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.filter-chip-main {
  gap: 6px;
  padding: 0 12px;
}

.filter-chip.is-active .filter-chip-main {
  padding-right: 4px;
}

.filter-chip-clear {
  justify-content: center;
  padding: 0 12px 0 8px;
}

/* Invisible tap areas: 30px inside the border, stretched to 44px */
.filter-chip-main::before,
.filter-chip-clear::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}

.filter-chip-clear::before {
  inset: -7px -6px;
}

.filter-chip-chevron {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 140ms ease-out;
}

.filter-chip.is-active .filter-chip-chevron {
  color: inherit;
}

.filter-chip-main[aria-expanded="true"] .filter-chip-chevron {
  transform: rotate(180deg);
}

/* The menu: drops down 6px under its chip (7px from inside the chip's border) */
.filter-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: -1px;
  z-index: 30;
  width: max-content;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(360px, 70vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--menu-bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.3;
  transform-origin: top left;
  animation: filter-menu-in 140ms ease-out;
}

.filter-menu.is-end {
  right: -1px;
  left: auto;
  transform-origin: top right;
}

@keyframes filter-menu-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.filter-handle,
.filter-sheet-title {
  display: none;
}

.filter-options {
  display: grid;
  gap: 2px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.filter-option:hover,
.filter-option:focus-visible,
.filter-option[aria-selected="true"] {
  background: var(--menu-hover);
}

.filter-option:focus-visible {
  outline-offset: -2px;
}

.filter-option[aria-selected="true"] {
  font-weight: 600;
}

/* Radio circle: an outline when off, an amber ring around a card-coloured centre when on */
.filter-radio {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--radio-off);
  border-radius: 50%;
}

.filter-option[aria-selected="true"] .filter-radio {
  border: 4px solid var(--accent);
  background: var(--card);
}

/* Book filter rows: [radio] [logo] bet365, the logo 16px square with 8px each side (the row's 10px
   gap less 2px), in a 16px slot that stays when there's no logo, so every name lines up */
.logo-slot.is-book {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 16px;
  margin-inline: -2px;
}

.logo-slot.is-book .book-logo,
.chip-logo .book-logo {
  display: block;
  width: 16px;
  height: 16px;
}

/* The amber chip: "Book: [logo] bet365", 6px either side of the logo, like the League chip */
.chip-logo {
  display: inline-flex;
  vertical-align: middle;
  margin-inline: 6px;
}

/* A logo that's missing or fails leaves just the name, with a normal space after the colon */
.filter-chip-value .chip-logo:empty,
.filter-chip-value .league-mark:empty {
  margin-inline: 4px 0;
}

@media (pointer: coarse) {
  .filter-option {
    min-height: 44px;
  }
}

/* Phones: the menu is a bottom sheet over a dimmed page; tap the backdrop or swipe down to close */
.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--band-bg) 60%, transparent);
  animation: filter-fade-in 150ms ease-out;
}

@keyframes filter-fade-in {
  from {
    opacity: 0;
  }
}

@media (max-width: 639.98px) {
  .filter-menu {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 80vh;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    transition: transform 150ms ease-out;
    animation: filter-sheet-in 150ms ease-out;
  }

  .filter-menu.is-dragging {
    transition: none;
  }

  .filter-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: 2px;
    background: var(--line-strong);
  }

  .filter-sheet-title {
    display: block;
    margin: 0 0 var(--space-2);
    padding: 0 10px;
    font-size: var(--text-body);
    font-weight: 700;
  }

  .filter-option {
    min-height: 48px;
    font-size: var(--text-body);
  }
}

@keyframes filter-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip-chevron,
  .filter-menu {
    transition: none;
  }

  .filter-menu,
  .filter-backdrop {
    animation: none;
  }
}

.filter-count {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

/* Profit and loss on the tracker: the result text colours, by sign */
.tracker .is-gain {
  color: var(--win-text);
}

.tracker .is-loss {
  color: var(--loss-text);
}

/* Panels: flat surfaces with a hairline */
.panel {
  margin-bottom: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.card-sub {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Neighbouring toggles sit 10px apart; on phones they wrap onto their own lines */
.card-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.card-note {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Segmented toggles: an amber outline on the selected button inside a tinted track.
   .seg is the track (role="group"), .seg-btn each button. A track sits in .seg-scroll, which scrolls
   it sideways when it doesn't fit; its 5px of padding above and below keeps the 44px tap areas
   from being clipped, and the negative margin takes that space back out of the layout. */
.seg-scroll {
  min-width: 0;
  max-width: 100%;
  margin-block: -5px;
  padding-block: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.seg-scroll::-webkit-scrollbar {
  display: none;
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--seg-track);
  vertical-align: top;
}

.seg-btn {
  position: relative;
  flex-shrink: 0;
  height: 26px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* The tap area: 26px to look at, 44px tall to tap */
.seg-btn::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.seg-btn:not([aria-pressed="true"]):hover {
  color: var(--ink);
}

.seg-btn[aria-pressed="true"] {
  border-color: var(--seg-active);
  background: var(--seg-active-bg);
  color: var(--seg-active);
  font-weight: 600;
}

/* A small figure label, e.g. the ROI next to a headline. Scoped, so the homepage filter chips keep their own style. */
.headline .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

.headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}

.big-figure {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

@media (min-width: 640px) {
  .big-figure {
    font-size: var(--text-h1);
  }
}

/* Overview: net profit and the calendar side by side on wide screens, the stats strip under both */
.overview-main {
  display: grid;
}

.profit-card,
.calendar-card {
  min-width: 0;
  padding: 20px;
}

/* The chart takes whatever height the calendar beside it leaves */
.profit-card {
  display: flex;
  flex-direction: column;
}

.calendar-card {
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .profit-card,
  .calendar-card {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .overview-main {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .calendar-card {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.custom-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.date-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.date-field input {
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-body);
}

/* Chart */
.chart {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  margin-top: var(--space-4);
  touch-action: pan-y;
}

@media (min-width: 640px) {
  .chart {
    min-height: 280px;
  }
}

/* Out of the flow, so the chart's size comes from the card and not from the last drawing */
.chart svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
}

.chart-zero,
.chart-guide,
.chart-cursor {
  stroke-width: 1;
}

.chart-zero {
  stroke: var(--line-strong);
}

.chart-guide {
  stroke: var(--line);
  stroke-dasharray: 2 4;
}

.chart-cursor {
  stroke: var(--ink-muted);
  stroke-dasharray: 3 3;
}

/* The running peak: a dashed amber line with its label in amber */
.chart-peak {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart-label.is-peak {
  fill: var(--accent);
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-line.is-gain,
.chart-dot.is-gain {
  stroke: var(--win);
}

.chart-line.is-loss,
.chart-dot.is-loss {
  stroke: var(--loss);
}

.chart-fill {
  stroke: none;
  fill-opacity: 0.15;
}

.chart-fill.is-gain {
  fill: var(--win);
}

.chart-fill.is-loss {
  fill: var(--loss);
}

.chart-dot {
  fill: var(--card);
  stroke-width: 2;
}

.chart-label {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.chart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  max-width: 240px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.chart-tip strong {
  font-weight: 700;
}

.chart-tip span {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Calendar: sizes follow the card's width, so a 7-column month fits a 390px phone */
.calendar-card {
  container-type: inline-size;
}

.cal-weekdays,
.cal-grid.is-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1cqi, 6px);
}

.cal-weekdays {
  margin: var(--space-4) 0 6px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-align: center;
}

.cal-grid {
  margin-top: var(--space-4);
}

.cal-weekdays + .cal-grid {
  margin-top: 0;
}

.cal-grid.is-weeks,
.cal-grid.is-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.cal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-mono);
  text-align: center;
}

.is-weeks .cal-tile,
.is-months .cal-tile {
  min-height: 72px;
}

.cal-date {
  color: var(--ink-muted);
  font-size: clamp(9px, 2.9cqi, 11px);
  white-space: nowrap;
}

.cal-metric {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(9px, 3.05cqi, 14px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.is-weeks .cal-metric,
.is-months .cal-metric {
  font-size: clamp(12px, 4.6cqi, 16px);
}

.cal-record {
  color: var(--ink-muted);
  font-size: clamp(9px, 2.6cqi, 11px);
  white-space: nowrap;
}

/* On the narrowest phones: ROI to the whole percent and no month names on the tiles */
.cal-short {
  display: none;
}

@container (max-width: 289.98px) {
  .is-days .cal-full,
  .is-days .cal-month {
    display: none;
  }

  .is-days .cal-short {
    display: inline;
  }
}

.cal-tile.is-up {
  background: var(--win-bg);
}

.cal-tile.is-down {
  background: var(--loss-bg);
}

/* The P/L figure (or ROI) in the solid colour; the date and W–L stay neutral */
.cal-tile.is-up .cal-figure {
  color: var(--win-text);
}

.cal-tile.is-down .cal-figure {
  color: var(--loss-text);
}

.cal-tile.is-current {
  border-color: var(--accent);
}

/* Stats strip: hairlines between cells, whatever the number of columns */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--line);
}

.stat-cell {
  min-width: 0;
  padding: var(--space-4) 20px;
  background: var(--surface);
}

.stat-cell:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .stats-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-cell:last-child {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .stats-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stat-cell {
    padding-inline: var(--space-6);
  }

  .stat-cell:last-child {
    grid-column: auto;
  }
}

.stat-cell dt {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-value {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .stat-value {
    font-size: var(--text-stat);
  }
}

.stat-note {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.stat-note .is-gain,
.stat-note .is-loss {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* The info button keeps a 44px tap area around a small icon */
.info-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin: -14px -12px -14px -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.info-button:hover,
.info-button[aria-expanded="true"] {
  color: var(--ink);
}

/* Small buttons whose 44px tap area reaches over the text beside them: kept on top, so the
   whole area takes the tap */
.info-button,
.day-side .share-button {
  position: relative;
  z-index: 1;
}

.info-text {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink-muted);
  font-size: 13px;
}

/* Day tiles with bets are buttons */
button.cal-tile {
  width: 100%;
  color: inherit;
  font: inherit;
  font-family: var(--font-mono);
  cursor: pointer;
}

button.cal-tile:hover {
  border-color: var(--ink-muted);
}

.cal-tile.is-current,
button.cal-tile.is-current:hover {
  border-color: var(--accent);
}

/* Small controls: 42px plus the 1px border on an outlined button, the full 44px on a filled one */
.btn-small {
  min-height: 42px;
  padding-inline: 14px;
  font-size: var(--text-small);
}

.btn-primary.btn-small {
  min-height: var(--tap);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--ink-muted);
}

.icon-button:disabled {
  border-color: var(--line);
  color: var(--line-strong);
  cursor: default;
}

/* Daily recap and closing line: side by side on wide screens */
.duo {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.duo > .panel {
  min-width: 0;
  margin-bottom: 0;
  padding: 20px;
}

@media (min-width: 640px) {
  .duo > .panel {
    padding: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .duo {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* While the recap counts how many rows fit, both cards take their own heights */
  .duo.is-measuring {
    align-items: start;
  }
}

/* Expected vs actual and ROI by price: two equal columns from 1024px */
.pair {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.pair > .panel {
  min-width: 0;
  margin-bottom: 0;
  padding: 20px;
}

@media (min-width: 640px) {
  .pair > .panel {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.recap-more {
  margin-top: var(--space-3);
}

/* Bet rows: stacked (player · pick + result · CLV + book + P/L) until the card is wide enough for a table */
.bets {
  position: relative;
  container-type: inline-size;
  margin-top: var(--space-4);
}

.bet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "player player share"
    "pick pick result"
    "clv book pl";
  align-items: center;
  gap: 3.5px var(--space-3);
  padding-block: 8.75px;
  border-top: 1px solid var(--line);
}

/* Column headings show in table layouts; elsewhere they're kept for screen readers only */
.bet-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding-block: 0 var(--space-2);
  border-top: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bet-cell {
  min-width: 0;
}

.bet-player {
  display: flex;
  grid-area: player;
  align-items: center;
  gap: var(--space-3);
}

.bet-who {
  min-width: 0;
}

.bet-pick {
  grid-area: pick;
}

.bet-result {
  grid-area: result;
  justify-self: end;
  text-align: right;
}

.bet-taken {
  display: none;
  grid-area: taken;
}

.bet-clv {
  grid-area: clv;
}

.bet-book {
  grid-area: book;
}

.bet-pl {
  grid-area: pl;
  justify-self: end;
  text-align: right;
}

.bet-share {
  grid-area: share;
  justify-self: end;
}

.bet-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bet-sub {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--text-eyebrow);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-main {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Multi labels can be long, so the pick may wrap; a single's pick stays on one line */
.bet-pick .bet-main {
  white-space: normal;
}

.bet-pick .bet-sub {
  white-space: normal;
}

.bet-outcome {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The boxed league text: only shown when a league logo is missing (see .league-mark) */
.sport-tag {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 15px;
  vertical-align: 1px;
}

/* League logos (leagues.js): 14px tall, width auto. The normal logo in light mode, the -dark one
   in dark mode, and the boxed league text when the file for the current mode is missing. */
.league-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  vertical-align: middle;
}

.league-logo {
  display: block;
  width: auto;
  height: 14px;
}

.league-logo.is-dark,
.league-mark .sport-tag {
  display: none;
}

[data-theme="dark"] .league-mark:not(.is-fixed) .league-logo.is-light {
  display: none;
}

[data-theme="dark"] .league-logo.is-dark {
  display: block;
}

:root:not([data-theme="dark"]) .league-mark.no-light .sport-tag,
[data-theme="dark"] .league-mark.no-dark .sport-tag,
.league-mark .sport-tag.is-always {
  display: inline-block;
}

/* Under the player's name: [league logo] MEM @ SAC, or the market */
.bet-matchup {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bet-matchup-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* League filter rows: [radio] [logo] NBA, the logo 16px tall with 8px each side (the row's 10px gap
   less 2px), in a slot wide enough for the widest logo so every name lines up ("All" keeps it empty) */
.league-slot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  margin-inline: -2px;
}

.league-slot .league-logo,
.filter-chip-value .league-logo {
  height: 16px;
  max-width: 32px;
  object-fit: contain;
}

/* The amber chip: "League: [logo] NBA", 6px either side of the logo */
.filter-chip-value .league-mark {
  margin-inline: 6px;
}

.bet-book-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.bet-book-name {
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Result bar: a tick for the line, green growing right for a hit, red growing left for a miss */
.result-bar {
  position: relative;
  display: block;
  width: 88px;
  height: 4px;
  margin: 7px 0 3px auto;
  border-radius: 2px;
  background: var(--line-strong);
}

.result-bar::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink-muted);
}

.result-bar span {
  position: absolute;
  top: 0;
  width: calc(var(--share) * 50%);
  height: 100%;
}

.result-bar .is-hit {
  left: 50%;
  border-radius: 0 2px 2px 0;
  background: var(--win);
}

.result-bar .is-miss {
  right: 50%;
  border-radius: 2px 0 0 2px;
  background: var(--loss);
}

/* The minimums fit "Under 246.5 @ −105" and "BAL vs MIA" on one line */
@container (min-width: 744px) {
  .is-recap .bet-row {
    grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) minmax(80px, 0.8fr) minmax(110px, 1.1fr) minmax(56px, 0.6fr) 44px minmax(62px, 0.7fr) 40px;
    column-gap: 10px;
    grid-template-areas: "player pick result taken clv book pl share";
  }

  .is-popup .bet-row {
    grid-template-columns: minmax(150px, 1.5fr) minmax(130px, 1.3fr) minmax(80px, 1fr) minmax(56px, 0.8fr) minmax(44px, 0.6fr) minmax(62px, 0.8fr) 40px;
    column-gap: 10px;
    grid-template-areas: "player pick result clv book pl share";
  }

  .is-recap .bet-main,
  .is-popup .bet-main {
    font-size: var(--text-eyebrow);
  }

  .is-recap .bet-head,
  .is-popup .bet-head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .is-recap .bet-taken {
    display: block;
  }

  .is-recap .bet-result,
  .is-popup .bet-result {
    justify-self: start;
    text-align: left;
  }

  .is-recap .result-bar,
  .is-popup .result-bar {
    margin-left: 0;
  }

  /* Logo-only columns: a missing logo's name, small enough to fit */
  .is-recap .bet-book-name,
  .is-popup .bet-book-name {
    font-size: var(--text-label);
    line-height: 1.25;
  }
}

/* Splits */
.splits,
.history {
  padding: 20px;
}

@media (min-width: 640px) {
  .splits,
  .history {
    padding: var(--space-6);
  }
}

.split-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.split-tile {
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.split-label {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.split-value {
  margin: var(--space-2) 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.split-roi {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 500;
}

.split-roi-label {
  color: var(--ink-muted);
}

.split-note {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

/* History: one group per day, newest first */
.history-days {
  margin-top: var(--space-4);
}

.history-day + .history-day {
  margin-top: var(--space-6);
}

.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
}

.day-title,
.day-summary {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.day-summary {
  color: var(--ink-muted);
}

/* Right of the date on one line; under it, from the left, when the header wraps on a phone */
.day-side {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.day-side .share-button {
  margin: -10px -10px -10px 0;
}

/* Units stay lowercase: +1.50u */
.day-summary span {
  text-transform: none;
}

.history .bets {
  margin-top: 0;
}

.history-more {
  display: flex;
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .history-more {
    display: inline-flex;
  }
}

/* The minimums fit full names, "Taken · Close" and a logo with its book name */
@container (min-width: 880px) {
  .is-history .bet-row {
    grid-template-columns: minmax(180px, 1.6fr) minmax(140px, 1.2fr) minmax(86px, 0.9fr) minmax(124px, 1.1fr) minmax(60px, 0.6fr) minmax(110px, 1fr) minmax(64px, 0.7fr) 40px;
    column-gap: 10px;
    grid-template-areas: "player pick result taken clv book pl share";
  }

  .is-history .bet-taken {
    display: block;
  }

  .is-history .bet-result {
    justify-self: start;
    text-align: left;
  }

  .is-history .result-bar {
    margin-left: 0;
  }
}

/* Only the first day shows the column headings */
@container (min-width: 880px) {
  .history-day:first-child .is-history .bet-head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* Share buttons: a quiet icon with a 44px tap area */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.share-button {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.share-button:hover {
  color: var(--ink);
}

.card-title-row .share-button {
  margin-block: -10px;
}

.bet-share {
  margin: -10px -10px -10px 0;
}

[aria-busy="true"].share-button,
[aria-busy="true"].icon-button {
  opacity: 0.5;
  cursor: progress;
}

.share-panel {
  max-width: 560px;
}

.share-preview {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Pop-up: a dimmed backdrop and a panel, full screen on phones */
.has-dialog {
  overflow: hidden;
}

dialog.sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: 0;
  background: color-mix(in srgb, var(--band-bg) 60%, transparent);
  color: var(--ink);
}

dialog.sheet[open] {
  display: grid;
  place-items: center;
}

dialog.sheet::backdrop {
  background: transparent;
}

.sheet-panel {
  width: 100%;
  max-width: 1040px;
  max-height: 100%;
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

@media (max-width: 639.98px) {
  dialog.sheet {
    padding: 0;
  }

  .sheet-panel {
    height: 100%;
    max-height: none;
    padding: 20px;
    border: 0;
    border-radius: 0;
  }
}

/* A small mono heading inside a card: "BEST AND WORST BOOK · NEEDS 20 CLOSES EACH" */
.section-label {
  margin: 20px 0 var(--space-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Closing line card: a column, with win rate vs break-even pinned to the bottom */
.clv-card {
  display: flex;
  flex-direction: column;
}

.clv-top {
  flex: 1;
}

.clv-headline {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.clv-label {
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.unlock {
  margin-top: var(--space-4);
}

.unlock-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
}

.unlock-head .mono {
  white-space: nowrap;
}

.progress {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.progress span {
  display: block;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}

.progress.is-accent span {
  background: var(--accent);
}

.unlock-note {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Books: name, a bar to 20 closes and "17/20"; once two qualify, Best book and Worst book rows */
.clv-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(56px, 1.1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}

.clv-book:last-child {
  border-bottom: 1px solid var(--line);
}

.clv-book-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clv-book-count {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  white-space: nowrap;
}

.clv-book.is-ranked {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name who"
    "name count";
  row-gap: 2px;
}

.clv-book.is-ranked .clv-book-name {
  grid-area: name;
  color: var(--ink-muted);
}

.clv-book-who {
  grid-area: who;
  font-weight: 500;
  text-align: right;
}

.clv-book.is-ranked .clv-book-count {
  grid-area: count;
  text-align: right;
}

.clv-none {
  margin: 0;
}

.clv-bottom {
  margin-top: 20px;
}

.be-figures {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
}

.be-rate {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.be-need {
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Filled to the win rate, with a 2px amber marker at break-even */
.be-bar {
  position: relative;
  display: block;
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--line);
}

.be-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}

.be-mark {
  position: absolute;
  top: -3px;
  left: calc(var(--at, 0) * 100%);
  width: 2px;
  height: 12px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--accent);
}

/* Expected vs actual: a view dropdown (a plain filter chip) and two zero-centred bars */
.ev-card .card-head {
  align-items: flex-start;
}

.ev-card .filter-bar {
  flex-shrink: 0;
}

/* The dropdown shows its choice and never turns amber; the count sits at the end of each row */
.filter-chip.is-select .filter-chip-name {
  font-weight: 500;
}

.filter-option-count {
  margin-left: auto;
  padding-left: var(--space-4);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

.ev-card .section-label {
  margin-top: var(--space-4);
}

.ev-rows {
  display: grid;
  gap: 10px;
  margin-top: var(--space-3);
}

.ev-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.ev-name {
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Zero in the middle: a positive bar grows right from it, a negative one left */
.ev-track,
.roi-bar {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 3px;
  background: var(--surface);
}

.ev-track::before,
.roi-bar::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--line-strong);
}

.ev-fill,
.roi-fill {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--share, 0) * 50%);
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: var(--ink-muted);
}

.ev-fill.is-negative,
.roi-fill.is-negative {
  right: 50%;
  left: auto;
  border-radius: 3px 0 0 3px;
}

.ev-fill.is-gain,
.roi-fill.is-gain {
  background: var(--win);
}

.ev-fill.is-loss,
.roi-fill.is-loss {
  background: var(--loss);
}

/* The value cell: the figure, with the EST tag before the Expected figure in the estimated views */
.ev-value {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 64px;
  font-size: 13px;
}

.est {
  display: inline-flex;
}

/* EST: a small amber outlined tag, 44px to tap; hover, focus or a tap shows the note under it */
.est-tag {
  position: relative;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--link);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 14px;
  cursor: help;
  /* Its 44px tap area reaches over the Actual row below, so it stays on top */
  z-index: 1;
}

.est-tag::before {
  content: "";
  position: absolute;
  inset: -15px -9px;
}

.est-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: min(240px, 70vw);
  padding: var(--space-2) 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--menu-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

.ev-gap {
  margin: var(--space-4) 0 0;
  font-size: var(--text-small);
}

.ev-gap .is-gain,
.ev-gap .is-loss {
  font-weight: 500;
}

/* Under the gap line, after a hairline: a label and pill, a split bar and the two counts */
.ev-split {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.ev-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ev-split-label {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.ev-split-pill {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  white-space: nowrap;
}

/* Green and red sized by their counts, 3px apart, rounded at the outer ends; one full bar when a count is 0 */
.split-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  margin-top: 10px;
}

.split-bar-seg {
  flex: var(--n, 1) 1 0;
  min-width: 0;
}

.split-bar-seg[hidden] {
  display: none;
}

.split-bar-seg.is-win {
  border-radius: 5px 0 0 5px;
  background: var(--win);
}

.split-bar-seg.is-loss {
  border-radius: 0 5px 5px 0;
  background: var(--loss);
}

.split-bar.is-single .split-bar-seg {
  border-radius: 5px;
}

.ev-split-counts {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

/* ROI by price: a small table with a ±100% ROI bar in the last column */
.price-table,
.market-table {
  margin-top: var(--space-4);
  font-size: var(--text-small);
}

.price-row,
.market-row {
  display: grid;
  align-items: center;
  column-gap: 10px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
}

.price-row {
  grid-template-columns: minmax(92px, 1.1fr) 40px 52px 56px 64px minmax(110px, 1.3fr);
}

.price-head,
.market-head {
  padding-block: 0 var(--space-2);
  border-top: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-cell,
.market-cell {
  min-width: 0;
  white-space: nowrap;
}

.price-bets,
.price-wl,
.price-need,
.price-pl,
.market-bets,
.market-wl,
.market-pl,
.market-roi,
.market-need {
  font-family: var(--font-mono);
}

.price-head .price-cell,
.market-head .market-cell {
  font-family: var(--font-mono);
}

.roi-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.roi-bar {
  flex: 1;
  height: 6px;
}

.roi-bar::before {
  top: -2px;
  height: 10px;
}

.roi-value {
  min-width: 56px;
  text-align: right;
  font-family: var(--font-mono);
}

/* Splits: the ROI range bar, −100% to +100%, an amber band for the range and a dot at the ROI */
.range {
  margin-top: var(--space-3);
}

/* Two rows on one axis: a 56px label column, then the winner's bar over the other group's, 10px apart */
.range-grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  row-gap: 10px;
}

.range-name {
  overflow: hidden;
  padding-right: var(--space-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.range-name.is-other {
  color: var(--ink-muted);
}

.range-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.range-zero {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--line-strong);
}

.range-band {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.25;
}

.range-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The other group: a muted band and a hollow dot filled with the tile's background */
.range-bar.is-other .range-band {
  background: var(--ink-muted);
}

.range-bar.is-other .range-dot {
  border: 2px solid var(--ink-muted);
  background: var(--surface);
}

/* "NBA −19.7% ± 54% · 37 bets" */
.range-other {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* One axis under both bars, under the bar column */
.range-axis {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0 56px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Markets: singles by sport, prop and side; the table scrolls sideways on narrow tablets */
.markets {
  padding: 20px;
}

@media (min-width: 640px) {
  .markets {
    padding: var(--space-6);
  }
}

.markets-count {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  white-space: nowrap;
}

.market-table {
  overflow-x: auto;
}

.market-row {
  grid-template-columns: minmax(150px, 1.8fr) repeat(6, minmax(48px, 1fr)) minmax(92px, auto);
  min-width: 640px;
}

/* [league logo] Points: a whole market, so no matchup */
.market-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}

.market-prop {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-unit {
  display: none;
}

.market-tag {
  text-align: right;
}

.market-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.market-pill.is-ranked {
  background: var(--seg-active-bg);
  color: var(--seg-active);
}

.markets-more {
  display: inline-flex;
  gap: 6px;
  margin-top: var(--space-4);
}

.markets-chevron {
  transition: transform 140ms ease-out;
}

.markets-more[aria-expanded="true"] .markets-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .markets-chevron {
    transition: none;
  }
}

/* Tracker on phones (under 640px): a tighter layout modelled on the PropsMadness mobile tracker,
   in our own styling. Everything here is phone-only; from 640px the rules above apply unchanged.
   See CLAUDE.md, "Tracker on phones". */

/* Pieces only phones show */
.bet-pick-phone,
.bet-final,
.bet-final-line,
.bet-brief,
.recap-more-phone {
  display: none;
}

/* View all under the recap list: an amber text link, 44px tall to tap */
.text-button {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-button::before {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

@media (max-width: 639.98px) {
  /* 16px page sides, 20px inside cards, 16px between cards */
  .tracker-page .container {
    --gutter: 16px;
    padding-top: var(--space-4);
  }

  /* The heading stays for screen readers; the filter chips sit right under the header */
  .tracker-page .page-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    padding: 0;
  }

  .filter-row {
    row-gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .filter-count {
    flex-basis: 100%;
  }

  .panel,
  .duo {
    margin-bottom: var(--space-4);
  }

  .duo {
    gap: var(--space-4);
  }

  .card-head {
    align-items: center;
  }

  .big-figure {
    font-size: var(--text-h1);
  }

  /* Net profit: title and share left, the compact Range toggle right (on the next line, from the
     left, when the row can't fit it) */
  .profit-card .seg-btn {
    padding: 0 8px;
    font-size: var(--text-label);
  }

  /* The share icon sits close to the title; its 44px tap area reaches into the space around it */
  .profit-card .card-title-row .share-button {
    margin-inline: -8px -12px;
  }

  /* When the toggle drops to its own line, 16px keeps its tap areas clear of the share button's */
  .profit-card .card-head {
    row-gap: var(--space-4);
  }

  .chart {
    flex: none;
    height: 240px;
    min-height: 240px;
  }

  /* Last 30 days: the title and toggles on one row (the toggles drop below, from the left, when
     they can't fit), then "x of y betting days up" */
  .calendar-card .card-head {
    row-gap: var(--space-2);
  }

  .calendar-card .card-heading {
    display: contents;
  }

  .calendar-card .card-controls {
    order: 1;
  }

  .calendar-card .card-sub {
    flex-basis: 100%;
    order: 2;
    margin: 0;
  }

  .cal-weekdays,
  .cal-grid.is-days {
    gap: 6px;
  }

  /* .cal-grid lifts this over button.cal-tile's inherited font, so tappable tiles get it too */
  .cal-grid .cal-tile {
    gap: 2px;
    min-height: 72px;
    border-radius: 10px;
    line-height: 1.25;
  }

  /* Day number only; the full date is still read out */
  .is-days .cal-month {
    display: none;
  }

  /* Figures at 14px, W–L at 12px, scaled down only where a day tile is too narrow for them
     (sized for five characters across seven columns and six 6px gaps) */
  .cal-date {
    font-size: min(12px, calc((100cqi - 36px) / 21));
  }

  .cal-grid .cal-metric {
    font-size: min(14px, calc((100cqi - 36px) / 19.6));
    font-weight: 600;
    letter-spacing: -0.04em;
  }

  .cal-grid .cal-metric.is-long {
    font-size: min(14px, calc((100cqi - 36px) / 23.5));
  }

  .cal-record {
    font-size: min(12px, calc((100cqi - 36px) / 21));
  }

  /* The decimal can't fit at 14px, so day tiles show ROI to the whole percent */
  .is-days .cal-full {
    display: none;
  }

  .is-days .cal-short {
    display: inline;
  }

  /* Day tiles are about 40px wide: the tap area takes in half of each 6px gap */
  button.cal-tile {
    position: relative;
  }

  button.cal-tile::before {
    content: "";
    position: absolute;
    inset: 0 -3px;
  }

  /* Stats: two columns, no dividers, Avg CLV alone in the left column */
  .stats-strip {
    gap: var(--space-6) var(--space-4);
    padding: 20px;
    background: transparent;
  }

  .stat-cell {
    padding: 0;
    background: transparent;
  }

  .stat-cell:last-child {
    grid-column: auto;
  }

  .stat-value {
    font-size: var(--text-stat);
  }

  /* Daily recap: previous, next and share as 40px buttons (44px to tap); View all moves under the list */
  .recap .card-head {
    flex-wrap: nowrap;
  }

  .recap .card-heading {
    min-width: 0;
  }

  .recap .card-controls {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .recap .card-controls .btn {
    display: none;
  }

  .recap .icon-button {
    position: relative;
    width: 40px;
    height: 40px;
  }

  /* 40px with a 1px border: 3px more all round makes 44px */
  .recap .icon-button::before {
    content: "";
    position: absolute;
    inset: -3px;
  }

  .recap-more-desktop {
    display: none;
  }

  .recap-more-phone {
    display: inline;
  }

  /* Recap and pop-up rows: Player | Pick | P/L, then the share button. The player column keeps room
     for "D. Schröder" and "NBA MEM @ SAC"; the pick takes one line when there's room ("Over 22.5 @
     −118") and breaks before the odds when there isn't. */
  .is-recap.bets,
  .is-popup.bets {
    display: grid;
    grid-template-columns: minmax(144px, 1fr) minmax(min-content, max-content) auto auto;
    column-gap: 6px;
  }

  /* Every row shares the table's columns (subgrid), so Pick and P/L line up from row to row; a
     browser without subgrid gives each row the same template on its own */
  .is-recap .bet-row,
  .is-popup .bet-row {
    grid-column: 1 / -1;
    grid-template-columns: minmax(144px, 1fr) minmax(min-content, max-content) auto auto;
    grid-template-columns: subgrid;
    grid-template-areas: "player pick pl share";
    column-gap: 6px;
  }

  /* Recap picks usually take two lines on a phone, so its rows trim a little more to stay 10% shorter */
  .is-recap .bet-row:not(.bet-head) {
    padding-block: 8.125px;
  }

  :is(.is-recap, .is-popup) :is(.bet-pick, .bet-pl) .bet-main {
    font-size: var(--text-eyebrow);
  }

  :is(.is-recap, .is-popup) .bet-matchup .mono {
    font-size: var(--text-label);
  }

  :is(.is-recap, .is-popup) .sport-tag {
    padding-inline: 3px;
  }

  :is(.is-recap, .is-popup) .bet-name {
    overflow-wrap: normal;
  }

  :is(.is-recap, .is-popup) .bet-share {
    margin-left: -10px;
  }

  /* 10px, not 6px, between the end of a long pick and the P/L figure */
  :is(.is-recap, .is-popup) .bet-pl {
    padding-left: var(--space-1);
  }

  .is-recap .bet-head,
  .is-popup .bet-head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  :is(.is-recap, .is-popup) :is(.bet-result, .bet-taken, .bet-clv, .bet-book) {
    display: none;
  }

  :is(.is-recap, .is-popup) .avatar {
    width: 40px;
    height: 40px;
  }

  :is(.is-recap, .is-popup) .bet-player {
    gap: var(--space-2);
  }

  :is(.is-recap, .is-popup) .bet-pick-wide {
    display: none;
  }

  :is(.is-recap, .is-popup) .bet-pick-phone {
    display: block;
  }

  :is(.is-recap, .is-popup) .bet-final {
    display: inline;
  }

  :is(.is-recap, .is-popup) .bet-final-line {
    display: block;
  }

  /* Splits: one column of full-width tiles */
  .split-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-tile {
    padding: 20px;
  }

  .split-value {
    font-size: 24px;
  }

  /* History rows: a 44px headshot ringed in the team colour, the full name over "Over 22.5 Pts ·
     Final 31", then P/L and share. No matchup, CLV, book or result bar. */
  .is-history .bet-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "player pl share";
    column-gap: var(--space-3);
    padding-block: 8.5px;
  }

  .is-history :is(.bet-pick, .bet-result, .bet-taken, .bet-clv, .bet-book, .bet-matchup) {
    display: none;
  }

  .is-history .avatar {
    width: 44px;
    height: 44px;
    border: 2px solid var(--ring, var(--line-strong));
  }

  .is-history .bet-name {
    font-size: 17px;
    font-weight: 600;
  }

  .is-history .bet-brief {
    display: block;
    font-size: var(--text-small);
  }

  .day-head {
    flex-wrap: nowrap;
  }

  .day-side {
    min-width: 0;
  }

  /* Expected vs actual and ROI by price stack, 16px apart like every card */
  .pair {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .pair > .panel {
    padding: 20px;
  }

  .ev-row {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  /* ROI by price: no Need column, a shorter ROI bar, 13px so a 390px phone fits five columns */
  .price-table {
    font-size: 13px;
  }

  .price-row {
    grid-template-columns: minmax(74px, auto) 26px 42px 54px minmax(0, 1fr);
    column-gap: var(--space-2);
  }

  .price-need {
    display: none;
  }

  .roi-bar-wrap {
    gap: 6px;
  }

  .roi-value {
    min-width: 50px;
  }

  /* The narrowest phones (320px) can't fit the bar as well: the value alone, at 12px */
  @media (max-width: 359.98px) {
    .price-table {
      font-size: 12px;
    }

    .price-row {
      grid-template-columns: minmax(52px, auto) 30px 40px 50px minmax(0, 1fr);
      column-gap: 6px;
    }

    /* "−146 to −150" may take two lines */
    .price-price {
      white-space: normal;
      line-height: 1.2;
    }

    .roi-bar {
      display: none;
    }

    .roi-value {
      min-width: 0;
      text-align: right;
    }
  }

  /* Markets: stacked rows, market and side on the first line, bets · W–L · ROI on the second */
  .market-table {
    overflow: visible;
  }

  .market-head {
    display: none;
  }

  .market-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "name name name side"
      "bets wl roi roi";
    row-gap: 2px;
    min-width: 0;
  }

  .market-name {
    grid-area: name;
  }

  .market-side {
    grid-area: side;
    color: var(--ink-muted);
  }

  .market-bets {
    grid-area: bets;
  }

  .market-wl {
    grid-area: wl;
  }

  .market-roi {
    grid-area: roi;
  }

  .market-bets,
  .market-wl,
  .market-roi {
    color: var(--ink-muted);
    font-size: 13px;
  }

  .market-unit {
    display: inline;
  }

  .market-wl::before,
  .market-roi::before {
    content: "· ";
  }

  .market-pl,
  .market-need,
  .market-tag {
    display: none;
  }
}

/* Calculator: the bet calculator and odds converter at /calculator/ (calculator.js). See CLAUDE.md, "Calculator". */

.calc-head {
  padding-bottom: var(--space-4);
}

.calc-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc-lede {
  max-width: 640px;
  margin-top: var(--space-2);
  font-size: 17px;
  line-height: 1.5;
}

/* The input card (wide) and the results card side by side from 1060px, stacked below that */
.calc-layout {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.calc-main,
.calc-results {
  min-width: 0;
}

@media (min-width: 1060px) {
  .calc-layout[data-view="calculator"] {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }

  /* Pushed down by the folder tab's height, so the two card tops line up */
  .calc-results {
    margin-top: 40px;
  }
}

/* The folder tab on the input card's top edge, above the Reset button; the card's border runs under it */
.calc-tab-row {
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--space-4);
}

.calc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.calc-tab svg {
  color: var(--accent);
}

.calc-tab:hover {
  border-color: var(--line-strong);
}

.calc-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

@media (min-width: 640px) {
  .calc-card {
    padding: var(--space-6);
  }
}

.calc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.calc-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.calc-card-intro {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
}

.calc-row {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5, 20px);
}

/* Bet type and odds format: two equal columns on every screen */
.calc-row-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stake, the accumulator stepper and the options wrap as the width allows */
.calc-row-wrap {
  grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
  column-gap: var(--space-6);
}

.field-group {
  min-width: 0;
}

.field-label {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Inputs and selects: 44px, on the page background, 16px text so iPhones don't zoom */
.calc-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--tap);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.calc-field.is-mono,
input.calc-field {
  font-family: var(--font-mono);
  font-weight: 500;
}

.calc-field::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

.calc-field.is-invalid {
  border-color: var(--loss);
}

.select-wrap {
  position: relative;
  display: block;
}

select.calc-field {
  padding-right: 36px;
  appearance: none;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* The odds format: a segmented toggle from 640px, a dropdown on phones */
.format-select {
  display: none;
}

/* Segmented toggles in the calculator stretch to the field height, with equal buttons */
.calc-card .seg {
  display: flex;
  width: 100%;
  padding: 3px;
}

.calc-card .seg-btn {
  flex: 1;
  height: 36px;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: 15px;
}

.calc-card .seg-btn::before {
  inset: 0;
}

.stake-row {
  display: flex;
  gap: var(--space-3);
}

.money-field {
  position: relative;
  flex: 0 0 150px;
}

.money-prefix {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 16px;
  transform: translateY(-50%);
}

.money-field .calc-field {
  padding-left: 30px;
}

.stake-row .seg {
  flex: 1 1 180px;
}

/* − n + for the accumulator's selections */
.stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.stepper-btn {
  width: var(--tap);
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 20px;
  cursor: pointer;
}

.stepper-btn:disabled {
  color: var(--line-strong);
  cursor: default;
}

.stepper-value {
  min-width: 40px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

/* Switches: Each way and Rule 4 side by side; a 44px tap each */
.switch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  min-height: var(--tap);
  align-items: center;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.switch-track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--line-strong);
  transition: background 140ms ease-out;
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 140ms ease-out;
}

.switch[aria-checked="true"] .switch-track {
  background: var(--accent);
}

.switch[aria-checked="true"] .switch-knob {
  background: var(--on-accent);
  transform: translateX(20px);
}

.terms-group {
  margin-top: var(--space-3);
}

.calc-divider {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.calc-selections-title {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  font-weight: 700;
}

/* Selection rows: a number, the odds, the result, a dead heat or Rule 4 control when needed, and
   a note at the end; 32px controls, 3px above and below, hairlines between */
.sel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 3px;
  border-top: 1px solid var(--line);
}

.sel-row:first-child {
  border-top: 0;
}

.sel-number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.sel-row .calc-field {
  height: 32px;
  padding-inline: 10px;
}

.sel-row select.calc-field {
  padding-right: 30px;
}

.sel-row .select-chevron {
  right: 8px;
}

.sel-odds {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 260px;
}

.sel-row .select-wrap {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 280px;
}

.sel-row .select-wrap:has(.sel-deadheat) {
  flex: 0 1 110px;
}

.rule4-field {
  position: relative;
  flex: 0 0 76px;
}

.rule4-field .calc-field {
  padding-right: 24px;
  text-align: right;
}

.rule4-suffix {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  transform: translateY(-50%);
}

.sel-note {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  white-space: nowrap;
}

.sel-note.is-loss {
  color: var(--loss-text);
}

/* Results: in the ink band's colours */
.calc-results {
  padding: 20px;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-lg);
  background: var(--band-bg);
  color: var(--band-ink);
}

@media (min-width: 640px) {
  .calc-results {
    padding: var(--space-6);
  }
}

.calc-results .field-label {
  color: var(--band-muted);
}

.calc-total {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.calc-profit {
  margin: var(--space-2) 0 0;
  color: var(--band-muted);
  font-size: 15px;
}

.calc-missing {
  margin: 0;
  color: var(--band-ink);
  font-size: 15px;
  line-height: 1.5;
}

/* Results, breakdown rows and the explainer use the bright result pair, on the dark band */
.calc-results .is-gain,
.calc-results .mono.is-gain {
  color: var(--win);
}

.calc-results .is-loss {
  color: var(--loss);
}

.calc-rows {
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--band-line);
}

.calc-rows div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 10px;
  border-bottom: 1px solid var(--band-line);
  font-size: 15px;
}

.calc-rows dt {
  color: var(--band-ink);
}

.calc-rows dd {
  margin: 0;
  font-family: var(--font-mono);
}

.breakdown {
  margin-top: var(--space-4);
  font-size: var(--text-small);
}

.breakdown-row {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(44px, auto) minmax(60px, auto);
  align-items: center;
  column-gap: 12px;
  min-height: 36px;
  padding-block: 4px;
  border-bottom: 1px solid var(--band-line);
  font-size: 13px;
}

.breakdown-head {
  min-height: 28px;
  color: var(--band-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A long list of picks (a Goliath's 8) wraps rather than being cut */
.breakdown-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bd-picks,
.bd-odds,
.bd-return {
  font-family: var(--font-mono);
}

.bd-picks {
  color: var(--band-muted);
}

.bd-odds,
.bd-return {
  text-align: right;
}

.breakdown-more {
  display: flex;
  width: 100%;
  margin-top: var(--space-3);
  border-color: var(--band-line-strong);
  color: var(--band-ink);
}

.breakdown-more:hover {
  border-color: var(--band-muted);
}

.calc-foot {
  margin: var(--space-4) 0 0;
  color: var(--band-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Odds converter: three boxes on one row, then the implied probability under a hairline */
.converter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: 20px;
}

.implied {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  text-align: center;
}

.implied .field-label {
  margin-bottom: var(--space-2);
}

.implied-value {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.prob-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  height: 10px;
  margin: var(--space-4) auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
}

.prob-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--accent);
}

.prob-tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: var(--line-strong);
}

.prob-axis {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 560px;
  margin: 6px auto 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* How odds formats work: four cards across, 2×2 on tablets, stacked on phones */
.calc-explain {
  margin-bottom: var(--space-8);
}

.calc-explain-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.explain-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .explain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1060px) {
  .explain-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.explain-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

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

.explain-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.explain-tag {
  flex-shrink: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explain-card p {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  line-height: 1.5;
}

.explain-example {
  margin-top: auto !important;
  padding: 10px 12px;
  padding-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink) !important;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

.explain-card p + .explain-example {
  margin-top: var(--space-4) !important;
}

/* Phones: the format dropdown instead of the toggle, no row notes, a smaller stake box */
@media (max-width: 639.98px) {
  .format-seg {
    display: none;
  }

  .format-select {
    display: block;
  }

  .sel-note {
    display: none;
  }

  /* The odds and result keep room for their text; anything more drops to a second line */
  .sel-odds {
    flex: 1 1 80px;
    min-width: 80px;
  }

  .sel-row .select-wrap {
    flex: 1 1 108px;
    min-width: 108px;
  }

  .sel-row .select-wrap:has(.sel-deadheat) {
    flex: 0 0 96px;
    min-width: 96px;
  }

  .rule4-field {
    flex-basis: 64px;
  }

  /* A dead heat or Rule 4 control drops to a second line under the odds when the row can't fit it */
  .sel-row {
    flex-wrap: wrap;
  }

  .money-field {
    flex: 1 1 110px;
  }

  .stake-row .seg {
    flex: 1 1 150px;
  }

  .calc-row-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .converter-row {
    gap: var(--space-2);
  }

  .converter-row .calc-field {
    padding-inline: 10px;
  }

  .calc-total,
  .implied-value {
    font-size: 40px;
  }
}

/* Footer */

.site-footer {
  margin-top: 40px;
  padding-block: 28px 32px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}

.footer-brand .tile {
  width: 32px;
  height: 32px;
  background: var(--tile);
  color: var(--tile-ink);
  font-size: 13px;
}

.footer-tagline {
  flex-basis: 100%;
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
}

.footer-tagline-dot {
  display: none;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  margin: var(--space-4) 0 20px;
  font-size: var(--text-small);
}

.footer-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--ink);
}

.footer-legal {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 13px;
}

/* The help link sits in a sentence: an invisible 44px tap area around it */
.footer-legal a {
  position: relative;
}

.footer-legal a::before {
  content: "";
  position: absolute;
  inset: -14px -4px;
}

@media (min-width: 640px) {
  .site-footer {
    margin-top: 0;
    padding-block: 40px;
  }

  .footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    font-size: var(--text-small);
  }

  .footer-tagline {
    flex-basis: auto;
    margin: 0;
  }

  .footer-tagline-dot {
    display: inline;
  }

  .footer-tagline-sports {
    display: none;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-6);
    margin: 0;
  }

  .footer-legal {
    margin-top: var(--space-6);
    padding-top: 20px;
  }
}