/* ── Parrot mascot brand palette ──────────────────────────────
   Sampled from the scarlet-macaw mascot (doc/ParrotFromJoeFeedbackDoc…png).
   Reference these vars instead of hard-coded hex so the whole app can be
   re-themed from one place as we lean further into color. */
:root {
    --parrot-red:        #E62317;
    --parrot-red-dark:   #BE140B;
    --parrot-green:      #4FA300;
    --parrot-green-dark: #2F7A00;
    --parrot-lime:       #BFD400;
    --parrot-orange:     #F59300;
    --parrot-orange-dk:  #E07A00;
    --parrot-blue:       #2E7CC4;

    /* Primary call-to-action gradient (beak-orange → scarlet) */
    --brand-cta:      linear-gradient(135deg, var(--parrot-orange) 0%, var(--parrot-red) 72%);
    --brand-cta-dark: linear-gradient(135deg, var(--parrot-orange-dk) 0%, var(--parrot-red-dark) 72%);
    /* Soft splash/intro backdrop — matches the native splash + app icon */
    --brand-sky: #E8F4FB;
}

html {
    min-height: 100%;
    background: linear-gradient(135deg, #d8e6ff 0%, #f0f4ff 45%, #e4d8f7 100%);
    /* No `background-attachment: fixed` — that property breaks `position: sticky`
       on WebKit (Safari + iOS WebView). The gradient already covers because both
       html and body extend with content. */
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: transparent;
    min-height: 100vh;
    /* Prevent iOS WebView elastic bounce-scroll. The .app-shell below owns the
       internal scroll region for the review view; the body itself does not scroll. */
    overscroll-behavior-y: none;
}

/* ── App shell ──────────────────────────────────────────────
   Flex column that fills the viewport. Header sits at the top (always visible),
   content scrolls independently below. Used only for the main review view —
   intro/help/FAQ screens scroll the body normally. */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.app-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* ── Global button reset ───────────────────────────────────── */

button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

button:focus { outline: none; box-shadow: none; }

/* ── App header ────────────────────────────────────────────── */

.app-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    /* Lives outside the scroll region as a non-scrolling flex child of .app-shell.
       Translucent background still useful so it doesn't pop visually against the
       gradient. */
    flex: 0 0 auto;
    z-index: 100;
    background: rgba(232, 240, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.header-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.header-user {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.btn-header-link {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
}

.btn-header-link:hover { color: #444; }

.header-sep { color: #ccc; font-size: 13px; }

.btn-settings-icon {
    font-size: 17px;
    color: #888;
    padding: 4px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-settings-icon:hover { background: rgba(0,0,0,0.06); color: #333; }

/* ── Settings panel ────────────────────────────────────────── */

.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 200;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: #fff;
    z-index: 201;
    box-shadow: -2px 0 20px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.settings-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.btn-settings-close {
    font-size: 22px;
    color: #555;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-settings-close:hover { color: #111; }

.settings-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

/* Settings search (GitHub #77): sticky at the top of the scrolling body. */
.settings-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding-bottom: 12px;
    margin-bottom: 4px;
}
.settings-search-icon {
    flex: 0 0 auto;
    font-size: 14px;
    opacity: 0.55;
}
.settings-search-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}
.settings-search-clear {
    flex: 0 0 auto;
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 4px 6px;
}
.settings-search-clear:hover { color: #444; }

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #aaa;
    text-transform: uppercase;
    margin: 16px 0 8px;
}

.settings-section-title:first-child { margin-top: 0; }

/* Collapsible section header — a full-width tappable row in the style of an iOS
   Settings list. These are now the primary interactive controls in the drawer,
   so they override the passive .settings-section-title caption look (tiny grey
   uppercase) they'd otherwise inherit. Label sits left; a chevron pins right
   (justify-content) and rotates down when open; a hairline divider separates
   adjacent sections. */
.settings-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 13px 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #333;
    text-align: left;
    border-top: 1px solid #ececec;
}
.settings-section-toggle:first-child { border-top: none; }
.settings-section-toggle:active { background: #f4f4f6; }

/* Nested child section (e.g. Listening Debug under Tester tools): indented and
   lighter, with no divider so it reads as belonging to its parent. */
.settings-section-toggle.sec-nested {
    border-top: none;
    padding-left: 16px;
    font-size: 14px;
    color: #555;
}

/* Disclosure chevron (›) that rotates to point down when its section is open. */
.sec-chevron {
    flex: 0 0 auto;
    display: inline-block;
    color: #c2c2c2;
    font-size: 19px;
    line-height: 1;
    transition: transform 0.15s ease;
}
.sec-chevron::before { content: "\203A"; }
.sec-chevron-open { transform: rotate(90deg); }

.settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.settings-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.settings-slider {
    width: 100%;
    opacity: 0.45;
}

.settings-hint {
    font-size: 12px;
    color: #aaa;
    line-height: 1.4;
}

.speed-buttons {
    display: flex;
    gap: 6px;
    width: 100%;
}

.btn-speed {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-speed:hover { background: #f7f7f7; }

.btn-speed.speed-selected {
    background: #4a8cff;
    color: #fff;
    border-color: #4a8cff;
}

/* ── Review layout ─────────────────────────────────────────── */

.review-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* Condensed game-screen header (#19) — Joe: "top is crowded". Smaller type
   and tighter so the Change-Deck control, progress and score share one slim
   line. Pairs with the icon-only Change Deck button (#20). */
/* In-session current-deck label — compact top line above the meta-row. */
.session-deck-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--parrot-blue);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 1px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 20px; /* 1.5× the former 13px (#19 follow-up: bigger card header) */
    color: #555;
}

/* Icon-only "Change Deck" (#20) — stacked-cards SVG + back arrow, no words.
   inline-flex centres the SVG vertically against the header text; the small
   negative margin keeps the larger tap target from inflating the row height. */
.meta-row .btn-header-link.btn-change-deck {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    margin: -2px 0;
}
.meta-row .btn-header-link.btn-change-deck svg {
    display: block;
    width: 42px;  /* 1.5× the former 28px */
    height: 33px; /* 1.5× the former 22px */
}

/* Term count after a deck title (#15), e.g. "Capitals (50)". */
.deck-count {
    color: #999;
    font-size: 0.9em;
}

/* Match the "← Change Deck" button to the progress/stats labels beside it
   so all three meta-row items share one font style. #555 reads as normal
   secondary text, matching the darker due-badge / "Seen …" lines below rather
   than the washed-out #888 the row used to render. */
.meta-row .btn-header-link {
    font-size: 22px; /* 1.5× the former 15px */
    color: #555;
}

.meta-right {
    display: flex;
    gap: 16px;
}

.question {
    font-size: 28px;
    font-weight: bold;
    margin: 8px 0;
    line-height: 1.3;
}

.transcript {
    font-size: 20px;
    color: #444;
    min-height: 32px;
}

.spoken-echo {
    font-size: 14px;
    color: #6a6a6a;
    font-style: italic;
    margin: 4px 0;
    text-align: center;
    line-height: 1.3;
}

.card-stats {
    font-size: 13px;
    color: #7a7a7a;
    margin: 4px 0;
    text-align: center;
    line-height: 1.35;
}

.status-text {
    font-size: 13px;
    color: #888;
    min-height: 20px;
}

.result-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 34px; /* reserved-empty floor; grows to fit the result text when shown */
}

.result {
    font-size: 28px;
    font-weight: bold;
    min-height: 18px; /* ~½ the former 36px (reserved-empty floor; grows to fit shown text) */
}

.you-said {
    font-size: 15px;
    color: #666;
    min-height: 20px;
}

.correct-answer {
    font-size: 20px;
    min-height: 13px; /* ~½ the former 26px (reserved-empty floor; grows to fit shown text) */
}

/* ── Start screen ──────────────────────────────────────────── */

/* Tighter opening layout (#13) — trimmed top padding and inter-item gap so
   the start screen fits without scrolling unless the deck lists are expanded. */
.start-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* top-row pins to the top, due-status badge
                                       settles at center, Start drops toward the
                                       lower third — undoes the over-tight centering */
    gap: 8px;
    padding: 14px 0 72px; /* small top pad keeps top-row near the header; larger
                             bottom pad lifts Start off the bottom edge */
    width: 100%;
    min-height: calc(100dvh - 44px); /* fill the area below the 44px header */
    box-sizing: border-box;
}

.start-title {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Deck title (e.g. "spanish phrases") — give it real prominence (#14).
   Was a washed-out 16px #888 sub-line; now a bold, brand-blue deck name. */
.start-sub {
    font-size: 23px;
    font-weight: 700;
    color: var(--parrot-blue);
    margin-bottom: 12px;
}

.btn-start {
    font-size: 24px;
    padding: 14px 48px;
    border-radius: 10px;
    background: var(--brand-cta);
    color: white;
    box-shadow: 0 4px 14px rgba(230, 35, 23, 0.30);
}

.btn-start:hover { background: var(--brand-cta-dark); }

.start-hint {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
}

/* ── Start-screen top row (2026-06-04 iOS redesign) ──────────────
   Utility header: parrot (left) · Pick A Deck (right). The deck name
   moved to its own full-width row below (.start-deck-name-row) so long
   Drive-sheet names wrap instead of ellipsizing in a cramped column. */
/* Header block = parrot/Pick-A-Deck row + deck-name row, kept together as a
   single unit so the start-prompt space-between distribution pins the whole
   header to the top (and the deck name stays attached to it, not orphaned). */
.start-header {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.start-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 30px; /* breathing room between the utility row and the deck title */
}
.start-parrot {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-left: 10px;
}
/* Deck name — its own centred, full-width row. Wraps to at most 2 lines,
   then ellipsizes, so the name gets the whole screen width to breathe. */
.start-deck-name-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 6px;
}
.start-deck-name {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--parrot-blue);
    line-height: 1.2;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Drive-deck name doubles as a tap target that opens the add-card panel. */
.start-deck-name-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    -webkit-tap-highlight-color: transparent;
}
.deck-manage-caret {
    font-size: 14px;
    opacity: 0.55;
    vertical-align: middle;
    margin-left: 4px;
}
.deck-manage-panel {
    width: 100%;
    max-width: 460px;
    margin: 4px auto 10px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: #f6f8fa;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
}
.deck-manage-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}
.deck-manage-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    font-size: 15px;
    padding: 8px 10px;
}
.deck-manage-actions {
    display: flex;
    gap: 8px;
}
.deck-manage-added {
    margin-top: 8px;
    font-size: 12px;
    color: #2e7d32;
}
.deck-manage-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 14px 0;
}
/* Archive deck (GitHub #76): low-emphasis, muted-danger action so it reads as
   "soft delete", not a primary button. The two-step confirm uses .btn-submit /
   .btn-skip like the rest of the panel. */
.btn-archive-deck {
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: 1px solid #e0c2c2;
    color: #a23b3b;
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.btn-archive-deck:hover { background: #fbf2f2; }
.deck-archive-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}
/* Restore-from-archive section in the deck picker (GitHub #76 follow-up).
   Flex column so its button child stretches to full width and left-aligns with
   the sibling "+ New deck" / "Copy a built-in deck" buttons (which auto-stretch
   as direct children of .deck-list). */
.deck-restore-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}
/* "Your Sheets Decks" header row with a force-refresh control alongside.
   The toggle keeps padding:6px 0 from .btn-advanced-toggle and sits as the
   first flex child with no left offset, so its text left-aligns exactly with
   the "Built-in Decks" toggle above it. */
.deck-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;            /* fill width inside the centering .google-auth so the
                               toggle's left edge matches the "Built-in Decks" toggle */
    box-sizing: border-box;
}
.deck-header-toggle {
    flex: 1 1 auto;
    min-width: 0;
}
.btn-refresh-decks {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #555;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
}
.btn-refresh-decks .refresh-glyph { font-size: 16px; line-height: 1; }
.btn-refresh-decks:hover { background: #f2f2f2; color: #000; }
.btn-refresh-decks:disabled { opacity: 0.5; cursor: default; }
.deck-refresh-status {
    margin-top: 6px;
    font-size: 12px;
    color: #2e7d32;
}
.start-pick-deck {
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--parrot-blue);
    padding: 4px 10px 4px 4px;
    cursor: pointer;
}
.icon-pick-deck {
    width: 34px;
    height: 30px;
    display: block;
}
.pick-deck-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.start-pick-deck.pick-deck-open { opacity: 0.6; }

/* Due-status line on the start screen — 1.5× the in-session badge size.
   Compound selector so it beats the later, equal-specificity .srs-due-badge
   rule (13px) regardless of source order. */
.srs-due-badge.srs-due-badge-start {
    display: block;
    text-align: center;
    font-size: 20px;
    padding: 6px 16px;
    margin: 6px 0 4px;
}

/* Deck-picker expansion revealed by "Pick A Deck". */
.deck-picker-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0 4px;
    padding: 12px;
    border: 1px solid #dce4f7;
    border-radius: 12px;
    background: #f7faff;
    box-sizing: border-box;
}

/* ── Deck picker modal (replaces the inline deck-picker-panel) ──
   Backdrop dims the start screen; the card is centered, capped in height,
   and scrolls internally when the deck lists are long. */
.deck-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 50, 0.45);
    z-index: 390;
}
.deck-modal {
    position: fixed;
    z-index: 400;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    max-height: min(80dvh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.deck-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef9;
    flex: 0 0 auto;
}
.deck-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--parrot-blue);
}
.deck-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.deck-modal-footer {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid #e8eef9;
}
.deck-modal-footer .btn-stats-done {
    width: 100%;
}

/* "Show on start screen" checkbox rows in Settings → Session options. */
.show-on-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.show-on-main-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── First-time built-in decks hint ────────────────────────── */

.builtin-hint {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin: 22px 0 0;
}

.builtin-hint-bubble {
    position: relative;
    background: #fff7d6;
    border: 1px solid #e6c97a;
    border-radius: 10px;
    padding: 12px 36px 12px 14px;
    color: #5a4a10;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.builtin-hint-text { margin-bottom: 10px; }
.builtin-hint-text strong { color: #3a2f00; }

.builtin-hint-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: #8a7322;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}
.builtin-hint-close:hover { color: #3a2f00; }

.btn-builtin-hint-ok {
    display: inline-block;
    background: #e6c97a;
    color: #3a2f00;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-builtin-hint-ok:hover { background: #d9b85f; }

.builtin-hint-arrow {
    align-self: center;
    height: 28px;
    line-height: 28px;
    font-size: 24px;
    animation: builtinHintBob 1.4s ease-in-out infinite;
}

.builtin-hint-finger {
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

@keyframes builtinHintBob {
    0%   { transform: translateY(-2px); }
    50%  { transform: translateY(6px); }
    100% { transform: translateY(-2px); }
}

/* ── Deck picker ───────────────────────────────────────────── */

.deck-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 340px;
    margin-top: 4px;
}

.btn-deck {
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid #ddd;
    background: #fff;
    color: #333;
    text-align: left;
    transition: border-color 0.15s;
}

.btn-deck:hover { border-color: #1b6ec2; }

.btn-deck.deck-selected {
    border-color: #1b6ec2;
    background: #eaf3ff;
    font-weight: 600;
}

.btn-new-deck {
    font-size: 14px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 2px dashed #ccc;
    background: transparent;
    color: #888;
    text-align: left;
}

.btn-new-deck:hover { border-color: #999; color: #444; }

.create-deck-row {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.deck-status {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

.deck-error { color: #c44; }

/* ── Buttons ───────────────────────────────────────────────── */

.btn-action {
    font-size: 20px;
    padding: 10px 32px;
    border-radius: 8px;
    background: var(--brand-cta);
    color: white;
    margin-top: 8px;
    box-shadow: 0 3px 10px rgba(230, 35, 23, 0.25);
}

.btn-action:disabled {
    background: #aaa;
    cursor: default;
}

.btn-skip {
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 6px;
    background: transparent;
    color: #888;
}

.btn-skip:hover { color: #444; }

/* ── Session-action row (Pause · Skip · I Don't Know) ──────── */

.session-action-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-session-action {
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #d0d0d0;
    background: #f8f8f8;
    color: #444;
    min-width: 88px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-session-action:hover { background: #ececec; border-color: #bbb; }

.btn-session-action.btn-pause  { border-color: #1b6ec2; color: #1b6ec2; }
.btn-session-action.btn-pause:hover { background: #e8f0fb; }

.btn-session-action.btn-dontknow { border-color: #b07700; color: #8a5c00; }
.btn-session-action.btn-dontknow:hover { background: #fdf3e0; }

.btn-session-action.btn-stop-session { border-color: #c23a3a; color: #b02525; }
.btn-session-action.btn-stop-session:hover { background: #fbeaea; }

.btn-session-action.btn-new-deck { border-color: #2b8a5b; color: #1f7048; }
.btn-session-action.btn-new-deck:hover { background: #e9f6ef; }

.btn-session-action.btn-mark-correct { border-color: #2b8a5b; color: #1f7048; }
.btn-session-action.btn-mark-correct:hover { background: #e9f6ef; }

/* "What can I say?" trigger — a subtle link-style button under the session hint. */
.btn-whatcanisay {
    margin-top: 6px;
    background: none;
    border: none;
    color: #1b6ec2;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
}
.btn-whatcanisay:hover { color: #0f4f8a; }

/* "What can I say?" overlay — reuses .finish-overlay / .finish-card; just the list. */
.finish-card.help-card { text-align: left; max-width: 420px; }
.finish-card.help-card .finish-title { text-align: center; }
.help-list { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 9px; }
.help-line { font-size: 15px; color: #333; line-height: 1.35; }

.session-action-hint {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px;
    text-align: center;
}

/* ── Google auth ───────────────────────────────────────────── */

.google-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
}

.btn-sheets {
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
}

.btn-sheets:hover { border-color: #999; }

.btn-sheets-with-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sheets-connected-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sheets-connected {
    font-size: 13px;
    color: #2a9d2a;
}

.connect-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.connect-prompt-text {
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.starter-picker {
    width: 100%;
    text-align: center;
}

.empty-deck-notice {
    background: #fff4e5;
    border: 1px solid #f0c674;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 13px;
    color: #6c4400;
    line-height: 1.4;
    text-align: left;
}

.starter-picker-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.starter-picker-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.starter-picker-or {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
}

.btn-text-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
}

.btn-google-signout {
    font-size: 12px;
    color: #aaa;
}

.btn-google-signout:hover { color: #c44; }

/* ── Manual input ──────────────────────────────────────────── */

.manual-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.manual-entry {
    flex: 1;
    font-size: 17px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.manual-entry:focus { border-color: #1b6ec2; }

.btn-submit {
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 6px;
    background: #555;
    color: white;
}

.btn-submit:disabled { background: #aaa; cursor: default; }

/* One-shot "press" animation played when a spoken answer auto-submits.
   Toggled via the _submitPulse flag in Review.razor. */
@keyframes submit-press {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.86); filter: brightness(0.85); }
    100% { transform: scale(1); }
}
.btn-submit.btn-submit-pressed {
    animation: submit-press 0.22s ease;
}

/* ── Error / notice ────────────────────────────────────────── */

.stt-error {
    font-size: 12px;
    color: #c44;
    margin-top: 4px;
}

.deploy-footer {
    font-size: 0.62rem;
    color: #aaa;
    padding: 4px 0 4px 1rem;
    border-top: 1px solid #e8e8e8;
}

/* ── Debug panel ───────────────────────────────────────────── */

.debug-panel {
    width: 100%;
    margin-top: 20px;
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.debug-header {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: #888;
    margin-bottom: 4px;
    cursor: pointer;
    user-select: none;
    gap: 4px;
}

.debug-chevron {
    font-size: 10px;
    flex: 1;
}

.btn-debug-copy {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #555;
}

.debug-entry {
    font-size: 11px;
    font-family: monospace;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    color: #555;
}

.log-ts { color: #aaa; margin-right: 4px; }
.log-cat { color: #888; margin-right: 4px; font-style: italic; }

.debug-entry.log-trace    { color: #bbb; }
.debug-entry.log-debug    { color: #888; }
.debug-entry.log-information { color: #333; }
.debug-entry.log-warning  { color: #b06000; }
.debug-entry.log-error    { color: #cc2222; font-weight: bold; }
.debug-entry.log-critical { color: #cc2222; font-weight: bold; }

/* ── Session options (start screen) ───────────────────────── */

.session-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2px 0 12px;
}

.session-option-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.session-option-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #aaa;
    text-transform: uppercase;
}

/* ── Tooltips ─────────────────────────────────────────────── */

.tt-bubble {
    position: fixed;
    transform: translate(-50%, calc(-100% - 8px));
    background: rgba(28, 28, 30, 0.88);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 9px;
    border-radius: 5px;
    pointer-events: none;
    white-space: normal;
    max-width: 220px;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.12s;
}
.tt-bubble.tt-below { transform: translate(-50%, 8px); }
.tt-bubble.tt-visible { opacity: 1; }

/* ── Pin / Snooze overlay (after answer) ──────────────────── */

.pin-snooze-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 8px 0 4px;
}

.btn-pin-snooze {
    padding: 5px 12px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background: #fff;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-pin-snooze:hover { background: #f5f5f5; border-color: #aaa; }

.snooze-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 4px 0 8px;
}

.btn-snooze-preset {
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-snooze-preset:hover { background: #f5f5f5; }

.snooze-custom-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.snooze-custom-input {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.snooze-custom-label { font-size: 13px; color: #666; }

/* ── Advanced SRS settings (gear panel) ────────────────────── */

.btn-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    color: #555;
    padding: 6px 0;
    text-align: left;
}

.btn-advanced-toggle:hover { color: #000; }

.srs-param-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.srs-param-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.srs-param-hint {
    font-size: 11px;
    color: #bbb;
    margin-top: 1px;
}

/* − / + stepper: replaces the settings sliders (2026-08-14 — user request:
   precise values + visible bounds without a slider). Buttons disable at the
   range ends; the range itself is stated in the row's hint text. */
.stepper-group {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.btn-stepper {
    width: 44px;
    height: 36px;
    border: 1px solid #ddd;
    background: #fff;
    color: #4a8cff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.btn-stepper:first-child { border-radius: 6px 0 0 6px; }
.btn-stepper:last-child  { border-radius: 0 6px 6px 0; border-left: none; }

.btn-stepper:disabled { color: #ccc; cursor: default; }

.stepper-value {
    min-width: 58px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 0 6px;
    box-sizing: border-box;
}

.srs-param-input {
    width: 64px;
    font-size: 14px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: right;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.srs-param-input:focus { border-color: #4a8cff; }

.btn-reset-defaults {
    font-size: 12px;
    color: #888;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 7px 12px;
    background: #f9f9f9;
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

.btn-reset-defaults:hover { background: #efefef; color: #333; }

/* ── Stats panel ───────────────────────────────────────────── */

.stats-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: #fff;
    z-index: 201;
    box-shadow: -2px 0 20px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

/* Text "‹ Back" affordance on the left of the stats header — a second, more
   obvious exit than the ✕ for non-technical testers (issue #36). */
.btn-stats-back {
    font-size: 16px;
    font-weight: 600;
    color: #1b3a6f;
    padding: 8px 8px 8px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Always-visible footer so the panel can never trap the user, regardless of
   how far the card list is scrolled (issue #36). */
.stats-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fff;
}

.btn-stats-done {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #1b3a6f;
    border: none;
    border-radius: 10px;
}

.btn-stats-done:hover { background: #16315e; }

.stats-summary {
    background: #f4f7fb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.stats-summary strong { color: #1b3a6f; }

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.stats-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    padding: 8px 6px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    position: sticky;
    top: 0;
}

.stats-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: top;
}

.stats-table tr:last-child td { border-bottom: none; }

.stats-prompt {
    max-width: 260px;
    word-break: break-word;
}

.stats-srs-sub {
    margin-top: 2px;
    font-size: 12px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.stats-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stats-right { color: #2a9d2a; font-weight: 600; }
.stats-wrong { color: #cc2222; font-weight: 600; }

.btn-clear-history {
    margin-top: 24px;
    font-size: 13px;
    color: #cc2222;
    border: 1px solid #f0caca;
    border-radius: 6px;
    padding: 9px 12px;
    background: #fff7f7;
    width: 100%;
    text-align: center;
}

.btn-clear-history:hover { background: #ffeaea; }

/* ── Round banner ─────────────────────────────────────────── */

.round-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(27, 58, 111, 0.92);
    color: #fff;
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    z-index: 300;
    pointer-events: none;
    white-space: nowrap;
}

/* Persistent end-of-deck finish screen (issue #31). Full-screen so it clearly
   replaces the session UI — the user must choose Replay or Done. */
.finish-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.97);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.finish-card {
    width: 100%;
    max-width: 360px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.finish-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--parrot-red);
    letter-spacing: 0.3px;
}

.finish-score {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

.finish-pct {
    font-size: 44px;
    font-weight: 800;
    color: #1b3a6f;
    line-height: 1;
    margin-bottom: 4px;
}

.btn-finish-replay {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--brand-cta);
    border: none;
    border-radius: 12px;
}

.btn-finish-replay:hover { background: var(--brand-cta-dark); }

.btn-finish-done {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #1b3a6f;
    background: #eef3fa;
    border: none;
    border-radius: 12px;
}

.finish-hint {
    font-size: 13px;
    color: #8a93a3;
    margin-top: 2px;
}

/* Start-screen deck-load failure (e.g. expired Google sign-in) + Reconnect. */
.deck-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 88%;
    margin: 0 auto 14px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #f3b4ad;
    border-radius: 10px;
}
.deck-load-error-text {
    font-size: 15px;
    color: #a3271c;
    text-align: center;
    line-height: 1.35;
}

/* Deck-name picker list shown while listening for a spoken deck name. */
.deck-name-options {
    width: 100%;
    max-height: 38vh;
    overflow-y: auto;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deck-name-option {
    font-size: 16px;
    font-weight: 600;
    color: var(--parrot-blue);
    background: #eef3fa;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
}
.deck-name-option:active { background: #dde8f6; }

.srs-due-badge {
    font-size: 13px;
    color: #4a5b78;
    background: #eef3fa;
    border-radius: 12px;
    padding: 4px 12px;
    margin-top: 4px;
    display: inline-block;
}

.srs-due-badge-session {
    display: block;
    margin: 2px 0 6px 0;
    text-align: center;
    font-size: 18px;   /* 1.5× the former 12px */
    padding: 5px 15px; /* 1.5× the former 3px 10px */
}

/* ── Stats tabs ───────────────────────────────────────────── */

.stats-tabs {
    display: flex;
    border-bottom: 1px solid #dce4f7;
    flex-shrink: 0;
}

.stats-tab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
}

.stats-tab.active {
    color: #1b3a6f;
    font-weight: 600;
    border-bottom-color: #1b6ec2;
}

/* ── Consent ──────────────────────────────────────────────── */

.consent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1b6ec2;
    flex-shrink: 0;
}

.consent-label {
    font-size: 14px;
    color: #333;
}

.consent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
}

.consent-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    padding: 22px 24px;
    z-index: 301;
}

.consent-title {
    font-size: 20px;
    font-weight: 700;
    color: #1b3a6f;
    margin-bottom: 10px;
}

.consent-body {
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.consent-body p { margin: 0 0 10px; }

.consent-body a { color: #1b6ec2; }

.consent-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.btn-consent-yes,
.btn-consent-no,
.btn-consent-later {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
}

.btn-consent-yes {
    background: #1b6ec2;
    color: #fff;
}
.btn-consent-yes:hover { background: #155ba3; }

.btn-consent-no {
    background: #f3f3f3;
    color: #444;
    border-color: #e0e0e0;
}
.btn-consent-no:hover { background: #e8e8e8; }

.btn-consent-later {
    background: transparent;
    color: #888;
}
.btn-consent-later:hover { color: #444; }

/* Admin dashboard */
.admin-signin { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.admin-signin h2 { font-size: 1.4rem; margin-bottom: 20px; color: #222; }

.admin-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.admin-page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.admin-page-header h2 { font-size: 1.5rem; color: #222; margin: 0; }

.admin-btn {
    background: #fff; border: 1px solid #ccc; border-radius: 6px;
    padding: 6px 16px; font-size: 0.85rem; color: #444; cursor: pointer;
    transition: background 0.15s;
}
.admin-btn:hover { background: #f0f0f0; }
.admin-btn:disabled { opacity: 0.5; cursor: default; }

.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.admin-kpi-card {
    background: #fff; border-radius: 10px; padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center;
}
.admin-kpi-value { font-size: 2rem; font-weight: 700; color: #1b6ec2; line-height: 1.1; }
.admin-kpi-label { font-size: 0.78rem; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-last-event { font-size: 0.8rem; color: #aaa; margin: 0 0 20px; text-align: right; }

.admin-section { background: #fff; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; margin-bottom: 0; }
.admin-section-header:hover { opacity: 0.8; }
.admin-section-header h3 { font-size: 1rem; font-weight: 600; color: #333; margin: 0; }
.admin-section-toggle { font-size: 0.75rem; color: #aaa; padding-left: 8px; }
.admin-section-header + * { margin-top: 14px; }

.admin-loading { color: #888; padding: 20px; text-align: center; }
.admin-denied { color: #c44; padding: 20px; text-align: center; }
.admin-empty { color: #aaa; font-size: 0.9rem; }
.admin-error { color: #c44; font-size: 0.85rem; }

/* Doc page */
.doc-signin { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.doc-signin h2 { font-size: 1.4rem; margin-bottom: 12px; color: #222; }
.doc-signin p { color: #666; margin-bottom: 20px; }
.doc-wrap { max-width: 720px; margin: 40px auto; padding: 0 20px 60px; }
.doc-page-header { margin-bottom: 20px; }
.doc-page-header h2 { font-size: 1.5rem; color: #222; margin: 0; }
.doc-list { list-style: none; padding: 0; margin: 0 0 24px; }
.doc-list li { border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 8px; transition: background 0.15s; }
.doc-list li:hover { background: #f5f7ff; border-color: #c5d0f0; }
.doc-list a { display: block; padding: 14px 18px; color: #2563eb; text-decoration: none; font-size: 1rem; font-weight: 500; }
.doc-list a:hover { color: #1d4ed8; }
.doc-item-meta { display: block; font-size: 0.8rem; font-weight: 400; color: #888; margin-top: 2px; }
.doc-loading { color: #888; padding: 20px; text-align: center; }
.doc-denied { color: #c44; padding: 20px; text-align: center; }
.doc-user { font-size: 0.8rem; color: #aaa; }

/* Issues page (/issues) */
.issues-wrap { max-width: 760px; margin: 40px auto; padding: 0 20px 60px; }
.issues-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.issues-page-header h2 { font-size: 1.5rem; color: #222; margin: 0; }
.issues-btn { background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer; color: #444; }
.issues-btn:hover { background: #e4e4e4; }
.issues-submit-section { background: #f9f9fb; border: 1px solid #e5e5e5; border-radius: 10px; padding: 18px 20px 16px; margin-bottom: 20px; }
.issues-submit-section h3 { margin: 0 0 12px; font-size: 1rem; color: #333; font-weight: 600; }
.issues-form { display: flex; flex-direction: column; gap: 8px; }
.issues-input { border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; font-size: 0.95rem; color: #222; width: 100%; box-sizing: border-box; }
.issues-input:focus { outline: none; border-color: #2563eb; }
.issues-textarea { border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; color: #222; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.issues-textarea:focus { outline: none; border-color: #2563eb; }
.issues-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.issues-btn-primary { background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 0.9rem; cursor: pointer; font-weight: 500; }
.issues-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.issues-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.issues-btn-secondary { background: #fff; color: #2563eb; border: 1px solid #2563eb; border-radius: 6px; padding: 8px 18px; font-size: 0.9rem; cursor: pointer; font-weight: 500; }
.issues-btn-secondary:hover:not(:disabled) { background: #eff6ff; }
.issues-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.issues-btn-link { background: none; border: none; color: #2563eb; font-size: 0.85rem; cursor: pointer; padding: 0; text-decoration: underline; }
.issues-btn-link:hover { color: #1d4ed8; }
.issues-error { color: #c44; font-size: 0.85rem; margin: 4px 0 0; }
.issues-success { color: #1a7a3a; font-size: 0.85rem; margin: 4px 0 0; }
.issues-filters { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; background: #f5f5f5; border-radius: 8px; }
.issues-filter-check { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: #444; cursor: pointer; user-select: none; }
.issues-date-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.issues-date-label { font-size: 0.85rem; color: #555; display: flex; align-items: center; gap: 5px; }
.issues-date-input { border: 1px solid #ccc; border-radius: 5px; padding: 4px 8px; font-size: 0.85rem; color: #333; }
.issues-count { font-size: 0.82rem; color: #888; margin-bottom: 10px; }
.issues-loading { color: #888; padding: 20px; text-align: center; }
.issues-empty { color: #aaa; padding: 20px; text-align: center; font-size: 0.9rem; }
.issues-list { display: flex; flex-direction: column; gap: 8px; }
.issues-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; transition: background 0.12s; }
.issues-row:hover { background: #f8f9ff; border-color: #c5d0f0; }
.issues-row-closed { opacity: 0.65; }
.issues-status { font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; white-space: nowrap; margin-top: 2px; }
.status-open { background: #dcfce7; color: #166534; }
.status-closed { background: #f3f4f6; color: #6b7280; }
.issues-row-body { flex: 1; min-width: 0; }
.issues-row-title { font-size: 0.95rem; font-weight: 500; color: #222; margin-bottom: 4px; }
.issues-row-title a { color: #2563eb; text-decoration: none; }
.issues-row-title a:hover { text-decoration: underline; }
.issues-row-meta { font-size: 0.78rem; color: #888; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.issues-meta-sep { color: #ccc; }
.issues-footer { font-size: 0.8rem; color: #aaa; margin-top: 24px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th { text-align: left; padding: 7px 10px; border-bottom: 2px solid #eee; color: #666; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table td { padding: 7px 10px; border-bottom: 1px solid #f2f2f2; vertical-align: top; }
.admin-table th.num, .admin-table td.num { text-align: right; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-name { display: block; font-weight: 500; color: #222; }
.admin-email { display: block; font-size: 0.78rem; color: #999; }

.admin-query-section {}
.admin-prebuilt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-prebuilt-label { font-size: 0.82rem; color: #666; white-space: nowrap; }
.admin-prebuilt-select {
    font-size: 0.85rem; border: 1px solid #ccc; border-radius: 6px;
    padding: 5px 10px; color: #333; background: #fff; cursor: pointer;
    flex: 1; max-width: 260px;
}
.admin-prebuilt-select:focus { outline: none; border-color: #1b6ec2; }
.admin-query-hint { font-size: 0.78rem; color: #999; margin-bottom: 8px; }
.admin-query-hint code { font-size: 0.78rem; background: #f5f5f5; padding: 1px 4px; border-radius: 3px; }
.admin-query-textarea {
    width: 100%; font-family: 'Courier New', monospace; font-size: 0.85rem;
    border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px;
    resize: vertical; color: #222; background: #fafafa;
    box-sizing: border-box; margin-bottom: 10px;
}
.admin-query-textarea:focus { outline: none; border-color: #1b6ec2; background: #fff; }
.admin-query-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-query-error { color: #c44; font-size: 0.85rem; }
.admin-query-count { font-size: 0.82rem; color: #888; margin-left: auto; }
.admin-dt-wrap { overflow-x: auto; }

/* ── Intro / help / FAQ pages ──────────────────────────────── */

.intro-page {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 24px 60px;
    color: #222;
}

.intro-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 18px;
}

.intro-lede {
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    margin: 0 0 24px;
}

.intro-tbd {
    border: 1px dashed #b8c2d9;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    padding: 18px 20px;
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.45;
    color: #444;
}

.intro-tbd-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}

.intro-tbd ul { margin: 8px 0 8px 22px; padding: 0; }
.intro-tbd li { margin: 4px 0; }
.intro-coming { font-style: italic; color: #888; margin: 12px 0 0; }

.intro-footer-links {
    margin-top: 18px;
    font-size: 14px;
    text-align: center;
}
.intro-footer-links a { color: #4a78c8; text-decoration: none; }
.intro-footer-links a:hover { text-decoration: underline; }

.help-links { font-size: 14px; margin-top: 6px; }
.help-links a { color: #4a78c8; text-decoration: none; }
.help-links a:hover { text-decoration: underline; }

.guide-section { margin-bottom: 28px; }
.guide-heading { font-size: 17px; font-weight: 600; color: #2a2a2a; margin: 0 0 8px; }
.guide-body { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 8px; white-space: pre-line; }

.faq-item { margin-bottom: 24px; border-left: 3px solid #4a78c8; padding-left: 14px; }
.faq-q { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
.faq-a { font-size: 15px; line-height: 1.6; color: #444; margin: 0 0 6px; white-space: pre-line; }

.btn-link-plain {
    background: none;
    border: none;
    padding: 0;
    color: #4a78c8;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.btn-link-plain:hover { text-decoration: underline; }

/* ── Feedback modals ──────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
}

.modal-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    padding: 22px 24px;
    z-index: 301;
}

.modal-card-wide { width: min(560px, calc(100vw - 32px)); }

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #1b3a6f;
    margin-bottom: 14px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.feedback-input, .feedback-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #ccd;
    border-radius: 7px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fafbff;
    margin-top: 4px;
    resize: vertical;
}

.feedback-input:focus, .feedback-textarea:focus {
    outline: none;
    border-color: #4a78c8;
    box-shadow: 0 0 0 2px rgba(74,120,200,0.15);
}

.feedback-status {
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 14px;
    margin-bottom: 10px;
}

.feedback-ok  { background: #eaf5ea; color: #2a6b2a; }
.feedback-error { background: #fdecea; color: #b22; }

.feedback-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }

.feedback-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f5f7ff;
    font-size: 14px;
}

.feedback-state-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-open   { background: #2da44e; }
.dot-closed { background: #8b949e; }

.feedback-list-title { flex: 1; color: #1a1a1a; }
.feedback-list-date  { font-size: 12px; color: #777; white-space: nowrap; }

/* ── Brand header underline ───────────────────────────────────
   A thin parrot-palette gradient strip under the top bar — the
   first small dose of mascot color on the chrome. */
.app-header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg,
        var(--parrot-red) 0%,
        var(--parrot-orange) 33%,
        var(--parrot-lime) 66%,
        var(--parrot-green) 100%) 1;
}

/* ── Mascot intro splash (iOS) ────────────────────────────────
   One-shot pure-CSS animation: the parrot pops in, gives a little
   wave, then flaps up and off-screen while the backdrop fades out.
   No JS and no C# (markup-only + CSS) to stay clear of the Mono iOS
   AOT bug. The overlay element is created once when the page mounts,
   so the animation runs exactly once; animation-fill-mode: forwards
   then leaves it hidden and non-interactive. */
.parrot-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%,
        #ffffff 0%, var(--brand-sky) 68%, #d6ebf7 100%);
    animation: parrot-intro-fade 2.7s ease forwards;
}

.parrot-intro__bird {
    width: min(64vw, 320px);
    height: auto;
    transform-origin: 50% 88%;       /* pivot near the feet for the wave */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
    animation: parrot-fly 2.7s cubic-bezier(.34, 1.2, .64, 1) forwards;
    will-change: transform, opacity;
}

@keyframes parrot-intro-fade {
    0%, 78% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes parrot-fly {
    0%   { transform: translate3d(0, 26px, 0) scale(.45) rotate(0deg);  opacity: 0; }
    8%   { transform: translate3d(0, 0, 0)    scale(1.06) rotate(0deg); opacity: 1; }
    13%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(0deg); }
    22%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(8deg); }
    30%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(-5deg); }
    38%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(8deg); }
    46%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(-4deg); }
    54%  { transform: translate3d(0, 0, 0)    scale(1)    rotate(0deg); }
    62%  { transform: translate3d(0, 14px, 0) scale(.97)  rotate(0deg); }
    75%  { opacity: 1; }
    100% { transform: translate3d(0, -132vh, 0) scale(1.18) rotate(-15deg); opacity: 0; }
}

/* Respect reduced-motion: skip the flight, just a brief gentle fade. */
@media (prefers-reduced-motion: reduce) {
    .parrot-intro       { animation: parrot-intro-fade 1.1s ease forwards; }
    .parrot-intro__bird { animation: none; transform: none; opacity: 1; }
}


/* ── Success notice (always above the deck picker, which is z-index 400) ── */
.notice-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
}
.notice-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 40px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
    padding: 22px 24px;
    z-index: 501;
}
.notice-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.notice-body { font-size: 15px; line-height: 1.4; margin-bottom: 16px; }

/* ── "Recently deleted" rows: one boxed row per deck, buttons side by side ── */
.deleted-deck-row {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.deleted-deck-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.deleted-deck-count { font-weight: 400; opacity: 0.6; }
.deleted-deck-actions { display: flex; gap: 8px; }
.deleted-deck-actions button { flex: 1; }