/* ============================================================
   Oddballs stylesheet. Modern CSS, no dependencies, no preprocessor.
   Tokens, scales and conventions come from Site Base (see CODING_STANDARDS.md):
   layers reset > tokens > base > layout > components > utilities, golden-ratio type
   scale, Fibonacci spacing, one oklch accent, Oswald headings, Lato body.
   Naming: one dash, no double dashes or underscores. State classes use is-.
   ============================================================ */
@layer reset, tokens, base, layout, components, utilities;

@font-face { font-family: "Oswald"; src: url("../fonts/oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: var(--f-34); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  [role="list"] { list-style: none; padding: 0; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
}

@layer tokens {
  :root {
    color-scheme: light;
    /* Powerball red, deepened for AAA text contrast where it is used as text. */
    --accent: oklch(52% 0.19 27);
    --accent-deep: color-mix(in oklch, var(--accent), black 25%);
    --accent-soft: color-mix(in oklch, var(--accent), white 88%);
    --accent-line: color-mix(in oklch, var(--accent), white 70%);
    --good: oklch(45% 0.12 150);
    --good-soft: color-mix(in oklch, var(--good), white 88%);
    --warn: oklch(52% 0.13 70);
    --warn-soft: color-mix(in oklch, var(--warn), white 86%);
    --paper: oklch(99% 0.004 80);
    --felt: oklch(36% 0.085 152);        /* page background below the header, a deep table green */
    --felt-line: color-mix(in oklch, var(--felt), white 25%);
    --on-felt: oklch(97% 0.01 150);
    --dark: oklch(19.6% 0 0);
    --ink: oklch(28.5% 0 0);
    --muted: oklch(44% 0 0);
    --line: oklch(91% 0 0);
    --surface: oklch(96.5% 0.003 80);
    --focus: var(--accent);
    --shadow: 0 8px 16px rgb(0 0 0 / 0.06);

    --display: "Oswald", system-ui, sans-serif;
    --body: "Lato", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;

    --fs--1: 0.9rem;
    --fs-0: 1.0625rem;
    --fs-1: 1.35rem;
    --fs-2: 1.72rem;
    --fs-3: 2.78rem;
    --fs-4: 4.5rem;

    --f-8: 0.5rem; --f-13: 0.8125rem; --f-21: 1.3125rem; --f-34: 2.125rem; --f-55: 3.4375rem; --f-89: 5.5625rem;
    --space-xs: var(--f-8); --space-s: var(--f-13); --space-m: var(--f-21); --space-l: var(--f-34);
    --space-xl: clamp(var(--f-55), 6vw, var(--f-89));

    --tap: 2.75rem;
    --edge: clamp(1rem, 4vw, 3.4375rem);
    --max: 76rem;
    --measure: 66ch;
    --radius: 4px;
    --radius-soft: 10px;
  }
}

@layer base {
  body { background: var(--felt); color: var(--ink); font: 400 var(--fs-0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; text-transform: uppercase; line-height: 1.05; color: var(--dark); text-wrap: balance; }
  h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, var(--fs-3)); letter-spacing: 0.01em; }
  h2 { font-size: clamp(var(--fs-1), 1rem + 1vw, var(--fs-2)); }
  h3 { font-size: var(--fs-0); letter-spacing: 0.04em; }
  p { text-wrap: pretty; }
  a { color: var(--accent-deep); }
  small, .muted { color: var(--muted); font-size: var(--fs--1); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
  table { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums; }
  th, td { text-align: start; padding: var(--f-8) var(--f-13); border-block-end: 1px solid var(--line); vertical-align: top; }
  th { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs--1); color: var(--muted); }
  td.num, th.num { text-align: end; }
  label { display: grid; gap: var(--f-8); font-size: var(--fs--1); color: var(--muted); }
  input, select, textarea { min-block-size: var(--tap); padding: var(--f-8) var(--f-13); border: 1px solid var(--muted); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: var(--fs-0); }
  textarea { font-family: var(--mono); line-height: 1.5; }
  button { min-block-size: var(--tap); padding: var(--f-8) var(--f-21); border: 0; border-radius: var(--radius); background: var(--dark); color: #fff; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
  button:hover { background: #000; }
  button.quiet { background: transparent; color: var(--ink); border: 1px solid var(--muted); }
  code { font-family: var(--mono); font-size: 0.92em; background: var(--surface); padding: 0.1em 0.35em; border-radius: var(--radius); }
  details { border-block-start: 1px solid var(--line); padding-block: var(--f-13); }
  summary { cursor: pointer; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs--1); color: var(--muted); min-block-size: var(--tap); display: flex; align-items: center; }
  details[open] summary { color: var(--dark); }
  .skip { position: absolute; inset-inline-start: var(--f-13); inset-block-start: -100%; background: var(--dark); color: #fff; padding: var(--f-8) var(--f-13); z-index: 10; }
  .skip:focus { inset-block-start: var(--f-13); }
}

@layer layout {
  section, .wrap { container-type: inline-size; }
  .wrap { inline-size: min(100% - 2 * var(--edge), var(--max)); margin-inline: auto; }
  .stack { display: flex; flex-direction: column; gap: var(--space-m); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
  .grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
  .cols-2, .golden { display: grid; gap: clamp(var(--f-21), 3vw, var(--f-34)); align-items: start; }
  @container (inline-size >= 48rem) {
    .cols-2 { grid-template-columns: 1fr 1fr; }
    .golden { grid-template-columns: 38fr 62fr; }
  }
  main { display: flex; flex-direction: column; gap: var(--space-l); padding-block: var(--space-l) var(--space-xl); }
}

@layer components {
  .site-header { background: var(--felt); border-block-end: 1px solid var(--felt-line); padding-block: var(--f-21); color: var(--on-felt); }
  .site-header .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--f-13); }
  .brand { display: flex; align-items: center; gap: var(--f-13); text-decoration: none; color: var(--on-felt); }
  .brand h1 { color: var(--on-felt); }
  .brand img { inline-size: 2.125rem; block-size: 2.125rem; }
  .brand h1 { font-size: var(--fs-2); }
  .brand span { color: oklch(78% 0.16 27); } /* lighter red for contrast on green */
  .tagline { color: var(--on-felt); opacity: 0.85; font-size: var(--fs--1); flex-basis: 100%; }
  .games { display: flex; gap: var(--f-8); }
  .games button { color: var(--on-felt); border-color: var(--felt-line); }
  .games button[aria-pressed="true"] { background: var(--paper); color: var(--dark); border-color: var(--paper); }

  .card { background: var(--paper); border: 0; box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); border-radius: 14px; padding: clamp(var(--f-21), 3vw, var(--f-34)); display: flex; flex-direction: column; gap: var(--space-m); }
  .card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--f-13); }
  .card header p { color: var(--muted); font-size: var(--fs--1); max-inline-size: var(--measure); }

  .controls { display: grid; gap: var(--f-13); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); align-items: end; }

  .verdict { display: grid; gap: var(--f-13); padding: var(--f-21); border-radius: var(--radius-soft); background: var(--surface); }
  .verdict[data-tone="skip"] { background: var(--accent-soft); }
  .verdict[data-tone="meh"] { background: var(--warn-soft); }
  .verdict[data-tone="go"] { background: var(--good-soft); }
  .verdict strong { font-family: var(--display); font-weight: 500; font-size: clamp(var(--fs-1), 1rem + 1.5vw, var(--fs-3)); line-height: 1; color: var(--dark); }
  .today .verdict { grid-template-columns: auto 1fr; align-items: center; padding-block: var(--f-13); }
  .today .verdict p { margin: 0; font-size: var(--fs--1); color: var(--muted); }
  .verdict strong small { display: block; font-family: var(--body); font-size: var(--fs--1); color: var(--muted); margin-block-start: var(--f-8); }

  .meter { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; gap: var(--f-13); align-items: center; font-size: var(--fs--1); }
  .meter .bar { block-size: 0.8125rem; background: var(--line); border-radius: 999px; overflow: hidden; }
  .meter .bar i { display: block; block-size: 100%; inline-size: calc(var(--pct) * 1%); background: var(--accent); transition: inline-size 0.3s; }
  .meter .bar[data-tone="good"] i { background: var(--good); }
  .meter .bar[data-tone="dark"] i { background: var(--dark); }
  .meter .val { font-variant-numeric: tabular-nums; min-inline-size: 5ch; text-align: end; }

  .facts { display: grid; gap: var(--f-13); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
  .facts div { padding: var(--f-13); border: 1px solid var(--line); border-radius: var(--radius); }
  .facts b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--fs-1); color: var(--dark); }
  .facts span { color: var(--muted); font-size: var(--fs--1); }

  .lines { display: grid; gap: var(--f-13); }
  .line { display: grid; grid-template-columns: auto 1fr; gap: var(--f-13); align-items: center; padding: var(--f-13); border: 1px solid var(--line); border-radius: var(--radius); }
  .line:has(.rank) { grid-template-columns: 3rem auto 1fr; }
  .line:has(.rank):first-child { border-color: var(--dark); border-width: 2px; }
  .line small { grid-column: 1 / -1; }
  .rank { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs--1); color: var(--muted); }
  .line:first-child .rank { color: var(--dark); }
  .balls { display: flex; flex-wrap: wrap; gap: var(--f-8); }
  .ball { inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--dark); color: var(--dark); font-family: var(--display); font-weight: 500; font-size: var(--fs-0); font-variant-numeric: tabular-nums; }
  .ball[data-pb] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .ball[data-hit] { background: var(--dark); color: #fff; }
  .ball[data-pb][data-hit] { outline: 3px solid var(--dark); outline-offset: 2px; }
  .pill { display: inline-block; cursor: help; padding: 0.15em 0.6em; border-radius: 999px; background: var(--surface); font-size: var(--fs--1); color: var(--muted); }
  .pill[data-tone="good"] { background: var(--good-soft); color: var(--good); }
  .pill[data-tone="bad"] { background: var(--accent-soft); color: var(--accent-deep); }

  .freq { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr)); align-items: end; }
  .freq .cell { display: grid; gap: 2px; justify-items: center; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .freq .col { inline-size: 100%; block-size: 5.5rem; display: flex; align-items: end; background: var(--surface); border-radius: 2px; }
  .freq .col i { display: block; inline-size: 100%; block-size: calc(var(--pct) * 1%); background: var(--dark); border-radius: 2px 2px 0 0; }
  .freq[data-red] .col i { background: var(--accent); }
  .freq .n { font-weight: 700; color: var(--ink); }
  .freq .cell[data-flag] .n { text-decoration: underline; text-decoration-color: var(--accent); }

  .prose { max-inline-size: var(--measure); display: grid; gap: var(--f-13); }
  .prose li + li { margin-block-start: var(--f-8); }
  .formula { font-family: var(--mono); font-size: var(--fs--1); background: var(--surface); padding: var(--f-13); border-radius: var(--radius); overflow-x: auto; }

  /* Tables: tighten in narrow containers, drop the Power Play column below 30rem, smaller balls in cells. */
  .odds-table th, .odds-table td, #recent th, #recent td { padding-inline: var(--f-8); }
  @container (inline-size < 30rem) {
    .odds-table th:nth-child(4), .odds-table td:nth-child(4) { display: none; }
    th, td { padding-inline: 0.25rem; font-size: var(--fs--1); }
  }
  table .ball { inline-size: 1.75rem; block-size: 1.75rem; font-size: 0.8rem; border-width: 1.5px; }
  @container (inline-size < 30rem) { #recent th:nth-child(3), #recent td:nth-child(3) { display: none; } }
  table .balls { gap: 0.25rem; flex-wrap: nowrap; }
  .cluster > input { flex: 1 1 12rem; min-inline-size: 0; }
  input, select, textarea { inline-size: 100%; min-inline-size: 0; }

  .today h2 span { color: var(--accent); }
  .today .line { border-color: var(--dark); border-width: 2px; }
  .divider { display: flex; align-items: center; gap: var(--f-21); color: var(--on-felt); font-size: var(--fs-1); margin-block-start: var(--space-m); }
  .divider::before, .divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--felt-line); }
  .cluster > a { min-block-size: var(--tap); display: inline-flex; align-items: center; }

  .site-footer { border-block-start: 1px solid var(--felt-line); padding-block: var(--f-21); color: var(--on-felt); font-size: var(--fs--1); }
  .site-footer a { color: var(--on-felt); }
  .site-footer button.quiet { color: var(--on-felt); border-color: var(--on-felt); }
  .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--f-13); }
}

@layer utilities {
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .num { font-variant-numeric: tabular-nums; }
}