/* lotterydailypicks — accessibility-first stylesheet.
   Audience 40-75, older phones. Base 19px, tables 18px+, tap targets 48px+,
   WCAG AAA contrast targets. No frameworks. */

:root {
  --ink: #1a1a1a;        /* 16.7:1 on white */
  --paper: #ffffff;
  --paper-alt: #f4f1ea;  /* warm off-white panels */
  --rule: #c9c2b4;
  --accent: #7a0c0c;     /* deep red, 9.9:1 on white */
  --accent-ink: #ffffff;
  --hot: #7a0c0c;
  --cold: #0b4f8a;       /* 8.1:1 on white */
  --link: #0b4f8a;
  --focus: #b35c00;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", "Verdana", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

/* Every DIGIT display uses the same mono font so 0 always looks the same
   (dotted zero). Prose cells stay in the body font for readability. */
.mono, td.num, .ball, .ledger, .facts b,
table.heat td, table.simres td, table.ledger td {
  font-family: "JetBrains Mono", "Courier New", monospace;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

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

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

/* ---- header / nav: plain links, no hamburger; menu top right ---- */
header.site {
  background: var(--accent); color: var(--accent-ink);
  padding: 0.6rem 0;
}
header.site a { color: var(--accent-ink); font-weight: 700; }
.headrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; }
a.brand { font-size: 1.6rem; letter-spacing: 0.01em; }
nav.topnav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
nav.topnav a { font-size: 1rem; display: inline-flex; align-items: center; min-height: 2.6rem; }
nav.crumbs { padding: 0.7rem 0; font-size: 1rem; }
nav.crumbs ol { list-style: none; margin: 0; padding: 0; }
nav.crumbs li { display: inline; }
nav.crumbs li + li::before { content: " › "; color: var(--ink); }

/* uniform back button — same spot (top left, under breadcrumbs) on every page */
a.backbtn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 3rem; padding: 0 1.1rem; margin: 0.1rem 0 0.6rem;
  border: 2px solid var(--rule); border-radius: 8px;
  background: var(--paper-alt); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
a.backbtn:hover { border-color: var(--accent); color: var(--accent); }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0.5rem 0; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 0.5rem; border-bottom: 3px solid var(--rule); padding-bottom: 0.25rem; }

.answer { font-size: 1rem; margin: 0.4rem 0 1rem; }
.updated { color: #444; font-size: 0.95rem; }

/* ---- latest result hero ---- */
.hero {
  background: var(--paper-alt);
  border: 2px solid var(--rule); border-radius: 10px;
  padding: 1rem; margin: 1rem 0;
  text-align: center;
}
.balls { display: flex; gap: 0.8rem; justify-content: center; margin: 0.8rem 0; }
.ball {
  display: flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  font-size: 2.1rem; font-weight: 700;
}
.facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; font-size: 0.95rem; }
.facts b { font-size: 1.05rem; }
.nextdraw { margin-top: 0.6rem; font-weight: 700; }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 0.5rem 0 1rem; }
caption { text-align: left; font-weight: 700; padding: 0.3rem 0; }
th, td { border: 1px solid var(--rule); padding: 0.6rem 0.7rem; text-align: left; }
th { background: var(--paper-alt); }
tbody tr:nth-child(even) { background: #faf8f3; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th button.sort {  /* JS enhancement target; ≥48px tap */
  all: unset; cursor: pointer; display: block; width: 100%;
  min-height: 2rem; padding: 0.2rem 0; font-weight: 700;
}
th button.sort::after { content: " ↕"; color: #555; }
th[aria-sort="ascending"] button.sort::after { content: " ↑"; }
th[aria-sort="descending"] button.sort::after { content: " ↓"; }

.badge { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 6px; font-weight: 700; color: #fff; }
.badge.hot { background: var(--hot); }
.badge.cold { background: var(--cold); }
tr.longest-out { background: #fdeaea !important; font-weight: 700; }

/* ---- big-button window selector (real links) ---- */
.winsel { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.winsel a, .winsel span.on {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6rem; min-height: 3rem; /* 48px+ */
  border: 3px solid var(--accent); border-radius: 8px;
  font-weight: 700; text-decoration: none; padding: 0 1rem;
}
.winsel span.on { background: var(--accent); color: var(--accent-ink); }
.winsel a { color: var(--accent); }

/* ---- skip grid: ruled notebook ledger ---- */
.ledger-scroll { overflow-x: auto; }
table.ledger {
  background:
    repeating-linear-gradient(#fff, #fff 2.45rem, #d8e4f0 2.45rem, #d8e4f0 2.5rem);
  font-size: 0.95rem;
}
table.ledger th, table.ledger td { border: none; border-bottom: 1px solid #d8e4f0; text-align: center; padding: 0.45rem 0.4rem; }
table.ledger td.hit { color: var(--accent); font-weight: 700; font-size: 1.1rem; }
table.ledger td.skip { color: #666; font-size: 0.85rem; }
table.ledger th.datecol, table.ledger td.datecol { text-align: left; white-space: nowrap; border-right: 2px solid var(--accent); }

/* ---- tab bar: real links, one page per tab ---- */
nav.tabs { margin: 1rem 0 1.5rem; border-bottom: 4px solid var(--accent); }
nav.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
nav.tabs a, nav.tabs span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.8rem; padding: 0 0.9rem;
  border: 2px solid var(--rule); border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-weight: 700; text-decoration: none; font-size: 0.95rem;
  background: var(--paper-alt); color: var(--ink);
}
nav.tabs a:hover { border-color: var(--accent); color: var(--accent); }
nav.tabs span[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- jump bar: big real <select> dropdowns ---- */
.jumpbar { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0.8rem 0 0.4rem; }
.jumpbar label { font-weight: 700; display: block; margin-bottom: 0.2rem; }
.jumpbar select {
  font: inherit; font-size: 1.05rem; min-height: 3rem; min-width: 12rem;
  padding: 0.3rem 0.6rem; border: 3px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink);
}
.jumpbar select:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.jumpbar noscript a { display: inline-block; padding: 0.4rem 0; }

/* ---- digit balls for hot/cold ---- */
.ballrow { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.dball { text-align: center; }
.dball .ball { width: 3rem; height: 3rem; font-size: 1.6rem; margin: 0 auto; border-width: 3px; }
.dball.hot .ball { background: var(--hot); color: #fff; border-color: var(--hot); }
.dball.cold .ball { background: var(--cold); color: #fff; border-color: var(--cold); }
.dball small { display: block; font-size: 0.78rem; color: #444; margin-top: 0.15rem; }
.legend { font-size: 0.85rem; color: #444; }

/* ---- centered groups & boxed cards ---- */
.center { justify-content: center; text-align: center; }
.glance { text-align: center; margin: 0.8rem 0; }
.glabel { font-weight: 700; margin-bottom: 0.2rem; }
.glabel.hot { color: var(--hot); }
.glabel.cold { color: var(--cold); }
.cards {
  display: grid; gap: 0.8rem; text-align: center;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  max-width: 44rem; margin: 0 auto 1rem;
}
.card { border: 2px solid var(--rule); border-radius: 10px; background: #fff; padding: 0.5rem 0.4rem 0.7rem; }
.card h3 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }

/* window selector as real buttons (JS-switched) */
.winsel button {
  font: inherit; font-weight: 700; min-height: 3rem; min-width: 6rem;
  border: 3px solid var(--accent); border-radius: 8px;
  background: #fff; color: var(--accent); cursor: pointer; padding: 0 1rem;
}
.winsel button.on { background: var(--accent); color: var(--accent-ink); }

/* ---- CSS-only histogram bars ---- */
td.barcell { width: 45%; min-width: 8rem; padding: 0.3rem 0.5rem; }
.bar {
  display: block; height: 1.1rem; min-width: 2px; border-radius: 3px;
  background: var(--accent);
}

/* ---- heat map ---- */
table.heat th { text-align: center; }
table.heat td { text-align: center; font-weight: 700; }
.h0 { background: #f7f5f0; } .h1 { background: #fdead9; } .h2 { background: #f8c9a2; }
.h3 { background: #ee9257; color: #310c00; } .h4 { background: #b93f14; color: #fff; }

/* ---- explainers & highlights ---- */
details.explain { margin: 0.6rem 0; text-align: left; }
details.explain summary {
  cursor: pointer; font-weight: 700; min-height: 2.6rem;
  display: flex; align-items: center; gap: 0.4rem; list-style: none;
}
details.explain summary::-webkit-details-marker { display: none; }
details.explain summary::before { content: "▸"; color: var(--accent); font-size: 1.2rem; }
details.explain[open] summary::before { content: "▾"; }
.readmore {
  font-weight: 400; font-size: 0.85rem; color: var(--link);
  text-decoration: underline; text-underline-offset: 3px;
}
details.explain[open] .readmore { display: none; }
mark { background: #ffe89e; padding: 0 0.2rem; }
.takehome { font-size: 1.15rem; }

/* ---- simulator (responsive grid: inputs + button align on one row on
   desktop, stack into full-width rows on small screens) ---- */
.sim { background: var(--paper-alt); border: 2px solid var(--rule); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.sim .row {
  display: grid; gap: 0.8rem; align-items: end; margin-bottom: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.sim label { font-weight: 700; display: block; margin-bottom: 0.2rem; }
.sim input, .sim select {
  font: inherit; min-height: 2.8rem; padding: 0.3rem 0.6rem; width: 100%;
  border: 2px solid var(--rule); border-radius: 8px; background: #fff;
}
.sim button {
  font: inherit; font-weight: 700; min-height: 2.8rem; padding: 0 1.2rem; width: 100%;
  border: 2px solid var(--accent); border-radius: 8px; background: var(--accent);
  color: #fff; cursor: pointer;
}
.sim .out { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 0.8rem; margin-top: 0.6rem; overflow-x: auto; }
table.simres { max-width: 30rem; margin: 0.4rem auto; }
table.simres th { text-align: center; }
table.simres td { text-align: center; font-variant-numeric: tabular-nums; }
.win { color: #0b6b28; font-weight: 700; }
.lose { color: #a11212; font-weight: 700; }

/* ---- state hub game cards + CSS logo badges ---- */
.gamecards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); margin: 1rem 0; }
.gamecard {
  display: block; border: 2px solid var(--rule); border-radius: 12px;
  background: var(--paper-alt); padding: 0.9rem; text-decoration: none; color: var(--ink);
}
a.gamecard:hover { border-color: var(--accent); }
.gamecard .head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.gamecard h3 { margin: 0; font-size: 1.15rem; }
.gamecard .sub { font-size: 0.85rem; color: #444; }
.gbanner { max-height: 3.4rem; max-width: 11rem; object-fit: contain; flex: none; }
.slot { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; min-height: 2.4rem; }
.glogo {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.3rem;
  color: #fff; border: 3px solid rgba(0,0,0,0.15);
}
.g-p3  { background: #7a0c0c; }
.g-p4  { background: #0b4f8a; }
.g-c5  { background: #1c6b30; }
.g-lfl { background: #0e6d6d; }
.g-pb  { background: #b3251e; }
.g-mm  { background: #a86b00; }
.miniballs { display: flex; gap: 0.4rem; margin: 0.4rem 0; flex-wrap: wrap; }
.miniballs .ball { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; border-width: 2px; }
/* two-digit jackpot-style balls + colored special ball */
.ball.wide { font-size: 1.1rem; }
.ball.special { background: #b3251e; border-color: #b3251e; color: #fff; }
.ball.special.gold { background: #a86b00; border-color: #a86b00; }
.soon {
  display: inline-block; padding: 0.15rem 0.7rem; border-radius: 6px;
  background: #ddd6c8; color: #333; font-weight: 700; font-size: 0.85rem;
}

/* ---- stacking progress checklist (fun numbers) ---- */
.checklist { list-style: none; padding: 0; margin: 0.2rem 0 0.6rem; }
.checklist li {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 2.1rem; opacity: 0; animation: fadein 0.3s ease-out forwards;
}
.checklist .mark {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--rule); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; line-height: 1;
}
.checklist li.doing .mark { border-color: var(--accent); color: var(--accent); }
.checklist li.done .mark { background: #0b6b28; border-color: #0b6b28; color: #fff; }
.checklist li.done span:last-child { color: #444; }
@keyframes fadein { to { opacity: 1; } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ball.pop { animation: pop 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .checklist li, .ball.pop { animation: none; opacity: 1; }
}

/* ---- how-to-use walkthrough figures ---- */
.figure {
  border: 2px dashed var(--rule); border-radius: 10px;
  background: #fdfcf9; padding: 0.8rem; margin: 0.6rem 0 1rem;
}
.figure .cap { font-size: 0.82rem; color: #555; margin-top: 0.5rem; }
.figure select, .figure input {
  font: inherit; min-height: 2.8rem; padding: 0.3rem 0.6rem;
  border: 2px solid var(--rule); border-radius: 8px; background: #fff; max-width: 100%;
}
.figure label { font-weight: 700; display: block; margin-bottom: 0.2rem; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 0.6rem 2.6rem; margin-bottom: 0.6rem;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
table.legend-table td:first-child { font-weight: 700; white-space: nowrap; }
.callout {
  border-left: 6px solid var(--accent); background: var(--paper-alt);
  padding: 0.7rem 0.9rem; margin: 1rem 0; border-radius: 0 8px 8px 0;
}
.callout.warn { border-left-color: #a11212; background: #fdeaea; }

/* ---- section nav & big links ---- */
.biglinks { list-style: none; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.biglinks a {
  display: flex; align-items: center; min-height: 3rem;
  border: 2px solid var(--rule); border-radius: 8px; padding: 0.4rem 1rem;
  background: var(--paper-alt); font-weight: 700; text-decoration: none; color: var(--ink);
}
.biglinks a:hover { border-color: var(--accent); }

/* shortcut bar on deep pages — always the same look and place */
.shortcuts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
  background: var(--paper-alt); border: 2px solid var(--rule); border-radius: 10px;
  padding: 0.6rem 0.8rem; margin: 0.8rem 0 1.2rem;
}
.shortcuts a {
  display: inline-flex; align-items: center; min-height: 2.8rem; padding: 0 0.9rem;
  border: 2px solid var(--accent); border-radius: 8px; background: #fff;
  color: var(--accent); font-weight: 700; text-decoration: none; font-size: 0.95rem;
}
.shortcuts a:hover { background: var(--accent); color: #fff; }

.pagenav { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin: 1.5rem 0; }
.pagenav .navlabel { flex-basis: 100%; font-size: 0.85rem; color: #444; }
.pagenav a { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1rem;
  border: 2px solid var(--rule); border-radius: 8px; text-decoration: none; font-weight: 700; }

.coverline { margin: 0.4rem 0 0.2rem; }

/* ---- footer ---- */
/* heading for notes that live inside the play-responsibly band */
footer.site h2.footh {
  margin: 0 0 0.4rem; font-size: 1rem;
  border-bottom: none; padding-bottom: 0;
}
footer.site h2.footh + p { margin-top: 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }

footer.site {
  margin-top: 3rem; padding: 1.2rem 0 2rem;
  border-top: 4px solid var(--accent);
  background: var(--paper-alt); font-size: 0.85rem; color: #333;
}
footer.site p { max-width: 46rem; }

@media (max-width: 480px) {
  .ball { width: 3.8rem; height: 3.8rem; font-size: 2.3rem; border-width: 3px; }
  th, td { padding: 0.5rem 0.4rem; }
}