/* Shared component policy, loaded after the page-specific layout styles. */
body { line-height: 1.6; }
.app-shell { width: min(1240px, 100%); padding: 0 var(--space-8) var(--space-12); }
.topbar { min-height: 80px; gap: var(--space-6); }
.brand-mark { background: var(--surface); border-color: var(--line); border-radius: var(--radius-md); }
.brand-block .product-label { font-size: 16px; font-weight: 700; }
.nav-tabs { background: transparent; border: 0; padding: 0; gap: 4px; border-radius: 0; }
.nav-tab { border-radius: var(--radius-sm); padding: 8px 10px; font-weight: 600; }
.nav-tab.active, .nav-tab.active:visited { background: var(--primary-soft); box-shadow: none; }
.topbar-actions { gap: var(--space-2); }
.topbar-actions .btn-secondary { background: transparent; border-color: transparent; }
.topbar-actions .btn-secondary:hover { background: var(--surface-muted); border-color: var(--line); }
.topbar-actions .nav-deck-btn { background: var(--primary-soft); border-color: var(--primary-line); border-radius: var(--radius-sm); color: var(--primary); }
.page-intro { padding: var(--space-8) 0 var(--space-6); }
.page-intro h1 { font-size: var(--text-title); line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; }
.page-intro p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); max-width: 68ch; }
html:lang(en) .copy-zh, html:lang(zh-CN) .copy-en { display: none; }
.btn { min-height: 42px; border-radius: var(--radius-sm); font-weight: 600; box-shadow: none; }
.btn-secondary, .btn-download, .btn-test { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover, .btn-download:hover, .btn-test:hover { background: var(--surface-muted); border-color: var(--line-strong); }
.btn-primary { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.icon-btn { border-radius: var(--radius-sm); }
:where(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
:where(button, .btn)[disabled] { cursor: not-allowed; }
.editor-panel, .audio-panel, .review-panel, .listen-panel, .episode-card { border-radius: var(--radius-md); box-shadow: none; border-color: var(--line); }
.editor-panel { min-width: 0; }
.output-panel { border-top-color: var(--line); }
.editor-grid { gap: var(--space-6); }
.panel-heading { min-height: 56px; background: var(--surface); padding: 12px 18px; }
.panel-heading h2 { font-size: var(--text-sm); font-weight: 650; }
.step-number { color: var(--muted); font-weight: 600; }
.editor-panel textarea { padding: 20px; font-size: var(--text-base); line-height: 1.8; }
textarea::placeholder, input::placeholder { color: var(--placeholder); }
.editor-footer { border-top: 0; font-size: var(--text-xs); }
.task-mode-band { padding-top: 0; border-bottom: 0; margin-bottom: var(--space-4); }
.task-segments { max-width: 780px; }
.segmented-control { background: var(--surface-muted); border-radius: var(--radius-sm); }
.segmented-control input:checked + span { color: var(--ink); box-shadow: 0 1px 3px rgba(32, 40, 46, 0.08); }
.advanced-settings { margin-top: var(--space-4); border-bottom: 1px solid var(--line); }
.advanced-settings > summary { display: flex; align-items: center; gap: var(--space-2); padding: 12px 0; color: var(--muted); font-size: var(--text-sm); list-style: none; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary::before { content: '+'; width: 16px; text-align: center; font-size: 18px; }
.advanced-settings[open] > summary::before { content: '−'; }
.advanced-settings .controls-band { margin-top: 0; padding-top: 8px; border-top: 0; border-bottom: 0; }
.action-row { margin: var(--space-4) 0 var(--space-6); }
.model-used, .model-used[data-quality="passed"], .model-used[data-quality="proofread"], .task-used[data-state="resolved"] { background: var(--surface-subtle); border-color: var(--line); color: var(--muted); }
.model-used { max-width: 170px; }
.badge { background: var(--surface-muted); color: var(--muted); border-color: var(--line); box-shadow: none; font-weight: 600; }
.today-review-banner { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.today-review-cta { background: var(--primary); color: var(--primary-contrast); }
.feynman-tip-banner, .buildup-section, .shadowing-panel { background: var(--surface-subtle); border-color: var(--line); box-shadow: none; }
.fb-variation { color: var(--ink); }
.btn-buildup-speak, .btn-buildup-record, .btn-feynman-mic, .btn-feynman-check, .btn-token-star { box-shadow: none; transform: none; }
.btn-buildup-speak, .btn-buildup-record, .btn-feynman-check { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-buildup-speak:hover, .btn-buildup-record:hover, .btn-feynman-check:hover { background: var(--surface-muted); border-color: var(--line-strong); transform: none; box-shadow: none; }
.btn-buildup-record.recording { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.mode-badge.mode-listen, .mode-badge.mode-speak, .mode-badge.mode-cloze, .mode-badge.mode-recognize, .mode-badge.mode-grammar { background: var(--surface-muted); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.count-learning strong, .count-review strong, .count-new strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn-listen-big { background: var(--primary); box-shadow: none; }
.btn-grade { background: var(--surface); border-color: var(--line-strong); border-radius: var(--radius-sm); }
.btn-grade.grade-1, .btn-grade.grade-2, .btn-grade.grade-3, .btn-grade.grade-4 { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-grade.grade-1 .grade-name, .btn-grade.grade-2 .grade-name, .btn-grade.grade-3 .grade-name, .btn-grade.grade-4 .grade-name { color: var(--ink); }
.btn-grade.grade-1:hover, .btn-grade.grade-2:hover, .btn-grade.grade-3:hover, .btn-grade.grade-4:hover { background: var(--surface-muted); border-color: var(--primary); }
.btn-grade.is-suggested { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.review-message, .listen-message { padding: var(--space-12) var(--space-6); }
.review-main, .listen-main { gap: var(--space-6); }
.game-hud { border-bottom: 0; padding: 12px 0 0; font-size: var(--text-xs); gap: 8px 12px; }
.hud-level { background: var(--surface-muted); color: var(--ink); }
.hud-xp-fill, .lane-bar span { background: var(--primary); }
.hud-streak svg, .hud-stat.is-done { color: var(--muted); }
.game-panel, .modal-dialog, .connection-popover, .word-popover { box-shadow: var(--shadow-overlay); }
.hud-hero, .hud-btn { border-radius: var(--radius-sm); }
.hud-hero { background: transparent; border-color: transparent; }
.hud-xp-bar { height: 4px; }
@media (max-width: 1100px) {
    .topbar { flex-wrap: wrap; gap: 12px; padding-block: 16px; }
    .nav-tabs { order: 3; width: 100%; }
    .nav-tab { flex: 1; justify-content: center; }
    .topbar-actions { margin-left: auto; }
}
@media (max-width: 640px) {
    .app-shell { padding: 0 var(--space-4) var(--space-8); }
    .page-intro { padding: var(--space-6) 0 var(--space-4); }
    .page-intro h1 { font-size: 25px; }
    .topbar { gap: 10px; }
    .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
    .brand-block { gap: 8px; }
    .brand-block .product-label { font-size: 14px; }
    .nav-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { padding: 8px 3px; font-size: 11.5px; }
    .nav-tab { padding: 9px 4px; font-size: 12px; }
    .panel-heading { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .panel-tools { flex-wrap: wrap; }
    .panel-tools .btn { min-height: 36px; padding: 0 10px; font-size: 12px; }
    .panel-tools .model-used { display: none; }
    .output-panel .panel-heading { flex-direction: row; min-height: 56px; align-items: center; }
    .output-panel .panel-tools { width: auto; margin-left: auto; }
    .output-panel .panel-tools .icon-btn { margin-left: 0; }
    .output-panel .task-used { display: none; }
    .topbar-actions .nav-history-btn { width: 36px; padding: 0; }
    .topbar-actions .nav-history-btn > [data-i18n="history"] { display: none; }
    .topbar-actions .lang-toggle { min-width: 36px; padding: 0 6px; }
    .deck-header { flex-wrap: wrap; gap: var(--space-3); }
    .deck-title-row { min-width: 0; }
    .deck-title-row h2 { white-space: normal; }
    .deck-playback { flex-wrap: wrap; justify-content: flex-start; }
    .editor-panel textarea { padding: 16px; }
    .editor-grid { gap: var(--space-4); }
    .action-buttons { width: 100%; }
    .action-buttons .btn-primary { width: 100%; min-height: 48px; }
    .review-panel, .listen-panel { padding: var(--space-4); }
    .review-message, .listen-message { padding: var(--space-8) var(--space-4); }
    .review-message h2, .listen-message h2 { font-size: 18px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Green only means "right" or "done", in small marks: never a page area or a category */
.cloze-result.correct { background: var(--surface-subtle); }
.cloze-result.correct > strong { color: var(--success); }
.cloze-result.correct > strong::before { content: "✓ "; }
.history-type-badge.tts-badge { background: var(--surface-muted); color: var(--ink); }

/* Header tools: one look for every control (buttons, settings, language) */
.topbar-actions .btn-secondary,
.topbar-actions .nav-deck-btn,
.topbar-actions .connection-settings summary,
.review-settings .new-limit-control {
    height: 38px;
    min-height: 38px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
}
.topbar-actions .btn-secondary:hover,
.topbar-actions .nav-deck-btn:hover,
.topbar-actions .connection-settings summary:hover,
.review-settings .new-limit-control:hover { background: var(--surface-muted); border-color: var(--line-strong); }
.topbar-actions .nav-deck-btn svg { color: var(--primary); }
.review-settings .new-limit-control { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 12px; color: var(--muted); cursor: pointer; }
.review-settings .new-limit-control select { height: 30px; min-height: 0; border: 0; background: transparent; color: var(--ink); font-weight: 700; padding: 0 6px; cursor: pointer; }
.review-settings .new-limit-control select:focus-visible { outline-offset: 0; }


/* Compact, keyboard-accessible appearance control shared by all pages. */
.theme-select {
    width: auto;
    max-width: 120px;
    height: 38px;
    min-height: 38px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
.theme-select:hover { border-color: var(--line-strong); }
/* No bright celebration flash during night-time review. */
:root[data-theme="dark"] .game-flash { display: none; }
:root[data-theme="dark"] ::selection { background: var(--primary-line); color: var(--ink); }
.topbar { padding-block: 12px; }
:root[data-theme="dark"] .game-banner {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
:root[data-theme="dark"] .game-banner.is-level span { color: var(--muted); }
:root[data-theme="dark"] .game-banner.is-error strong { color: var(--danger); }


/* Header: one row of square icon controls (theme + language match their neighbours) */
.topbar-actions, .site-nav { flex-wrap: nowrap; }
.topbar-actions > *, .site-nav > .theme-select, .site-nav > .lang-toggle { flex-shrink: 0; }
.topbar-actions .theme-select, .site-nav .theme-select {
    -webkit-appearance: none;
    appearance: none;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    padding: 0;
    color: transparent;
    text-indent: -999px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.9 4.9 1.4 1.4'/%3E%3Cpath d='m17.7 17.7 1.4 1.4'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.3 17.7-1.4 1.4'/%3E%3Cpath d='m19.1 4.9-1.4 1.4'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:root[data-theme="dark"] .topbar-actions .theme-select,
:root[data-theme="dark"] .site-nav .theme-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.9 4.9 1.4 1.4'/%3E%3Cpath d='m17.7 17.7 1.4 1.4'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.3 17.7-1.4 1.4'/%3E%3Cpath d='m19.1 4.9-1.4 1.4'/%3E%3C/svg%3E");
}
.theme-select:hover { background-color: var(--surface-muted); }
.theme-select option { color: var(--ink); background: var(--surface); text-indent: 0; }
.topbar-actions .lang-toggle, .site-nav .lang-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    font-size: 13px;
}
@media (max-width: 1100px) {
    .topbar-actions { gap: var(--space-2); }
}
@media (max-width: 640px) {
    .topbar-actions { width: 100%; margin-left: 0; }
    .topbar-actions .lang-toggle { min-width: 38px; padding: 0; }
}
@media (max-width: 400px) {
    .topbar-actions .nav-deck-btn > [data-i18n="reviewBtn"] { display: none; }
}

/* Daily navigation, specialist practice, then preferences. */
.header-organized { justify-content: space-between; }
.header-organized .nav-tabs { overflow: visible; width: auto; order: initial; flex: 1; justify-content: center; }
.header-organized .nav-tab { flex: initial; font-size: 14px; padding: 9px 12px; white-space: nowrap; }
.header-organized .nav-tabs > .nav-tab > svg { display: none; }
.header-organized .topbar-actions { width: auto; margin-left: 0; }
.header-disclosure { position: relative; }
.header-disclosure > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.header-disclosure > summary::-webkit-details-marker { display: none; }
.header-disclosure > summary::after { content: '⌄'; }
.header-disclosure > summary:hover, .header-disclosure[open] > summary { background: var(--surface-muted); color: var(--ink); }
.header-disclosure > summary.active { background: var(--primary-soft); color: var(--primary); }
.header-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; max-width: calc(100vw - 32px); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-overlay); z-index: 1000; max-height: calc(100dvh - 160px); overflow-y: auto; }
.practice-menu .header-menu { width: 220px; }
.practice-menu .nav-tab { display: flex; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--muted); }
.preference-row .theme-select { appearance: auto; width: 130px; min-width: 0; max-width: 130px; padding: 0 8px; color: var(--ink); text-indent: 0; background: var(--surface-subtle); }
:root[data-theme="dark"] .preference-row .theme-select { background-image: none; }
.preference-row #user-auth-btn { width: auto; max-width: 150px; padding: 0 8px; }
.preference-row #user-auth-status-text { display: inline; overflow: hidden; text-overflow: ellipsis; }
.preferences-menu .connection-settings { width: 100%; border-top: 1px solid var(--line); padding-top: 8px; }
.preferences-menu .connection-settings > summary { width: 100%; justify-content: flex-start; padding: 8px; }
.preferences-menu .connection-settings .summary-label { display: inline; }
.preferences-menu .connection-popover { position: static; width: 100%; min-width: 0; margin-top: 8px; padding: 8px; border: 0; box-shadow: none; }
.preferences-menu .connection-test-row { flex-wrap: wrap; }
.preferences-menu .connection-field select { max-width: 100%; }
.page-intro-actions { display: flex; gap: 8px; margin-top: 12px; }
.game-hud { justify-content: flex-start; padding-top: 10px; }
.game-hud > .hud-hero { order: 2; margin-left: auto; min-height: 38px; }
.game-hud > .hud-today { order: 1; }
.game-hud > .hud-week, .game-hud > .hud-streak, .game-hud > .hud-focus,
.game-hud > .hud-spacer, .game-hud > .hud-log, .hud-hero > .hud-xp { display: none !important; }
.game-progress-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 800px) {
    .header-organized { flex-wrap: wrap; gap: 8px; }
    .header-organized .nav-tabs { order: 3; width: 100%; flex: auto; justify-content: space-between; }
    .header-organized .nav-tab { padding: 9px 8px; font-size: 13px; }
    .header-organized .practice-menu > summary { padding: 9px 8px; font-size: 13px; }
    .header-organized .brand-block .product-label { font-size: 14px; }
    .header-organized .nav-tabs #open-deck-btn [data-i18n="reviewBtn"] { display: inline; }
    .game-hud { flex-wrap: nowrap; gap: 8px; }
    .hud-hero { gap: 6px; padding: 4px; }
    .hud-progress-label { font-size: 12px; }
}
.game-progress-summary > :not([hidden]) { display: inline-flex; }
.game-progress-summary .hud-focus span { display: inline; }
.game-hud .hud-today > span { display: inline; }
.game-hud .hud-today::after { content: none; }