/* =============================================================
   Ink on paper — the redesign (Claude Design canvas "Flashcards UI
   Redesign"). Loaded after every other stylesheet: it re-points the
   shared tokens and restyles the shared components, so the older files
   keep their layout rules and this file owns the look.
   ============================================================= */

:root {
    --bg-color: #F4EEE3;          /* paper */
    --card-bg: #FFFCF6;
    --tint: #F7F1E6;              /* inner boxes on a card */
    --tint-strong: #EFE6D6;
    --text-color: #1F1A14;        /* ink */
    --text-muted: #665C50;
    --border-color: #E2D7C5;
    --border-strong: #D5C8B2;
    --primary-color: #B8431B;     /* persimmon: due, wrong, the one call to action */
    --primary-ink: #FFFFFF;
    --secondary-color: #8C8173;
    --success-color: #1B5A55;     /* teal: right, remembered */
    --success-soft: #DCEBE7;
    --danger-color: #B8431B;
    --danger-soft: #FBEDE6;
    --warning-color: #8A5B10;
    --warning-soft: #FAF1DC;
    --info-color: #34458F;
    --info-soft: #EDF0FA;
    --pro-color: #7A5A12;
    --pro-bg: #F1E2BF;
    --heat-0: #E9E0D0;
    --heat-1: #CFE0DB;
    --heat-2: #9CC3BB;
    --heat-3: #4F8F87;
    --heat-4: #1B5A55;
    --shadow: 0 1px 0 var(--border-color);
    --shadow-md: 0 12px 24px -18px rgba(60, 40, 20, 0.35);
    --shadow-lg: 0 20px 40px -24px rgba(60, 40, 20, 0.45);
    --shadow-xl: 0 24px 48px -24px rgba(60, 40, 20, 0.5);
    --radius: 14px;
    --radius-lg: 22px;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg-color: #15120E;
    --card-bg: #221D17;
    --tint: #2B251E;
    --tint-strong: #332B22;
    --text-color: #F0E8DB;
    --text-muted: #A89D8E;
    --border-color: #3A3229;
    --border-strong: #4A4035;
    --primary-color: #E8875C;
    --primary-ink: #1A140F;
    --secondary-color: #A89D8E;
    --success-color: #6DBBB1;
    --success-soft: #1F3A37;
    --danger-color: #E8875C;
    --danger-soft: #3A2419;
    --warning-color: #E0B45C;
    --warning-soft: #362B16;
    --info-color: #A5B1E6;
    --info-soft: #232A45;
    --pro-color: #E9C77C;
    --pro-bg: #3A2F17;
    --heat-0: #2B251E;
    --heat-1: #1F3A37;
    --heat-2: #2E5A54;
    --heat-3: #4F8F87;
    --heat-4: #6DBBB1;
    --shadow: none;
    --shadow-md: 0 12px 28px -18px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-color: #15120E;
        --card-bg: #221D17;
        --tint: #2B251E;
        --tint-strong: #332B22;
        --text-color: #F0E8DB;
        --text-muted: #A89D8E;
        --border-color: #3A3229;
        --border-strong: #4A4035;
        --primary-color: #E8875C;
        --primary-ink: #1A140F;
        --secondary-color: #A89D8E;
        --success-color: #6DBBB1;
        --success-soft: #1F3A37;
        --danger-color: #E8875C;
        --danger-soft: #3A2419;
        --warning-color: #E0B45C;
        --warning-soft: #362B16;
        --info-color: #A5B1E6;
        --info-soft: #232A45;
        --pro-color: #E9C77C;
        --pro-bg: #3A2F17;
        --heat-0: #2B251E;
        --heat-1: #1F3A37;
        --heat-2: #2E5A54;
        --heat-3: #4F8F87;
        --heat-4: #6DBBB1;
        --shadow: none;
        --shadow-md: 0 12px 28px -18px rgba(0, 0, 0, 0.7);
        --shadow-lg: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
        --shadow-xl: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
        color-scheme: dark;
    }
}

/* ===================== BASE ===================== */
body {
    font-family: var(--font-body);
    background: var(--bg-color);
    color: var(--text-color);
}
button, input, select, textarea { font-family: inherit; }
.icon {
    width: 1.15em; height: 1.15em;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -0.2em; flex-shrink: 0;
}
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ===================== HEADER ===================== */
header { margin-bottom: 20px; }
header h1, .login-header h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.subtitle { color: var(--text-muted); }
.plan-pill {
    border-radius: 999px;
    background: var(--pro-bg);
    color: var(--pro-color);
    border: 0;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.header-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-theme, .btn-icon {
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}

/* ===================== BUTTONS / CHIPS / INPUTS ===================== */
.btn {
    border-radius: var(--radius);
    min-height: 44px;
    box-shadow: none;
    font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { transform: none; box-shadow: none; }
.btn-primary {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}
.btn-primary:hover { background: var(--text-color); opacity: 0.9; }
.btn-secondary {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-color);
}
.btn-secondary:hover { background: var(--tint); }
.btn-success {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success-color);
}
.btn-large { min-height: 52px; font-size: 1rem; font-weight: 600; border-radius: 16px; }
.btn-pro { border-radius: var(--radius); background: var(--pro-color); border-color: var(--pro-color); color: #FFFFFF; }
:root[data-theme="dark"] .btn-pro { color: #1A140F; }

.chip {
    border-radius: 999px;
    min-height: 36px;
    padding: 6px 14px;
    border-color: var(--border-strong);
    color: var(--text-color);
}
.chip.is-active {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}
.chip.is-locked { opacity: 0.55; }

.select-input, .input-group input, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
    color: var(--text-color);
    min-height: 44px;
}
.select-input:focus, .input-group input:focus { border-color: var(--text-color); box-shadow: none; }

/* ===================== TABS ===================== */
.tabs { border-bottom-color: var(--border-color); gap: 2px; }
.tab { color: var(--text-muted); align-items: center; gap: 6px; border-radius: 10px 10px 0 0; }
.tab:not(.tab-more) { display: inline-flex; }
.tab-more { display: none; }
.tab.is-active { color: var(--text-color); border-bottom-color: var(--primary-color); font-weight: 600; }
.tab-icon { display: inline-flex; margin-right: 0; }
.tab-icon .icon { width: 1.2em; height: 1.2em; }

/* ===================== PANELS / BANNERS ===================== */
.panel, .word-table, .filters, .login-container, .modal-content, .more-list {
    border-radius: var(--radius-lg);
    border-color: var(--border-color);
    background: var(--card-bg);
    box-shadow: none;
}
.panel-title { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); font-size: 0.875rem; }
.banner {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background: var(--pro-bg);
}
.banner-level { background: var(--success-soft); }
.toast { border-radius: 999px; background: var(--text-color); color: var(--bg-color); }

/* ===================== STUDY: STATS + GOAL ===================== */
.stats { gap: 8px; margin-bottom: 14px; }
.stat-item {
    border-radius: var(--radius);
    box-shadow: none;
    padding: 10px 12px;
    text-align: left;
}
.stat-item:hover { transform: none; box-shadow: none; }
.stat-label { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.stat-value { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--text-color); }
#dueCount { color: var(--primary-color); }
#hiddenWordsCount { color: var(--success-color); }
.goal-bar { flex-direction: column-reverse; align-items: stretch; gap: 8px; margin: 0 0 16px; }
.goal-bar-track { height: 6px; border-radius: 999px; background: var(--border-color); }
.goal-bar-fill { background: var(--success-color); border-radius: 999px; }
.goal-bar-text { font-size: 0.875rem; color: var(--text-color); }

/* ===================== STUDY: FILTERS ===================== */
.filters { background: transparent; border: 0; padding: 0; margin-bottom: 14px; }
.filter-label { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.8125rem; }

/* ===================== STUDY: CARD ===================== */
.flashcard-container { min-height: 0; margin-bottom: 16px; }
.flashcard {
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-md);
    will-change: auto;
}
.card-front { margin-bottom: 18px; padding-bottom: 20px; }
.word {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 4.25rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.word[data-length="long"] { font-size: 3.4rem; }
.word[data-length="very-long"] { font-size: 2.8rem; }
.word[data-length="extra-long"] { font-size: 2.2rem; }
.word.is-prompt { font-family: var(--font-body); font-weight: 600; font-size: 1.75rem; letter-spacing: 0; }
.word-meta { gap: 8px; margin-top: 12px; align-items: center; }
.pos-tag, .level-tag {
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    border: 0;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--tint-strong);
    color: var(--text-color);
}
.level-tag { background: var(--success-soft); color: var(--success-color); font-weight: 600; }
.speak-btn {
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--tint);
    color: var(--text-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.card-schedule { color: var(--text-muted); font-size: 0.8125rem; }

.translation-section {
    border-radius: var(--radius);
    border: 1px dashed var(--border-strong);
    background: transparent;
    margin: 0;
    min-height: 52px;
    justify-content: center;
}
.translation-content {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.translation-content .translation { font-size: 1rem; line-height: 1.6; }
.translation-content strong { font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--text-muted) !important; }
.translation-content p { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--text-color) !important; }
.example-block { background: var(--tint); border-radius: var(--radius); padding: 12px 16px; }
.translation-content .example-en {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400 !important;
    font-size: 1.125rem !important;
}
.translation-content .example-th { font-size: 0.9375rem !important; font-weight: 400 !important; color: var(--text-muted) !important; }

/* ===================== STUDY: ANSWERS ===================== */
.grade-row { gap: 8px; }
.btn-grade {
    border-radius: 16px;
    min-height: 60px;
    border: 1px solid transparent;
    border-bottom-width: 1px;
    box-shadow: none;
}
.btn-grade .grade-label { font-size: 0.9375rem; font-weight: 600; }
.btn-grade .grade-hint { font-size: 0.75rem; color: inherit; opacity: 0.85; }
.btn-grade-again { background: var(--danger-soft);  color: var(--danger-color);  border-color: transparent; }
.btn-grade-hard  { background: var(--warning-soft); color: var(--warning-color); border-color: transparent; }
.btn-grade-good  { background: var(--success-color); color: #FFFFFF; border-color: var(--success-color); }
.btn-grade-easy  { background: var(--info-soft);    color: var(--info-color);    border-color: transparent; }
:root[data-theme="dark"] .btn-grade-good { color: #10201E; }
.btn-grade:hover { filter: brightness(0.97); }

#cardActions .secondary-row .btn { border: 0; background: transparent; color: var(--text-muted); min-height: 44px; }
#cardActions .secondary-row .btn:hover { color: var(--text-color); background: var(--tint); }
#cardActions .secondary-row #hideBtn { color: var(--success-color); }

.quiz-option {
    border-radius: var(--radius);
    min-height: 48px;
    background: var(--card-bg);
    border-color: var(--border-strong);
}
.quiz-option.is-correct { background: var(--success-color); border-color: var(--success-color); color: #FFFFFF; }
.quiz-option.is-wrong { background: var(--danger-soft); border-color: var(--danger-color); color: var(--danger-color); }
.typing-box .select-input, .practice-input { border-radius: var(--radius); font-size: 1.0625rem; }
.practice-prompt { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.5; }
.practice-blank { border-bottom: 0; background: var(--success-soft); color: var(--success-color); border-radius: 8px; padding: 0 10px; min-width: 3.5em; }
.practice-feedback.is-correct, .practice-feedback.is-wrong, .typing-feedback.is-correct, .typing-feedback.is-wrong {
    display: flex; align-items: center; gap: 8px;
}
.practice-feedback:not(:empty) { border-radius: var(--radius); padding: 12px 14px; }
.practice-feedback.is-correct { background: var(--success-soft); color: var(--success-color); }
.practice-feedback.is-wrong { background: var(--danger-soft); color: var(--danger-color); }
.practice-diff { font-family: var(--font-display); font-size: 1.125rem; }
.btn-mic { border-radius: 999px; }

.empty-state { border-radius: var(--radius-lg); }
.empty-icon {
    width: 56px; height: 56px; margin: 0 auto 8px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.mic-label { display: inline-flex; align-items: center; gap: 8px; }

/* ===================== GRAMMAR / MORE / STATS ===================== */
.grammar-row-num { border-radius: 999px; }
.grammar-title, .level-bar-name { font-family: var(--font-display); }
.grammar-pattern { border-radius: var(--radius); background: var(--tint); }
.grammar-examples .example-en, .grammar-question { font-family: var(--font-display); }
.level-bar-track { border-radius: 999px; height: 6px; }
.level-bar-fill { background: var(--success-color); border-radius: 999px; }
.more-item { min-height: 56px; }
.more-item span { display: inline-flex; color: var(--text-muted); }
.badge, .badge-card { border-radius: var(--radius); }
.plan-card { border-radius: var(--radius-lg); }
.app-version { color: var(--text-muted); }

/* ===================== LOGIN ===================== */
.login-screen { background: var(--bg-color); }
.login-container { padding: 40px 32px; }
.auth-tab.is-active { border-bottom-color: var(--primary-color); }

/* ===================== PHONES (bottom bar) ===================== */
@media (max-width: 768px) {
    .tabs { background: var(--card-bg); border-top-color: var(--border-color); }
    .tab { border-radius: 0; border-top-width: 3px; font-weight: 500; }
    .tab:not(.tab-more) { display: flex; }
    .tab.tab-secondary { display: none; }
    .tab.tab-more { display: flex; }
    .tab.is-active { border-top-color: var(--primary-color); border-bottom-color: transparent; }
    .tab-icon .icon { width: 24px; height: 24px; }
    .word { font-size: 3.1rem; }
    .word[data-length="long"] { font-size: 2.6rem; }
    .word[data-length="very-long"] { font-size: 2.2rem; }
    .word[data-length="extra-long"] { font-size: 1.8rem; }
    .flashcard { padding: 20px 18px; }
    .stat-item { padding: 8px 10px; }
    .stat-value { font-size: 1.35rem; }
    .btn-grade { min-height: 58px; }
}

/* once the meaning is showing, the reveal control has done its job (Space still toggles) */
.flashcard:has(.translation-content:not([hidden])) .translation-section { display: none; }

/* =============================================================
   Layout from the design canvas: today block, pill filters, the
   card's head, and on wide screens a sidebar + card + summary panel.
   ============================================================= */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.forecast-bar { background: var(--border-strong); border-radius: 6px 6px 2px 2px; }
.forecast-day:first-child .forecast-bar { background: var(--primary-color); }

/* ---- today + tiles ---- */
.study-side { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.today { display: flex; flex-direction: column; gap: 8px; }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.today-text { font-size: 0.9375rem; font-weight: 500; }
.today-text strong { font-weight: 600; }
.streak-line { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--text-muted); }
.streak-line .icon { color: var(--primary-color); }
.streak-line strong { color: var(--text-color); font-weight: 600; }
.today .goal-bar-track { height: 6px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.today .goal-bar-fill { height: 100%; background: var(--success-color); border-radius: 999px; }
.today-sub { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
.study-side .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}
.study-side .stat-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.study-side .stat-label {
    display: block; min-height: 0; justify-content: flex-start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.study-side .stat-extra, .side-forecast { display: none; }
.study-side .banner { margin: 0; }

/* ---- pill filters ---- */
.filters.pill-row {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start;
    background: transparent; border: 0; padding: 0; margin: 0 0 14px;
}
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--border-strong);
    background: transparent; color: var(--text-color);
    font-size: 0.875rem; cursor: pointer; position: relative;
}
.pill .icon { width: 0.95em; height: 0.95em; color: var(--text-muted); }
.pill-menu { position: relative; }
.pill-menu > summary { list-style: none; }
.pill-menu > summary::-webkit-details-marker { display: none; }
.pill-menu > summary.pill { background: var(--text-color); border-color: var(--text-color); color: var(--bg-color); font-weight: 500; }
.pill-menu > summary.pill .icon { color: inherit; }
.pill-menu[open] > summary .icon { transform: rotate(180deg); }
.pill-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 10px; width: max-content; max-width: min(320px, 90vw);
}
.pill-pop .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pill-pop .chip { justify-content: center; }
.pill-select { padding-right: 12px; }
.pill-select select {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; color: inherit;
    font: inherit; padding: 0; min-height: 0; cursor: pointer;
    max-width: 11em;
}
.pill-select select:focus { outline: none; }
.pill-select:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.pill.chip.is-active { background: var(--success-soft); border-color: var(--success-color); color: var(--success-color); }

/* ---- the card's head ---- */
.card-front { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-top .word-meta { margin: 0; }
.card-top .card-schedule { margin: 0; text-align: right; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-title { min-width: 0; }
.card-head .word { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.card-pron { margin: 6px 0 0; font-size: 1rem; color: var(--text-muted); }
.card-head .speak-btn { width: 52px; height: 52px; flex-shrink: 0; font-size: 1.25rem; }
.flashcard .translation-content { margin-top: 4px; }

/* ---- header buttons: icon + label; phones keep the icon ---- */
.header-actions .btn .icon { font-size: 1.05rem; }
@media (max-width: 768px) {
    .header-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .header-actions .btn { width: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; }
    .header-content h1 { font-size: 1.4rem; }
    .pill { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
    .card-head .speak-btn { width: 48px; height: 48px; }
}

/* ---- wide screens: sidebar | card | today panel ---- */
@media (min-width: 1100px) {
    body { padding: 0; }
    .app-shell {
        max-width: 1440px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        min-height: 100vh;
        padding: 0;
    }
    .app-shell[hidden] { display: none; }
    .app-side {
        position: sticky; top: 0; height: 100vh; box-sizing: border-box;
        display: flex; flex-direction: column; gap: 24px;
        padding: 28px 18px;
        border-right: 1px solid var(--border-color);
    }
    .app-side header, .app-side .header-content { display: contents; }
    .app-side .header-content > div:first-child { order: 0; padding: 0 10px; }
    .app-side .subtitle { display: none; }
    .app-side h1 { font-size: 1.6rem; margin: 0; }
    .app-side .tabs {
        order: 1;
        flex-direction: column; align-items: stretch; gap: 2px;
        border: 0; margin: 0; overflow: visible;
    }
    .app-side .tab {
        justify-content: flex-start; gap: 12px;
        min-height: 44px; padding: 0 12px;
        border: 0; border-radius: 12px;
        font-size: 0.9375rem; color: var(--text-color);
    }
    .app-side .tab:hover { background: var(--tint); }
    .app-side .tab.is-active { background: var(--text-color); color: var(--bg-color); font-weight: 500; }
    .app-side .tab.tab-secondary { min-height: 40px; font-size: 0.875rem; color: var(--text-muted); }
    .app-side .tab.tab-secondary.is-active { color: var(--bg-color); }
    .app-side .tab[data-view="browse"] { margin-top: 12px; position: relative; }
    .app-side .tab[data-view="browse"]::before {
        content: ""; position: absolute; left: 12px; right: 12px; top: -7px;
        height: 1px; background: var(--border-color);
    }
    .app-side .header-actions {
        order: 2; margin-top: auto;
        flex-direction: column; align-items: stretch; gap: 6px;
    }
    .app-side .header-actions .btn { justify-content: flex-start; width: 100%; }
    .app-side .header-actions .btn-theme { width: 44px; justify-content: center; align-self: flex-start; }
    .app-side .plan-pill { align-self: flex-start; }
    .app-main { padding: 28px 40px 60px; min-width: 0; }
    .app-main footer { margin-top: 40px; }

    .study-layout:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 36px;
        align-items: start;
    }
    .study-main { order: 1; min-width: 0; }
    .study-side {
        order: 2; position: sticky; top: 28px; margin: 0;
        gap: 20px;
        padding-left: 28px; border-left: 1px solid var(--border-color);
        min-height: calc(100vh - 88px);
    }
    .today-head { flex-direction: column; gap: 4px; }
    .today-text { font-size: 0.875rem; color: var(--text-muted); }
    .today-text strong { font-family: var(--font-display); font-size: 2.6rem; color: var(--text-color); margin-right: 4px; }
    .study-side .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .study-side .stat-extra { display: flex; }
    .side-forecast:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
    .side-forecast .forecast { min-height: 110px; gap: 6px; }
    .side-forecast .forecast-day { height: 110px; }
    .side-forecast .forecast-count { display: none; }
    .study-side .banner { margin-top: auto; flex-direction: column; align-items: stretch; }
    .flashcard { padding: 36px 44px; border-radius: 28px; }
    .word { font-size: 5rem; }
    .card-head { justify-content: flex-start; }
    .grade-row .btn-grade { min-height: 64px; }
}

/* native select lists: the pill is transparent, so give the options the theme's own surface and ink
   (otherwise dark mode shows light text on the browser's white list) */
select option, select optgroup { background-color: var(--card-bg); color: var(--text-color); }
.pill-select select { color-scheme: inherit; }

/* the select itself fills the pill: on phones a tap on the label focuses the
   select without opening it, so the whole pill has to be the select */
.pill-select { padding: 0; }
.pill-select select {
    height: 100%; min-height: inherit; box-sizing: border-box;
    padding: 0 34px 0 14px; border-radius: 999px; max-width: 13em;
}
.pill-select .icon { position: absolute; right: 12px; pointer-events: none; }

/* ---- fixes from the UI audit (.harness/ui_audit.py, ui_deep.py) ---- */
/* dark: the right answer sits on light teal, so it needs dark ink (was white, 2.2:1) */
:root[data-theme="dark"] .quiz-option.is-correct { color: #10201E; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .quiz-option.is-correct { color: #10201E; }
    :root:not([data-theme="light"]) .btn-grade-good { color: #10201E; }
}
/* text links used as buttons still need a full tap target */
.link-btn { min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; }
/* the leaderboard opt-in checkbox */
input[type="checkbox"]:not(.switch input) { width: 22px; height: 22px; accent-color: var(--success-color); }
/* phones: title and the header icons share one row, as drawn */
@media (max-width: 768px) {
    .header-content { flex-wrap: nowrap; }
    .header-content > div:first-child { min-width: 0; }
    .header-actions { flex-wrap: nowrap; flex-shrink: 0; gap: 2px; }
    .header-actions .btn { width: 40px; min-width: 40px; height: 44px; }
    .header-content h1 { font-size: 1.3rem; white-space: nowrap; }
    .plan-pill { padding: 2px 8px; font-size: 0.6875rem; }
}

/* ---- headword size follows the word's length and the screen, so long words
   shrink instead of breaking mid-word ("Commence / ment") ---- */
.card-head .word { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.card-head .word { font-size: min(4.25rem, 12vw); }
.card-head .word[data-length="long"] { font-size: min(3.4rem, 9vw); }
.card-head .word[data-length="very-long"] { font-size: min(2.8rem, 7.4vw); }
.card-head .word[data-length="extra-long"] { font-size: min(2.2rem, 6vw); }
/* a prompt in place of the word (Thai in reverse mode, an icon in cloze and dictation) */
.card-head .word.is-prompt { font-size: min(1.75rem, 6.4vw); font-family: var(--font-body); letter-spacing: 0; }
@media (min-width: 1100px) {
    .card-head .word { font-size: 5rem; }
    .card-head .word[data-length="long"] { font-size: 4rem; }
    .card-head .word[data-length="very-long"] { font-size: 3.3rem; }
    .card-head .word[data-length="extra-long"] { font-size: 2.6rem; }
    .card-head .word.is-prompt { font-size: 2rem; }
}

/* ---- hover states: styles.css paints these for its old grey palette
   (light text on a mid fill); give them the paper-and-ink versions ---- */
.btn-secondary:hover { background: var(--tint); color: var(--text-color); border-color: var(--border-strong); }
.btn-success:hover { background: var(--success-soft); color: var(--success-color); border-color: var(--success-color); }
.header-actions .btn:hover { background: var(--tint); color: var(--text-color); border-color: var(--border-strong); transform: none; box-shadow: none; }
.btn-unhide:hover { background: var(--success-color); color: var(--primary-ink); border-color: var(--success-color); }