/* Take-Home Jackpot — one stylesheet. Tokens and rationale in DESIGN.md. */
:root {
  --ink: #16233B;
  --graphite: #4A5752;
  --paper: #FFFFFF;
  --safety: #E6EFEA;
  --deduct: #A4262C;
  --link: #1D4F91;
  --rule: #B7C9C0;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 3px;
  --measure: 44rem;
  --wide: 60rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
@media (max-width: 480px) { html { font-size: 100%; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
}
img { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: var(--s2) var(--s3); z-index: 10; }
.skip:focus { left: var(--s4); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s4); }
.prose, .narrow { max-width: var(--measure); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums; }
h1 { font-size: 1.953rem; margin: var(--s5) 0 var(--s4); }
h2 { font-size: 1.563rem; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.25rem; margin: var(--s5) 0 var(--s2); }
p { margin: 0 0 var(--s4); }
.lead { font-size: 1.1rem; }
.small, small { font-size: 0.8rem; color: var(--graphite); }
.muted { color: var(--graphite); }
.num { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.minus { color: var(--deduct); }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); padding-top: var(--s3); padding-bottom: var(--s3); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 0.9rem; }
@media (max-width: 480px) { .site-nav { gap: 2px var(--s3); font-size: 0.85rem; } .brand { width: 100%; } }
.site-nav a { color: var(--ink); }
.site-nav .jp { font-family: var(--serif); font-variant-numeric: lining-nums; color: var(--graphite); margin-left: var(--s1); }

/* Breadcrumb */
.crumbs { font-size: 0.8rem; color: var(--graphite); margin-top: var(--s4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 var(--s2); color: var(--rule); }
.crumbs a { color: var(--graphite); }

/* The check: answer block */
.check {
  background: var(--safety);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s5) var(--s4) var(--s4);
  margin: 0 calc(-1 * var(--s4)) var(--s5);
  max-width: calc(var(--measure) + 2 * var(--s4));
}
@media (min-width: 720px) { .check { margin-left: 0; margin-right: 0; padding: var(--s5) var(--s5) var(--s4); } }
.check .context { margin: 0 0 var(--s2); font-size: 0.95rem; }
.check .keep { margin: 0; font-size: 0.95rem; color: var(--graphite); }
.check .figure {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.8rem);
  line-height: 1.15;
  margin: var(--s1) 0 var(--s2);
  letter-spacing: -0.01em;
}
.check .figure small { display: block; font-size: 1rem; font-weight: 400; color: var(--ink); letter-spacing: 0; white-space: normal; font-family: var(--sans); margin-top: var(--s1); }
.check .words {
  font-family: var(--serif);
  font-style: italic;
  color: var(--graphite);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s2);
  margin: 0 0 var(--s3);
}
.check .range { font-size: 1.05rem; margin: var(--s2) 0 var(--s3); }
.badge { font-size: 0.8rem; color: var(--graphite); margin: 0; }
.badge.stale { color: var(--deduct); border: 1px solid var(--deduct); padding: var(--s2) var(--s3); margin-top: var(--s2); background: var(--paper); }
.notice { border-left: 3px solid var(--deduct); padding: var(--s2) var(--s3); background: var(--paper); margin: var(--s3) 0; font-size: 0.9rem; }

/* Ledger (waterfall) */
table { border-collapse: collapse; width: 100%; font-variant-numeric: lining-nums tabular-nums; }
caption { text-align: left; font-size: 0.8rem; color: var(--graphite); padding-bottom: var(--s2); caption-side: top; }
th, td { padding: var(--s2) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
th { font-weight: 600; font-size: 0.9rem; }
td.r, th.r { text-align: right; }
.ledger { max-width: var(--measure); margin-bottom: var(--s4); }
.ledger td:first-child, .ledger th:first-child { padding-left: 0; }
.ledger td.amt { font-family: var(--serif); text-align: right; white-space: nowrap; width: 9.5rem; }
.ledger td.bar { width: 28%; padding-right: 0; }
.ledger .b { display: block; height: 0.6rem; margin-top: 0.45rem; background: var(--ink); min-width: 1px; }
.ledger .b.d { background: var(--deduct); }
.ledger .b.g { background: var(--rule); }
.ledger tr.deduct td.amt, .ledger tr.deduct td.lbl { color: var(--deduct); }
.ledger tr.deduct.zero td.amt, .ledger tr.deduct.zero td.lbl { color: var(--ink); }
.ledger tr.total td { border-bottom: 3px double var(--ink); border-top: 1px solid var(--ink); font-weight: 700; }
.ledger tr.total td.amt { font-size: 1.1rem; }
.ledger .note { display: block; font-size: 0.8rem; color: var(--graphite); font-weight: 400; }
@media (max-width: 480px) { .ledger td.bar { display: none; } }

/* Forms */
form.controls { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-end; margin: var(--s4) 0 var(--s5); max-width: var(--measure); }
form.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3) var(--s4); max-width: var(--measure); margin: var(--s4) 0 var(--s5); align-items: end; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: var(--s1); }
select, input[type="text"], input[type="number"], input[type="search"], input[type="password"], textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: var(--s2) var(--s3); width: 100%; min-height: 2.6rem;
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 0.85rem; font-weight: 600; margin-bottom: var(--s1); padding: 0; }
.seg { display: flex; }
.seg label { font-weight: 400; display: flex; align-items: center; gap: var(--s1); margin: 0 var(--s4) 0 0; font-size: 0.95rem; min-height: 2.6rem; }
button, .button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--link); color: var(--paper); border: 1px solid var(--link);
  border-radius: var(--radius); padding: var(--s2) var(--s4); min-height: 2.6rem; text-decoration: none; display: inline-block;
}
button.secondary { background: var(--paper); color: var(--link); }
.js .nojs-only { display: none; }

/* Comparison + state tables */
.table-wrap { max-width: var(--wide); overflow-x: auto; margin-bottom: var(--s4); }
.states th a { color: var(--ink); }
.states th[aria-sort] a { text-decoration-thickness: 2px; }
.states tr.here td { background: var(--safety); }
.states tr.local td:first-child { padding-left: var(--s5); font-size: 0.9rem; }
.sub { display: block; font-size: 0.8rem; color: var(--graphite); font-weight: 400; }
.states td.num { text-align: right; }
@media (max-width: 480px) {
  .states .hide-s { display: none; }
  .states th, .states td { padding-left: var(--s1); padding-right: var(--s1); }
}
@media (min-width: 481px) { .states td .sub.s-only { display: none; } }

.compare { max-width: var(--measure); }
.compare td.num, .compare th.r { text-align: right; }

details { border-top: 1px solid var(--rule); padding: var(--s3) 0; max-width: var(--measure); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
details summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: var(--s3); }
details.schedule { max-width: var(--wide); }
details.schedule table { font-size: 0.9rem; }
.faq details p:last-child { margin-bottom: 0; }

/* Home: two live jackpots */
.live { display: grid; gap: var(--s4); margin: var(--s4) 0 var(--s5); }
@media (min-width: 768px) { .live { grid-template-columns: 1fr 1fr; } }
.live section { border: 1px solid var(--rule); padding: var(--s4); }
.live h2 { margin: 0 0 var(--s2); font-size: 1.25rem; }
.live .adv { font-family: var(--serif); font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: lining-nums; }
.live p { margin: 0 0 var(--s2); }

/* Link lists */
.links { columns: 11rem 4; column-gap: var(--s5); padding: 0; list-style: none; margin: 0 0 var(--s4); }
.links li { break-inside: avoid; padding: 2px 0; }
.related h3 { font-size: 1.05rem; font-family: var(--sans); }

/* Ads: reserved space, never above the answer */
.ad { margin: var(--s6) 0; min-height: 280px; max-width: var(--wide); }
.ad .ad-label { font-size: 0.7rem; color: var(--graphite); margin: 0 0 var(--s1); }
@media (min-width: 768px) { .ad { min-height: 250px; } }
.affiliate { border: 1px solid var(--rule); padding: var(--s4); max-width: var(--measure); margin: var(--s5) 0; }

/* Footer */
.sources { font-size: 0.85rem; max-width: var(--measure); }
.sources li { margin-bottom: var(--s1); }
.site-foot { border-top: 1px solid var(--rule); margin-top: var(--s8); padding: var(--s5) 0 var(--s7); font-size: 0.85rem; color: var(--graphite); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-bottom: var(--s3); }
.site-foot a { color: var(--graphite); }
.responsible { font-size: 0.85rem; color: var(--graphite); max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s6); }

/* Consent banner */
.consent { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 2px solid var(--ink); padding: var(--s4); z-index: 20; }
.consent[hidden] { display: none; }
.consent .wrap { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.consent p { margin: 0; flex: 1 1 20rem; font-size: 0.9rem; }
.consent .actions { display: flex; gap: var(--s2); }

/* Embed widget page */
body.embed { background: var(--paper); }
.widget { border: 1px solid var(--rule); background: var(--safety); padding: var(--s3) var(--s4); font-size: 0.95rem; }
.widget .figure { font-family: var(--serif); font-weight: 700; font-size: 1.8rem; margin: var(--s1) 0; font-variant-numeric: lining-nums; }
.widget p { margin: 0 0 var(--s1); }
pre, code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85rem; }
pre { background: var(--safety); padding: var(--s3); overflow-x: auto; max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-head nav, .ad, .consent, form, .related, .site-foot nav, .skip, .affiliate { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .check { background: none; border-color: #000; margin: 0 0 12pt; }
  .ledger .b { background: #000 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  details { border: 0; }
  details > *:not(summary) { display: block; }
  .sources a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  a { color: #000; text-decoration: none; }
}

/* Utilities */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .hide-s { display: none; } }