/**
 * flashcards.css — Flashcards (FLASHCARDS_PLAN.md)
 *
 * Version: 1.5.3
 * Changelog:
 *   v1.5.3 (2026-10-03): period select draws its own chevron with right
 *     padding (the native arrow sat on the border); Level band spacing at
 *     the bottom of the page (.fc-level-bottom).
 *   v1.5.2 (2026-10-03): round "?" help button (.fc-mast-help-icon).
 *   v1.5.1 (2026-10-03): period filter beside "Your progress"
 *     (.fc-progress-head).
 *   v1.5.0 (2026-10-03): Lab-style section tabs in the masthead (.fc-tab),
 *     topic tile waiting state (.fc-tile-wait), "made for you" chip.
 *   v1.4.0 (2026-10-03): "N of N cards completed · N%" line (.fc-deck-done),
 *     "❓ How it works" masthead pill + #fcHelp modal (.fc-help-*).
 *   v1.3.0 (2026-10-03): simple deck card — "N flashcards", "N of N known ·
 *     N%", one solid progress bar (.fc-pbar), darker deck description, chips
 *     instead of gray study text.
 *   v1.2.0 (2026-10-03): runner clarity pass — space + a bold "How well did
 *     you know the answer?" above the grade buttons, meaning sub-labels on
 *     the buttons (no 1/2/3), per-card history line + ●○○ steps to Known,
 *     summary notes list; deck card three-state bar (known / learning /
 *     new) + study meta line.
 *   v1.1.0 (2026-10-03): personal cards — "From your sessions" group intro +
 *     generating banner (.fc-personal-*), the runner's origin chip
 *     (.fcr-origin).
 *   v1.0.0 (2026-10-03): Initial build. Shared by flashcards.html (the
 *     Flashcard Dashboard) and roleplay.html (the Lab warm-up uses the same
 *     runner modal, js/flashcards-runner.js). All classes fc- prefixed.
 *     Progress is COUNTS only ("18 of 24 known") — there is deliberately no
 *     percentage or score vocabulary in this stylesheet.
 *
 * NOTE (your-coach.css lesson): append new blocks at END OF FILE — never
 * anchor inserts on comments.
 */

/* ── Page layout ─────────────────────────────────────────────────────────── */
/* Explicit stack (rep-review.css precedent) — theme.css sets no body font,
   and the runner modal must look the same inside the Lab. */
.fc-container, .fcr-overlay, .fc-toast {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.fc-btn, .fcr-grade, .fc-mast-cta, .fc-mast-controls select { font-family: inherit; }
.fc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}
.fc-hidden { display: none !important; }

/* ── Masthead (roleplay.html v3.62.0 / leaderboard v1.14.0 recipe) ───────── */
.fc-masthead {
    position: relative; overflow: hidden;
    background: linear-gradient(118deg,
        color-mix(in srgb, var(--brand-primary, #101d4f) 58%, #000),
        var(--brand-primary, #101d4f) 58%,
        color-mix(in srgb, var(--brand-primary, #101d4f) 84%, #fff));
    border-radius: 20px;
    padding: 24px 28px 20px;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-primary, #101d4f) 28%, transparent);
    margin-bottom: 20px;
}
.fc-mast-bars { position: absolute; right: 0; bottom: 0; }
.fc-mast-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.fc-mast-text { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fc-mast-title { font-size: 1.9rem; font-weight: 700; margin: 0; color: #fff; line-height: 1.2; }
.fc-mast-rule { width: 46px; height: 3px; border-radius: 2px; background: var(--brand-secondary, #d9a441); }
.fc-mast-sub { color: rgba(255, 255, 255, 0.75); font-size: 0.98rem; font-weight: 500; margin: 2px 0 0; }
.fc-mast-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-mast-controls select {
    background: #fff; color: var(--text-primary, #1e293b);
    border: none; border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 14px;
}
.fc-mast-cta {
    background: #fff; color: var(--brand-primary, #101d4f);
    border: none; border-radius: 999px; padding: 10px 18px;
    font-weight: 800; font-size: 14px; cursor: pointer;
}
.fc-mast-cta:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 640px) {
    .fc-masthead { padding: 18px 18px 16px; }
    .fc-mast-title { font-size: 1.45rem; }
    .fc-mast-bars { display: none; }
    .fc-mast-controls { width: 100%; }
    .fc-mast-cta { flex: 1; }
}

/* ── Cards / panels ──────────────────────────────────────────────────────── */
.fc-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fc-section-title {
    font-size: 15px; font-weight: 800; color: var(--text-primary, #1e293b);
    margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px;
}
.fc-section-title .fc-muted { font-size: 13px; font-weight: 600; }
.fc-muted { color: var(--text-muted, #64748b); }

/* ── Level band (Lab v3.53.0 ladder, fc-prefixed) ────────────────────────── */
.fc-level-band { padding: 16px 20px; margin-bottom: 16px; }
.fc-level-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.fc-level-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.fc-level-name { font-weight: 800; font-size: 1.05rem; color: var(--text-primary, #0f172a); }
.fc-level-spacer { flex: 1; }
.fc-level-next { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary, #475569); }
.fc-ladder { position: relative; margin-bottom: 6px; }
.fc-ladder-track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.fc-ladder-seg { flex: 1 1 0; }
.fc-ladder-seg.fc-tier-0    { background: #e2e8f0; }
.fc-ladder-seg.fc-tier-1    { background: #bae6fd; }
.fc-ladder-seg.fc-tier-2    { background: #7dd3fc; }
.fc-ladder-seg.fc-tier-3    { background: #38bdf8; }
.fc-ladder-seg.fc-tier-4    { background: #0ea5e9; }
.fc-ladder-seg.fc-tier-gold { background: #fbbf24; }
.fc-ladder-marker {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--text-primary, #0f172a);
    border: 3px solid var(--bg-card, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.fc-ladder-labels { display: flex; }
.fc-ladder-label { flex: 1 1 0; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--text-muted, #64748b); padding: 2px 4px; }
.fc-ladder-label.current { color: var(--text-primary, #0f172a); font-weight: 800; }
@media (max-width: 640px) {
    .fc-ladder-label .fc-ladder-label-name { display: none; }
    .fc-ladder-label.current .fc-ladder-label-name { display: inline; }
}

/* ── Stats band ──────────────────────────────────────────────────────────── */
.fc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   /* two-up on phones */
    gap: 14px;
}
.fc-stat { padding: 16px 20px; }
.fc-stat-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted, #64748b); margin-bottom: 6px;
}
.fc-stat-value { font-size: 28px; font-weight: 800; color: var(--text-primary, #1e293b); line-height: 1.15; }
.fc-stat-value.fc-stat-text { font-size: 18px; line-height: 1.3; }
.fc-stat-sub { font-size: 12px; color: var(--text-muted, #64748b); margin-top: 4px; }
.fc-stat-sub .fc-up { color: #059669; font-weight: 700; }

/* ── Deck grid ───────────────────────────────────────────────────────────── */
.fc-decks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.fc-deck { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.fc-deck.fc-deck-focus { border-left: 4px solid var(--brand-secondary, #d9a441); }
.fc-deck-head { display: flex; align-items: flex-start; gap: 10px; }
.fc-deck-icon { font-size: 22px; line-height: 1; }
.fc-deck-title { font-size: 15px; font-weight: 800; color: var(--text-primary, #1e293b); margin: 0; }
.fc-deck-desc { font-size: 12.5px; color: var(--text-muted, #64748b); margin: 2px 0 0; }
.fc-deck-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-badge {
    font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
    border: 1px solid var(--border-color, #e2e8f0); color: var(--text-muted, #64748b);
    white-space: nowrap;
}
.fc-badge.fc-badge-due   { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.fc-badge.fc-badge-new   { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.fc-badge.fc-badge-done  { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.fc-badge.fc-badge-focus { background: color-mix(in srgb, var(--brand-secondary, #d9a441) 18%, #fff); border-color: var(--brand-secondary, #d9a441); color: #78350f; }
/* Count-based segment bar: one segment per card, known ones filled */
.fc-known-line { font-size: 13px; font-weight: 700; color: var(--text-primary, #1e293b); }
.fc-segbar { display: flex; gap: 2px; height: 8px; }
.fc-segbar span { flex: 1 1 0; border-radius: 2px; background: var(--border-color, #e2e8f0); }
.fc-segbar span.on { background: #10b981; }
.fc-deck-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.fc-btn {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #1e293b);
    border-radius: 10px; padding: 8px 14px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.fc-btn:hover { border-color: var(--text-muted, #94a3b8); }
.fc-btn.primary { background: var(--brand-primary, #0EA5E9); border-color: var(--brand-primary, #0EA5E9); color: #fff; }
.fc-btn.primary:hover { filter: brightness(1.08); }
.fc-btn:disabled { opacity: 0.55; cursor: default; }
.fc-btn.ghost { background: none; }

/* ── Shaky list ──────────────────────────────────────────────────────────── */
.fc-shaky { padding: 6px 0; }
.fc-shaky-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.fc-shaky-row:last-child { border-bottom: none; }
.fc-shaky-front { flex: 1; font-size: 14px; color: var(--text-primary, #1e293b); }
.fc-shaky-deck { font-size: 12px; color: var(--text-muted, #64748b); }
.fc-chip-missed { font-size: 11px; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ── Empty / notice ──────────────────────────────────────────────────────── */
.fc-notice { padding: 34px 26px; text-align: center; color: var(--text-muted, #64748b); font-size: 14px; }
.fc-notice-icon { font-size: 40px; display: block; margin-bottom: 10px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.fc-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; z-index: 10050;
}
.fc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Runner modal (js/flashcards-runner.js — shared with the Lab) ────────── */
.fcr-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, 0.62);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.fcr-modal {
    width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow: auto;
    background: var(--bg-card, #fff); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 20px 22px 22px;
    display: flex; flex-direction: column; gap: 14px;
}
.fcr-top { display: flex; align-items: flex-start; gap: 12px; }
.fcr-titles { flex: 1; min-width: 0; }
.fcr-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.fcr-title { font-size: 18px; font-weight: 800; color: var(--text-primary, #1e293b); margin: 2px 0 0; }
.fcr-close {
    border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer;
    color: var(--text-muted, #64748b); padding: 4px 6px; border-radius: 8px;
}
.fcr-close:hover { background: var(--border-color, #e2e8f0); }
.fcr-progress { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-muted, #64748b); }
.fcr-progress .fcr-points { margin-left: auto; color: #059669; }
.fcr-dots { display: flex; gap: 3px; flex: 1; max-width: 260px; }
.fcr-dots span { flex: 1; height: 5px; border-radius: 3px; background: var(--border-color, #e2e8f0); }
.fcr-dots span.got    { background: #10b981; }
.fcr-dots span.shaky  { background: #f59e0b; }
.fcr-dots span.missed { background: #ef4444; }
.fcr-dots span.cur    { background: var(--brand-primary, #0EA5E9); }

.fcr-card {
    position: relative; min-height: 220px;
    border: 1px solid var(--border-color, #e2e8f0); border-radius: 16px;
    background: linear-gradient(180deg, var(--bg-card, #fff), color-mix(in srgb, var(--brand-primary, #0EA5E9) 4%, var(--bg-card, #fff)));
    padding: 24px 22px; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
    outline: none;
}
.fcr-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #0EA5E9) 40%, transparent); }
.fcr-side-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.fcr-front { font-size: 19px; font-weight: 700; color: var(--text-primary, #1e293b); line-height: 1.45; white-space: pre-wrap; }
.fcr-back {
    font-size: 16px; color: var(--text-primary, #1e293b); line-height: 1.6; white-space: pre-wrap;
    border-top: 1px dashed var(--border-color, #e2e8f0); padding-top: 14px;
}
.fcr-hint { font-size: 12px; color: var(--text-muted, #64748b); text-align: center; }
.fcr-card .fcr-deckname { position: absolute; top: 10px; right: 14px; font-size: 11px; color: var(--text-muted, #64748b); }

.fcr-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fcr-grade {
    border-radius: 12px; padding: 12px 8px; font-size: 14px; font-weight: 800; cursor: pointer;
    border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fcr-grade small { font-size: 11px; font-weight: 600; opacity: 0.8; }
.fcr-grade.missed { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.fcr-grade.shaky  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.fcr-grade.got    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.fcr-grade:disabled { opacity: 0.5; cursor: default; }
.fcr-reveal { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }

.fcr-summary { text-align: center; display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.fcr-summary-icon { font-size: 44px; line-height: 1; }
.fcr-summary-title { font-size: 20px; font-weight: 800; color: var(--text-primary, #1e293b); margin: 0; }
.fcr-summary-counts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fcr-summary-counts span { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.fcr-summary-counts .got    { background: #d1fae5; color: #065f46; }
.fcr-summary-counts .shaky  { background: #fef3c7; color: #92400e; }
.fcr-summary-counts .missed { background: #fee2e2; color: #991b1b; }
.fcr-summary-points { font-size: 15px; font-weight: 800; color: #059669; }
.fcr-summary-note { font-size: 13px; color: var(--text-muted, #64748b); }
.fcr-summary-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.fcr-error { font-size: 13px; color: #b91c1c; text-align: center; }

@media (max-width: 640px) {
    .fcr-modal { padding: 16px; border-radius: 14px; }
    .fcr-front { font-size: 17px; }
    .fcr-card { min-height: 180px; padding: 20px 16px; }
}

/* ── v1.1.0: personal cards ("From your sessions") ───────────────────────── */
.fc-personal-intro { font-size: 13px; color: var(--text-muted, #64748b); margin: -4px 0 10px; }
.fc-personal-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600;
    color: var(--text-primary, #1e293b);
    border-left: 4px solid var(--brand-secondary, #d9a441);
}
.fc-spinner {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 2px solid var(--border-color, #e2e8f0); border-top-color: var(--brand-primary, #0EA5E9);
    animation: fc-spin .8s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-deck.fc-deck-personal { border-left: 4px solid #8b5cf6; }
.fcr-origin {
    align-self: flex-start; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
    background: #ede9fe; color: #5b21b6;
}

/* ── v1.2.0: runner clarity pass ─────────────────────────────────────────── */
.fcr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcr-meta:empty { display: none; }
.fcr-hist { font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); display: inline-flex; align-items: center; gap: 6px; }
.fcr-hist.known { color: #047857; }
.fcr-steps { display: inline-flex; gap: 3px; }
.fcr-steps i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color, #e2e8f0); display: inline-block; }
.fcr-steps i.on { background: #10b981; }
.fcr-ask {
    margin-top: 28px; padding-top: 18px; text-align: center;
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 16px; font-weight: 800; color: var(--text-primary, #1e293b);
}
.fcr-grade { padding: 12px 8px 10px; }
.fcr-grade small { font-size: 12px; font-weight: 600; opacity: 0.85; }
.fcr-summary-notes {
    list-style: none; padding: 0; margin: 0 auto; max-width: 440px;
    display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-primary, #1e293b);
}
/* Dashboard deck card: three-state bar + study meta */
.fc-segbar span.learn { background: #a7f3d0; }
.fc-deck-meta { font-size: 12px; color: var(--text-muted, #64748b); }
.fc-known-line .fc-muted { font-weight: 600; }
@media (max-width: 480px) {
    .fcr-grades { gap: 6px; }
    .fcr-grade { padding: 10px 4px 9px; font-size: 13.5px; }
    .fcr-grade small { font-size: 11px; white-space: nowrap; }
    .fcr-ask { margin-top: 20px; padding-top: 14px; font-size: 15px; }
}
/* v1.2.0 (same release, George: "space above AND below the buttons and the
   text"): explicit spacing around the grade block. NOTE: these elements sit
   inside .fcr-body (a block), so the modal's flex gap does NOT apply to
   them — only these margins do (measured 6px before this block). */
.fcr-progress { margin-bottom: 14px; }
.fcr-ask { margin-bottom: 16px; }
.fcr-grades + .fcr-hint { margin-top: 14px; margin-bottom: 4px; }
.fcr-reveal { margin-top: 22px; }
.fcr-reveal + .fcr-hint { margin-top: 12px; margin-bottom: 4px; }
.fcr-modal { padding-bottom: 26px; }
@media (max-width: 480px) {
    .fcr-ask { margin-bottom: 12px; }
    .fcr-grades + .fcr-hint { margin-top: 12px; }
    .fcr-modal { padding-bottom: 20px; }
}
/* Card content anchors to the top (was vertically centered in a 220px
   min-height, which left an empty band above the origin chip). */
.fcr-card { justify-content: flex-start; min-height: 180px; }

/* ── v1.3.0: simple + clear deck card ─────────────────────────────────────── */
.fc-deck-desc { color: var(--text-secondary, #475569); font-size: 13px; }
.fc-deck-count { font-size: 15px; font-weight: 700; color: var(--text-primary, #1e293b); }
.fc-deck-known { font-size: 14px; color: var(--text-primary, #1e293b); margin-top: -4px; }
.fc-deck-known strong { font-weight: 800; }
.fc-pbar { height: 10px; border-radius: 999px; background: var(--border-color, #e2e8f0); overflow: hidden; }
.fc-pbar span { display: block; height: 100%; border-radius: 999px; background: #10b981; min-width: 0; transition: width .4s ease; }
.fc-badge { color: var(--text-secondary, #475569); background: var(--bg-card, #fff); }
.fc-badge.fc-badge-next { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.fc-decks-personal { margin-top: 22px; }

/* ── v1.4.0: completed line + How it works ───────────────────────────────── */
.fc-deck-done { font-size: 15px; font-weight: 600; color: var(--text-primary, #1e293b); }
.fc-deck-done strong { font-weight: 800; }
.fc-mast-help {
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
}
.fc-mast-help:hover { background: rgba(255, 255, 255, 0.12); }
.fc-help {
    position: fixed; inset: 0; z-index: 10010; background: rgba(15, 23, 42, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.fc-help.fc-hidden { display: none !important; }
.fc-help-box {
    width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto;
    background: var(--bg-card, #fff); border-radius: 18px; padding: 22px 24px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.fc-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fc-help-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-primary, #1e293b); }
.fc-help-list { margin: 0; }
.fc-help-list dt { font-size: 15px; font-weight: 800; color: var(--text-primary, #1e293b); margin-top: 14px; }
.fc-help-list dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-primary, #1e293b); }
.fc-help-list b.g { color: #047857; }
.fc-help-list b.s { color: #b45309; }
.fc-help-list b.m { color: #b91c1c; }
.fc-help-foot { display: flex; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 640px) { .fc-mast-help { flex: 1; } }

/* ── v1.5.0: Lab-style section tabs + topic tiles ────────────────────────── */
.fc-tabs { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.fc-tab {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px; padding: 9px 18px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.fc-tab:hover { background: rgba(255, 255, 255, 0.18); }
.fc-tab.active { background: #fff; color: var(--brand-primary, #101d4f); border-color: #fff; font-weight: 800; }
.fc-tab-count {
    font-size: 12px; font-weight: 700; min-width: 22px; text-align: center;
    border-radius: 999px; padding: 1px 7px; background: rgba(255, 255, 255, 0.16);
}
.fc-tab.active .fc-tab-count { background: #e2e8f0; color: #334155; }
.fc-topic .fc-deck-title { font-size: 16px; }
.fc-tile-wait { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary, #475569); }
.fc-badge.fc-badge-mine { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
#fcAllDecks > .fc-decks { margin-top: 4px; }
@media (max-width: 640px) {
    .fc-tab { padding: 7px 13px; font-size: 13.5px; }
}

/* ── v1.5.1: period filter beside "Your progress" ────────────────────────── */
.fc-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }
.fc-progress-head .fc-section-title { margin: 0; }
.fc-progress-head select {
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary, #1e293b);
    background: var(--bg-card, #fff); border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 999px; padding: 7px 14px; cursor: pointer;
}

/* ── v1.5.2: round "?" help button ───────────────────────────────────────── */
.fc-mast-help.fc-mast-help-icon {
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; line-height: 1;
}
@media (max-width: 640px) { .fc-mast-help.fc-mast-help-icon { flex: none; } }

/* ── v1.5.3: period select chevron + Level band at the bottom ─────────────── */
.fc-progress-head select {
    -webkit-appearance: none; appearance: none;
    padding: 8px 40px 8px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.fc-level-band.fc-level-bottom { margin: 14px 0 0; }