/* Home — today-first composition. */
.today-card .live-dot { margin-right:6px; vertical-align:middle; }
.today-card .fp-hero { margin:16px 0 8px; }
.today-next { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0 0 6px; }
.quick-check { display:flex; gap:8px; margin:16px 0 0; }
.quick-check input { flex:1; min-width:0; font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; letter-spacing:.03em; }
.quick-actions { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:14px; }
/* The four tiles are the page's only standing navigation into the rest of the
   site, and they were four flat grey boxes. They get the raised material every
   other pressable thing has (four tiles is nowhere near the repeated-element
   count the flat rule in 95-materials.css guards against), and the icon sits
   on a tinted plate so each tile has a focal point instead of a grey glyph.
   One tint, not four: these are all navigation, and the palette gives
   navigation exactly one hue. */
.quick-actions a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:78px; padding:11px 6px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--ctl-line);
  color:var(--ink); font-size:.78rem; font-weight:600; text-align:center; text-decoration:none;
  box-shadow:var(--neo-raised-sm);
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-base) var(--e-out),
             background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out); }
.quick-actions svg { width:var(--icon-md); height:var(--icon-md); flex:none; }
/* The plate is a surface STEP, not a brand tint: --primary-soft is step 3 of
   the sapphire scale, which in dark mode lands within a hair of the card it
   sits on and disappeared entirely. The step carries the shape, the glyph
   carries the colour, and both read in either theme. */
.quick-actions a > svg { padding:7px; box-sizing:content-box; border-radius:var(--r-xs);
  background:var(--surface-3); color:var(--primary); }
@media (hover:hover) {
  .quick-actions a:hover { transform:translateY(-2px); box-shadow:var(--neo-raised); border-color:var(--primary); }
  .quick-actions a:hover > svg { background:var(--primary-soft); }
}
.quick-actions a:active { transform:scale(.97); box-shadow:var(--neo-pressed); }

/* Result-blog / bumper spotlight cards: horizontal on desktop, stacked on
   mobile (pill on top, body, then a full-width action). */
.home-cta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; text-decoration:none; }
.home-cta > .cta-body { flex:1; min-width:0; }
.home-cta > :not(.cta-body) { flex:none; }
@media (max-width:600px) {
  .home-cta { flex-direction:column; align-items:flex-start; gap:11px; }
  .home-cta > .cta-body { width:100%; }
  .home-cta > .cta-btn { align-self:stretch; text-align:center; }
}

/* Lottery rail: horizontal scroll on phones, grid on wide screens. */
.rail { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 2px 6px; margin:0 -2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.rail-item { flex:0 0 220px; scroll-snap-align:start; }
.rail-links { display:flex; gap:8px; margin-top:10px; }
/* --ctl-md, not a literal 36px: these are the card's two actions and they
   are not `.chip`, so nothing gives them the hit-area reach that lets a
   36px control still answer a 44px target. They measured 39px. */
.rail-links a { flex:1; display:grid; place-items:center; text-align:center;
  font-size:.82rem; font-weight:600; padding:8px 6px; border-radius:var(--r-xs);
  background:var(--surface-2); border:1px solid var(--ctl-line); color:var(--primary-ink);
  min-height:var(--ctl-md); text-decoration:none; }
.rail-links a:hover { background:var(--primary-soft); border-color:var(--primary); }
@media (min-width:860px) {
  .rail { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); overflow:visible; }
  .rail-item { flex:none; }
}

/* The filter chip rail is the shared .chip-rail in 30-components.css. */
/* .results-controls is a flex row defined in 30-components.css, with a
   560px rule that flexes the select and the input. The override that
   stood here forced display:block, which left the `flex:1` on the
   search input below doing nothing at all. */
.results-controls input[type="search"] { flex:1; min-width:0; }

/* The AI-record call to action. Full width because it is a sentence, not a
   chip, and its whole job is to be readable at a glance and to give the
   scoreboard a real anchor text instead of the "Record" tile's four
   characters. Brand-tinted rather than money green: this is navigation into
   the record, not a statement about a prize. */
.ai-record-cta { display:flex; align-items:center; gap:10px; margin-top:10px;
  min-height:var(--ctl-md); padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid var(--ctl-line); background:var(--surface-2); color:var(--ink);
  font-size:.92rem; font-weight:600; text-decoration:none;
  transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out); }
.ai-record-cta > svg { flex:none; color:var(--primary); }
.ai-record-cta > span:not(.arrow) { flex:1; min-width:0; }
.ai-record-cta .arrow { flex:none; color:var(--primary); font-weight:700; }
.ai-record-cta:hover { border-color:var(--primary); background:var(--primary-soft); color:var(--primary-ink); }
.ai-record-cta:hover > svg, .ai-record-cta:hover .arrow { color:var(--primary-ink); }