/*
 * trainer.css — design tokens + app styles for the Blackjack Trainer.
 *
 * The trainer is a self-contained unit: it links only files inside
 * public/trainer/. Cohesion with the site comes from the shared token block
 * below, which is a byte-for-byte copy of the one in public/assets/site.css —
 * edit both together; the token-parity check in verification diffs them.
 *
 * The train screen implements the approved Milestone 0 v4 anatomy (see
 * design/milestone-0/): a full-width feedback band that is always present at
 * a fixed height, then the felt owning the rest of the screen — heavily
 * overlapped cards, the Streak / Best / Session stats in the middle, and the
 * action buttons at the table's foot. Bottom tab bar for navigation.
 *
 * Layered top to bottom: tokens → font → reset/base → app shell → feedback
 * band → felt → tab bar → secondary views (card/stats/settings) → motion.
 */

/* =====================================================================
   1. SHARED DESIGN TOKENS — canonical block
   This exact block also lives in public/assets/site.css. The two
   copies must stay identical (self-contained units, one design
   language); the token-parity check in verification diffs them.
   ===================================================================== */
:root {
    /* Light palette: warm paper ground, white surfaces, deep-green primary */
    --bg:            #f7f4ec;
    --surface:       #ffffff;
    --raised:        #f3efe4;               /* subtle wells: tips, table headers */
    --felt:          #1d6b43;               /* the one casino element: play surface */
    --felt-label:    rgba(255, 255, 255, 0.85);
    --text:          #22302a;
    --muted:         #5c6f60;
    --heading:       #14432c;
    --link:          #1d6b43;
    --primary:       #1d6b43;               /* the one primary action per context */
    --primary-ink:   #ffffff;
    --good-text:     #15803d;               /* positive copy on light surfaces */
    --danger-text:   #b3362b;               /* negative copy on light surfaces */
    --good-well:     #e4f2e6;               /* correct-state tint */
    --danger-well:   #f9e5e2;               /* incorrect-state tint */
    --hairline:      rgba(0, 0, 0, 0.08);
    --ctl-border:    rgba(0, 0, 0, 0.15);   /* interactive-control outlines */
    --shadow-1: 0 1px 3px rgba(31, 41, 26, 0.10);
    --shadow-2: 0 6px 18px rgba(31, 41, 26, 0.12);

    /* Chart action colors — all hold 4.5:1 against white text */
    --act-hit:       #dc2626;
    --act-stand:     #15803d;
    --act-split:     #9333ea;
    --act-double:    #2563eb;
    --act-surrender: #db2777;
    --act-ink:       #ffffff;               /* text on the action fills above */

    --suit-red:      #c0392b;               /* hearts/diamonds in the suits row */

    /* Spacing: 4px scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Radii: controls, cards, pills */
    --r-ctl:  8px;
    --r-card: 12px;
    --r-pill: 999px;

    /* Type scale */
    --fs-xs:  13px;
    --fs-sm:  14px;
    --fs-md:  16px;
    --fs-lg:  18px;
    --fs-xl:  22px;
    --fs-2xl: 30px;

    --font: 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}
/* ================== END SHARED DESIGN TOKENS ========================= */

/* App-only tokens (not part of the shared block) */
:root {
    --card-w: clamp(96px, 30vw, 156px);     /* dealt playing-card width */
    --tabbar-h: 62px;
}

/* =====================================================================
   2. FONT
   Vendored variable font (SIL OFL); weight axis 200-1000, latin subset.
   ===================================================================== */
@font-face {
    font-family: 'Nunito Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('NunitoSans-Variable.woff2') format('woff2-variations');
}

/* =====================================================================
   3. RESET / BASE
   ===================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Author display rules outrank the UA's [hidden] { display: none } */
[hidden] {
    display: none !important;
}

body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    line-height: 1.25;
    font-weight: 800;
    color: var(--heading);
}

a {
    color: var(--link);
}

strong {
    font-weight: 800;
}

*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.good {
    color: var(--good-text);
    font-weight: 800;
}

.bad {
    color: var(--danger-text);
    font-weight: 800;
}

.muted {
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* =====================================================================
   4. APP SHELL
   ===================================================================== */
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-3) calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom));
    min-height: 0;
}

/* Each view is a flex column so the train view's felt can grow */
.view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* =====================================================================
   5. FEEDBACK BAND — always present on Train, a title band elsewhere
   ===================================================================== */
.feedback {
    background-color: var(--raised);
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}

.feedback--ok {
    background-color: var(--good-well);
}

.feedback--bad {
    background-color: var(--danger-well);
}

.feedback__inner {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-4);
}

.feedback__verdict {
    font-size: var(--fs-xl);
    font-weight: 900;
    font-style: italic;
    line-height: 1.15;
    color: var(--heading);
}

.feedback--ok .feedback__verdict {
    color: var(--good-text);
}

.feedback--bad .feedback__verdict {
    color: var(--danger-text);
}

/* The rule sentence wraps to at most two lines; the slot reserves them */
.feedback__line {
    margin: 2px 0 0;
    min-height: 2.9em;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.45;
}

/* At 320-360px the longest rule sentences need the smaller size to hold
   two lines, keeping the band height truly fixed */
@media screen and (max-width: 360px) {
    .feedback__line {
        font-size: var(--fs-xs);
    }
}

.feedback__divider {
    /* a step darker than --hairline so it still reads on the tinted band */
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: var(--sp-2) 0;
}

/* Chips left, last-hand minis right — the reserved height matches the
   tallest content (label + 48px-wide mini card) so the felt never moves */
.feedback__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 87px;
}

/* Played / Rule / Streak chips: label over a white pill, as in the original */
.chips {
    display: flex;
    gap: var(--sp-4);
}

.chip__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 3px;   /* optical: --sp-1 reads too airy under 11px caps */
}

.chip__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: var(--sp-1) var(--sp-3);
    background-color: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.feedback--ok .chip__pill {
    color: var(--good-text);
}

.feedback--bad .chip__pill {
    color: var(--danger-text);
}

/* Last hand minis, upper right of the band */
.last-hand {
    display: flex;
    gap: var(--sp-3);
}

.last-hand__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 3px;   /* optical: --sp-1 reads too airy under 11px caps */
}

.last-hand__cards {
    display: flex;
}

.mini-card {
    width: 48px;         /* fits the band's reserved row */
    height: auto;
    display: block;
    /* drop-shadow, not box-shadow: the SVGs have transparent side padding */
    filter: drop-shadow(0 1px 2px rgba(31, 41, 26, 0.25));
}

/* Same rank-strip overlap as the felt cards, derived from the mini width */
.mini-card + .mini-card {
    margin-left: calc(48px * -0.625);
}

/* =====================================================================
   6. FELT — cards, session stats, actions
   ===================================================================== */
.table {
    background-color: var(--felt);
    /* decorative vignette on the felt, outside the palette by design */
    background-image: radial-gradient(ellipse 110% 100% at 50% 30%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.16) 100%);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hands {
    display: flex;
    gap: var(--sp-4);
    justify-content: space-between;
}

.hand-group {
    min-width: 0;
}

.hand-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: var(--felt-label);
    margin-bottom: var(--sp-2);
}

.cards {
    display: flex;
}

.playing-card {
    width: var(--card-w);
    height: auto;
    display: block;
    /* The SVGs carry ~2% transparent side padding (re-ratioed viewBox), so a
       box-shadow would paint a line offset from the drawn edge on the card
       beneath; drop-shadow follows the artwork's alpha instead. Darker than
       the token shadows because it sits on the felt. */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Heavy overlap, as in the original: the under-card shows its rank strip */
.playing-card + .playing-card {
    margin-left: calc(var(--card-w) * -0.72);
}

/* Session stats fill the felt's middle; details live in the Stats tab */
.felt-stats {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: var(--sp-3);
    min-height: 88px;   /* keeps the slot on very short screens */
}

.felt-stat {
    text-align: center;
}

.felt-stat__value {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 900;
    line-height: 1.1;
    color: var(--primary-ink);   /* full-strength white; labels use the 85% --felt-label */
    font-variant-numeric: tabular-nums;
}

.felt-stat__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: var(--felt-label);
}

/* Actions near the table's foot, lifted a step off its edge */
.actions {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.act {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: var(--sp-2) 2px;
    border-radius: var(--r-ctl);
    border: none;
    background-color: var(--surface);
    color: var(--heading);
    font: inherit;
    font-weight: 800;
    font-size: var(--fs-sm);
    cursor: pointer;
    /* token shadows are tuned for light surfaces; buttons on felt need darker */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
}

.act:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Surrender, when the table offers it: a low, wide pill under the main
   four, tinted so giving up reads differently from the everyday actions
   (mirroring the original app's surrender pill) */
.act--surrender {
    flex: none;
    width: 100%;
    min-height: 40px;
    margin-bottom: var(--sp-2);
    background-color: var(--danger-well);
    color: var(--danger-text);
}

/* When the table rules exclude surrender, its row is emptied, not removed:
   the four main actions must sit at the same height either way. !important
   outranks the [hidden] display reset; visibility keeps the button out of
   the a11y tree and tab order. */
.act--surrender[hidden] {
    display: inline-block !important;
    visibility: hidden;
}

/* =====================================================================
   7. TAB BAR
   ===================================================================== */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    background-color: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: var(--shadow-1);
    padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__inner {
    display: flex;
    width: 100%;
    max-width: 480px;
}

.tabbar__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tabbar-h);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-top: 3px solid transparent;   /* reserved so the active bar causes no shift */
    transition: color 0.15s;
}

.tabbar__icon {
    line-height: 1;
}

.tabbar__tab:hover {
    color: var(--text);
}

/* Active tab: color plus a non-color cue (top bar + fill) */
.tabbar__tab[aria-current="page"] {
    color: var(--link);
    border-top-color: var(--link);
    background-color: var(--raised);
}

/* =====================================================================
   8. SECONDARY VIEWS — card, stats, settings
   ===================================================================== */
.panel {
    background-color: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-1);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.panel__title {
    color: var(--heading);
    font-size: var(--fs-md);
    font-weight: 800;
    margin-bottom: var(--sp-3);
}

.panel__title:not(:first-child) {
    margin-top: var(--sp-5);
}

/* Intro sentence under a panel title, set off from the controls below it */
.panel__lede {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------- setting rows */
.setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--hairline);
}

.setting:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.setting:first-child {
    padding-top: 0;
}

.setting__label {
    font-weight: 800;
    font-size: var(--fs-sm);
}

.setting__note {
    display: block;
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--muted);
}

/* -------------------------------------------- segmented control (shared) */
.segs {
    display: flex;
    gap: var(--sp-2);
    flex: 1;
    max-width: 62%;
}

.seg {
    flex: 1;
    min-width: 44px;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-1);
    background-color: var(--surface);
    border: 1px solid var(--ctl-border);
    border-radius: var(--r-ctl);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.seg:hover {
    border-color: var(--muted);
}

.seg--on {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-ink);
    font-weight: 800;
}

/* ------------------------------------------------------------ switches */
.switch {
    width: 54px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    background-color: var(--raised);
    border: 1px solid var(--ctl-border);
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s;
}

.switch--on {
    background-color: var(--primary);
    border-color: var(--primary);
}

.switch__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    transition: transform 0.18s;
}

.switch--on .switch__knob {
    transform: translateX(22px);
}

/* -------------------------------------------------------- deck choices */
.choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--sp-3);
}

.choice {
    background-color: var(--surface);
    border: 1px solid var(--ctl-border);
    border-radius: var(--r-ctl);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.choice:hover {
    border-color: var(--muted);
}

.choice--on {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);   /* 2px ring without layout shift */
}

.choice__preview {
    display: flex;
}

.choice__preview img {
    width: 44px;
    display: block;
    border-radius: 3px;   /* card corners scale with the artwork, below --r-ctl */
}

.choice__preview img + img {
    margin-left: -10px;   /* light overlap so the pair reads as a hand */
}

.choice__name {
    font-weight: 800;
    font-size: var(--fs-sm);
}

.choice__note {
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
}

/* Small phones: segmented rows stack; single switches stay inline */
@media screen and (max-width: 430px) {
    .setting:not(.setting--inline) {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }

    .segs {
        max-width: none;
    }
}

/* ------------------------------------------- rules summary + about */

/* The one-line rules recap — under the Table Rules list and under the
   pocket card — set apart from the content above it */
.rules-summary {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.about {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-bottom: var(--sp-2);
}

.about:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------- pocket charts */
.chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chart {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: var(--fs-xs);
    font-weight: 800;
    table-layout: fixed;
}

.chart th,
.chart td {
    text-align: center;
    padding: 6px 2px;
    border-radius: 4px;   /* cell radius, smaller than --r-ctl by design */
}

.chart thead th,
.chart tbody th {
    color: var(--heading);
    background-color: var(--raised);
}

/* Action colors */
.act-h {
    background-color: var(--act-hit);
    color: var(--act-ink);
}

.act-s {
    background-color: var(--act-stand);
    color: var(--act-ink);
}

.act-p {
    background-color: var(--act-split);
    color: var(--act-ink);
}

.act-d {
    background-color: var(--act-double);
    color: var(--act-ink);
}

.act-r {
    background-color: var(--act-surrender);
    color: var(--act-ink);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
}

.legend span {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-weight: 700;
}

.swatch {
    width: 20px;          /* legend swatch mirrors a chart cell */
    height: 20px;
    border-radius: 4px;   /* cell radius, smaller than --r-ctl by design */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    color: var(--act-ink);
}

/* ---------------------------------------------------------- stats view */
.dots {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.dot-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}

.dot--ok {
    background-color: var(--good-text);
    color: var(--act-ink);
}

.dot--bad {
    background-color: var(--danger-text);
    color: var(--act-ink);
}

.dot--miss {
    background-color: var(--raised);
    color: var(--muted);
    border: 1px solid var(--ctl-border);
}

.dot--idle {
    background-color: transparent;
    border: 1px dashed var(--ctl-border);
}

.dot__name {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.big {
    font-weight: 900;
    font-size: var(--fs-xl);
    font-variant-numeric: tabular-nums;
    color: var(--heading);
    margin-left: var(--sp-1);
}

.stat-line {
    font-size: var(--fs-sm);
    margin-top: var(--sp-3);
    color: var(--muted);
}

.stat-line strong {
    color: var(--heading);
}

.tiles {
    display: flex;
    gap: var(--sp-2);
    text-align: center;
}

.tile {
    flex: 1;
    background-color: var(--raised);
    border: 1px solid var(--hairline);
    border-radius: var(--r-ctl);
    padding: var(--sp-3) var(--sp-2);
}

.tile__value {
    display: block;
    font-weight: 900;
    font-size: var(--fs-lg);
    color: var(--heading);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.tile__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.data th,
.data td {
    text-align: left;
    padding: var(--sp-2) var(--sp-2);
    border-bottom: 1px solid var(--hairline);
}

.data thead th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data tbody th {
    font-weight: 700;
}

.data tbody tr:last-child th,
.data tbody tr:last-child td {
    border-bottom: none;
}

.btn-danger {
    margin-top: var(--sp-3);
    background-color: var(--danger-well);
    border: 1px solid var(--danger-text);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-ctl);
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.btn-danger:hover {
    background-color: var(--danger-text);
    color: var(--act-ink);
}

/* =====================================================================
   9. MOTION — subtle, and fully disabled by the reduced-motion rule above
   ===================================================================== */

/* Newly dealt hands fade in as a group; overlapped cards must never fade
   individually (a translucent top card would show the card beneath), and
   the layout itself never moves */
@keyframes deal-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* app.js swaps a new hand in hidden, waits for the faces to load, then fades
   the whole group; without the wait each SVG would pop in separately */
.cards--hidden {
    opacity: 0;
}

.cards--deal {
    animation: deal-in 0.25s ease-out both;
}