/* ── theme tokens ──────────────────────────────────────────────────────── */
:root {
    /* surfaces */
    --bg-page: #f4f5f7;
    --bg-card: #fff;
    --bg-header: #003f5c;        /* app-header band */
    --bg-footer: #f4f5f7;
    --bg-zebra: #f4f5f7;
    --bg-row-hover: #e1e6eb;
    --bg-th: #003f5c;
    --bg-input: #fff;
    --bg-flash: #e8f5e9;

    /* text */
    --text-primary: #2e3b4e;
    --text-secondary: #5a6b7b;
    --text-muted: #aaa;
    --text-on-accent: #fff;
    --text-heading: #003f5c;
    --text-on-th: #fff;
    --text-flash: #1b5e20;
    --text-auto-a: #1b3a1d;
    --text-link: #007cba;

    /* borders */
    --border: #e1e6eb;
    --input-border: #cbd1d8;
    --flash-border: #2e7d32;

    /* primary action button */
    --btn-primary-bg: #007cba;
    --btn-primary-hover: #005f8d;
    --btn-primary-text: #fff;

    /* correct / wrong */
    --btn-correct-bg: #2e7d32;
    --btn-correct-hover: #1b5e20;
    --btn-correct-text: #fff;
    --btn-wrong-bg: #c62828;
    --btn-wrong-hover: #8e0000;
    --btn-wrong-text: #fff;

    /* reset (destructive) */
    --btn-reset-bg: #c0392b;
    --btn-reset-hover: #96281b;
    --btn-reset-text: #fff;
    --btn-reset-border: #96281b;

    /* home / soft accent button */
    --btn-home-bg: #e8eff5;
    --btn-home-text: #003f5c;
    --btn-home-border: #c0d0dc;
    --btn-home-hover-bg: #d0e0ec;

    /* secondary muted button */
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #7a8fa0;
    --btn-secondary-border: #cbd1d8;
    --btn-secondary-hover-bg: #f0f3f5;
    --btn-secondary-hover-text: #2e3b4e;

    /* auto-play (green start) */
    --btn-auto-bg: #2e7d32;
    --btn-auto-hover: #1b5e20;

    /* effects */
    --shadow-card: 0 4px 12px rgba(0,0,0,.08);
    --focus-ring: 0 0 0 3px rgba(0,124,186,.15);
    --focus-border: #007cba;
}

/* ── dark theme ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-page: #14171a;
    --bg-card: #1e2227;
    --bg-header: #0f2634;
    --bg-footer: #14171a;
    --bg-zebra: #23282e;
    --bg-row-hover: #2c333a;
    --bg-th: #0f2634;
    --bg-input: #2a2f35;
    --bg-flash: #1b3320;

    --text-primary: #d8dde3;
    --text-secondary: #9aa6b2;
    --text-muted: #6b7480;
    --text-on-accent: #e8eef4;
    --text-heading: #7fb6d6;
    --text-on-th: #e8eef4;
    --text-flash: #b6e6bd;
    --text-auto-a: #b6e6bd;
    --text-link: #5cb8e6;

    --border: #2c333a;
    --input-border: #3a424b;
    --flash-border: #2e7d32;

    --btn-primary-bg: #1976a3;
    --btn-primary-hover: #2089bd;
    --btn-primary-text: #f0f6fa;

    --btn-correct-bg: #2e7d32;
    --btn-correct-hover: #38983d;
    --btn-wrong-bg: #b32424;
    --btn-wrong-hover: #d12d2d;

    --btn-reset-bg: #8e2a1f;
    --btn-reset-hover: #a73526;
    --btn-reset-border: #6b1f17;

    --btn-home-bg: #243240;
    --btn-home-text: #b8d4e6;
    --btn-home-border: #36495c;
    --btn-home-hover-bg: #2e4053;

    --btn-secondary-bg: transparent;
    --btn-secondary-text: #9aa6b2;
    --btn-secondary-border: #3a424b;
    --btn-secondary-hover-bg: #2a2f35;
    --btn-secondary-hover-text: #d8dde3;

    --btn-auto-bg: #2e7d32;
    --btn-auto-hover: #38983d;

    --shadow-card: 0 0 0 1px #2c333a;
    --focus-ring: 0 0 0 3px rgba(92,184,230,.25);
    --focus-border: #5cb8e6;
}

/* ── mono theme (light, no color) ──────────────────────────────────────── */
[data-theme="mono"] {
    --bg-page: #fafafa;
    --bg-card: #fff;
    --bg-header: #1a1a1a;
    --bg-footer: #fafafa;
    --bg-zebra: #f3f3f3;
    --bg-row-hover: #e6e6e6;
    --bg-th: #1a1a1a;
    --bg-input: #fff;
    --bg-flash: #ececec;

    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --text-muted: #999;
    --text-on-accent: #fff;
    --text-heading: #1a1a1a;
    --text-on-th: #fff;
    --text-flash: #1a1a1a;
    --text-auto-a: #1a1a1a;
    --text-link: #1a1a1a;

    --border: #d8d8d8;
    --input-border: #bdbdbd;
    --flash-border: #1a1a1a;

    --btn-primary-bg: #2a2a2a;
    --btn-primary-hover: #000;
    --btn-primary-text: #fff;

    --btn-correct-bg: #2a2a2a;
    --btn-correct-hover: #000;
    --btn-wrong-bg: #777;
    --btn-wrong-hover: #555;

    --btn-reset-bg: #4a4a4a;
    --btn-reset-hover: #2a2a2a;
    --btn-reset-border: #2a2a2a;

    --btn-home-bg: #ececec;
    --btn-home-text: #1a1a1a;
    --btn-home-border: #bdbdbd;
    --btn-home-hover-bg: #dcdcdc;

    --btn-secondary-bg: transparent;
    --btn-secondary-text: #555;
    --btn-secondary-border: #bdbdbd;
    --btn-secondary-hover-bg: #ececec;
    --btn-secondary-hover-text: #1a1a1a;

    --btn-auto-bg: #2a2a2a;
    --btn-auto-hover: #000;

    --shadow-card: 0 0 0 1px #d8d8d8;
    --focus-ring: 0 0 0 3px rgba(0,0,0,.12);
    --focus-border: #1a1a1a;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── app title bar (main page only, above white card) ─────────────────── */
.app-header {
    background: var(--bg-header);
    color: var(--text-on-accent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 0.7rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 200;
}

/* segmented theme picker (in page-header, left of home) */
.theme-picker {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--btn-home-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--btn-home-bg);
    margin-right: 0.4rem;
}
.theme-picker .theme-opt {
    margin: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    background: transparent;
    color: var(--btn-home-text);
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.theme-picker .theme-opt + .theme-opt {
    border-left: 1px solid var(--btn-home-border);
}
.theme-picker .theme-opt:hover {
    background: var(--btn-home-hover-bg);
}
.theme-picker .theme-opt[aria-pressed="true"] {
    background: var(--btn-home-text);
    color: var(--btn-home-bg);
}
.theme-picker .theme-opt[aria-pressed="true"]:hover {
    background: var(--btn-home-text);
}

@media (min-width: 640px) {
    .app-header {
        max-width: 860px;
        margin: 0 auto;
        border-radius: 10px 10px 0 0;
    }
}


/* ── page header (stats + home inside the card) ────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.stats-line {
    font-size: 0.68rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.home-btn {
    background: var(--btn-home-bg);
    color: var(--btn-home-text);
    border: 1px solid var(--btn-home-border);
    font-size: 0.85rem;
    padding: 0.3rem 0.9rem;
    min-height: 34px;
    margin: 0;
}
.home-btn:hover { background: var(--btn-home-hover-bg); color: var(--btn-home-text); }

/* ── fixed bottom footer ───────────────────────────────────────────────── */
.page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-footer);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── body & container ──────────────────────────────────────────────────── */
body {
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: 26px;
}

.container {
    width: 100%;
    background: var(--bg-card);
    padding: 1rem;
    min-height: calc(100vh - 58px);
}

@media (min-width: 640px) {
    body { padding: 1.5rem; padding-bottom: calc(26px + 1rem); }
    .container {
        max-width: 860px;
        margin: 0 auto;
        padding: 1.5rem 2rem;
        border-radius: 0 0 10px 10px;
        box-shadow: var(--shadow-card);
        min-height: auto;
    }
}

/* ── typography ────────────────────────────────────────────────────────── */
h1 { color: var(--text-heading); font-size: 1.3rem; margin: 0 0 1rem; }
h2 { color: var(--text-heading); font-size: 1.1rem; margin: 0 0 0.75rem; }
h3 { color: var(--text-heading); font-size: 1rem;   margin: 0 0 0.5rem; }
h4 { color: var(--text-heading); font-size: 0.9rem; margin: 0.75rem 0 0.3rem; }
p  { color: var(--text-secondary); margin: 0 0 0.75rem; line-height: 1.5; }
div { line-height: 1.6; }

/* ── theme picker (home page only) ─────────────────────────────────────── */
.theme-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.theme-row label {
    margin: 0;
    font-size: 0.75rem;
}
.theme-row select {
    width: auto;
    min-height: 32px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

/* ── home page controls ────────────────────────────────────────────────── */
.controls-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.mode-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 130px;
}

.topics-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .controls-row { flex-direction: column; }
    .topics-col select { height: 140px; }
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* ── secondary (rarely used) buttons ──────────────────────────────────── */
.secondary-actions { margin-top: 0.75rem; }

.secondary-btn {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    font-size: 0.82rem;
    padding: 0.35rem 0.8rem;
    min-height: 34px;
}
.secondary-btn:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text); }

.reset-btn {
    background: var(--btn-reset-bg);
    color: var(--btn-reset-text);
    border: none;
    font-size: 0.82rem;
    padding: 0.35rem 0.8rem;
    min-height: 34px;
}
.reset-btn:hover { background: var(--btn-reset-hover); }

.topic-btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font-size: inherit;
    min-height: unset;
    margin: 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.topic-btn:hover { background: none; color: var(--text-heading); font-weight: 600; }

/* ── form elements ─────────────────────────────────────────────────────── */
label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 0.1rem;
}

select {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

select[multiple] {
    -webkit-appearance: auto;
    appearance: auto;
    min-height: 44px;
}

.hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    resize: vertical;
    min-height: 90px;
    -webkit-appearance: none;
}

textarea:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: var(--focus-ring);
}

form { margin-bottom: 0.5rem; }

/* ── buttons ───────────────────────────────────────────────────────────── */
button {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    border-radius: 8px;
    transition: background 0.2s;
    margin-right: 0.5rem;
    margin-bottom: 0.4rem;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.start-btn { width: 100%; margin-right: 0; }

.auto-btn {
    width: 100%;
    margin-right: 0;
    margin-top: 0.4rem;
    background: var(--btn-auto-bg);
}
.auto-btn:hover { background: var(--btn-auto-hover); }

/* ── auto-play (hands-free) page ───────────────────────────────────────── */
.auto-stage {
    padding: 0.5rem 0 1rem;
}
#auto-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-align: center;
}
.auto-q {
    font-size: 1.25rem;
    line-height: 1.55;
    padding: 0.5rem 0;
}
.auto-a {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-auto-a);
    padding-top: 0.5rem;
}
.auto-done {
    text-align: center;
    padding: 2rem 0;
    font-size: 1.2rem;
}
.auto-controls {
    position: fixed;
    bottom: 26px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    display: flex;
    gap: 0.5rem;
    z-index: 50;
}
.auto-controls button, .auto-controls form { flex: 1; margin: 0; }
.auto-controls form button { width: 100%; }

button:hover  { background: var(--btn-primary-hover); }
button:active { opacity: .82; }

button[value="correct"]       { background: var(--btn-correct-bg); color: var(--btn-correct-text); }
button[value="correct"]:hover { background: var(--btn-correct-hover); }
button[value="wrong"]         { background: var(--btn-wrong-bg); color: var(--btn-wrong-text); }
button[value="wrong"]:hover   { background: var(--btn-wrong-hover); }

/* ── stats table ───────────────────────────────────────────────────────── */
.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
    background: var(--bg-card);
}

th, td {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

th {
    background: var(--bg-th);
    color: var(--text-on-th);
    font-weight: 600;
}

tr:nth-child(even) { background: var(--bg-zebra); }
tr:hover           { background: var(--bg-row-hover); }

/* ── /allq fixed action bar ────────────────────────────────────────────── */
.allq-actions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    display: flex;
    gap: 0.5rem;
}
.allq-actions form { margin: 0; }
.allq-actions form:first-child { margin-left: auto; }
.allq-actions button {
    margin: 0;
    background: var(--btn-home-bg);
    color: var(--btn-home-text);
    border: 1px solid var(--btn-home-border);
    font-size: 0.85rem;
    padding: 0.3rem 0.9rem;
    min-height: 34px;
}
.allq-actions button:hover { background: var(--btn-home-hover-bg); color: var(--btn-home-text); }
.allq-actions .reset-btn { background: var(--btn-reset-bg); color: var(--btn-reset-text); border-color: var(--btn-reset-border); }
.allq-actions .reset-btn:hover { background: var(--btn-reset-hover); }
/* push page content below the fixed bar */
.allq-actions ~ h1 { margin-top: 3.5rem; }

/* flash message (e.g. after /reload) */
.flash {
    background: var(--bg-flash);
    border: 1px solid var(--flash-border);
    color: var(--text-flash);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
}

/* narrow # column on /allq */
.data-table th:nth-child(1), .data-table td:nth-child(1) {
    width: 38px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* topic jump links (in /allq) */
.topic-jumplist {
    font-size: 0.82rem;
    line-height: 1.7;
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
}
.topic-jumplist a {
    color: var(--text-link);
    text-decoration: none;
}
.topic-jumplist a:hover { text-decoration: underline; }

/* offset anchored rows so they aren't hidden under the fixed action bar */
.data-table tr[id] { scroll-margin-top: 4rem; }

/* ── all-questions table: narrow, wrapped topic + question columns ─────── */
.data-table { table-layout: fixed; }
.data-table td,
.data-table th {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}
/* qid | topic | question | answer | asked | wrong */
.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 38px; text-align: right; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: 110px; }
.data-table th:nth-child(3), .data-table td:nth-child(3) { width: 220px; }

.mt-4 { margin-top: 1rem; }

/* ── fixed action bar at bottom (mobile only) ──────────────────────────── */
.bottom-bar {
    position: fixed;
    bottom: 26px; /* above page-footer */
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    display: flex;
    gap: 0.75rem;
    z-index: 50;
}

.bottom-bar button {
    flex: 1;
    margin: 0;
}

/* give content room so it's not hidden behind the bar */
.content-above-bar { padding-bottom: 80px; }

/* mono: hide on-screen action buttons; user drives via keyboard (Tab, c, w, h) */
[data-theme="mono"] .bottom-bar { display: none; }
[data-theme="mono"] .content-above-bar { padding-bottom: 0; }
[data-theme="mono"] .q-meta { display: none; }

@media (min-width: 640px) {
    .bottom-bar {
        position: static;
        background: none;
        border-top: none;
        padding: 1rem 0 0;
    }
    .bottom-bar button { flex: none; }
    .content-above-bar { padding-bottom: 0; }
}