/* ==========================================================================
   Garmond · page-level blocks the L6 library leaves to L8 (site/components/README.md §5):
   inner page hero, breadcrumbs, footer, forms, tables, pagination, prose, cookie bar, toast, plans, account.
   Only semantic tokens from tokens.css (theme Akryyli); no inline styles (CSP style-src 'self').
   ========================================================================== */

/* ---- layout helpers */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--space-6); }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.skip-link:focus { top: var(--space-2); }
.muted { color: var(--color-text-muted); }
.note { font-size: var(--fs-xs, 0.875rem); color: var(--color-text-muted); }

/* ---- inner page hero */
.page-hero { max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-4); display: grid; gap: var(--space-3); }
.page-hero__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); max-width: 30ch; overflow-wrap: anywhere; }
.page-hero__lead { max-width: 62ch; font-size: var(--fs-lg); color: var(--color-text-muted); }
.data-time { font-size: var(--fs-xs, 0.875rem); color: var(--color-text-muted); }

/* ---- breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs, 0.875rem); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); min-height: 24px; }
.crumbs li + li::before { content: "/"; color: var(--color-text-faint); }
.crumbs a { color: var(--text-accent); }
.crumbs [aria-current] { color: var(--color-text); font-weight: 600; }

/* ---- generic surface card */
.card { position: relative; background: var(--color-surface-glass, var(--color-surface)); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-float); backdrop-filter: blur(var(--glass-blur, 0px)); }
.card > :first-child { margin-top: 0; }

/* ---- forms */
.form { display: grid; gap: var(--space-4); max-width: 34rem; }
.form--auth { margin: 0 auto var(--space-section); }
.form .field { display: grid; gap: var(--space-1); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 44px; padding-block: var(--space-2); line-height: 1.4; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--color-accent); }
.check a { color: var(--text-accent); }
.field-error, .form-error { color: var(--color-danger); font-size: var(--fs-xs, 0.875rem); font-weight: 600; margin: 0; }
.form-error { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-xs); background: var(--color-surface); }
.form textarea.field__input { min-height: 9rem; resize: vertical; }
.form select.field__input { appearance: auto; }
.form__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--fs-xs, 0.875rem); }
.form__links a, .text-link { color: var(--text-accent); font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---- tables (archive, status) — wide tables scroll inside, the page never overflows */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--color-line);
  background: var(--color-surface); }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 34rem; }
.data-table caption { text-align: left; padding: var(--space-4); font-weight: 600; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-top: 1px solid var(--tiers-row-line, var(--color-line)); vertical-align: middle; }
.data-table thead th { background: var(--tiers-head-bg, var(--color-surface-2)); color: var(--tiers-head-fg, var(--color-text)); font-size: var(--fs-xs, 0.875rem); }
.data-table tbody tr:nth-child(even) { background: var(--tiers-zebra, transparent); }
.data-table a { color: var(--text-accent); font-weight: 600; }
.data-table .num { text-align: right; white-space: nowrap; }
.state { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-live); }
.state--stale::before { background: var(--color-danger); border-radius: 2px; }
.balls-inline { white-space: nowrap; }

/* ---- archive filters and pagination */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.filters .field { min-width: 12rem; }
.chips-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chips-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: 999px;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: 600; }
.chips-nav a[aria-current] { background: var(--nav-active-bg, var(--color-surface-2)); border-color: var(--color-line-strong); }
.pagination ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-xs);
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text); font-variant-numeric: tabular-nums; text-decoration: none; }
.pagination [aria-current] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }

/* ---- draw page facts */
.draw-facts { display: grid; gap: var(--space-2); padding-left: 1.2em; margin: 0; }

/* ---- prose (legal, FAQ answers, copy blocks) */
.prose { max-width: 70ch; line-height: 1.65; overflow-wrap: anywhere; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.prose a { color: var(--text-accent); }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--color-line); padding: var(--space-2) var(--space-3); text-align: left; }
.faq-list { display: grid; gap: var(--space-3); max-width: 70ch; }
.faq-list details { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.faq-list summary { cursor: pointer; padding: var(--space-4) var(--space-5, 1.25rem); font-weight: 600; min-height: 44px; }
.faq-list details > :not(summary) { padding: 0 var(--space-5, 1.25rem) var(--space-4); margin: 0; }

/* ---- premium plans */
.plans { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: grid; gap: var(--space-4); align-content: start; }
.plan__price { font: 800 var(--fs-2xl) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.plan--featured { border-color: var(--color-line-strong); box-shadow: var(--shadow-float), 0 0 0 2px var(--color-accent); }

/* ---- account */
.profile { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.profile dt { color: var(--color-text-muted); }
.profile dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.account-grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ---- footer */
.site-foot { margin-top: 0; border-top: 1px solid var(--color-line); background: var(--color-bg-alt); }
.site-foot__in { max-width: var(--container); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-8); display: grid; gap: var(--space-8); }
.site-foot__cols { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-foot__title { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-foot a { color: var(--color-text); display: inline-flex; align-items: center; min-height: 32px; }
.site-foot a:hover { color: var(--text-accent); }
.disclosure { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); background: var(--color-surface);
  border: 1px solid var(--color-live); font-weight: 600; }
.disclosure::before { content: "€0 "; color: var(--color-live); font-family: var(--font-display); font-weight: 800; }
.site-foot__legal { font-size: var(--fs-xs, 0.875rem); color: var(--color-text-muted); display: grid; gap: var(--space-2); }
.social { display: flex; gap: var(--space-2); }
.social span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); color: var(--color-text-muted); font-size: var(--fs-2xs); }

/* ---- toast (role=status) */
.toasts { position: fixed; inset: auto var(--gutter) var(--space-4) auto; z-index: 60; display: grid; gap: var(--space-2); max-width: min(28rem, calc(100vw - 2 * var(--gutter))); }
.toast { margin: 0; padding: var(--space-4) var(--space-5, 1.25rem); border-radius: var(--radius-lg); background: var(--color-text); color: var(--color-bg);
  box-shadow: var(--shadow-float); font-weight: 600; }
.toast.is-hidden { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-press, 200ms) var(--ease-out), transform var(--dur-press, 200ms) var(--ease-out); }

/* ---- cookie bar: ≤ 35 % of a 375 px screen, three equal buttons */
.cookie-bar { position: fixed; inset: auto 0 0 0; z-index: 70; background: var(--color-surface); border-top: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-float); max-height: 35vh; overflow-y: auto; }
.cookie-bar[hidden] { display: none; }
.cookie-bar__in { max-width: var(--container); margin: 0 auto; padding: var(--space-4) var(--gutter); display: grid; gap: var(--space-3); }
.cookie-bar__title { font-size: var(--fs-lg); margin: 0; }
.cookie-bar__text { margin: 0; font-size: var(--fs-xs, 0.875rem); }
.cookie-bar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); }

/* ---- error pages */
.error-page { max-width: var(--container); margin: 0 auto; padding: var(--space-section) var(--gutter); display: grid; gap: var(--space-4); justify-items: start; }

@media (prefers-reduced-motion: reduce) { .toast.is-hidden { transition: none; } }

/* links and checks on the accent band (newsletter): band text colour, underlined — accent-on-accent fails AA */
.band--accent a:not(.btn), .band--accent .check a { color: var(--band-accent-fg); text-decoration: underline; text-underline-offset: 2px; }
.band--accent .check { color: var(--band-accent-fg); }
.band--accent .check input { accent-color: var(--band-accent-fg); }

/* footer trust row: 18+ and help / standards organisations (G-09) */
.trust { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.trust .badge { min-height: 32px; text-decoration: none; }
a.badge:hover { border-color: var(--color-line-strong); }

/* ===== polish pass ===== */
/* vertical rhythm: one section gap between stacked sections (no double padding), tighter after page heroes */
main > .page-section:not(.section-alt) + .page-section:not(.section-alt),
main > nav.page-section + .page-section { padding-top: 0; }
main > .page-hero + .page-section, main > .page-hero + nav.page-section, main > .page-hero + .draw-hero { padding-top: var(--space-6); }
.page-section__lead { max-width: 62ch; color: var(--color-text-muted); font-size: var(--fs-lg); }
.page-section__lead > :first-child { margin-top: 0; }

/* lottery comparison: two glass cards, colour of the lottery, number matrix with the latest draw */
.lottery-cards { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .lottery-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lottery-card { display: grid; gap: var(--space-4); align-content: start; border-top: 4px solid var(--color-ej); }
.lottery-card--vl { border-top-color: var(--color-vl); }
.lottery-card__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-1) var(--space-3); }
.lottery-card__head h3 { margin: 0; font-size: var(--fs-xl); }
.lottery-card__rule { grid-column: 2; margin: 0; font: 800 var(--fs-lg) / 1 var(--font-display); color: var(--text-accent); font-variant-numeric: tabular-nums; }
.lottery-card__facts ul { margin: 0; }
.matrix-fig { margin: 0; display: grid; gap: var(--space-2); }
.matrix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; font-variant-numeric: tabular-nums; }
.matrix--extra { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.matrix li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: var(--fs-2xs); color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid var(--color-line); }
.matrix li.is-drawn { color: var(--plate-ej-ink); background: var(--plate-ej-bg); border-color: transparent; font-weight: 800; box-shadow: 0 2px 6px var(--color-ej-glow); }
.matrix--vl li.is-drawn { color: var(--plate-vl-ink); background: var(--plate-vl-bg); box-shadow: 0 2px 6px var(--color-vl-glow); }
.matrix--extra li { border-style: dashed; }

/* steps: three cards with a ball numeral */
.steps { grid-template-columns: 1fr; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps__item { display: grid; gap: var(--space-2); align-content: start; }
.steps__item h3 { margin: 0; font-size: var(--fs-lg); }
.steps__item p { margin: 0; }
.ball.steps__n { width: var(--ball-size-md); height: var(--ball-size-md); font-size: var(--fs-lg); background: var(--color-surface); margin: 0; }

/* timeline (Raymond-like, our palette): vertical rail, glowing dots, cards with year · place, amount · lottery */
.timeline { position: relative; display: grid; gap: var(--space-4); padding-left: var(--space-8); }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--grad-accent); border-radius: 2px; }
.timeline__item { position: relative; border-left: 0; }
.timeline__dot { position: absolute; left: calc(-1 * var(--space-8) + 3px); top: var(--space-6); width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad-accent); box-shadow: 0 0 0 4px var(--color-surface), 0 0 12px var(--color-ej-glow); }
.timeline__card { display: grid; gap: var(--space-1); }
.timeline__card > p { margin: 0; }
.timeline__meta { font: 600 var(--fs-xs, .875rem) / 1.3 var(--font-text); letter-spacing: .04em; color: var(--text-accent); text-transform: uppercase; }
.timeline__amount { font: 800 var(--fs-xl) / 1.15 var(--font-display); color: var(--color-text); }
.timeline__title { margin: var(--space-1) 0 0; font-size: var(--fs-lg); }

/* draw page: ticket + facts side by side */
.draw-hero { max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-section); display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .draw-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.draw-facts { display: grid; gap: var(--space-3); }
.draw-facts p { margin: 0; }

/* footer trust row stays a row (beats .site-foot ul) */
.site-foot .trust { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* steps, timeline, cards, cta rows (base) */
.steps, .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.timeline { padding-left: var(--space-8); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cta-row, .cta-list { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
/* newsletter: email + button on one row, the consent on its own row */
.subscribe .check { grid-column: 1 / -1; grid-row: 2; }
.subscribe .subscribe__note { grid-row: 3; }

/* ===== polish pass, review round ===== */
.section-alt { border-radius: var(--radius-lg); }
/* hero on phones: one ticket (the others are right below in «Seuraavat» / «Viimeisimmät») */
@media (max-width: 767.98px) { .hero3__stage .tix--2, .hero3__stage .tix--3 { display: none; } }
/* forms: no browser fieldset chrome inside the glass card */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.form { gap: var(--space-3); }
legend { font: 700 var(--fs-lg) / 1.2 var(--font-display); padding: 0; margin-bottom: var(--space-2); }
fieldset .check { min-height: 40px; padding-block: var(--space-1); }
/* plates of the comparison cards take the lottery colours */
.lottery-card { --plate-bg: var(--plate-ej-bg); --plate-ink: var(--plate-ej-ink); --plate-glow: var(--color-ej-glow); }
.lottery-card--vl { --plate-bg: var(--plate-vl-bg); --plate-ink: var(--plate-vl-ink); --plate-glow: var(--color-vl-glow); }
.lottery-card .plate { background: var(--plate-bg); color: var(--plate-ink); }
/* lists inside cards: accent dots instead of browser bullets */
.lottery-card__facts ul, .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.lottery-card__facts li, .plan ul li { position: relative; padding-left: 1.1em; }
.lottery-card__facts li::before, .plan ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-accent); }
/* draw page: one composition, facts card as tall as the ticket */
.draw-hero { align-items: stretch; padding-bottom: var(--space-8); }
.draw-facts { align-content: center; font-size: var(--fs-lg); }
/* tickets on single-lottery sections do not stretch across 1240 px */
.page-section > .ticket, .page-section > .stack > .ticket { max-width: 820px; width: 100%; }
/* premium cards: CTA aligned at the bottom */
.plan { display: flex; flex-direction: column; }
.plan > form, .plan > .btn { margin-top: auto; }
/* newsletter band spacing */
.band--accent .eyebrow { margin-bottom: var(--space-3); }
.band--accent .band__title { margin: 0 0 var(--space-3); }
/* tiers: main and Plus tables share column widths; Plus caption left */
.tiers__table { table-layout: fixed; width: 100%; }
.tiers__cap { text-align: left; font-weight: 700; padding: var(--space-3) var(--space-2) var(--space-1); }
/* Viking pill fits its single ball; Plus number as a chip line */
.draw__group--extra .balls { width: fit-content; }
.ticket__plus { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--fs-xs, .875rem); color: var(--color-text-muted); }
/* timeline: readable measure, dots in the lottery colour */
.timeline__card > p { max-width: 72ch; }
.timeline__item--ej .timeline__dot { background: var(--plate-ej-bg); box-shadow: 0 0 0 4px var(--color-surface), 0 0 12px var(--color-ej-glow); }
.timeline__item--vl .timeline__dot { background: var(--plate-vl-bg); box-shadow: 0 0 0 4px var(--color-surface), 0 0 12px var(--color-vl-glow); }
/* account */
.account-grid { width: 100%; }
.profile + .cta-row, .profile + form.cta-row { margin-top: var(--space-4); }
/* pager row */
.pager { align-items: center; }
/* phones: hero facts stay in one row */
@media (max-width: 479.98px) { .hero3 .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .hero3 .fact dt { font-size: var(--fs-2xs); } }
/* footer trust row: official logos on light tiles */
.trust__logo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-xs); }
.trust__logo img { display: block; height: 28px; width: auto; }
.trust__logo--dark { background: #1d1a2e; border-color: #1d1a2e; }
.trust__logo--dark img { height: 20px; }