/* RaviNero — light, minimalist, hairline-border-first design system.
   Surfaces are white with 1px hairline borders: no gradients, cards may carry a
   0 1px 2px shadow at most. One restrained accent (green) + semantic
   win/place/miss colours. Token values follow the 2026-07 redesign handoff
   (design/ui-review-ravinero.md §6); legacy var names are kept so the whole
   app reskins from this block alone. */
:root {
    color-scheme: light;
    --bg: #fbfaf7;
    --canvas: #f0eee9;
    --surface: #ffffff;
    --surface-2: #f4f2ec;
    --border: #e8e5dd;
    --border-strong: #cbd2dc;
    --row-divider: #f0ede6;
    --text: #1d2724;
    --body: #3a423e;
    --muted: #6d7873;
    --faint: #8a938e;
    --accent: #178a54;
    --accent-hover: #116b41;
    --accent-soft: #e8f5ee;
    --accent-border: #cde9da;
    --tint-row: #f4faf6;
    --green-mid: #5aa876;
    --green-light: #a8d8bd;
    --win: #178a54;
    --win-soft: #e8f5ee;
    --amber: #d1a52c;
    --star: #d1a52c;
    --place: #b45309;
    --place-soft: #fdf3e3;
    --miss: #b3401f;
    --miss-soft: #fbeee7;
    --info: #175cd3;
    --info-soft: #ecf3fd;
    --bar-track: #eceae3;
    --radius: 9px;
    --radius-card: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    /* Figtree ships later (self-hosted); until then the stack falls back to system-ui. */
    --font: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

.wrap { width: min(1600px, 94vw); margin: 0 auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; font-weight: 650; }
code {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 5px; font-size: .84em;
}

/* Icons (inline SVG sprite, views/icons.php) */
.icon { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.icon--lg { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }

/* Accessibility: skip link + a consistent keyboard focus ring */
.skip-link {
    position: absolute; left: 8px; top: -48px; z-index: 100;
    background: var(--text); color: var(--surface); font-weight: 600;
    padding: 8px 14px; border-radius: var(--radius); transition: top .15s ease;
}
.skip-link:focus { top: 8px; text-decoration: none; }

:where(a, button, select, input, .horse-row):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Header / footer */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    position: sticky; top: 0; z-index: 10;
}
.site-header .wrap { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.site-nav { margin-left: auto; display: flex; gap: 11px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.site-nav a .icon { margin-right: 2px; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.is-active { color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* Bet-form dropdown (native <details>, no JS required to open) */
.nav-dd { position: relative; }
.nav-dd__toggle {
    list-style: none; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .88rem;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; user-select: none;
}
.nav-dd__toggle::-webkit-details-marker { display: none; }
.nav-dd__toggle::marker { content: ''; }
.nav-dd__toggle:hover { color: var(--text); }
.nav-dd__toggle.is-active { color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.nav-dd__caret { transition: transform .15s ease; }
.nav-dd[open] .nav-dd__toggle { color: var(--text); }
.nav-dd[open] .nav-dd__caret { transform: rotate(180deg); }
.nav-dd__menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
    min-width: 244px; max-width: calc(100vw - 24px); padding: 6px;
    max-height: min(72vh, 560px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(20, 24, 33, .14);
    display: flex; flex-direction: column; gap: 1px;
}
.nav-dd__group {
    padding: 9px 10px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700;
}
.nav-dd__group:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; }
.nav-dd__menu a {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 5px;
    color: var(--text); font-weight: 500; font-size: .9rem; white-space: nowrap;
}
.nav-dd__menu a .icon { color: var(--muted); flex: none; }
.nav-dd__menu a:hover { background: var(--surface-2); text-decoration: none; }
.nav-dd__menu a.is-current { background: var(--accent-soft); color: var(--accent); }
.nav-dd__menu a.is-current .icon { color: var(--accent); }
.nav-dd__name { flex: 1 1 auto; }
.nav-dd__tag { flex: none; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.nav-dd__tag--safe { color: var(--win); background: var(--win-soft); }
.nav-dd__tag--rich { color: var(--miss); background: var(--miss-soft); }
.nav-dd__tag--mid { color: var(--muted); background: var(--surface-2); }
/* Today's Toto games (async-filled): flag + form name + muted track */
.nav-dd__flag { flex: none; width: 1.2em; text-align: center; }
.nav-dd__track { flex: none; color: var(--muted); font-size: .8rem; }
.nav-dd__menu a.is-finished { opacity: .5; }
.nav-dd__menu a.nav-dd__all { color: var(--accent); }
.nav-dd__menu a.nav-dd__all .nav-dd__name { font-weight: 600; font-size: .82rem; }

/* "Pelimuodot" mega-menu: one column per game format (single-race / multi-leg).
   The columns are side by side on desktop and stack on narrow viewports, where
   the whole nav has already collapsed into the burger panel below. */
.nav-dd__menu--cols { flex-direction: row; align-items: flex-start; gap: 6px; }
/* Two side-by-side columns inside a column-flow menu (Pelimuodot), so a full-width
   footer link can sit BELOW them. Same look as --cols, but the menu itself stays a
   vertical stack (columns-row, then foot). */
.nav-dd__cols { display: flex; align-items: flex-start; gap: 6px; }
.nav-dd__col { display: flex; flex-direction: column; gap: 1px; min-width: 224px; }
.nav-dd__col + .nav-dd__col { border-left: 1px solid var(--border); padding-left: 6px; }
/* A group heading is the first child of its own column here, so the divider the
   single-column menu draws between groups would be a stray line at the top. */
.nav-dd__menu--cols .nav-dd__group:not(:first-child) { border-top: 0; margin-top: 0; }
/* A sub-group label WITHIN a column (e.g. "Oikea raha" under "Kannattiko se"):
   keep the divider the top-level group heading suppresses, so the two read apart.
   Scoped under --cols to outrank the border-top:0 rule just above. */
.nav-dd__menu--cols .nav-dd__group--sub { border-top: 1px solid var(--border); margin-top: 4px; }
/* Full-width footer link below the columns (e.g. the games guide under Pelimuodot).
   It is a block child of the column-flow .nav-dd__menu, so it naturally spans the
   menu width; the divider sets it apart from the columns above. */
.nav-dd__foot {
    margin-top: 4px; padding-top: 8px;
    border-top: 1px solid var(--border); color: var(--accent);
}
.nav-dd__foot .icon { color: var(--accent); }

/* Mobile menu toggle — hidden on desktop, where the nav is always visible. */
.nav-burger {
    display: none; margin-left: auto; padding: 6px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
    line-height: 0;
}
.nav-burger:hover { border-color: var(--accent); }
.nav-burger__close { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger__open { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger__close { display: inline-block; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-tag { color: var(--muted); font-size: .82rem; }

.site-footer {
    margin-top: 48px;
    border-top: 1px solid var(--border);
    padding: 22px 0 40px;
    color: var(--muted);
    font-size: .84rem;
}
.site-footer .responsible strong { color: var(--text); }

/* Header balance chip */
.hdr-balance {
    display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-left: 14px;
    padding: 4px 11px; background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 999px; color: var(--text); font-weight: 600; font-size: .86rem; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hdr-balance:hover { text-decoration: none; border-color: var(--accent); }
.hdr-balance__icon { color: var(--muted); display: inline-flex; }
.hdr-balance--pulse { animation: hdrPulse 1.1s ease; }
@keyframes hdrPulse {
    0%   { background: var(--accent-soft); border-color: var(--accent); }
    100% { background: var(--surface); border-color: var(--border-strong); }
}

/* Page scaffolding */
.intro { padding: 24px 0 8px; }
.intro h1 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intro h1 .icon { color: var(--muted); }
.intro p { margin: 0; color: var(--muted); max-width: 90ch; }
.muted { color: var(--muted); font-weight: 400; }
.text-small { font-size: .82rem; }
.footnote { margin-top: 18px; }

.breadcrumbs { padding-top: 16px; font-size: .86rem; }
.breadcrumbs a { color: var(--muted); }

.section-h {
    font-size: 1.15rem; font-weight: 650; margin: 32px 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.section-h .icon { color: var(--muted); }
.section-sub { font-size: 1rem; font-weight: 650; margin: 20px 0 8px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--accent); color: #fff; border: 1px solid var(--accent);
    padding: 8px 14px; border-radius: var(--radius); font-weight: 600; font-size: .86rem;
    font-family: inherit; line-height: 1.3; text-align: center;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn-small { padding: 5px 10px; font-size: .8rem; }
.btn-secondary,
.btn-refresh,
.btn-deeper,
.btn-bettype-analyse {
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
}
.btn-secondary:hover,
.btn-refresh:hover,
.btn-deeper:hover,
.btn-bettype-analyse:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-analyse { white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
/* Active analyse buttons (system / featured tiles in tables) */
.btn-system.is-active,
.btn-featured.is-active {
    background: var(--text); border-color: var(--text); color: var(--surface);
}
.btn-system.is-active:hover,
.btn-featured.is-active:hover { background: var(--text); border-color: var(--text); }
.btn-bet { background: var(--accent); border-color: var(--accent); }
.btn-bet-confirm { background: var(--place); border-color: var(--place); color: #fff; }
.btn-bet-confirm:hover { background: #96450a; border-color: #96450a; }

/* Chips & badges */
.chip {
    display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; padding: 2px 8px;
    border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
    line-height: 1.5;
}
.chip-soft { color: var(--muted); }
.chip-danger { background: var(--miss-soft); color: var(--miss); border-color: var(--miss-soft); }
.chip-live { background: var(--win-soft); color: var(--win); border-color: var(--win-soft); font-weight: 600; }
.chip-off { background: var(--surface-2); color: var(--muted); }

.status-dot {
    display: inline-block; width: .55em; height: .55em; border-radius: 50%;
    background: var(--muted); flex: none;
}
.status-dot--live { background: var(--win); }
.status-dot--stop { background: var(--miss); }

.conf { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: auto; text-transform: uppercase; letter-spacing: .03em; }
.conf-high { background: var(--win-soft); color: var(--win); }
.conf-mid { background: var(--info-soft); color: var(--info); }
.conf-low { background: var(--place-soft); color: var(--place); }

.cvote {
    font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: var(--info-soft); color: var(--info);
}
.mark {
    display: inline-flex; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
    padding: 2px 7px; font-size: .8rem; font-weight: 600;
}
.mark__votes { margin-left: 6px; font-size: .66rem; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--info-soft); color: var(--info); }
/* Live win odds (kerroin) on a selection chip / system mark */
.chip-odds {
    margin-left: 5px; padding-left: 5px; border-left: 1px solid var(--border);
    color: var(--muted); font-weight: 600; font-size: .74rem; font-variant-numeric: tabular-nums;
}
.chip-odds::before { content: "k "; font-weight: 400; }

.flag { font-size: 1.05em; line-height: 1; }

/* Bet-type chips (koontisivu switcher + home) — category shown as a small dot */
.bt-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
    color: var(--text); font-weight: 600; font-size: .84rem; line-height: 1.3;
}
.bt-chip:hover { text-decoration: none; background: var(--surface-2); }
.bt-chip .icon { color: var(--muted); }
.bt-chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.bt-chip.is-active .icon { color: var(--surface); }
/* Rectangular chip variant (intro meta line) — semantic tint per category */
.chip.bt-chip--safe { color: var(--win); background: var(--win-soft); border-color: var(--win-soft); }
.chip.bt-chip--mid  { color: var(--info); background: var(--info-soft); border-color: var(--info-soft); }
.chip.bt-chip--rich { color: var(--place); background: var(--place-soft); border-color: var(--place-soft); }
.bettype-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }

/* Hajotus-ennuste (A/B/C/D reduced-system plan) — the tab pair inside the
   system analysis card + the category-tinted chips that mirror Veikkaus's
   coupon colours (A amber, B red, C blue, D teal). Fixed-hue rgba tints keep
   the same reading in light and dark themes. */
.sys-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.sys-tabs .bt-chip { cursor: pointer; font: inherit; font-weight: 600; font-size: .84rem; }
.haj-panel { margin-top: 4px; }
.haj-intro { color: var(--muted); font-size: .86rem; max-width: 46rem; }
/* One tab per model inside the Hajotus panel — each model plans on its own. */
.haj-models { margin: 2px 0 10px; }
.haj-models .bt-chip.is-failed { opacity: .55; text-decoration: line-through; }
.haj-card .haj-weather { color: var(--muted); font-size: .86rem; font-style: italic; margin: 6px 0 2px; }
.haj-table td, .haj-structure td { vertical-align: top; }
.haj-cell .mark { margin: 2px 4px 2px 0; }
.haj-empty { color: var(--muted); }
.haj-cat-a { border-color: rgba(217, 154, 6, .75); background: rgba(230, 164, 10, .14); }
.haj-cat-b { border-color: rgba(217, 83, 79, .7); background: rgba(217, 83, 79, .12); }
.haj-cat-c { border-color: rgba(74, 144, 217, .7); background: rgba(74, 144, 217, .12); }
.haj-cat-d { border-color: rgba(43, 181, 165, .7); background: rgba(43, 181, 165, .13); }
.haj-th-a { color: rgba(217, 154, 6, 1); }
.haj-th-b { color: rgba(217, 83, 79, 1); }
.haj-th-c { color: rgba(74, 144, 217, 1); }
.haj-th-d { color: rgba(43, 181, 165, 1); }
.haj-win { box-shadow: 0 0 0 2px var(--win); }
.haj-result { margin-top: 4px; font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.haj-structure { max-width: 24rem; }
.haj-full { color: var(--muted); font-size: .8rem; }
.haj-keyhorses { font-size: .9rem; }
.haj-coupon { color: var(--muted); font-size: .82rem; max-width: 46rem; }

/* Stat strip — hairline-separated value+label pairs (replaces KPI tile grids) */
.stat-strip {
    display: flex; flex-wrap: wrap; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); margin: 16px 0; padding: 4px 0;
}
.stat {
    display: flex; flex-direction: column; gap: 1px; justify-content: center;
    padding: 8px 18px; border-left: 1px solid var(--border); min-width: 0;
    color: inherit;
}
.stat:first-child { border-left: 0; }
a.stat:hover { text-decoration: none; background: var(--surface-2); }
.stat__v { font-size: 1.15rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__v.is-pos { color: var(--win); }
.stat__v.is-neg { color: var(--miss); }
.stat__k { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Home personal dashboard — a responsive grid of stat tiles + the "playable now" list */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.dash-tile {
    display: flex; flex-direction: column; gap: 3px; justify-content: center;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: inherit;
}
a.dash-tile:hover { text-decoration: none; background: var(--surface-2); border-color: var(--border-strong); }
.dash-tile__v { font-size: 1.4rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dash-tile__v.is-pos { color: var(--win); }
.dash-tile__v.is-neg { color: var(--miss); }
.dash-tile__k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 5px; }
.dash-tile__k .icon { width: 13px; height: 13px; }
.dash-playable { margin-top: 26px; }
.dash-playable__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Tables — the core pattern. .data-table and .runners-table share the contract. */
.runners-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 12px 0; }
.data-table,
.runners-table {
    width: 100%; border-collapse: collapse; font-size: .85rem;
}
.runners-table { min-width: 620px; }
.data-table th, .data-table td,
.runners-table th, .runners-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
    vertical-align: top;
}
.data-table thead th,
.runners-table thead th {
    background: var(--surface-2); color: var(--muted); font-weight: 600;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.data-table tbody tr:last-child > td,
.runners-table tbody tr:last-child > td { border-bottom: 0; }
.data-table tbody tr:hover > td,
.runners-table tbody tr:hover > td { background: var(--surface-2); }
.ta-r { text-align: right !important; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; white-space: normal; max-width: 52ch; }
.cell-main { font-weight: 600; }
.cell-wrap { white-space: normal !important; }

/* Row status via a 3px left stripe + row states */
.row--win  > td:first-child { box-shadow: inset 3px 0 0 var(--win); }
.row--place > td:first-child { box-shadow: inset 3px 0 0 var(--place); }
.row--miss > td:first-child { box-shadow: inset 3px 0 0 var(--miss); }
.row--pending > td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); }
/* Past races — the result is in (is-finished) or the gate has opened so betting
   has shut (is-closed). Both read as "done": muted text on a light grey wash, so
   the eye skips them and lands on the rows that can still be played. The tbody
   variant is for the koontisivu, where each race is its own <tbody>. */
tr.is-finished > td, tr.is-closed > td { color: var(--muted); }
tr.is-finished .cell-main, tr.is-finished a,
tr.is-closed .cell-main, tr.is-closed a { color: var(--muted); }
tr.is-finished > td, tr.is-closed > td,
tbody.is-finished > tr > td, tbody.is-closed > tr > td { background: var(--surface-2); }
tr.is-cancelled > td { color: var(--muted); text-decoration: line-through; }
tr.is-featured .cell-main { font-weight: 650; }
/* Group header row inside a results table (one race / one meeting section) */
.row-group > td {
    background: var(--surface-2); font-weight: 650; font-size: .8rem; color: var(--text);
}
.data-table tbody tr.row-group:hover > td { background: var(--surface-2); }

/* Runner-table specifics */
.runners-legend { font-size: .76rem; margin: 8px 10px; line-height: 1.4; }
.runners-table td.num { font-weight: 650; color: var(--accent); }
.runners-table td.horse { font-weight: 600; white-space: normal; }
.runners-table td.odds { font-weight: 600; font-variant-numeric: tabular-nums; }
.runners-table td.form { font-variant-numeric: tabular-nums; color: var(--muted); }
.runners-table td.form.has-detail { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
.runners-table td.hist { font-variant-numeric: tabular-nums; color: var(--muted); cursor: help; }
.runners-table tr.is-scratched { opacity: .45; text-decoration: line-through; }
.runners-table tr.horse-row { cursor: pointer; }
.runners-table tr.horse-row.is-open td { background: var(--surface-2); }
.runners-table tr.horse-row td.horse::before { content: '▸ '; color: var(--muted); }
.runners-table tr.horse-row.is-open td.horse::before { content: '▾ '; color: var(--accent); }
.runners-table tr.horse-detail-row td { padding: 0; background: var(--bg); white-space: normal; }
.runners-table tr.horse-detail-row:hover td { background: var(--bg); }

/* Generic expandable detail row (races table, bettype rows) */
tr.detail-row > td {
    padding: 14px 12px 16px; background: var(--bg); white-space: normal;
}
.data-table tbody tr.detail-row:hover > td { background: var(--bg); }

/* Mini table inside a horse detail panel */
.mini-wrap { overflow-x: auto; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.mini-table th, .mini-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mini-table tbody tr:last-child td { border-bottom: 0; }
.mini-table th { color: var(--muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; background: var(--surface-2); }

/* Horse detail panel */
.hdetail { padding: 14px 12px; }
.hdetail__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hstat { display: inline-flex; flex-direction: column; gap: 1px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; min-width: 64px; }
.hstat__k { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.hstat__v { font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }
.hdetail__meta { color: var(--muted); font-size: .82rem; margin: 0 0 12px; }
/* Trainer comment + signal chips in the horse detail panel */
.hdetail__comment { font-size: .84rem; font-style: italic; margin: 0 0 10px; }
.hdetail__comment .icon { width: 14px; height: 14px; vertical-align: -2px; }
.hstat__v--text { font-weight: 500; font-size: .8rem; font-variant-numeric: normal; max-width: 240px; }
/* Marker on the runners table for horses with a comment/equipment/driver change */
.horse-note { width: 13px; height: 13px; vertical-align: -2px; color: var(--muted); opacity: .8; }
/* Race context line above the runners table (track state, 1st prize, monté) */
.race-info-line { font-size: .82rem; margin: 0 0 8px; }
.hdetail__sub { font-weight: 650; font-size: .8rem; margin: 12px 0 6px; }
.hdetail__empty { color: var(--muted); font-size: .82rem; margin: 0; }

/* Races table (card page): number, meta and per-race detail row */
.race-num { font-weight: 650; color: var(--accent); }
.race-detail-row .race__reco { margin-top: 16px; }
.race-series { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; }

/* Forms & controls */
select, input[type="number"] {
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
    border-radius: var(--radius); padding: 6px 9px; font: inherit; font-size: .86rem;
}
select { cursor: pointer; }
select:focus, input[type="number"]:focus { outline: none; border-color: var(--accent); }

.pred-filter { display: flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.pred-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin: 14px 0; }

/* Segmented control (view tabs) */
.pred-view { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
.pred-view__tab { color: var(--muted); font-size: .84rem; font-weight: 600; padding: 5px 12px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
.pred-view__tab:hover { text-decoration: none; color: var(--text); }
.pred-view__tab.is-active { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); padding: 4px 11px; }

/* Page-level tab strip (subnav) — the PRIMARY navigation for a collapsed header group
   (Seuranta, Päivän ennusteet, Asetukset, Ylläpito). Rendered full-width under the
   breadcrumb; scrolls horizontally on narrow screens so the page body never scrolls
   sideways. Deliberately heavier than the small in-page switchers (.pred-view,
   .bettype-tabs, .bt-chip) it may sit above, so a page never shows two look-alike strips. */
.subnav { display: flex; gap: 4px; margin: 10px 0 18px; padding: 4px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.subnav::-webkit-scrollbar { height: 6px; }
.subnav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.subnav__tab { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
    padding: 8px 14px; border-radius: 5px; font-weight: 600; font-size: .9rem; line-height: 1.2;
    color: var(--muted); border: 1px solid transparent; }
.subnav__tab:hover { color: var(--text); text-decoration: none; }
.subnav__tab.is-active { background: var(--surface); color: var(--text);
    border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.subnav__icon { opacity: .9; }

.pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 16px 0; }
.pager__info { color: var(--muted); font-size: .85rem; }

/* Prediction tables */
.pred-table td.pred-time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pred-table td.pred-leg { white-space: nowrap; font-weight: 600; }
.pred-table td.pred-game { white-space: nowrap; font-weight: 600; }
.pred-table td.pred-legs { font-variant-numeric: tabular-nums; font-size: .8rem; white-space: normal; min-width: 180px; }
/* The actual winning row ("oikea rivi") under the played marks, for comparison.
   Used where vertical room is cheap (a meeting's card); the placed-bets ledger
   puts it in its own column instead — see td.pred-actual. */
.pred-table td.pred-legs .pred-legs__actual { display: block; margin-top: 3px; }
.pred-table td.pred-legs .pred-legs__actual b { color: var(--text); font-weight: 600; }
/* "Oikea rivi" as a column beside Merkinnät: same numeric styling so the played
   row and the winning row line up and can be scanned across, one line per bet. */
.pred-table td.pred-actual { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); }
.pred-table td.pred-actual b { color: var(--text); font-weight: 600; }
/* The ledger packs hundreds of bets — trim the row padding once each bet fits on
   a single line, so more of the day is on screen at once. */
.pred-table--dense td { padding-top: 5px; padding-bottom: 5px; }
.pred-table--dense .day-row td { padding-top: 6px; padding-bottom: 6px; }
.pred-win { color: var(--win); font-weight: 600; white-space: nowrap; }
.pred-place { color: var(--place); font-weight: 600; white-space: nowrap; }
.pred-miss { color: var(--miss); white-space: nowrap; }
.pred-pending { color: var(--muted); white-space: nowrap; }
.pred-win .icon, .res-key--win .icon { color: var(--win); }
.pred-place .icon, .res-key--place .icon { color: var(--place); }
.pred-miss .icon, .res-key--miss .icon { color: var(--miss); }
.pred-pending .icon { color: var(--muted); }
.roi-pos { color: var(--win); font-weight: 600; }
.roi-neg { color: var(--miss); font-weight: 600; }
/* One-line placed-bet rows: inline separator + spacing for the placement time */
.pred-table td.pred-time .pred-time__placed { margin-left: 8px; font-weight: 400; }
.res-sep { color: var(--border-strong); margin: 0 3px; font-weight: 400; }

/* Day divider row in the placed-bets table (date + that day's net result) */
.pred-table .day-row td { background: var(--surface-2); border-top: 1px solid var(--border-strong); padding: 7px 12px; }
.pred-table .day-row:hover td { background: var(--surface-2); }
.day-row__date { font-weight: 650; }
.day-row__stat { color: var(--muted); font-size: .84rem; margin-left: 12px; }
.day-row__net { font-weight: 600; }
.day-row__net.is-pos { color: var(--win); }
.day-row__net.is-neg { color: var(--miss); }

/* Predictions grouped by meeting */
.meet-preds { margin: 18px 0 24px; }
.meet-preds__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.meet-preds__title { font-size: 1.05rem; font-weight: 650; margin: 0; }
.meet-preds__open { margin-left: auto; }

/* Stats page */
.stats-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.stats-actions__hint { font-size: .8rem; }
.stats-flash { margin: 10px 0 4px; }
.notice-block { margin: 14px 0; }
.res-intro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .85rem; margin: 0 0 14px; }
.res-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.res-key { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.res-meet { margin: 20px 0 28px; }
.res-meet__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.res-meet__title { font-size: 1.05rem; font-weight: 650; margin: 0; }
.res-meet__open { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 600; }
.res-note { white-space: normal; }

/* Notices / loading / empty */
.notice { border-radius: 8px; padding: 11px 13px; font-size: .88rem; margin: 0; border: 1px solid var(--border); background: var(--surface); }
.notice-info { background: var(--info-soft); border-color: var(--info-soft); color: #123a75; }
.notice-warn { background: var(--miss-soft); border-color: var(--miss-soft); color: #7a1616; }
.notice .icon { vertical-align: -0.15em; }

.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .88rem; padding: 8px 0; }
.spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--border); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 28px; text-align: center; color: var(--muted); margin: 20px 0; }

/* Pools / bet-target sections (card page) */
.pools { margin: 22px 0 8px; }
.pools__title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.pools__title .icon { color: var(--muted); }
.pools__lead { margin: 0 0 8px; }
.pools__subtitle { margin: 24px 0 4px; font-size: 1rem; font-weight: 650; }
.pools__result:not(:empty) { margin-top: 12px; }
.featured__result:not(:empty) { margin-top: 12px; }
.race-bets-cell { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }

/* Päivän ennusteet takes on the card page — short rationale boxes, not data */
.daily-takes { display: grid; gap: 10px; margin: 4px 0 18px; }
.daily-takes__lead { color: var(--muted); font-size: .9rem; margin: 0 0 2px; }
.daily-take {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 16px;
}
.daily-take__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.daily-take__game { font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.daily-take__game .icon { color: var(--muted); }
.daily-take__head .conf, .daily-take__head .cvote { margin-left: 0; }
.daily-take__selection { margin: 8px 0 0; }
.daily-take__lbl { color: var(--muted); font-weight: 600; font-size: .82rem; }
.daily-take__horses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.daily-take__why { margin: 8px 0 0; font-size: .88rem; }
.daily-take__actions { margin-top: 12px; }
.daily-take__deeper { margin-top: 12px; }

/* Recommendation panels (AI results) */
.reco, .freco, .system {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
}
.reco__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.reco__title { font-weight: 650; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
.reco__title .icon { color: var(--muted); }
.reco__provider, .reco__cached {
    font-size: .7rem; padding: 2px 8px; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.reco__summary { margin: 4px 0 12px; }
.reco__bet { background: var(--accent-soft); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; font-size: .9rem; }
.reco__actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.reco__disclaimer { margin: 12px 0 0; color: var(--muted); font-size: .74rem; }
.consensus { border-left: 3px solid var(--accent); }
.consensus__agree {
    display: inline-block; margin: 0 0 10px; font-size: .78rem; font-weight: 600;
    color: var(--win); background: var(--win-soft); border-radius: 999px; padding: 3px 12px;
}

/* Picks table (ranked recommendation) */
.picks-table td.pick-rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 2.2em; }
.picks-table td.pick-num { font-weight: 650; color: var(--accent); }
.picks-table td.pick-name { font-weight: 600; }
.picks-table td.pick-why { white-space: normal; color: var(--muted); font-size: .82rem; max-width: 46ch; }

/* Spotlights (varmin / yllättäjä) — two compact labeled lines */
.spotlights { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.spot { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.spot__label { font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
.spot__label .icon { color: var(--muted); }
.spot__who { font-weight: 600; }
.spot__odds { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.spot__reason { margin: 0; color: var(--muted); font-size: .82rem; flex-basis: 100%; }

/* Weather line */
.weather {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    background: var(--info-soft); border: 1px solid var(--info-soft);
    border-radius: var(--radius); padding: 8px 12px; font-size: .86rem; color: #123a75;
}
.weather__icon { display: inline-flex; color: var(--info); }
.weather--wet { font-weight: 600; }

/* "Ennuste muuttunut" — the bet on file no longer matches the current tip, so the
   row offers the new one instead of the plain "Pelattu" badge. */
.bt-changed {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px; font-size: .78rem; color: var(--place);
    cursor: help;
}
.bt-changed .icon { width: 13px; height: 13px; }

/* Compact per-leg forecast inside the legs table. A Toto75 card runs for hours,
   so each leg carries its own forecast rather than the card's single line. */
.leg__wx {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px; padding: 1px 6px;
    border-radius: 999px; background: var(--info-soft); color: #123a75;
    font-size: .72rem; font-weight: 400; white-space: nowrap;
}
.leg__wx .icon { width: 12px; height: 12px; }
.leg__wx--wet { font-weight: 600; }

/* Per-race bet types inside a recommendation */
.bettypes { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.bettypes__title { font-weight: 650; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.bettypes__title .icon { color: var(--muted); }
.bettype { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.bettype:last-child { border-bottom: 0; }
.bettype__name { font-weight: 600; min-width: 88px; }
.bettype__sel { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bettype__chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: .8rem; font-weight: 600; }
.bettype__sep { color: var(--muted); font-weight: 600; }

/* System (multi-leg) results */
.system__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.system__rows { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-size: .74rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.system__cost { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.system__price { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.system__budget { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.system__budget-label { color: var(--muted); font-size: .82rem; font-weight: 600; }
.budget-input { width: 90px; }
.btn-budget, .btn-box-budget, .btn-haj-budget { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-budget:hover, .btn-box-budget:hover, .btn-haj-budget:hover { background: var(--surface-2); }
/* "Ei varmoja" toggle sits alongside the budget control */
.nobanker { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.nobanker input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.nobanker:hover { color: var(--text); }

/* Legs table (system row) */
.legs-table td.leg-num { font-weight: 650; white-space: nowrap; }
.legs-table td.leg-marks { white-space: normal; }
.legs-table td.leg-marks .leg__marks { display: flex; flex-wrap: wrap; gap: 5px; }
.legs-table td.leg-why { white-space: normal; color: var(--muted); font-size: .82rem; max-width: 44ch; }
.leg__type { font-size: .66rem; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.leg-sure { background: var(--win-soft); color: var(--win); }
.leg-spread { background: var(--place-soft); color: var(--place); }

/* Two-step real-money bet control */
.betplace { margin: 12px 0 4px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.betplace--compact { border-top: 0; padding-top: 6px; }
.betplace__out { margin-top: 10px; }
.betplace__what { margin: 0 0 8px; font-size: .9rem; }
.betplace__confirm { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.betplace__cost { font-weight: 600; margin: 0; }
.betplace__warn { color: var(--place); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }
.betplace__done { color: var(--win); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }

/* "Merkitse pelatuksi" — bookkeeping for a system played by hand at Veikkaus.
   Deliberately quieter than .betplace: that button spends money, this one only
   writes a row, and the two must not look interchangeable. */
.betmark { margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.betmark__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.betmark__label { font-size: .88rem; font-weight: 600; }
.betmark__cost { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.betmark__cost input { width: 92px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: .86rem; }
.betmark__hint { margin: 7px 0 0; font-size: .78rem; color: var(--muted); max-width: 62ch; }
.betmark__done { color: var(--win); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.betmark__link { display: inline-block; margin-top: 6px; font-size: .82rem; }
/* A button that reads as a link — used for low-stakes undo actions. */
.linkbtn {
    background: none; border: 0; padding: 0; font: inherit; font-size: .84rem; font-weight: 500;
    color: var(--info); text-decoration: underline; cursor: pointer;
}
.linkbtn:hover { text-decoration: none; }
.linkbtn:disabled { color: var(--muted); cursor: default; }
/* "itse pelattu" marker in the ledger, where a robot row shows its receipt. */
.origin-tag {
    display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .66rem;
    font-weight: 600; background: var(--info-soft); color: #123a75; white-space: nowrap;
}
/* Omat pelit "Hinta" cell: own cost + optional share detail + the ÷ split icon, all
   on ONE line (nowrap, inline children) — no stacking. */
.mybets-cost { white-space: nowrap; }
.mybets-share { font-size: .72rem; line-height: 1.3; color: var(--muted); margin-left: 5px; }

/* Row-action icon buttons (÷ share split, coins payout entry) — each opens a modal
   instead of an inline form, keeping the row a single line. */
.shares-btn, .paylog-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px; line-height: 0; cursor: pointer; vertical-align: middle; margin-left: 4px;
    background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted);
}
.shares-btn:hover, .paylog-btn:hover { color: var(--accent); border-color: var(--border-strong); background: var(--surface-2); }
.shares-btn--on, .paylog-btn--on { color: var(--accent); }
.shares-btn .icon, .paylog-btn .icon { width: 1rem; height: 1rem; }
.paylog-btn { margin-left: 6px; }

/* The row-action modals (share split, payout) — a compact form, narrower than 760px. */
.mb-modal { width: min(420px, calc(100vw - 2rem)); }
.mb-modal .modal__close { line-height: 1; font-size: 1.05rem; }

/* The async Veikkaus transaction feed at the bottom of Omat pelit. */
.veikkaus-history { margin-top: 1.6rem; }

/* Robotti setup checklist — shown only while something blocks the configured mode. */
.robot-checklist { background: var(--surface); border: 1px solid var(--border-strong); }
.robot-checklist__list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.robot-checklist__list li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.robot-checklist__list li.is-done { color: var(--muted); }
.robot-checklist__list li.is-done .icon { color: var(--accent); }
.robot-checklist__list li.is-todo .icon { color: var(--miss); }

/* Robotti — predictions the operator can still play manually (race not started). */
.robot-playables { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.robot-playable {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap;
    padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.robot-playable__info { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.robot-playable__game { font-weight: 600; }
.robot-playable__sel { font-variant-numeric: tabular-nums; }
.robot-play__out { flex-basis: 100%; }
.robot-play__out:empty { display: none; }

/* "Miksi?" — link from a robot prediction into the normal analysis (perustelut). */
.robot-why { font-size: .8rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .2rem; }
.robot-why .icon { width: .95em; height: .95em; }
.robot-why--icon { color: var(--muted); }
.robot-why--icon:hover { color: var(--accent); }
/* "Miksi?" disclosure: the robot's stored rationale, expandable in place —
   the same reasoning normal predictions show, without re-running the AI. */
.robot-why-d { display: inline-block; margin-top: 2px; }
.robot-why-d > summary { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; font-size: .8rem; color: var(--muted); list-style: none; user-select: none; }
.robot-why-d > summary::-webkit-details-marker { display: none; }
.robot-why-d > summary:hover { color: var(--accent); }
.robot-why-d > summary .icon { width: .95em; height: .95em; }
.robot-why-d[open] > summary { color: var(--text); font-weight: 600; }
.robot-why-d__body { margin: 6px 0 2px; padding: 8px 10px; border-left: 2px solid var(--border-strong); background: var(--surface-soft, rgba(127,127,127,.06)); border-radius: 0 var(--radius) var(--radius) 0; max-width: 44rem; white-space: normal; }
.robot-why-d__reason { margin: 0 0 6px; }
.robot-why-d__body a { display: inline-flex; align-items: center; gap: .25rem; }
.robot-why-d__body a .icon { width: .95em; height: .95em; }
td.pred-legs .robot-why-d { display: block; }
.share-modal__row { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0; }
.share-modal__field { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.share-modal__in { width: 5.5rem; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; text-align: right; }
.share-modal__slash { color: var(--muted); font-size: 1.3rem; padding-bottom: 6px; }
.share-modal__note { margin: 10px 0 0; }
.share-modal__err { color: var(--miss); margin: 10px 0 0; font-weight: 600; }
.share-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Account-balance trend section on the Tilastot page. */
.balance-track { margin: 20px 0 8px; }
.chart--balance { margin: 6px 0 4px; }
.pred-bet-row { margin-top: 4px; }
.pred-bet__out { font-size: .84rem; }

/* Exotic budget box inside a featured card */
.freco__pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; font-size: .95rem; }
.freco__budget { margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.freco__boxout { margin-top: 8px; }
.freco__boxnote { color: var(--place); font-size: .84rem; margin: 6px 0 0; }
.dpick__horses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Multi-model ensemble */
.multi { display: flex; flex-direction: column; gap: 14px; }

/* Päivän ennusteet panel (home + daily page) */
.daily__summary { font-size: 1rem; margin: 16px 0 6px; }
.daily__meta { font-size: .82rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.daily-home { margin: 24px 0 6px; }
.daily-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.daily-home__head .section-h { margin: 0; }
.daily-home__all { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.daily-home__lead { margin: 4px 0 12px; font-size: .88rem; }
#daily-panel .section-h { font-size: 1.05rem; margin-top: 20px; }
.daily-table td.pick-horses { white-space: normal; }
.daily-table td.pick-sel { white-space: normal; min-width: 200px; }
/* Inline "Pelaa" + "Avaa rata →" action cell (picks + value tables) */
.daily-act { white-space: nowrap; }
.daily-act .btn { margin-bottom: 6px; }
.daily-act__open { display: block; font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* Value plays (arvovihjeet) table */
.value-table td.v-edge { font-weight: 650; font-variant-numeric: tabular-nums; }
.value-table td.v-edge.is-pos { color: var(--win); }
.value-table td.v-edge.is-neg { color: var(--place); }
.card-value { margin: 4px 0 10px; }
.card-value__lead { margin: 0 0 4px; font-size: .86rem; }

/* Per-bet-type koontisivu */
.bettype-intro__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bettype-all__hint { font-size: .8rem; }
.btctl { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 12px 0 2px; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .86rem; }
.btctl__field { color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btctl__sort, .btctl__track { font: inherit; padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); max-width: 60vw; }
.btctl__check { color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.btctl__check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.btctl__empty { padding: 12px 4px; }

/* Bettype day table: one tbody (.btrow) per race = data row + detail row */
.btrow.is-hidden { display: none; }
.btrow.is-played .bt-where { box-shadow: inset 3px 0 0 var(--win); }
.btrow td.bt-where { font-weight: 600; white-space: nowrap; }
.btrow td.bt-base { white-space: normal; }
.btrow td.bt-base .bettype__chip { margin-right: 4px; }
/* Split pick layout: one narrow flag column (AI / yksimieliset / vajaa konsensus)
   followed by one column per finishing place, so the day scans vertically. */
.bettype-table th.bt-src, .btrow td.bt-src { width: 1%; white-space: nowrap; vertical-align: middle; }
.bettype-table th.bt-src { font-size: .68rem; }
/* Stack the flags, each pill hugging its own text (a plain block would stretch
   every pill to the column width). */
.btrow td.bt-src > * { display: block; width: fit-content; }
.btrow td.bt-src > * + * { margin-top: 3px; }
.btrow td.bt-src .unanimous { font-size: .68rem; }
.btrow td.bt-src .bt-ai-tag { margin-right: 0; }
.bettype-table th.bt-pick { font-variant-numeric: tabular-nums; }
/* The koontisivu picks carry the START NUMBER and the ODDS only — no horse name,
   in either layout. The number is what actually gets staked and the odds are what
   you compare between races; the name was measured at a median 26% visible in the
   split columns ("Monsi…"), and it cost 35% of the table's height in wrapping.
   Full name stays one hover away (chip title), and in the "Miksi?" panel and on
   the race page — which is where horse identity actually matters. */
/* Scoped to the two pick cells, NOT `.btrow .chip-name` — the "Miksi?" panel is a
   detail row inside the same .btrow, and it is one of the places the name is
   supposed to survive. A descendant selector would silently eat it there. */
.btrow td.bt-pick .chip-name, .btrow td.bt-base .chip-name { display: none; }
.btrow td.bt-pick { white-space: nowrap; }
.btrow td.bt-pick .bettype__chip { display: inline-flex; align-items: baseline; gap: 5px; }
.btrow td.bt-pick .chip-odds { margin-left: 0; }
.chip-num { font-variant-numeric: tabular-nums; }
/* Yhteiskerroin gets its own right-aligned numeric column */
.bettype-table th.bt-combo, .btrow td.bt-combo { width: 1%; white-space: nowrap; }
.btrow td.bt-combo .combo-odds { margin-top: 0; font-size: .82rem; }
/* Row-selection checkbox column — pick which races the AI batch analyses */
.bettype-table th.bt-check, .btrow td.bt-check { width: 1%; padding-right: 6px; text-align: center; vertical-align: middle; white-space: nowrap; }
.bt-check-input, .bt-checkall { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.btrow.is-selected td { background: var(--accent-soft); }
.bt-ai-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; margin-right: 6px; }
/* Estimated combined odds (arvioitu yhteiskerroin) for multi-horse bets */
.combo-odds {
    display: inline-block; margin-top: 4px; white-space: nowrap;
    font-size: .74rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
    cursor: help;
}
.combo-odds strong { font-weight: 700; color: var(--accent); }
.bettype__sel .combo-odds { margin-top: 0; margin-left: 4px; }
.btrow td.bt-action { white-space: nowrap; }
.btrow td.bt-action .btn + .btn { margin-left: 6px; }

/* Guarded bet flow rendered inline in the action cell (no fold-down detail row).
   The single control morphs in place: Pelaa → Vahvista 0,50 € → ✓ Kuitti … */
.bt-action .ibet { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.bt-action .btn + .ibet { margin-left: 6px; }
.bt-action .ibet .loading { padding: 0; gap: 6px; font-size: .8rem; }
.bt-action .ibet .notice,
.bt-action .ibet .reco__actions { margin: 0; }
.bt-action .notice { font-size: .78rem; white-space: normal; text-align: left; }
.ibet__done { display: inline-flex; align-items: center; gap: 5px; color: var(--win); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.ibet__err { display: inline-flex; align-items: center; gap: 5px; color: var(--place); font-weight: 600; font-size: .8rem; white-space: normal; text-align: left; }
.ibet__settings { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; font-size: .8rem; white-space: nowrap; text-decoration: none; }
.ibet__settings:hover { text-decoration: underline; }
.ibet__cancel { color: var(--muted); font-weight: 600; }
/* Secondary row links (Miksi?, koko lähtö →, reanalyse ↻) — their own trailing
   column, so the action column holds only things that place or cost money */
.bettype-table th.bt-xtra-cell, .btrow td.bt-xtra-cell { width: 1%; white-space: nowrap; }
.btrow td.bt-xtra-cell .bt-xtra { margin-left: 0; }
.bt-xtra { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; }
.bt-xtra .btreco__link { display: inline-flex; align-items: center; }
.bt-xtra .icon { width: 16px; height: 16px; }
/* Terse "played" pill: the ticket icon plus, once settled, the net result. Never
   wraps — it used to run to four lines and swamp the row (see playedBadge). */
.btrow__played {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--win-soft); color: var(--win); font-weight: 600; font-size: .76rem;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; cursor: help;
}
.btrow__played .icon { width: 14px; height: 14px; }
.btrow__played strong { font-variant-numeric: tabular-nums; }
.btrow__played strong.is-loss { color: var(--place); }
/* This exact row IS the bet on file — a filled pill, vs. the outlined "some bet
   exists on this race" state. */
.btrow__played.is-thisrow { background: var(--win); color: var(--surface); }
.btrow__played.is-thisrow strong.is-loss { color: inherit; }
.btrow__result:not(:empty) { margin-top: 2px; }
.btreco { padding-top: 4px; }
.btreco__pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .92rem; }
.btreco__lbl { font-weight: 600; }
.btreco .betplace { margin: 8px 0 0; padding-top: 8px; }
.btreco__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.btreco__link {
    background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: .84rem;
    font-weight: 600; cursor: pointer;
}
.btreco__link:hover { text-decoration: underline; }
.btreco__budget { margin-top: 8px; }
.btreco__playednote { margin: 8px 0 0; font-size: .86rem; display: flex; align-items: center; gap: 5px; }
.btreco__baserow { margin: 6px 0 0; font-size: .84rem; }

/* "Miksi?" — the AI reasoning for an analysed koontisivu pick, revealed inline in a
   full-width row under it (tr.detail-row.bt-reason). Uses theme variables only, so it
   follows light/dark automatically. */
.btn-why.is-active { text-decoration: underline; }
.whybox { display: flex; flex-direction: column; gap: 10px; }
.whybox__head { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: .95rem; }
.whybox__head .icon { color: var(--accent); }
.whybox__agree { align-self: flex-start; }
.whybox .reco__summary { margin: 0; }
.whyhorse { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 9px 11px; }
.whyhorse__name { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.whyhorse__hn { font-weight: 600; }
.whyhorse__reason { display: flex; gap: 8px; align-items: baseline; font-size: .86rem; line-height: 1.45; margin-top: 5px; }
.whyhorse__none { margin: 2px 0 0; font-size: .82rem; }

/* "Already placed real bets on this race" banner — pinned to the very top of a
   race / bet-type analysis (.race__reco, .featured__result). Amber as a heads-up
   by default; green + stronger when the race was already played with the exact
   game being analysed (placed.thisType). */
.placed-banner {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 14px; padding: 11px 14px;
    background: var(--place-soft); border: 1px solid var(--place);
    border-radius: var(--radius); color: var(--place);
}
.placed-banner .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.placed-banner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.placed-banner__head { font-size: .92rem; font-weight: 700; line-height: 1.3; }
.placed-banner__detail { font-size: .84rem; opacity: .85; }
.placed-banner--same { background: var(--win-soft); border-color: var(--win); color: var(--win); }

/* Global AJAX activity bar (installed by the layout bootstrap): a thin accent-green
   indeterminate sweep pinned to the top of the viewport while any request is in
   flight. Fades via opacity so brief bursts read as a smooth pulse, above everything. */
.ajax-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
    overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity .18s ease;
}
.ajax-progress.is-active { opacity: 1; }
.ajax-progress__fill {
    position: absolute; top: 0; left: 0; height: 100%; width: 34%;
    background: var(--accent); border-radius: 0 2px 2px 0;
    animation: ajaxSweep 1.05s cubic-bezier(.4, 0, .2, 1) infinite;
    will-change: transform;
}
@keyframes ajaxSweep {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(395%); }
}
html.is-loading { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
    .ajax-progress__fill { animation-duration: 2.1s; }
}

/* "Tehdyt vedot" section on the card page: the real-money bets placed on this
   meeting's races (reuses .pred-table for the listing). */
.placed-card { margin-top: 8px; }
.placed-card .section-h { margin-bottom: 6px; }
.placed-card__lead { margin: 0 0 12px; max-width: 90ch; }
.placed-card__table td.pred-game a { font-weight: 600; }
/* Per-race "Pelattu" chip in the Lähdöt status cell, linking up to the section. */
.races-table td.race-state { white-space: nowrap; }
.placed-chip {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    text-decoration: none; vertical-align: middle;
}
.placed-chip:hover { text-decoration: none; filter: brightness(.97); }
.placed-chip .icon { width: 13px; height: 13px; }

/* Settings page */
.bet-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.settings-card .section-h { margin-top: 0; }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-row { display: flex; flex-direction: column; gap: 5px; }
/* Side-by-side fields (e.g. Veikkaus login + password) on one row, capped so a
   short credential field never stretches across the whole wide settings card;
   wraps to a stack on narrow viewports. */
.settings-grid { display: flex; flex-wrap: wrap; gap: 14px 18px; max-width: 640px; }
.settings-grid--2 .settings-row { flex: 1 1 240px; min-width: 0; }
.settings-grid .settings-row input { width: 100%; }
.settings-row--switch { flex-direction: row; align-items: flex-start; gap: 10px; }
.settings-row--switch input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.settings-row input[type="number"] { width: 120px; }
.settings-hint { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.settings-actions { display: flex; align-items: center; gap: 12px; }
.settings-note { font-size: .85rem; margin-top: 10px; }

/* My bets / reconcile */
.reconcile { margin: 0 0 16px; }
.reconcile__status { margin-left: 8px; font-size: .82rem; }
.reconcile__panel { margin-top: 10px; }
.section-note { font-size: .82rem; margin: 4px 0 10px; }

/* --- Ennusteaikataulu: when a race's tip is prewarmed and refreshed ----------
   Rendered by schedule_note() (views/helpers.php) on the ravikortti and the
   lähtösivu. Quiet by default — it is a promise about the background, not a
   call to action — and only the "off" variant raises its voice, because that
   one contradicts what the rest of the page implies. */
.sched-note {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: .5rem 0 0; font-size: .82rem; color: var(--muted);
}
.sched-note .icon { width: 15px; height: 15px; color: var(--accent); flex: none; }
.sched-note strong { color: var(--text); font-weight: 600; }
.sched-note--off { color: var(--muted); }
.sched-note--off .icon { color: var(--muted); }
.sched-note--done .icon { color: var(--muted); }
/* Per-race "next update" hint in the Lähdöt table's state column. */
.sched-next { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sched-next .icon { width: 13px; height: 13px; }

/* My bets: "vain voitot" filter */
.mybets-filter { margin: 0 0 10px; }
.toggle-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; user-select: none; }
.toggle-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.pred-table tr.is-hidden { display: none; }

/* Stats: analysis-model selector (single model vs. consensus) */
/* Analysis-model picker — lives inside a .settings-card on the settings page,
   so the card chrome comes from there; these are the inner elements only. */
.model-select__lead { margin: 0 0 12px; max-width: 68ch; }
.model-select__form { display: block; }

/* The picker is a priced table: one row per model with a toggle, the provider's
   list price, and what one race analysis costs with it. The selected rows are
   tinted so "what am I paying for" is readable at a glance. */
.model-table { margin: 0; }
.model-table__use { width: 1%; white-space: nowrap; }
.model-table td { vertical-align: middle; }
.model-row.is-active > td { background: var(--accent-soft); }
.model-row.is-active .cell-main { font-weight: 650; }
.model-table__rates { font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-table__est { font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-table__est strong { font-size: 1rem; }
.model-table .cell-sub { display: block; font-size: .74rem; color: var(--muted); }
.model-table code { font-size: .74rem; }
.model-table__basis { margin: 10px 0 0; max-width: 78ch; }
.model-table__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 18px; flex-wrap: wrap; margin-top: 12px;
    border-top: 1px solid var(--border); padding-top: 12px;
}
.model-table__total { margin: 0; font-size: .95rem; }
.model-table__total strong { font-size: 1.1rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* Toggle switch in the "Käytä" column — a styled checkbox, so it still submits
   with the form and stays keyboard-operable. */
.model-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.model-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.model-toggle__mark {
    width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong);
    position: relative; transition: background .15s ease; flex: none;
}
.model-toggle__mark::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--surface); transition: transform .15s ease;
}
.model-toggle input:checked + .model-toggle__mark { background: var(--accent); }
.model-toggle input:checked + .model-toggle__mark::after { transform: translateX(16px); }
.model-toggle input:focus-visible + .model-toggle__mark { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The enrichment switch below the model table: same toggle, plus a text label. */
.model-enrich__toggle { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 4px; font-size: 0.92em; }
.model-enrich__toggle .model-toggle__mark { flex: 0 0 auto; margin-top: 2px; }
/* Ennusteaikataulu: which pre-race updates the schedule makes. Chips rather than a
   list, because the choice is small, closed and read at a glance — and each one is
   a real multiplier on the day's AI bill, so it should look like a decision. */
.warm-leads { border: 0; padding: 0; margin: 14px 2px 4px; }
.warm-leads legend { padding: 0; font-size: .92em; font-weight: 600; }
.warm-leads__opt {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 8px 8px 0 0; padding: 5px 11px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.warm-leads__opt input { accent-color: var(--accent); }
.warm-leads__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.warm-leads__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.warm-leads__hint { margin: 10px 0 0; }

/* The AI max_tokens cap row: number input inline with its label + hint. */
.model-tokens__row { align-items: center; flex-wrap: wrap; }
.model-tokens__input { width: 7.5em; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); }
.model-select__label { font-weight: 600; font-size: .9rem; }
.model-select__input { min-width: 16rem; max-width: 100%; padding: 8px 11px; font-size: .9rem; }
.model-select__group {
    border: 0; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
}
.model-select__group .model-select__label { float: left; margin-right: 4px; }
.model-select__option {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.model-select__option input { accent-color: var(--accent); }
.model-select__status {
    display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: .88rem;
}
.model-select__status.is-single { color: var(--accent); }
.model-select__status.is-consensus { color: var(--text); }
.model-select__status .icon { flex: none; }
.model-select__status.is-single .icon { color: var(--accent); }
.model-select__status.is-consensus .icon { color: var(--win); }
.model-select__note { margin: 6px 0 0; max-width: 68ch; }
@media (max-width: 560px) {
    .model-select__input { min-width: 0; width: 100%; }
    .model-select__form { align-items: stretch; }
}

/* Responsive */
/* The decorative tagline is the first thing to go: below this the brand + full nav
   + account cluster want the whole 1600px cap, and the tag is the only expendable
   piece. Keeping it only on the widest screens is what lets everything else stay on
   ONE row down to the burger breakpoint below. */
@media (max-width: 1460px) {
    .brand-tag { display: none; }
}

/* Below this width the five top-level items + the account cluster no longer fit on
   one row, so the nav collapses into a burger panel. (After the nav audit merged
   Analyysi + Yleistieto away — seven items down to five — the nav is ~200px narrower,
   so this could drop from 1380px back to a normal laptop breakpoint.) The panel is a
   normal block flow: dropdowns open inline (pushing the items below them down) instead
   of floating over the page, so a long game list scrolls with the panel rather than
   inside a fixed-height popup. */
@media (max-width: 1280px) {
    .nav-burger { display: inline-flex; }
    .site-nav {
        display: none; order: 10; width: 100%; margin-left: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border);
        max-height: min(70vh, 560px); overflow-y: auto;
    }
    .site-nav.is-open { display: flex; }
    .site-nav > a, .nav-dd__toggle { padding: 10px 6px; font-size: .95rem; }
    .site-nav > a.is-active, .nav-dd__toggle.is-active {
        border-bottom: 0; box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px;
    }
    .nav-dd__menu {
        position: static; min-width: 0; max-width: none; max-height: none;
        box-shadow: none; border: 0; border-radius: 0; overflow: visible;
        padding: 0 0 6px 12px;
    }
    /* Columns become sections in the stacked panel. */
    .nav-dd__menu--cols, .nav-dd__cols { flex-direction: column; gap: 1px; }
    .nav-dd__col { min-width: 0; }
    .nav-dd__col + .nav-dd__col { border-left: 0; padding-left: 0; }
    .nav-dd__menu--cols .nav-dd__col + .nav-dd__col .nav-dd__group {
        border-top: 1px solid var(--border); margin-top: 4px;
    }
}
@media (max-width: 620px) {
    .stat { padding: 6px 12px; }
    .stat__v { font-size: 1rem; }
}
@media (max-width: 560px) {
    .intro h1 { font-size: 1.3rem; }
    /* Comfortable touch targets for primary nav + small controls on phones. */
    .site-nav > a { padding: 12px 6px; font-size: .95rem; }
    .btn-small { padding: 8px 12px; font-size: .84rem; }
    .pred-filter select { padding: 9px 12px; }
    .btn-analyse { white-space: normal; }
}

/* AI retrospective ("mikä osui / mikä meni pieleen") under a graded meeting. */
.res-review { margin: 4px 0 12px; padding: 11px 13px; border: 1px solid var(--border);
    border-left: 3px solid var(--info-soft); border-radius: 8px; background: var(--surface); }
.res-review__head { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.res-review__head .icon { vertical-align: -0.15em; }
.res-review__summary { margin: 2px 0 8px; font-size: .88rem; }
.res-review__cols { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.res-review__col { flex: 1 1 240px; min-width: 0; }
.res-review__label { font-weight: 600; font-size: .84rem; }
.res-review__label .icon { vertical-align: -0.15em; }
.res-review__list { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; }
.res-review__list li { margin: 2px 0; }
.res-review__lesson { margin: 9px 0 0; font-size: .85rem; color: var(--text-muted, #555); }

/* Respect a user's reduced-motion preference: no spins, flashes or slides. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Multi-user layer: header account cluster, auth pages, admin console
   ========================================================================== */

/* Header account cluster ---------------------------------------------------- */
/* No margin-left:auto here — .site-nav already carries the one auto margin that
   pushes the whole right cluster (nav + balance + account) over. A second auto
   margin made the account cluster claim its own right-aligned line, dropping it
   below the nav. */
.hdr-account { display: flex; align-items: center; gap: .5rem; }
/* The saldo chip is the account indicator; the short "Tili" link is a fallback only
   when no balance is showing. When the balance chip is visible (JS drops [hidden]
   once a real number arrives), hide "Tili" so the header shows just the saldo. */
#hdr-balance:not([hidden]) ~ .hdr-account .hdr-account__tili { display: none; }
.hdr-account__link {
    font-size: .85rem; color: var(--text); text-decoration: none;
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.hdr-account__link:hover { color: var(--accent); }
.hdr-account__link--cta {
    background: var(--accent); color: #fff; padding: .35rem .7rem;
    border-radius: var(--radius);
}
.hdr-account__link--cta:hover { background: var(--accent-hover); color: #fff; }

/* Auth pages ---------------------------------------------------------------- */
.auth { display: flex; justify-content: center; padding: 2.5rem 1rem; }
.auth__card {
    width: 100%; max-width: 24rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.auth__title { margin: 0 0 .25rem; font-size: 1.3rem; }
.auth__field { display: flex; flex-direction: column; gap: .35rem; }
.auth__label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.auth__input {
    padding: .6rem .7rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius); font-size: 1rem; background: var(--surface);
    color: var(--text);
}
.auth__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.auth__hint { font-size: .78rem; color: var(--muted); }
.auth__btn {
    padding: .65rem 1rem; background: var(--accent); color: #fff; border: 0;
    border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.auth__btn:hover { background: var(--accent-hover); }
.auth__alt { margin: 0; font-size: .88rem; color: var(--muted); text-align: center; }
.auth__alt a { color: var(--accent); }
.auth__note { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); }
.auth__error {
    margin: 0; padding: .6rem .7rem; background: var(--miss-soft); color: var(--miss);
    border-radius: var(--radius); font-size: .88rem;
}

/* Admin console ------------------------------------------------------------- */
.admin { padding: 1.5rem 0; }
.admin__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.admin__head h1 { margin: 0; font-size: 1.4rem; }
.admin__counts { margin: 0; color: var(--muted); font-size: .9rem; }
.admin__flash {
    margin: 1rem 0 0; padding: .6rem .8rem; background: var(--accent-soft);
    color: var(--accent); border-radius: var(--radius); font-size: .9rem;
}
.admin__search { display: flex; gap: .5rem; margin: 1rem 0; }
.admin__search input[type="search"] {
    flex: 1; max-width: 22rem; padding: .5rem .7rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.admin__search button, .admin__btn {
    padding: .45rem .8rem; border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--text); border-radius: var(--radius);
    cursor: pointer; font-size: .85rem;
}
.admin__btn:hover { background: var(--border); }
.admin__btn--danger { color: var(--miss); border-color: var(--miss); background: var(--miss-soft); }
.admin__tablewrap { overflow-x: auto; }
.admin__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin__table th, .admin__table td {
    text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.admin__table th { color: var(--muted); font-weight: 600; }
.admin__table tr.is-suspended { opacity: .55; }
.admin__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.admin__inline { display: inline; margin: 0; }
.admin__inline select { padding: .3rem .4rem; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.admin__badge {
    display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
    font-size: .72rem; border-radius: 999px; vertical-align: middle;
}
.admin__badge--warn { background: var(--place-soft); color: var(--place); }
.admin__empty { text-align: center; color: var(--muted); padding: 1.5rem; }

/* --- Scheduled jobs (superadmin "Ajastetut työt") -------------------------- */
.jobs__lead, .jobs__foot { font-size: .88rem; line-height: 1.5; margin: 1rem 0; }
.jobs__foot code, .jobs__lead code { font-size: .82em; }
.jobs__grid {
    display: grid; gap: 1rem; margin: 1rem 0;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.jobs__card {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 1rem 1.1rem;
    box-shadow: inset 4px 0 0 var(--border-strong);
}
.jobs__card--ok    { box-shadow: inset 4px 0 0 var(--accent); }
.jobs__card--warn  { box-shadow: inset 4px 0 0 var(--place); }
.jobs__card--err   { box-shadow: inset 4px 0 0 var(--miss); }
.jobs__card--muted { box-shadow: inset 4px 0 0 var(--border-strong); }
.jobs__cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.jobs__name { margin: 0; font-size: 1.05rem; }
.jobs__badge--ok    { background: var(--accent-soft); color: var(--accent); }
.jobs__badge--warn  { background: var(--place-soft);  color: var(--place); }
.jobs__badge--err   { background: var(--miss-soft);   color: var(--miss); }
.jobs__badge--muted { background: var(--surface-2);   color: var(--muted); }
.jobs__why { margin: .5rem 0 .8rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.jobs__meta { margin: 0; display: grid; gap: .55rem; }
.jobs__meta div { display: grid; gap: .1rem; }
.jobs__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.jobs__meta dd { margin: 0; font-size: .88rem; }
.jobs__meta code { font-size: .8em; background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; }
.jobs__abs { color: var(--muted); font-size: .82rem; margin-left: .3rem; }
.jobs__note, .jobs__hint, .jobs__cal { display: block; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.jobs__recent { margin-top: .8rem; font-size: .84rem; }
.jobs__recent summary { cursor: pointer; color: var(--accent); }
.jobs__runs { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.jobs__run { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; align-items: baseline; }
.jobs__dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.jobs__dot--ok { background: var(--accent); }
.jobs__dot--err { background: var(--miss); }
.jobs__runtime { color: var(--muted); font-variant-numeric: tabular-nums; }
.jobs__runnote { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs__headright { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.jobs__toggle { margin: 0; }
.jobs__switch {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; font-size: .76rem; font-weight: 600;
    border-radius: 999px; cursor: pointer; border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--muted);
}
.jobs__switch-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.jobs__switch--on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.jobs__switch--off { background: var(--surface-2); color: var(--muted); }
.jobs__switch:hover { filter: brightness(0.97); }


/* Dev-only superadmin quick sign-in (login page) */
.auth__dev {
    margin-top: .5rem; text-align: center; display: block;
    padding: .5rem .7rem; border: 1px dashed var(--border-strong);
    border-radius: var(--radius); font-size: .85rem; color: var(--muted);
    text-decoration: none;
}
.auth__dev:hover { border-color: var(--accent); color: var(--accent); }

/* --- Info pages (about, FAQ, responsible, terms, privacy) -------------------- */
.info-section { margin-top: 34px; }
.info-section .section-h { margin-bottom: 4px; }

/* Yleistieto (guide) — basics cards + reference tables */
.guide-basics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.guide-basic { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.guide-basic h3 { margin: 0 0 6px; font-size: .92rem; }
.guide-basic p { margin: 0; font-size: .84rem; }
.guide-table td.cell-main { white-space: nowrap; font-weight: 600; }
.guide-table .icon { width: 15px; height: 15px; vertical-align: -2px; color: var(--muted); }

/* Gametype koontisivu — derived system banker line under the game name */
.gt-derived { display: block; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Robotti — game-mode picker grid */
.robot-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.robot-pools__col { display: flex; flex-direction: column; gap: 4px; }
.robot-pools__group { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.robot-pool { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.robot-pool:hover { background: var(--surface-2); }
.robot-pool input { flex: none; }
.robot-pool .icon { width: 14px; height: 14px; color: var(--muted); }

/* Robot per-game Seuraa/Live toggle tables. */
/* The two per-game tables (single-race vs Toto systems) sit side by side to
   cut the tall vertical scroll; they stack again when there isn't room. */
.robot-games-grid { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; }
.robot-games-grid > .robot-games { flex: 1 1 320px; min-width: 300px; margin-top: 12px; }
.robot-games { margin-top: 12px; }
.robot-games__title { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.robot-games__table { width: 100%; min-width: 280px; }
.robot-games__table th.ta-c, .robot-games__table td.ta-c { text-align: center; width: 72px; }
.robot-games__table td.ta-c input { cursor: pointer; }
.robot-games__table td.ta-c input:disabled { cursor: not-allowed; opacity: .4; }
.robot-games__table td.ta-c .robot-risk {
    width: 3.4rem; padding: 3px 5px; border: 1px solid var(--border-strong); border-radius: 6px;
    font: inherit; font-size: .82rem; text-align: right; cursor: text;
}
.robot-nobank { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.robot-nobank input { cursor: pointer; width: auto; }

/* "Ilman kertoimia" (facts-only) what-if report. */
.noodds-headline { font-size: 1.05rem; margin: 6px 0 14px; }
.noodds-table { max-width: 40rem; }
.noodds-table tr.noodds-delta td { border-top: 2px solid var(--border-strong); font-weight: 600; }
.noodds-facts { margin: 12px 0 4px; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; }
.noodds-diverge td .chip { padding: 1px 5px; }
.noodds-diverge .icon { width: .9em; height: .9em; }
.noodds-caveat { margin-top: 16px; }
.noodds-caveat .icon, .noodds-headline .icon { width: .95em; height: .95em; vertical-align: -.12em; }
.noodds-modelpick { display: inline-flex; align-items: center; gap: 8px; }

/* Read-only "Robotin analyysi" page — the archived ensemble the robot bet on. */
.ra-back { margin: 0 0 12px; }
.ra-sub { margin: 2px 0 6px; font-size: 1rem; }
.ra-sub .chip { vertical-align: middle; }
.ra-note { margin: 0 0 16px; line-height: 1.5; max-width: 60rem; }
.ra-note .icon { width: .95em; height: .95em; vertical-align: -.12em; }
.ra-summary { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface-soft, rgba(127,127,127,.06)); border-radius: 0 var(--radius) var(--radius) 0; }
.ra-table { width: 100%; margin: 6px 0 16px; }
.ra-table .ra-rank { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface-soft, rgba(127,127,127,.1)); font-weight: 700; font-size: .8rem; }
.ra-table tr.ra-banker { background: var(--surface-soft, rgba(127,127,127,.05)); }
.ra-table tr.ra-banker td { font-weight: 600; }
.ra-longshot { margin: 0 0 16px; }
.ra-longshot .icon { width: .95em; height: .95em; vertical-align: -.12em; }
.ra-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 6px 0 4px; }
.ra-model { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ra-model__head { display: flex; align-items: center; gap: .35rem; margin-bottom: 6px; }
.ra-model__head .icon { width: 1em; height: 1em; color: var(--accent); }
.ra-model__sum { margin: 0 0 8px; }
.ra-model__picks { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.ra-model__picks li { line-height: 1.4; }
.ra-model__bet { margin: 8px 0 0; }
.ra-nomodels { margin: 4px 0 0; }

/* Hero / figure images: hairline border, no shadow, like every other surface */
.info-hero { margin: 18px 0 0; }
.info-hero img, .info-figure img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
/* The generated art is 3:2 — crop heroes into a banner strip so the page's text
   stays above the fold; --slim tightens it further (responsible page). */
.info-hero img { max-height: 380px; object-fit: cover; object-position: center 40%; }
.info-hero--slim img { max-height: 300px; object-position: center 68%; }
.info-figure img { width: auto; max-width: 100%; max-height: 360px; margin: 0 auto; }
.info-figure { margin: 26px 0 0; }
.info-figure figcaption { margin-top: 6px; color: var(--muted); font-size: .82rem; text-align: center; }

/* Numbered pipeline steps */
.steps {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;
    counter-reset: step;
}
.step {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px 14px 16px;
}
.step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: .82rem; margin-bottom: 8px;
}
.step h3 { margin: 0 0 6px; font-size: .95rem; }
.step p { margin: 0; color: var(--muted); font-size: .87rem; }
.step__models { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.step__models li { font-size: .82rem; color: var(--text); }
.step__models .icon { color: var(--accent); margin-right: 4px; }

/* Feature card grid */
.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
    margin-top: 14px;
}
.info-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px;
}
.info-card h3 { margin: 0 0 6px; font-size: .95rem; display: flex; align-items: center; gap: 7px; }
.info-card h3 .icon { color: var(--accent); }
.info-card p { margin: 0 0 4px; color: var(--muted); font-size: .87rem; }
.info-grid--help .info-card p:last-child { color: var(--text); }

/* Prose pages (terms, privacy) + shared lists */
.prose { max-width: 82ch; }
.prose h2 { font-size: 1.08rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text); font-size: .92rem; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose li { margin: 4px 0; }
.info-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: 82ch; }
.info-list li {
    padding: 9px 0 9px 26px; position: relative; font-size: .92rem;
    border-bottom: 1px solid var(--border);
}
.info-list li:last-child { border-bottom: 0; }
.info-list li::before {
    content: ''; position: absolute; left: 4px; top: 16px;
    width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
}
.info-section .notice { margin-top: 18px; max-width: 82ch; }

/* FAQ accordion (native <details>) */
.faq { max-width: 82ch; }
.faq__item {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-top: 8px;
}
.faq__item summary {
    cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: .94rem;
    list-style: none; position: relative; user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '+'; position: absolute; right: 14px; top: 10px;
    color: var(--muted); font-size: 1.1rem; font-weight: 500;
}
.faq__item[open] summary::after { content: '–'; }
.faq__item[open] summary { border-bottom: 1px solid var(--border); }
.faq__item p { margin: 0; padding: 12px 14px; color: var(--muted); font-size: .9rem; }

/* Bottom call-to-action row */
.info-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.info-cta__more { font-weight: 600; font-size: .88rem; }

/* --- Public header (logged-out chrome: promo / auth / info pages) ------------ */
.public-header {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 12px 0; position: sticky; top: 0; z-index: 10;
}
.public-header .wrap { display: flex; align-items: center; gap: 16px; }
.public-header__nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.public-header__link {
    color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap;
    padding: 7px 12px; border-radius: var(--radius);
}
.public-header__link:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.public-header__link--cta {
    background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.public-header__link--cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
@media (max-width: 560px) {
    /* Keep the sign-in / sign-up affordances; the info links live in the footer too. */
    .public-header__link--info { display: none; }
}

/* --- Promo / landing page ---------------------------------------------------- */
.promo-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px; align-items: center; padding: 44px 0 8px;
}
.promo-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent);
}
.promo-hero__eyebrow .icon { color: var(--accent); }
.promo-hero__title {
    margin: 0 0 14px; font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.14;
    font-weight: 700; letter-spacing: -.01em;
}
.promo-hero__lead { margin: 0 0 22px; color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.promo-hero__fineprint {
    display: inline-flex; align-items: baseline; gap: 6px; margin: 18px 0 0;
    color: var(--muted); font-size: .82rem;
}
.promo-hero__fineprint .icon { color: var(--muted); align-self: center; }
/* When the hero art is absent (asset_url() returns null before assets are generated)
   the view drops the <figure>, so collapse to one column rather than leaving the copy
   squeezed into half the width beside an empty column. */
.promo-hero:not(:has(.promo-hero__media)) { grid-template-columns: 1fr; }
.promo-hero__media { margin: 0; }
.promo-hero__media img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
    object-fit: cover; max-height: 440px;
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(20, 24, 33, .10);
}

.promo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.promo-actions--center { justify-content: center; }
.btn-lg { padding: 12px 22px; font-size: 1rem; border-radius: 8px; }

.promo-values {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
    margin-top: 42px;
}
.promo-value {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 22px 20px;
}
.promo-value__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent); margin-bottom: 12px;
}
.promo-value__icon .icon { width: 22px; height: 22px; }
.promo-value h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 650; }
.promo-value p { margin: 0; color: var(--muted); font-size: .9rem; }

.promo-cta {
    margin-top: 46px; text-align: center;
    background: var(--accent-soft); border: 1px solid var(--border);
    border-radius: 14px; padding: 42px 24px;
}
.promo-cta__title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; }
/* --text, not --muted: muted (#667085) on the accent-soft band (#e9f5ef) lands just
   under WCAG AA 4.5:1. The larger, bolder title carries the hierarchy instead. */
.promo-cta__lead { margin: 0 0 22px; color: var(--text); }
.promo-cta__more { margin: 20px 0 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
/* --accent-hover (darker) clears AA on the accent-soft band; plain --accent does not. */
.promo-cta__more a { color: var(--accent-hover); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 5px; }
.promo-cta__more .icon { width: .95em; height: .95em; }

@media (max-width: 820px) {
    .promo-hero { grid-template-columns: 1fr; gap: 22px; padding-top: 26px; }
    .promo-hero__lead { font-size: 1rem; }
}

/* Footer link columns */
.site-footer__cols {
    display: grid; grid-template-columns: minmax(260px, 1.6fr) 1fr 1fr; gap: 24px;
    padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.site-footer__col { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.site-footer__col p { margin: 0; }
.site-footer__brand { color: var(--text); font-weight: 650; }
.site-footer__brand .icon { color: var(--accent); }
.site-footer__title {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.site-footer__col a { color: var(--muted); }
.site-footer__col a:hover { color: var(--accent); }
@media (max-width: 760px) {
    .site-footer__cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Register: terms/age acceptance */
.auth__terms { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.auth__terms input { margin-top: .2rem; }
.auth__terms a { color: var(--accent); }

/* Logout button (header + account page) */
.hdr-account__logout {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius); background: var(--surface-2); font-weight: 600;
}
.hdr-account__logout:hover { background: var(--miss-soft); border-color: var(--miss); color: var(--miss); }
.intro--account { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn-logout { display: inline-flex; align-items: center; gap: .4rem; }

/* Segmented tab strip — Troikka / Tripla what-if switch (route=troikka-whatif). */
.bettype-tabs { display: inline-flex; gap: 4px; margin: 0 0 1rem; padding: 4px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.bettype-tab { padding: 6px 16px; border-radius: 4px; font-weight: 600; font-size: .86rem;
    color: var(--muted); border: 1px solid transparent; line-height: 1.3; }
.bettype-tab:hover { color: var(--text); text-decoration: none; }
.bettype-tab.is-active { background: var(--surface); color: var(--text);
    border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(16,24,40,.06); }

/* Per-model "Pelaa tämän mallin rivi" (Mallien vertailu) */

/* "Yksimieliset" badge — all models agreed on this bet type's order/set */
.unanimous {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem;
    padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
    white-space: nowrap; vertical-align: middle;
}
.unanimous .icon { width: .85em; height: .85em; }
.bettype.is-unanimous { background: var(--accent-soft); border-radius: var(--radius); }
/* Koontisivu row all models agreed on — a quiet left accent so it stands out in the
   day list without shouting over the played/finished states. */
.btrow.is-unanimous .bt-where { box-shadow: inset 3px 0 0 var(--accent); }

/* Degraded consensus flag on an analysed row: the models' majority favourite
   dropped out of the live field, so the shown ranking wasn't stored and can't
   be played — same pill shape as .unanimous, but in the warn palette so it
   reads as "act on this" (re-analyse), not as a recommendation state. */
.bt-degraded {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem;
    padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--miss-soft); color: #7a1616; border: 1px solid #c96a6a;
    white-space: nowrap; vertical-align: middle; cursor: help;
}
.bt-degraded .icon { width: .85em; height: .85em; }

/* ============================================================================
   Tilastot inline-SVG charts
   ========================================================================== */
.chart { margin: .5rem 0 .25rem; max-width: 760px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__legend {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .4rem;
    font-size: .82rem; color: var(--muted);
}
.chart__key { display: inline-flex; align-items: center; gap: .4rem; }
.chart__dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.chart__tick { fill: var(--muted); font-size: 11px; }
.chart__tick--y { text-anchor: end; }
.chart__tick--x { text-anchor: middle; }
.chart__endlabel { font-size: 12px; font-weight: 700; text-anchor: start; }
.chart__barval { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.chart circle:hover { r: 5.5; }
/* The equity curve is wider than it is tall on purpose — a money curve is read
   left-to-right, and squashing it vertically exaggerates every wobble. */
.chart--equity { max-width: 860px; }
.chart--roi { max-width: 860px; }

/* ============================================================================
   Analyysi (?route=insights) — baseline / price / cost sections
   ========================================================================== */
/* Overview: one card per section, each showing that section's headline number. */
.insight-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px; margin: 16px 0;
}
.insight-card {
    display: flex; flex-direction: column; gap: 3px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 13px 15px; color: inherit;
}
.insight-card:hover { text-decoration: none; background: var(--surface-2); border-color: var(--border-strong); }
.insight-card__k { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.insight-card__k .icon { color: var(--muted); }
.insight-card__v { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.insight-card__d { font-size: .78rem; color: var(--muted); }

/* Sample-size badge. Deliberately loud enough to read before the number it sits
   next to — a percentage from 20 races must not look like a finding. */
.samp {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    font-size: .66rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
    background: var(--info-soft); color: #123a75; vertical-align: 1px;
}
.samp--tiny { background: var(--miss-soft); color: #7a1616; }
/* 95 % confidence interval, shown under/after the point estimate it qualifies. */
.ci { display: inline-block; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The "all models" summary row of a per-model table. */
.data-table tr.row--total > td { background: var(--surface-2); font-weight: 650; }
.data-table tr.row--total:hover > td { background: var(--surface-2); }

/* Ennuste provenance line inside the reasoning panel (when + which models). */
.whybox__prov { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }

/* ============================================================================
   Tilastot: per-race prediction grid (one row per lähtö, one tile per pelimuoto)
   ========================================================================== */
.pred-grid th.pg-col {
    text-align: center; font-size: .72rem; font-weight: 600; white-space: nowrap;
    padding-left: 4px; padding-right: 4px;
}
.pred-grid td.pg-cell { text-align: center; padding: 4px; white-space: nowrap; }
.pg-tile {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.15rem; height: 1.45rem; padding: 0 .3rem;
    border-radius: 6px; border: 1px solid transparent;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.pg-win   { background: var(--win-soft);   color: var(--win);   border-color: var(--win); }
.pg-place { background: var(--place-soft); color: var(--place); border-color: var(--place); }
.pg-miss  { background: var(--miss-soft);  color: var(--miss);  border-color: var(--miss); }
/* No prediction for this product in this race — present but recessive, so the
   eye reads it as "not offered" rather than as a result. */
.pg-none  { background: var(--border); border-color: var(--border); opacity: .45; }

.pred-grid__legend { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; }

/* Omat pelit reuses the same tile vocabulary for the pelimuoto chip, so a result
   reads identically on both pages. These tiles hold a game NAME (not a glyph), so
   they size to their text and need a readable "still open" state. */
.pg-tile--wide { min-width: 0; padding: 0 .5rem; font-weight: 650; }
.pg-pending {
    background: var(--surface); color: var(--muted);
    border-color: var(--border-strong, var(--border));
}

/* Modal dialog (native <dialog>) — used by the ennuste detail on koontisivu rows.
   The panel is taller than a viewport, so it scrolls inside the dialog while the
   page behind stays exactly where it was. */
.modal {
    width: min(760px, calc(100vw - 2rem));
    max-height: min(86vh, 900px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
    overflow: hidden;
}
.modal::backdrop { background: rgba(16, 24, 40, .45); }
.modal__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    background: var(--surface-2); position: sticky; top: 0; z-index: 1;
}
.modal__titles { flex: 1 1 auto; min-width: 0; }
.modal__title { margin: 0; font-size: 1rem; font-weight: 650; }
.modal__sub { font-size: .84rem; margin-top: 2px; }
.modal__close {
    flex: 0 0 auto; cursor: pointer; background: none; border: 1px solid transparent;
    border-radius: var(--radius); color: var(--muted); padding: 4px; line-height: 0;
}
.modal__close:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
/* The scroll region: the reasoning panel can be ~830 px tall. */
.modal__body { padding: 14px 16px 18px; overflow-y: auto; max-height: calc(min(86vh, 900px) - 64px); }
@media (max-width: 640px) {
    .modal { width: 100vw; max-height: 92vh; border-radius: 0; }
    .modal__body { max-height: calc(92vh - 64px); }
}
/* showModal() makes the background inert but does not stop it scrolling — lock it
   so the table behind can't drift while the dialog is open. */
body:has(dialog.modal[open]) { overflow: hidden; }

/* Signed result chips in the Ennusteet meeting headers (laskennallinen / oikea raha). */
.chip-pos { background: var(--win-soft); color: var(--win); border: 1px solid var(--win); }
.chip-neg { background: var(--miss-soft); color: var(--miss); border: 1px solid var(--miss); }
/* "Kertoimet parempi" verdict chip (noodds pelimuoto table) — blue, non-judgmental
   counterpart to the green .chip-pos "Faktat" verdict. */
.chip-odd { background: rgba(23, 92, 211, .10); color: var(--info); border: 1px solid var(--info); }
.chip-pos .icon, .chip-neg .icon { width: .85em; height: .85em; }

/* ============================================================================
   Systeemit (Toto75/Toto5/Duo) folded into the race rows on Ennusteet.
   A system is not its own card — it is a selection spread across several lähtö,
   so each leg tints its race row in the system's colour and the meeting header
   carries the system's own summary + result.
   ========================================================================== */
.sys-legend { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: .1rem 0 .6rem; }
.sys-chip {
    display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    padding: .15rem .5rem; border-radius: 999px; font-size: .8rem;
    background: var(--surface); border: 1px solid var(--border);
}
.sys-chip__dot { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
/* Small pill on a race row naming the system that covers that lähtö. */
.sys-leg {
    display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
    border-radius: 5px; font-size: .68rem; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent; vertical-align: middle;
}
/* Colour identities. Toto75 (widest net) takes c0. */
.sys-c0 .sys-chip__dot, .sys-leg.sys-c0 { background: #fef3c7; }
.sys-leg.sys-c0 { color: #92400e; border-color: #f4c752; }
.sys-c1 .sys-chip__dot, .sys-leg.sys-c1 { background: #ede9fe; }
.sys-leg.sys-c1 { color: #5b21b6; border-color: #c4b5fd; }
.sys-c2 .sys-chip__dot, .sys-leg.sys-c2 { background: #ccfbf1; }
.sys-leg.sys-c2 { color: #115e59; border-color: #5eead4; }
.sys-c3 .sys-chip__dot, .sys-leg.sys-c3 { background: #fce7f3; }
.sys-leg.sys-c3 { color: #9d174d; border-color: #f9a8d4; }
.sys-c4 .sys-chip__dot, .sys-leg.sys-c4 { background: #dbeafe; }
.sys-leg.sys-c4 { color: #1e40af; border-color: #93c5fd; }

/* Tiles that carry the prediction itself ("9 6 2") rather than a ✓/✗ glyph: the
   numbers are the content, the colour is the verdict. Sized to their digits. */
.pg-tile--picks {
    min-width: 0; padding: 0 .4rem; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; font-weight: 650;
}
.pred-grid td.pg-cell { padding-left: 3px; padding-right: 3px; }

/* A tile DERIVED from the lähtö's single ranking (no separate prediction was ever
   stored for that product). Dashed + slightly faded so it never reads as a tracked,
   graded tip — the colour still says whether those horses would have won. */
.pg-tile--derived { border-style: dashed; opacity: .82; font-weight: 600; }

/* "Sign in with Google" button on the login card. */
.auth__google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .6rem 1rem; margin: 0 0 .25rem;
    border: 1px solid var(--border-strong, #cbd2dc); border-radius: 8px;
    background: #fff; color: #3c4043; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
}
.auth__google:hover { background: #f7f8fa; text-decoration: none; }
.auth__google-icon { flex: none; }
.auth__or { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; margin: .5rem 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* 18+/terms clickwrap sitting under the Google button (open signup). */
.auth__note--sso { margin: 0 0 .5rem; font-size: .78rem; line-height: 1.45; }

/* --- Etusivu timeline (redesign 1a): the day's races across all meetings ------ */
.tl-meta { color: var(--muted); font-size: .93rem; margin: .2rem 0 0; }
.tl-lead { color: var(--muted); margin: .35rem 0 0; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 1rem 0 .4rem; }
.tl-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.tl-chip:hover { border-color: var(--border-strong); text-decoration: none; }
.tl-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-chip__flag { font-size: .8rem; }
.tl-toggle { margin-left: auto; }
.tl-toggle.is-active { background: var(--surface); border-color: var(--accent-border); color: var(--accent); }

.tl-group {
    margin: 1.3rem 0 .5rem; font-size: .74rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.tl-list { display: flex; flex-direction: column; gap: 10px; }
.tl-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.tl-row.is-next { border-color: var(--accent-border); }
.tl-row.is-finished { opacity: .62; }
.tl-hide-finished .tl-row.is-finished,
.tl-hide-finished .tl-group[data-finished] { display: none; }
/* A time heading whose races were all filtered away — collapsed by the timeline
   script (see views/home.php) so a track filter never leaves empty hour labels. */
.tl-group.is-empty,
.tl-list.is-empty { display: none; }

.tl-time { flex: none; width: 58px; text-align: left; }
.tl-time__clock { font-size: 1.06rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-time__count { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
.tl-time__count.is-soon { color: var(--place); }

.tl-race { flex: 0 1 240px; min-width: 170px; }
.tl-race__name { font-weight: 700; font-size: .95rem; }
.tl-race__name a { color: inherit; }
.tl-race__sub { color: var(--muted); font-size: .82rem; }

.tl-mid { flex: 1 1 auto; min-width: 0; }
.tl-mid__label {
    font-size: .7rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint);
}
.tl-mid__pick { font-weight: 700; color: var(--accent); }
.tl-mid__signal {
    color: var(--body); font-size: .86rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-mid__signal--empty { color: var(--faint); font-style: normal; }

.tl-status {
    flex: none; font-size: .76rem; font-weight: 600; color: var(--muted);
    background: var(--surface-2); border-radius: var(--radius-pill); padding: 5px 12px;
}
.tl-status.is-ready { background: var(--accent-soft); color: var(--accent-hover); }

.tl-cta { flex: none; }

@media (max-width: 860px) {
    .tl-row { flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; }
    .tl-race { flex: 1 1 auto; }
    .tl-mid { flex-basis: 100%; order: 4; }
    .tl-status { order: 5; }
    .tl-cta { order: 6; flex: 1 1 100%; }
    .tl-cta .btn { width: 100%; min-height: 44px; }
    .tl-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .tl-toggle { margin-left: 0; }
}

/* --- Lähtösivu (redesign 1c): one race as its own page ------------------------ */
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rc-timepill {
    display: inline-flex; align-items: baseline; gap: 4px;
    background: var(--accent-soft); color: var(--accent-hover);
    border-radius: var(--radius-pill); padding: 3px 12px; font-weight: 700; font-size: .88rem;
    margin-right: 6px; font-variant-numeric: tabular-nums;
}
.rc-timepill.is-closed { background: var(--surface-2); color: var(--muted); }
.rc-result { margin: .4rem 0 0; color: var(--accent-hover); font-weight: 600; }
.rc-result .icon { width: 15px; height: 15px; }

.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; }

.rc-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.rc-tablewrap { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.rc-table th {
    text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint); padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.rc-table td { padding: 12px; border-bottom: 1px solid var(--row-divider); vertical-align: top; }
.rc-table tbody tr:last-child td { border-bottom: 0; }
.rc-row--top { background: var(--tint-row); }
.rc-row--scr { opacity: .55; }
.rc-row--scr .rc-horse__name { text-decoration: line-through; }

.rc-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--text); color: #fff; font-weight: 800; font-size: .85rem;
}
.rc-horse__name { display: block; font-weight: 700; font-size: .95rem; }
.rc-horse__sub { display: block; color: var(--muted); font-size: .8rem; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rc-chip { border-radius: var(--radius-pill); padding: 3px 10px; font-size: .74rem; font-weight: 600; }
.rc-chip--good { background: var(--accent-soft); color: #116b41; }
.rc-chip--warn { background: var(--miss-soft); color: var(--miss); }
.rc-quote { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; font-style: italic; }

.rc-trend { white-space: nowrap; font-size: .85rem; }
.rc-trend--up { color: var(--accent-hover); font-weight: 700; }
.rc-trend--down { color: var(--place); font-weight: 700; }
.rc-odds { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Jälkiviisaus — the post-race "ennuste vs. toteuma" section under the runners
   table. Derived, so it costs nothing and appears the moment results land. */
.rc-hs { margin-top: 26px; }
.rc-hs__table td { vertical-align: middle; }
.rc-hs__pos { color: var(--muted); font-weight: 700; width: 3.5rem; }
.rc-hs__mark { width: 2rem; text-align: right; }
.rc-hs__mark .icon { color: var(--win); }
.rc-hs__row--hit { background: var(--win-soft); }
.rc-hs__note { margin: 8px 0 0; }
.rc-hs__h3 { font-size: .95rem; margin: 18px 0 8px; }
.rc-hs__findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-hs__finding {
    border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--tint-row); padding: 8px 12px; font-size: .88rem; line-height: 1.45;
}
.rc-hs__finding--good { border-left-color: var(--win); }
.rc-hs__finding--bad { border-left-color: var(--miss); }
.rc-hs__lesson { margin: 10px 0 0; font-size: .9rem; line-height: 1.5; }

.rc-cons { white-space: nowrap; }
/* Backing strength as a proportion, never as a model tally — the meter is filled
   by votes/voters but carries no tick marks, so it cannot be counted back. */
.rc-cons__bar {
    display: inline-block; width: 48px; height: 6px; border-radius: 999px;
    background: var(--bar-track); margin-right: 8px; vertical-align: middle; overflow: hidden;
}
.rc-cons__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.rc-cons__lvl { color: var(--muted); font-size: .82rem; font-weight: 600; }
.rc-cons__lvl--full { color: var(--win); }

.rc-side { display: flex; flex-direction: column; gap: 14px; }
.rc-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rc-card--accent { border-color: var(--accent-border); }
.rc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 .5rem; }
.rc-card__prose { margin: 0 0 .6rem; font-size: .88rem; color: var(--body); }
.rc-card__grade { margin: 0 0 .6rem; font-weight: 700; font-size: .85rem; }
.rc-card__banker {
    display: flex; align-items: center; gap: 7px;
    background: var(--tint-row); border-radius: var(--radius);
    padding: 7px 10px; margin: 0 0 .6rem; font-size: .86rem;
}
.rc-card__banker .icon { color: var(--muted); }

@media (max-width: 980px) {
    .rc-grid { grid-template-columns: 1fr; }
    .rc-actions { width: 100%; }
    .rc-actions .btn { width: 100%; min-height: 44px; }
}
.rc-series { margin: .1rem 0 .2rem; font-size: .85rem; max-width: 70ch; }

/* --- Kuntopuntari bars (shared: race table, timeline, later hevoskortti) ------ */
.kp { display: inline-flex; align-items: center; gap: 8px; }
.kp-bar {
    display: inline-block; width: 72px; height: 7px; border-radius: var(--radius-pill);
    background: var(--bar-track); overflow: hidden; vertical-align: middle;
}
.kp--inline .kp-bar { width: 56px; height: 5px; }
.kp-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.kp-bar__fill.kp--strong { background: var(--accent); }
.kp-bar__fill.kp--mid { background: var(--green-mid); }
.kp-bar__fill.kp--amber { background: var(--amber); }
.kp-bar__fill.kp--weak { background: #c9c4b6; }
.kp-score { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }
/* Numerals darken toward readable variants of the band colours (the raw amber
   #d1a52c fails contrast on white — see the UI review §6). */
.kp-score--strong { color: var(--accent); }
.kp-score--mid { color: var(--green-mid); }
.kp-score--amber { color: var(--place); }
.kp-score--weak { color: var(--muted); }

/* --- Hevoskortti + Ohjastajakortti (redesign 1d/1f) --------------------------- */
/* Hero band. The photo is a GENERIC harness-racing illustration, not this horse —
   it is decorative only (alt="", aria-hidden) and masked into the card surface on
   its left edge so it reads as a background, never as a claim about the animal. */
.hc-hero {
    position: relative; overflow: hidden;
    margin: 18px 0 16px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
}
.hc-hero__body {
    position: relative; z-index: 1;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px;
}
/* The photo keeps its own 16:9 box (width follows the band's height) — a wide
   short band would object-fit:cover the horse's head and the sulky right out of
   frame. The band therefore needs a real minimum height. */
.hc-hero--photo { min-height: 236px; display: flex; align-items: center; }
.hc-hero__body h1 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-hero__body p { margin: 0; color: var(--muted); }
.hc-hero--photo .hc-hero__body { max-width: 62%; flex-direction: column; align-items: flex-start; }
.hc-hero__photo {
    position: absolute; right: 0; top: 0; z-index: 0;
    height: 100%; aspect-ratio: 16 / 9; max-width: 60%;
    object-fit: cover; object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    pointer-events: none;
}

.hc-id { display: flex; align-items: center; gap: 14px; }
.hc-mono {
    flex: none; width: 58px; height: 58px; border-radius: var(--radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.5rem;
}
.hc-mono--drv { border-radius: 50%; font-size: 1.15rem; background: var(--place-soft); color: var(--place); }

.hc-grid { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 20px; align-items: start; }
.hc-grid > div > .rc-card { margin-bottom: 14px; }

.hc-kp-score { margin: 0; font-size: 3.2rem; font-weight: 800; line-height: 1.05; }
.hc-kp-bar { display: block; width: 100%; height: 9px; margin: 8px 0 10px; }
/* Caption under the kuntopuntari sparkline (the old CSS bar strip it replaced
   lived here too — see horse_kp_trend() in views/charts-horse.php). */
.hc-bars__label { margin-top: 4px; font-size: .74rem; }
.hc-note { margin-top: .6rem; font-size: .78rem; }

/* Charts on the card fill their column, but stay capped so a 2560 px screen does
   not scale the SVG type and strokes up with it. */
.hc-grid .chart { max-width: 920px; margin: .35rem 0 0; }
.hc-chartgrid .chart { max-width: 560px; }
.chart--kptrend, .chart--donut { max-width: none; margin-top: 10px; }
.chart--donut { margin-bottom: -4px; }
.hc-chartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 22px; margin-top: 18px; }
.hc-chartgrid__head { margin: 0; }
/* The half-column charts render at ~half scale — nudge their type back up. */
.chart--kmtime .chart__tick, .chart--odds .chart__tick { font-size: 12px; }
.chart--odds .chart__barval { font-size: 11px; }

.hc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hc-tiles--row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0 0 16px; }
.hc-tile {
    background: var(--surface-2); border-radius: var(--radius);
    padding: 10px 12px; text-align: center; font-size: .74rem; color: var(--muted);
}
.hc-tile strong { display: block; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.hc-tile strong.is-pos { color: var(--accent); }

.hc-pos {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: .82rem;
}
.hc-pos--top { background: var(--accent-soft); color: var(--accent-hover); }
.hc-trips-h { margin-top: 1rem; }
.hc-consensus { background: var(--tint-row); border-radius: var(--radius); padding: 9px 12px; }

.drv-list { display: flex; flex-direction: column; }
.drv-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 4px; border-bottom: 1px solid var(--row-divider);
    color: var(--text); text-decoration: none;
}
.drv-row:last-child { border-bottom: 0; }
.drv-row:hover { background: var(--tint-row); text-decoration: none; }
.drv-row.is-done { opacity: .55; }
.drv-row__race { flex: none; width: 84px; font-weight: 700; font-variant-numeric: tabular-nums; }
.drv-row__horse { flex: 1 1 auto; min-width: 140px; font-weight: 600; }
.drv-row__odds { flex: none; color: var(--muted); font-size: .85rem; }

@media (max-width: 980px) {
    .hc-grid { grid-template-columns: 1fr; }
}
/* Narrow: the photo can no longer sit behind the text without crowding it, so it
   becomes a band above the identity instead. */
@media (max-width: 760px) {
    .hc-hero--photo { flex-direction: column; align-items: stretch; min-height: 0; }
    .hc-hero--photo .hc-hero__body { max-width: none; padding-top: 14px; }
    .hc-hero__photo {
        position: static; order: -1;
        width: 100%; height: 148px; max-width: none; aspect-ratio: auto;
        object-position: 64% 42%;
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    }
}

/* --- Superadmin "view as" ------------------------------------------------------ */
.viewas-banner {
    background: var(--place-soft); border-bottom: 1px solid #ecd9b0;
    color: var(--place); font-size: .88rem; padding: 8px 0;
}
.viewas-banner .icon { width: 14px; height: 14px; vertical-align: -2px; }
.viewas-banner a { font-weight: 700; color: var(--place); text-decoration: underline; margin-left: 6px; }
.hdr-viewas { margin-right: 4px; }
.nav-dd__menu--right { right: 0; left: auto; }

/* --- Personal layer: watchlist stars + notes + seuranta strip ----------------- */
.star-btn {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    font-size: 1rem; line-height: 1; color: #cfd4cf; vertical-align: -1px;
}
.star-btn.is-on { color: var(--star); }
.star-btn:hover { color: var(--star); }
.btn.js-watch .star-inline { color: #cfd4cf; }
.btn.js-watch.is-on .star-inline { color: var(--star); }

.watch-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    border-radius: var(--radius-card); padding: 10px 16px; margin: 12px 0 4px;
    font-size: .88rem;
}
.watch-strip__label { font-weight: 800; color: var(--accent-hover); }
.watch-strip__star { color: var(--star); }
.watch-strip__item { color: var(--body); }
.watch-strip__item strong { color: var(--text); margin-right: 4px; }
.watch-strip__item:hover { text-decoration: none; }
.watch-strip__item:hover strong { color: var(--accent-hover); }
.watch-strip__item .kp-score { font-size: .85rem; margin-left: 4px; }

.rc-card--note { background: #fdfaf3; border-style: dashed; border-color: #e0d9c4; }
.rc-note {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 9px 11px; font: inherit; font-size: .88rem; color: var(--body);
    background: var(--surface); resize: vertical; min-height: 84px;
}
.rc-note:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.rc-note__meta { margin: .45rem 0 0; font-size: .76rem; }

/* --- Mobile bottom tab bar (redesign 1g) -------------------------------------- */
.tabbar { display: none; }
@media (max-width: 860px) {
    .tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        background: var(--surface); border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .tabbar__item {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 9px; font-size: .68rem; font-weight: 700; color: var(--muted);
        text-decoration: none; min-height: 44px;
    }
    .tabbar__item .icon { width: 19px; height: 19px; }
    .tabbar__item:hover { text-decoration: none; }
    .tabbar__item.is-active { color: var(--accent); }
    body { padding-bottom: 62px; }
    .site-footer { padding-bottom: 74px; }
}

/* --- Predicted finishing order + race-flow ------------------------------------ */
.rc-order {
    background: var(--surface); border: 1px solid var(--accent-border);
    border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rc-order__row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: .3rem 0 0; font-size: .92rem; }
.rc-order__item strong { color: var(--accent-hover); margin-right: 2px; }
.rc-order__tail { margin: .35rem 0 0; font-size: .8rem; }
.tl-order { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.tl-order__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 4px; border-radius: 7px;
    background: var(--text); color: #fff; font-weight: 800; font-size: .78rem;
}
.tl-order__sep { color: var(--faint); font-weight: 700; }

/* --- Predicted placement column (Sijoitus): medals 1-3, numbers 4+ ------------ */
.rc-pos { white-space: nowrap; }
.pos-medal { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .88rem; }
.pos-medal .icon { width: 17px; height: 17px; }
.pos-medal--gold { color: #b8860b; }
.pos-medal--gold .icon { color: var(--star); }
.pos-medal--silver { color: #78828c; }
.pos-medal--silver .icon { color: #9aa3ad; }
.pos-medal--bronze { color: #96562a; }
.pos-medal--bronze .icon { color: #b97442; }