/* MilliCheck. See DESIGN.md for the rules this file implements.
   Two self-hosted variable fonts, no framework, no third-party requests. */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-wght.ada540c0e24a.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-wght.175a37868200.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --paper: #f5f2ea;
  --card: #fffdf7;
  --ink: #14130f;
  --ink-soft: #57544b;
  --rule: #d8d3c4;
  --signal: #d93b18;
  /* The bright signal is 4.09:1 on paper, which clears AA for large text only.
     Small text gets the darker one at 4.92:1. Measured, not eyeballed. */
  --signal-text: #c43214;
  --mark: #ffd93d;
  /* A softer version of the highlighter, for anything larger than a ball.
     The bright one reads as a pen stroke on a number; across a whole panel it
     glares. Both carry ink at better than 13:1. */
  --mark-soft: #f7e7a4;
  --mark-ink: #14130f;
  --confirm: #1a6b3c;

  --display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;

  --measure: 34rem;
  --wide: 66rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141310;
    --card: #1c1a16;
    --ink: #f3f0e7;
    --ink-soft: #a9a496;
    --rule: #33302a;
    --signal: #ff6b4a;
    --signal-text: #ff8a6e;
    --confirm: #5fd48c;
    /* Dark mode inverts the soft one rather than keeping a pale block, which
       would glare on a dark page. The bright --mark stays as it is: a
       highlighter is yellow on paper and on screen alike. */
    --mark-soft: #2e2a17;
    --mark-ink: #f3f0e7;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 20px; top: 10px; z-index: 10;
  background: var(--mark); color: #14130f; padding: 10px 14px;
}

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

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

/* ---- Masthead. A masthead, not a floating nav bar. ---- */
.masthead { border-bottom: 3px solid var(--ink); background: var(--paper); }
.masthead .wrap { padding-top: 18px; padding-bottom: 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  margin: 0 0 8px;
}
.wordmark em { font-style: normal; color: var(--signal); }
.wordmark .mark { width: 1.05em; height: 1.05em; flex: none; }
.dateline {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: 8px 0;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dateline nav { margin-left: auto; display: flex; gap: 18px; }
.dateline a { text-decoration: none; color: var(--ink-soft); }
.dateline a:hover { color: var(--signal-text); }

/* ---- Headings ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); margin: 32px 0 10px; max-width: 18ch; }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); margin: 0 0 14px; }
h3 { font-size: 1.1rem; margin: 0; letter-spacing: -0.015em; }

.kicker {
  font-family: var(--display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-text);
  margin: 0 0 6px;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 24px; }
.meta, .hint, .note { font-family: var(--display); font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); }
.note { max-width: var(--measure); }
.empty { color: var(--ink-soft); padding: 20px 0; }
.unknown { color: var(--signal-text); }

section { margin-bottom: 56px; }
.section-head { border-bottom: 3px solid var(--ink); padding-bottom: 8px; margin-bottom: 20px; }
.section-head h2 { margin: 0; }

/* ---- Buttons ---- */
.button, button {
  display: inline-block;
  font-family: var(--display); font-size: 0.95rem; font-weight: 700;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  padding: 12px 22px; min-height: 44px;
  text-decoration: none; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.button:hover, button:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.button.quiet { background: transparent; color: var(--ink); }
.button.quiet:hover { background: var(--ink); color: var(--paper); }

/* ---- The stub: the one layout primitive ---- */
.stub {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px;
}
/* The perforation. A printed edge, not a shadow. */
.stub::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 4px;
  background-image: repeating-linear-gradient(
    to right, var(--ink) 0 7px, transparent 7px 14px
  );
}
.stub-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px; margin-bottom: 14px;
}
.stub-head h3 a { text-decoration: none; }
.stub-head h3 a:hover { color: var(--signal-text); }
.stub-head .when { font-family: var(--display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* Three columns at full width, and six balls on one row inside each. The
   container is 1016px of usable width, so 3 x 310 + 2 x 18 fits and each
   column lands near 326px. That leaves 286px inside the padding, and
   6 x 41 + 5 x 6 = 276. Both constraints hold, so no card goes ragged and no
   third card is left orphaned on a row of its own. */
.stub-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.stub-grid .stub { display: flex; flex-direction: column; }
/* Pins the action to the bottom so cards of different heights still line up. */
.stub-grid .stub > p:last-child { margin-top: auto; margin-bottom: 0; }
.stub .ball { width: 41px; height: 41px; font-size: 1rem; }
.stub .balls { gap: 6px; }

/* ---- Balls ---- */
.balls { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.ball.special { background: var(--signal); border-color: var(--signal); color: #fff; }
/* The highlighter. A matched number is marked, the way you would mark a
   printed ticket with a pen. No legend needed. */
.ball.marked { background: var(--mark); border-color: var(--ink); color: #14130f; }
.ball.special.marked { background: var(--mark); border-color: var(--signal); color: #14130f; }
.ball.small { width: 34px; height: 34px; font-size: 0.85rem; border-width: 1.5px; }

/* ---- The check form ---- */
/* Boxes are grouped and each group carries its own range underneath. One
   sentence saying "the last box is the Powerball, 1 to 26, the rest are 1 to
   69" reads in the wrong order: people take the first range they see and apply
   it to the box they are typing in, which is the first one. Put the range under
   the boxes it governs and there is nothing left to misread. */
.ball-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; align-items: flex-start; }
.ball-group { display: flex; flex-direction: column; gap: 7px; }
.ball-boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.range-label {
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.ball-group.special .range-label { color: var(--signal-text); }
.ball-input input {
  width: 60px; height: 60px; text-align: center;
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50%;
  -moz-appearance: textfield;
}
.ball-input input::-webkit-outer-spin-button,
.ball-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ball-input input::placeholder { color: var(--rule); }
.ball-input.special input { border-color: var(--signal); }
.ball-input.has-error input { border-color: var(--signal); background: #fff1ee; }

fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend {
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0; margin-bottom: 10px;
}
label { display: block; margin-bottom: 5px; font-family: var(--display); font-size: 0.9rem; }
select {
  font-family: var(--display); font-size: 1rem;
  padding: 11px 12px; width: 100%; max-width: 24rem; min-height: 44px;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 2px;
}
.checkbox { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.checkbox label { margin: 0; }
.checkbox input { width: 22px; height: 22px; accent-color: var(--signal); }
.privacy-note { margin-top: 14px; max-width: var(--measure); }
.field-error, .errors { font-family: var(--display); font-size: 0.85rem; color: var(--signal-text); }

/* ---- The answer ---- */
.answer { margin: 0 0 32px; padding: 24px; }
.answer .verdict {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1;
  margin: 0 0 4px;
}
/* The highlighter again, this time behind the verdict of a win. */
.answer.win .verdict mark { background: var(--mark); color: #14130f; padding: 2px 6px; }
.answer .amount {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 9vw, 3.6rem);
  letter-spacing: -0.03em; margin: 12px 0 0; color: var(--confirm);
}
.answer .amount.unknown { font-size: clamp(1.2rem, 4vw, 1.5rem); color: var(--signal); max-width: 22ch; line-height: 1.25; }
.answer .drawn-label { font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 0 8px; }
.caveats { margin: 18px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 0.95rem; max-width: var(--measure); }
.caveats li { margin-bottom: 8px; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
caption { text-align: left; font-family: var(--display); font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 8px; }
th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
thead th {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}
tbody th { font-family: var(--display); font-weight: 600; }
td { font-family: var(--display); font-size: 0.95rem; }
tr.retired td, tr.retired th { color: var(--ink-soft); }
.tag {
  font-family: var(--display); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 1px 6px; white-space: nowrap;
}
.numbers { white-space: nowrap; }

/* ---- Index list, for games ---- */
/* ---- The lottery hub. Every lottery's four pages one click from here, which
   is the only route to the payout chart and odds pages besides a lottery's own
   navigation. ---- */
.lottery-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lottery-index li { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.lottery-index h2 { font-size: 1.25rem; margin: 0 0 6px; }
.lottery-index h2 a { text-decoration: none; }
.lottery-index h2 a:hover { color: var(--signal-text); }
.lottery-index .play { margin: 0 0 2px; max-width: var(--measure); }
.lottery-index .when { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.lottery-index .deep {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 12px 0 0; font-family: var(--display); font-size: 0.86rem;
}
.lottery-index .deep a { padding: 4px 0; }

/* ---- Prose ---- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 36px; }
.prose p { margin: 0 0 18px; }

.columns { display: grid; gap: 32px; grid-template-columns: 1.15fr 1fr; align-items: start; }

footer.site {
  border-top: 3px solid var(--ink);
  margin-top: 64px; padding: 24px 0 48px;
  color: var(--ink-soft); font-size: 0.92rem;
}
footer.site p { max-width: 46rem; margin: 0 0 10px; }

@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  /* The two groups may wrap onto separate lines at this width. Each carries
     its own range label, so a wrap reads as two labelled groups rather than a
     bonus ball that has gone missing. */
  .ball-row { gap: 10px 14px; }
  .ball-boxes { gap: 7px; }
  .ball-input input { width: 50px; height: 50px; font-size: 1.1rem; }
  .balls { gap: 6px; }
  .ball { width: 40px; height: 40px; font-size: 0.95rem; }
  .ball.small { width: 30px; height: 30px; font-size: 0.78rem; }
  .stub-grid { grid-template-columns: 1fr; }
  .dateline nav { margin-left: 0; width: 100%; }
}

/* ---- Breadcrumbs. Real navigation, and the markup Google reads for the
   breadcrumb trail it shows under a result. ---- */
.crumbs { padding-top: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
  font-family: var(--display); font-size: 0.82rem; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--signal-text); text-decoration: underline; }

/* ---- The five pages a game has. Tabs in behaviour, rules in appearance. ---- */
.game-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 32px;
  border-bottom: 2px solid var(--ink); }
.game-nav a { font-family: var(--display); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; color: var(--ink-soft); padding: 8px 0 10px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; }
.game-nav a:hover { color: var(--ink); }
.game-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }

/* ---- FAQ ---- */
.faq dl { margin: 0; max-width: 46rem; }
.faq .qa { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.faq dt { font-family: var(--display); font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.faq dd { margin: 0; color: var(--ink-soft); }

/* ---- Big single figures, used only where the figure is the point ---- */
.stat-line { display: flex; flex-direction: column; gap: 2px; margin: 0 0 18px; }
.stat-figure { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 5vw, 2.1rem); }
.stat-label { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); }

/* ---- Pagination ---- */
.pager { display: flex; align-items: center; gap: 20px; margin-top: 20px;
  font-family: var(--display); font-size: 0.9rem; color: var(--ink-soft); }
.pager a { color: var(--ink); font-weight: 600; }

/* Wide tables scroll inside their own container so the page never does. */
.scroll { overflow-x: auto; }

.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px;
  font-family: var(--display); font-size: 0.9rem; }
.foot-nav a { color: var(--ink); }

@media (max-width: 560px) {
  .game-nav { gap: 0 16px; }
  .game-nav a { font-size: 0.85rem; }
}

/* Compact definition list, for short answers that do not need prose. */
.compact { margin: 0; max-width: 46rem; }
.compact .qa { border-bottom: 1px solid var(--rule); padding: 13px 0; }
.compact dt { font-family: var(--display); font-weight: 700; font-size: 0.98rem; margin-bottom: 3px; }
.compact dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---- The home page checker. The page's main event, so it gets the space. ---- */
.hero { margin-bottom: 28px; }
.checker { background: var(--card); border: 1px solid var(--rule); padding: 24px; margin-bottom: 56px; }
.checker .answer { margin: 0 0 24px; border: 1px solid var(--rule); }
.check-row { display: grid; grid-template-columns: minmax(200px, 15rem) 1fr; gap: 20px; align-items: start; }
.check-row label { font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.checker .ball-row { margin-bottom: 0; }
.checker .ball-input[hidden] { display: none; }
.checker button[type="submit"] { margin-top: 18px; }
.signup { max-width: 22rem; }
.signup input[type="email"] {
  font-family: var(--display); font-size: 1rem; width: 100%; min-height: 44px;
  padding: 11px 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 2px; margin-bottom: 12px;
}
.signup label { display: block; font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.joined { background: var(--mark); color: #14130f; padding: 16px 18px; font-family: var(--display); }
.pitch .columns { align-items: start; }

@media (max-width: 700px) {
  .check-row { grid-template-columns: 1fr; gap: 16px; }
  .checker { padding: 18px; margin-left: -20px; margin-right: -20px; border-left: 0; border-right: 0; }
}

/* ---- A fact, set as an aside between sections. Yellow because the same
   highlighter marks a number you matched, so the colour already reads as
   "look here" everywhere else on the site. ---- */
.fact {
  position: relative;
  background: var(--mark-soft);
  color: var(--mark-ink);
  border: 1px solid var(--ink);
  padding: 22px 26px;
  margin: 0 0 56px;
  max-width: 46rem;
}
.fact-head {
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -0.015em; margin: 0 0 6px;
}
.fact-body { margin: 0; font-size: 1rem; line-height: 1.55; }
/* Dark mode keeps the yellow: a highlighter is yellow on paper and on screen
   alike, and black on it is 13.5:1 either way. */
@media (max-width: 560px) { .fact { padding: 18px 20px; } }

/* ---- Chips: plain navigation between lotteries. Square, like everything
   else here, rather than a pill row. ---- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips a {
  display: inline-block; font-family: var(--display); font-size: 0.92rem; font-weight: 600;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px;
  padding: 9px 15px; text-decoration: none;
  transition: background 120ms, color 120ms;
}
.chips a:hover { background: var(--ink); color: var(--paper); }

.official {
  margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.92rem; max-width: var(--measure);
}

/* ---- Account surfaces ---- */
.narrow { max-width: 34rem; }
.stack { display: grid; gap: 14px; justify-items: start; }
.stack label { font-family: var(--display); font-weight: 700; }
.stack input[type="email"], .stack input[type="text"], .stack select { width: 100%; max-width: 28rem; }
.fine { font-size: 0.88rem; color: var(--ink-soft); max-width: var(--measure); }

.inline-form { display: inline; margin: 0; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}
.linkish:hover { color: var(--signal-text); }
.linkish.danger { color: var(--ink-soft); font-size: 0.88rem; }
.linkish.danger:hover { color: var(--signal-text); }

/* Messages. Every action that changes something says so. */
.flash { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.flash li {
  padding: 12px 14px; border: 1px solid var(--ink);
  font-family: var(--display); font-size: 0.95rem;
}
.flash-success { background: var(--mark-soft); color: var(--mark-ink); }
.flash-error { background: var(--signal); color: #fff; border-color: var(--ink); }
.flash-info { background: var(--paper-soft, transparent); }

.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head p { margin: 0; }

.won { border: 2px solid var(--ink); padding: 20px; margin-bottom: 40px; background: var(--mark-soft); color: var(--mark-ink); }
.won h2 { margin-top: 0; }
.win-list, .ticket-list { list-style: none; margin: 0; padding: 0; }
.win-list li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ink); }

.ticket-list { border-top: 1px solid var(--rule); }
.ticket-list li { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.ticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ticket-head h3 { margin: 0; font-size: 1.05rem; }
.ticket-list .balls { margin: 10px 0; }
.ticket-list .meta { margin: 6px 0; }

/* How far through its drawings an advance-play ticket is. */
.ticket-list .coverage { font-family: var(--display); font-weight: 600; color: var(--ink); }

/* Spent tickets. Present and readable, but visibly not the live list: these
   can never win again, and a dashboard that treats them the same invites
   somebody to keep waiting on paper that is finished. */
.finished { margin-top: 40px; }
.finished .section-head h2 { color: var(--ink-soft); }
.ticket-list.spent li { opacity: 0.72; }
.ticket-list.spent li:hover, .ticket-list.spent li:focus-within { opacity: 1; }
.ticket-list.spent .ball { border-color: var(--rule); }
.history { list-style: none; margin: 8px 0 0; padding: 0;
  font-family: var(--display); font-size: 0.85rem; color: var(--ink-soft); }
.history li { padding: 2px 0; }

/* The drawings count. A number between 1 and 26 does not need a full-width
   input, and one that looks like the name field invites a name. */
.narrow-number { width: 6rem; }

.empty-state { border: 1px solid var(--rule); padding: 24px; max-width: var(--measure); }
.empty-state p:first-child { margin-top: 0; }

/* The save form: one lottery, several lines. */
.lines { border: 0; padding: 0; margin: 0; }
.lines legend { font-family: var(--display); font-weight: 700; padding: 0; }
/* Top-aligned, not centred. Each group now carries a range label underneath,
   so centring put the line number against the middle of boxes-plus-label
   rather than against the boxes. */
.line { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.line-number {
  font-family: var(--display); font-size: 0.8rem; color: var(--ink-soft);
  width: 1.4em; flex: none; text-align: right; padding-top: 19px;
}
.line-status { align-self: center; }

/* Checked as you type. A number outside its range or entered twice is marked
   at the keystroke, not after the form is submitted. */
.ball-input input.invalid {
  border-color: var(--signal); border-width: 3px; color: var(--signal-text);
}
.line-status {
  font-family: var(--display); font-size: 0.85rem; color: var(--ink-soft);
  min-height: 1.2em;
}
.line-status.bad { color: var(--signal-text); }
.line-status.ok { color: var(--confirm); font-weight: 700; }
.line-status.ok::before { content: "\2713\00a0"; }
.line-ok .ball-input:not([hidden]) input { border-color: var(--confirm); }

/* Disabled means disabled. Without overriding the hover rule it lights up red
   on hover as though it were about to do something. */
button[disabled] { opacity: 0.5; cursor: not-allowed; }
button[disabled]:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

.warn {
  border: 2px solid var(--signal); padding: 14px 16px; margin: 0 0 28px;
  font-family: var(--display); font-size: 0.95rem; max-width: 46rem;
}

/* ---- What each lottery is playing for next. ---- */
.jackpot-row { list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jackpot-row li { border-left: 3px solid var(--ink); padding: 2px 0 2px 14px; }
.jackpot-row a { display: block; font-family: var(--display); font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; }
.jackpot-row a:hover { color: var(--signal-text); }
.jackpot-row .figure { display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.05;
  margin: 2px 0; }
.jackpot-row .when { font-family: var(--display); font-size: 0.85rem; color: var(--ink-soft); }
/* Drawn, but we do not have the numbers yet. The card stays, because a lottery
   disappearing for a few hours every drawing night reads as a broken site. It
   changes colour so nobody reads it as a drawing still to come. */
.jackpot-row li.waiting { border-left-color: var(--signal); }
.jackpot-row .when.pending { color: var(--signal-text); }

/* ---- The account pitch. ---- */
.what-we-store { border: 1px solid var(--ink); padding: 20px 22px; }
.what-we-store h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px; }
.what-we-store ul { margin: 0; padding-left: 18px; }
.what-we-store li { margin-bottom: 7px; }
.what-we-store li:last-child { margin-bottom: 0; }

/* ---- Lottery news. Headlines out to the newsrooms, nothing republished. ---- */
.story-list { list-style: none; margin: 0 0 14px; padding: 0;
  border-top: 1px solid var(--rule); }
.story-list li { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.story-list a { font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  text-decoration: none; }
.story-list a:hover { color: var(--signal-text); text-decoration: underline; }
.story-list .meta { margin: 4px 0 0; }