/*
 * puzzle-suite.css — Cascade Layer Architecture (Step 6 of refactor)
 *
 * Layer order (lowest → highest specificity wins):
 *   base       CSS variables, reset, :root, typography
 *   layout     Sidebar, main area, app shell, page grid
 *   components Per-component styles (modal, toast, word-list, grids…)
 *   pages      Page-specific puzzle view styles (.mode-search, .mode-cw…)
 *   utils      Utility classes (.sr-only, focus rings, print overrides)
 *
 * Rules not wrapped in @layer sit above all layers (implicit layer).
 * This lets us progressively migrate sections without breakage.
 */
@layer base, layout, components, pages, utils;

/* ============================================================
   BASE — CSS custom properties, resets, root typography
   ============================================================ */
@layer base {

:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #e0e7ff;
    --bg-app: #f1f5f9;
    --bg-panel: #ffffff;
    --border: #cbd5e1;
    --text-main: #0f172a;
    --text-muted: #475569;
    --danger: #ef4444;
    --success: #10b981;
    --input-bg: #f8fafc;
    --track-bg: #cbd5e1;

    --sidebar-width: 420px;
    --radius: 12px;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-paper: 0 10px 25px -5px rgba(0, 0, 0, 0.15);

    --user-font: 'Inter', sans-serif;
    --wm-opacity: 0.15;
    --global-font-scale: 1;
    --title-scale: 1;
    --page-width: 210mm;
    --page-height: 297mm;

    --ws-bg-color: rgba(255, 255, 255, 1);
    --cw-bg-color: rgba(255, 255, 255, 1);
    --ws-line-width: 1px;
    --cw-line-width: 1px;
    --ws-neg-margin: -1px;
    --cw-neg-margin: -1px;

    --notes-font-size: 14px;
    --notes-term-width: 20%;
}

/* Dark Mode Variables & Overrides */
[data-theme="dark"] {
    --primary: #818cf8;
    /* High-visibility brighter indigo for dark mode handles */
    --primary-hover: #a5b4fc;
    --primary-light: #3730a3;
    --bg-app: #0f172a;
    --bg-panel: #1e293b;
    --border: #334155;
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --input-bg: #0f172a;
    --track-bg: #475569;
    /* Distinct track background for sliders/toggles */
    --ws-bg-color: transparent;
    --cw-bg-color: transparent;
    --hover-bg: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .setting-card,
[data-theme="dark"] .export-card,
[data-theme="dark"] .status-bar,
[data-theme="dark"] .wm-container,
[data-theme="dark"] .page-tabs,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .preview-toolbar,
[data-theme="dark"] .sortable-item,
[data-theme="dark"] .file-upload-wrapper,
[data-theme="dark"] .btn-sec {
    background: #1e293b;
    color: var(--text-main);
    border-color: var(--border);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--input-bg);
    color: #f8fafc;
    border-color: var(--border);
}

[data-theme="dark"] .wm-row:hover {
    background: #0f172a;
}

[data-theme="dark"] .wm-row:focus-within {
    background: #1e293b;
}

[data-theme="dark"] details.setting-card summary {
    background: #1e293b;
    color: var(--text-main);
}

[data-theme="dark"] .scroll-area {
    background: #0f172a;
}

[data-theme="dark"] .nav-tab:hover {
    background: #0f172a;
}

[data-theme="dark"] .sortable-item.dragging {
    background: #334155;
    border-color: var(--text-muted);
}

} /* end @layer base */

/* ============================================================
   LAYOUT — App shell: sidebar, main area, page grid
   ============================================================ */
@layer layout {

/* Pages always remain white */
.page {
    background: white;
    color: #0f172a;
}

.page .cell,
.page .notes-text,
.page .disp-title,
.page .disp-sub,
.page .disp-instruction {
    color: #0f172a !important;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.notes-editable:focus-visible {
    outline: none;
}

.sortable-item:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Drag and Drop Overlay */
#drop-zone {
    position: fixed;
    inset: 0;
    background: rgba(79, 70, 229, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    color: white;
}

#drop-zone.active {
    opacity: 1;
    pointer-events: all;
}

.drop-content {
    border: 4px dashed rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 60px 100px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    font-family: var(--user-font);
}

aside {
    width: var(--sidebar-width);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.04);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
}

body.sidebar-closed aside {
    margin-left: calc(var(--sidebar-width) * -1);
}

.brand {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-panel);
}

.brand h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand .brand-icon {
    color: #fff;
    background: var(--primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.brand-actions {
    display: flex;
    gap: 4px;
}

.brand-actions button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.brand-actions button:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Visible focus ring for keyboard users (icon-only buttons can otherwise
   look identical when focused vs. blurred). */
.brand-actions button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Visual separator between safe app actions and the destructive "reset". */
.brand-actions-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
    align-self: center;
}

/* Reset button: red-tinted on hover/focus so destructive intent is obvious. */
.brand-action--danger:hover,
.brand-action--danger:focus-visible {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.10);
}
.brand-action--danger:focus-visible {
    outline-color: #dc2626;
}

.nav-tabs {
    display: flex;
    padding: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.nav-tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-tab:hover {
    color: var(--primary);
    background: var(--bg-app);
}

.nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent;
}

.scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-app);
}

} /* end @layer layout */

/* ============================================================
   COMPONENTS — Per-component styles
   (setting-card, word-list, modal, toast, grids, notes, etc.)
   ============================================================ */
@layer components {

details.setting-card {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-panel);
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

details.setting-card[open] {
    border-color: var(--border);
    border-left-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Enhancing Settings Delineation */
details.setting-card summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    background: var(--input-bg);
    transition: background 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

details.setting-card[open] summary {
    border-bottom: 1px solid var(--border);
}

details.setting-card summary:hover {
    background: var(--input-bg);
}

details.setting-card summary::after {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

details.setting-card[open] summary::after {
    transform: rotate(180deg);
}

[data-theme="dark"] details.setting-card summary {
    background: #1e293b;
    color: var(--text-main);
}

.card-content {
    padding: 18px;
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Horizontal logical divider */
.form-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    border: none;
    width: 100%;
    opacity: 0.6;
}

label.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.field-label--spaced { margin-top: 6px; }

/* Small difficulty colour dot used on per-page font-scale labels and the
   formula bulk-toggle buttons. Colour comes from the modifier class. */
.diff-dot { font-size: 9px; margin-right: 4px; }
.diff-dot--easy   { color: #10b981; }
.diff-dot--medium { color: #f59e0b; }
.diff-dot--hard   { color: #ef4444; }
.diff-dot--key    { color: #6366f1; }
.formula-bulk-btn.diff-dot--easy,
.formula-bulk-btn.diff-dot--medium,
.formula-bulk-btn.diff-dot--hard { font-size: inherit; margin-right: 0; }

/* Inline icon preceding a field label / toggle label */
.field-icon { margin-right: 4px; opacity: 0.7; }
/* Intro line at the top of a setting card's content */
.card-intro { margin: 0 0 8px; color: var(--text-muted); line-height: 1.3; }
.card-content--compact { font-size: 12px; }

/* ── NESA syllabus mode toggle ──────────────────────────────────────────
   When NESA mode is OFF the body gets .nesa-off, which:
   - hides the "NESA " text prefix in the STAGE section label;
   - hides the per-topic outcomes accordion;
   - hides the Outcomes Header / Outcome Chips toggles in Settings (they
     have no effect — the renderers also short-circuit them).
   Underlying outcome data is preserved; flipping back ON restores everything. */
.nesa-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 12px 0;
    padding: 8px 12px;
    border-radius: 7px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.18);
    font-size: 0.82rem;
}
.nesa-mode-label {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-main); cursor: pointer; user-select: none;
}
.nesa-mode-icon { color: var(--primary); opacity: 0.85; }

body.nesa-off [data-nesa-prefix] { display: none; }
body.nesa-off [data-nesa-only]   { display: none !important; }

.section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: inherit;
}

.cap-page-hint {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    margin-top: 6px;
    line-height: 1.45;
}

input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--input-bg);
    transition: all 0.2s;
    color: var(--text-main);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
    background: var(--bg-panel);
}

.input-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.slider-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 600;
}

input[type=range] {
    flex: 2;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 0;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: var(--track-bg);
    border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: -7px;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type=range]:focus-visible {
    outline: none;
}
input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--bg-panel), 0 0 0 5px var(--primary);
}
input[type=range]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--bg-panel), 0 0 0 5px var(--primary);
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.toggle-row > label:first-child {
    display: flex;
    align-items: center;
    gap: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;   /* a wrapping label must not squash the switch (seen at 320 px) */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--track-bg);
    transition: .3s;
    border-radius: 24px;
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked+.slider-switch {
    background-color: var(--primary);
}

input:checked+.slider-switch:before {
    transform: translateX(20px);
}

input:focus-visible+.slider-switch {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sortable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sortable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sortable-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sortable-item.dragging {
    opacity: 0.6;
    border: 1px dashed var(--text-muted);
    cursor: grabbing;
    box-shadow: none;
}

.sortable-item .drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: 1rem;
}

.sortable-item:hover .drag-handle {
    color: var(--primary);
}

.sortable-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sortable-item span {
    flex: 1;
    color: var(--text-main);
}

.file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: 0.2s;
    background: var(--input-bg);
    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.file-upload-wrapper.has-watermark {
    border-style: solid;
    border-color: #10b981;
}
.file-upload-wrapper.has-watermark .file-upload-icon { color: #10b981; }
.file-upload-wrapper.has-watermark:hover { border-color: #059669; background: #f0fdf4; }
[data-theme="dark"] .file-upload-wrapper.has-watermark:hover { background: #052e16; }

.file-upload-wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-icon {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 8px;
}

.file-upload-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.status-bar {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.status-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.status-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.icon-success {
    background: #d1fae5;
    color: #059669;
}

.icon-warning {
    background: #fef3c7;
    color: #d97706;
}

.icon-generating {
    background: var(--primary-light);
    color: var(--primary);
}

.wm-container {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-panel);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 420px);
    overflow-y: auto;
}

.wm-row {
    display: flex;
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 6px 0;
    transition: background 0.15s;
}

.wm-row:last-child {
    border-bottom: none;
}

.wm-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 12px 0 14px;
    flex-shrink: 0;
}

.wm-status.placed {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.wm-status.failed {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.wm-input {
    border: none;
    padding: 8px 6px;
    font-size: 0.85rem;
    background: transparent;
    width: 100%;
    color: var(--text-main);
    font-family: inherit;
    transition: 0.15s;
}

.wm-input:focus {
    box-shadow: none;
    border: none;
    background: var(--input-bg);
    border-radius: 4px;
}

.wm-word {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.04em;
}

.wm-clue {
    color: var(--text-muted);
    font-weight: 500;
}

.resize-handle {
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 100;
    transition: background 0.2s;
}

.resize-handle:hover,
.resize-handle.active {
    background: var(--primary);
}

.wm-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    border-radius: 8px;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-right: 6px;
}

.wm-btn:hover {
    color: var(--danger);
    background: #fef2f2;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.3;
}

.footer-actions {
    padding: 16px 20px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.btn-main {
    background: var(--primary);
    color: white;
    border: none;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px -1px rgba(79, 70, 229, 0.3);
    flex: 1;
    font-family: inherit;
}

.btn-main:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.4);
}

.btn-main:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-main:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-sec {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.btn-sec:hover {
    border-color: var(--text-muted);
    background: var(--input-bg);
}

.btn-sec:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

main {
    flex: 1;
    background: #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.toggle-sidebar {
    /* Fixed to the edge of the open sidebar (never over its footer buttons) and
       slides to the screen corner when the sidebar is closed. */
    position: fixed;
    bottom: 20px;
    left: calc(var(--sidebar-width) + 16px);
    z-index: 100;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s, box-shadow 0.2s;
    font-size: 1.1rem;
}
body.sidebar-closed .toggle-sidebar { left: 20px; }

.toggle-sidebar:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.45);
}

.preview-toolbar {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    /* Page tabs sit on the left; the preview tools (Diagrams + zoom) group on
       the right behind a single divider. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    z-index: 20;
}
.toolbar-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-tabs {
    display: flex;
    background: var(--input-bg);
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
    border: 1px solid var(--border);
}

.page-btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.15s;
    font-family: inherit;
}

.page-btn i {
    font-size: 0.75rem;
    opacity: 0.8;
}

.page-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

.page-btn.active {
    background: var(--bg-panel);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
}

/* Difficulty-colored active states — higher specificity wins over .page-btn.active */
.page-btn[data-page="1"].active { color: #10b981; border-bottom-color: #10b981; }
.page-btn[data-page="2"].active { color: #f59e0b; border-bottom-color: #f59e0b; }
.page-btn[data-page="3"].active { color: #ef4444; border-bottom-color: #ef4444; }
.page-btn[hidden] { display: none; }
.page-btn-blank { border: 1px dashed var(--border); }

/* Duplex padding preview: a dashed, empty sheet (preview-only, never exported) */
.page.page-blank {
    background: transparent;
    border: 2px dashed #94a3b8;
    box-shadow: none;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}
.page.page-blank.visible { display: flex; }
.page.page-blank .blank-sheet-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b !important;
}
.page.page-blank .blank-sheet-note i { font-size: 1.6rem; opacity: 0.6; }
.page.page-blank .blank-sheet-footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 15mm;
    text-align: center;
    font-size: 7pt;
    color: #c8c8c8;
}
.page.page-blank .blank-sheet-footer[hidden] { display: none; }
[data-theme="dark"] .page.page-blank { border-color: #64748b; }
[data-theme="dark"] .page.page-blank .blank-sheet-note { color: #94a3b8 !important; }

.zoom-display {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    /* Now a <button> so clicking resets to 100%. Neutralise default button styling. */
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: 0.15s;
}
.zoom-display:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}
.zoom-display:focus-visible,
.zoom-btn:focus-visible,
.page-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.zoom-display-icon {
    font-size: 9px;
    opacity: 0.55;
}

/* Preview-toolbar quick toggles (e.g. "Diagrams" on/off). Grouped with the
   zoom controls in the right-hand tool cluster. Mirrors a buried Settings
   option so it's one click away. */
.preview-quick-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
}
.quick-toggle:hover { background: var(--primary-light); }
.quick-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.quick-toggle > i { font-size: 0.85em; }

/* Off state — dimmed so users see at a glance that diagrams are hidden. */
.quick-toggle--off {
    color: var(--text-muted);
    background: transparent;
}
.quick-toggle--off::after {
    content: ' OFF';
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 1px solid var(--border);
    padding-left: 16px;
}

.zoom-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

.viewport {
    flex: 1;
    overflow: auto;
    padding: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.page {
    width: var(--page-width);
    min-height: var(--page-height);
    background: white;
    padding: 15mm;
    box-shadow: var(--shadow-paper);
    margin-bottom: 40px;
    display: none;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transform-origin: top center;
    transition: transform 0.2s ease, margin 0.2s ease;
    border-radius: 2px;
    /* Keep true paper width — the preview scales the page to fit (ui/zoom.js) instead
       of letting flexbox squash it into unreadable columns on narrow screens. */
    flex-shrink: 0;
}

.page.visible {
    display: flex;
}


.watermark-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    opacity: var(--wm-opacity);
    pointer-events: none;
    z-index: 0;
    display: none;
}

.page-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.header {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
}

.title-block h1 {
    margin: 0;
    font-size: calc(2.4rem * var(--global-font-scale) * var(--page-scale) * var(--title-scale, 1));
    text-transform: uppercase;
    line-height: 1;
    font-family: var(--user-font);
    color: #000;
    letter-spacing: -0.02em;
}

.title-block p {
    margin: 6px 0 0 0;
    font-style: italic;
    color: #555;
    font-size: calc(1rem * var(--global-font-scale) * var(--page-scale) * var(--title-scale, 1));
    font-family: var(--user-font);
}

.disp-instruction {
    margin: 6px 0 16px 0;
    font-size: calc(0.85rem * var(--global-font-scale) * var(--page-scale));
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--user-font);
    flex-shrink: 0;
}

.meta-block {
    text-align: right;
    font-size: calc(0.9rem * var(--global-font-scale) * var(--page-scale));
    font-family: var(--user-font);
    width: 220px;
}

.line {
    border-bottom: 1px solid #999;
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 8px;
}

.line span {
    color: #666;
    font-size: calc(0.75rem * var(--global-font-scale) * var(--page-scale));
    margin-bottom: 2px;
    margin-right: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.puzzle-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    width: 100%;
}

.grid {
    display: grid;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
    border: none;
    gap: 0;
}

} /* end @layer components */

/* ============================================================
   PAGES — Puzzle page-type specific styles (.mode-search,
   .mode-cw, .scramble-*, .notes-*, .split-*, keys)
   ============================================================ */
@layer pages {

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;
    font-family: 'Courier New', monospace;
    color: #000;
    z-index: 1;
    box-sizing: border-box;
    overflow: visible;
}

.mode-search.grid {
    background-color: var(--ws-bg-color);
}

/* Bind grid text size smoothly to cell slider size */
.mode-search .cell {
    font-size: calc(var(--cell-size) * 0.6);
    background-color: var(--ws-bg-color);
    border: var(--ws-line-width) solid #000;
    margin-top: var(--ws-neg-margin);
    margin-left: var(--ws-neg-margin);
}

.mode-search.with-internal-grid .cell {
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0;
}

table.mode-cw {
    background: transparent;
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table.mode-cw td.cell {
    font-size: calc(var(--cell-size) * 0.55);
    background-color: var(--cw-bg-color);
    width: var(--cell-size);
    height: var(--cell-size);
    min-width: var(--cell-size);
    max-width: var(--cell-size);
    min-height: var(--cell-size);
    max-height: var(--cell-size);
    box-sizing: border-box;
    border: var(--cw-line-width) solid #000;
    padding: 0;
    margin: 0;
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    z-index: 5;
}

table.mode-cw td.cell.empty {
    background: transparent;
    border: none;
    z-index: 0;
}

.cell-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 0.32em;
    line-height: 1;
    font-family: sans-serif;
    color: #333;
}

.cell-char {
    opacity: 0;
}

.scramble-container {
    width: 100%;
    column-count: 2;
    column-gap: 40px;
}

.scramble-item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 24px;
    break-inside: avoid;
    page-break-inside: avoid;
    font-family: var(--user-font);
    width: 100%;
}

.scramble-text {
    font-size: calc(1.3rem * var(--global-font-scale) * var(--page-scale));
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 15px;
    min-width: 80px;
    max-width: 200px;
    text-align: left;
    font-family: monospace;
    flex-shrink: 0;
    word-break: break-all;
}

.scramble-line {
    flex: 1;
    border-bottom: 2px solid #000;
    height: 10px;
    min-width: 50px;
}

.scramble-hint {
    font-size: calc(0.9rem * var(--global-font-scale) * var(--page-scale));
    color: var(--text-muted);
    margin-left: 10px;
    font-family: var(--user-font);
    white-space: nowrap;
}

.pdf-force-key .cell-char {
    opacity: 1 !important;
    color: var(--danger) !important;
    font-weight: bold;
}

.key-overlay .cell {
    background-color: #f8fafc !important;
}

.pdf-force-key .mode-search .cell.found {
    color: var(--danger) !important;
    font-weight: 900;
}

.pdf-force-key .mode-search .cell.found::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--danger);
    border-radius: 50%;
    pointer-events: none;
}

.word-bank-styled {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: center;
    font-family: var(--user-font);
    font-size: calc(10.5pt * var(--global-font-scale) * var(--page-scale));
    line-height: 1.4;
    width: 100%;
}

.wb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.wb-check {
    width: 14px;
    height: 14px;
    border: 1px solid #333;
    display: inline-block;
    background: white;
    border-radius: 3px;
}

.clues-two-col {
    display: flex;
    gap: 32px;
    font-family: var(--user-font);
    font-size: calc(10pt * var(--global-font-scale) * var(--page-scale));
    text-align: left;
    width: 100%;
    align-items: flex-start;
}

.clue-col {
    flex: 1;
    min-width: 0;
}

.clue-group-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: calc(0.85rem * var(--global-font-scale) * var(--page-scale));
    margin-bottom: 8px;
    border-bottom: 2px solid #000;
    padding-bottom: 2px;
    break-after: avoid;
    margin-top: 12px;
}

.clue-group-title.first {
    margin-top: 0;
}

.clue-row {
    margin-bottom: 6px;
    line-height: 1.35;
    display: flex;
    align-items: baseline;
    break-inside: avoid;
}

.clue-num-bold {
    font-weight: 700;
    min-width: 24px;
    margin-right: 4px;
}

.split-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.split-half {
    flex: 1;
    border: 2px dashed #cbd5e1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    min-height: 0;
}

.split-title {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary);
    font-family: var(--user-font);
    margin-bottom: 8px;
    font-size: calc(0.8rem * var(--global-font-scale) * var(--page-scale));
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    width: 100%;
}

.scramble-solution {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: calc(0.85rem * var(--global-font-scale) * var(--page-scale));
    font-family: monospace;
    overflow-y: auto;
}

.scr-sol-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 4px 0;
}

#loading-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 1);
    color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.progress-container {
    width: 320px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 20px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.2s;
    box-shadow: 0 0 10px var(--primary);
}

#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 150;
    display: none;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal {
    background: var(--bg-panel);
    width: 500px;
    max-width: 90vw;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.modal textarea {
    height: 200px;
    resize: vertical;
    margin-bottom: 20px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--input-bg);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.modal textarea:focus {
    border-color: var(--primary);
    outline: none;
    background: var(--bg-panel);
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: white;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #0f172a;
    border: 1px solid var(--border);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    border-left: 5px solid var(--success);
}

.toast.error {
    border-left: 5px solid var(--danger);
}
.toast.warning {
    border-left: 5px solid #f59e0b;
}
.toast.info {
    border-left: 5px solid #3b82f6;
}

.toast.warning {
    border-left: 5px solid #f59e0b;
}

.toast.info {
    border-left: 5px solid #3b82f6;
}

.toast i {
    font-size: 1.2rem;
}

.toast.success i {
    color: var(--success);
}

.toast.error i {
    color: var(--danger);
}
.toast.warning i {
    color: #f59e0b;
}
.toast.info i {
    color: #3b82f6;
}

.toast.warning i {
    color: #d97706;
}

.toast.info i {
    color: #3b82f6;
}

#file-input {
    display: none;
}

@media (max-width: 900px) {
    body.sidebar-closed aside {
        margin-left: -100%;
    }

    /* The drawer is 85% wide (max 400px): park the toggle just outside it. */
    .toggle-sidebar { left: calc(min(85%, 400px) + 12px); }
    body.sidebar-closed .toggle-sidebar { left: 16px; }

    aside {
        position: absolute;
        height: 100%;
        width: 85%;
        max-width: 400px;
    }

    body:not(.sidebar-closed) main {
        margin-left: 0;
        filter: brightness(0.5);
        pointer-events: none;
    }

    .viewport {
        padding: 30px 16px;
    }

    .preview-toolbar {
        padding: 10px;
        gap: 8px;
        /* Stack/wrap on narrow screens — drop the 3-column grid. */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .preview-toolbar > .preview-quick-toggles,
    .preview-toolbar > .page-tabs,
    .preview-toolbar > .zoom-controls { justify-self: auto; }

    .page-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .zoom-controls {
        margin-left: 0;
        padding-left: 8px;
    }

}

.loading-icon {
    font-size: 3.5rem;
    color: var(--primary);
}

.loading-label {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 24px;
}

.modal-title {
    margin: 0 0 10px 0;
    color: var(--text-main);
    font-size: 1.5rem;
}

.modal-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-auto {
    width: auto;
}

.button-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.flex-1 {
    flex: 1;
}

.btn-clear-list {
    width: 100%;
    margin-top: 10px;
    color: var(--text-muted);
    border-color: var(--border);
    justify-content: center;
    font-size: 0.8rem;
    padding: 10px;
}

.btn-clear-list:hover {
    color: var(--danger);
    border-color: #fecaca;
    background: rgba(239, 68, 68, 0.1);
}

.card-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.flex-2 {
    flex: 2;
}

.input-small-center {
    width: 80px;
    text-align: center;
}

.label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.action-link {
    color: var(--primary);
    cursor: pointer;
    font-size: 0.7rem;
    white-space: nowrap;
    padding: 6px 10px;
    background: var(--primary-light);
    border-radius: 6px;
    transition: 0.2s;
    font-weight: 600;
}

.action-link:hover {
    background: var(--primary-hover);
    color: white;
}

.input-inline {
    flex: 1;
}

.export-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.bulk-export-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.input-large-center {
    font-size: 1.5rem;
    text-align: center;
    width: 80px;
    font-weight: 700;
    color: var(--primary);
    padding: 8px;
}

.text-bold-small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.btn-remove-watermark {
    margin-top: 16px;
    width: 100%;
    color: var(--danger);
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.btn-remove-watermark:hover {
    background: #fef2f2;
}

.notes-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--user-font);
    font-size: calc(var(--notes-font-size) * var(--global-font-scale) * var(--page-scale));
}

.notes-row {
    display: flex;
    border-bottom: 1px solid #cbd5e1;
    padding: 8px 0;
    align-items: flex-start;
}

.notes-row:last-child {
    border-bottom: 2px solid #000;
}

.notes-num {
    width: 30px;
    font-weight: 700;
    color: #666;
    flex-shrink: 0;
    padding-top: 2px;
}

.notes-word {
    width: var(--notes-term-width);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-right: 16px;
    word-break: break-word;
}

.notes-clue {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.notes-clue .notes-editable {
    flex: 1;
    min-width: 0;
}

.notes-editable {
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid transparent;
    padding: 4px;
    border-radius: 6px;
    cursor: text;
    display: block;
    word-break: break-word;
}

.notes-editable:hover {
    background: rgba(0, 0, 0, 0.03);
}

.notes-editable:focus {
    outline: none;
    background: transparent;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.notes-clue-length {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9em;
    flex-shrink: 0;
    padding-top: 5px;
    white-space: nowrap;
}

.hide-term .notes-word,
.hide-term .notes-word-header {
    display: none !important;
}

.hide-def .notes-clue,
.hide-def .notes-clue-header {
    display: none !important;
}

.notes-header {
    display: flex;
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(0.75rem * var(--global-font-scale) * var(--page-scale));
    color: #666;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
    margin-bottom: 0;
}

.notes-word-header {
    width: var(--notes-term-width);
    flex-shrink: 0;
    padding-right: 16px;
}

.notes-clue-header {
    flex: 1;
}

.slider-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 45px;
    text-align: right;
}

.footer-area {
    flex-shrink: 0;
    margin-top: 20px;
}
} /* end @layer pages */

/* ============================================================
   UTILS — Screen-reader helpers, focus rings, print overrides
   ============================================================ */
@layer utils {

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High-visibility focus ring for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

@media print {
    aside, .preview-toolbar, .page-tabs, #loading-overlay,
    .toggle-sidebar, #toast-container, #modal-overlay { display: none !important; }
    .viewport { padding: 0; }
    .page { box-shadow: none; margin: 0; }
}

/* Respect users who prefer reduced motion — neutralise the nav transitions
   (tab/accordion chevrons, sidebar collapse, button lift) and animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

} /* end @layer utils */

/* =============================================================
   AI Word Generation — only what the existing system can't cover
   ============================================================= */
@layer components {

/* Trigger button in editor panel */
.btn-ai-generate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    letter-spacing: 0.02em;
}
.btn-ai-generate:hover  { opacity: 0.88; }
.btn-ai-generate:active { transform: scale(0.98); }

.ai-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Modal overlay */
#gen-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Modal container — reuses .modal sizing, adds scroll */
.ai-modal {
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sticky header */
.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 1;
    border-radius: var(--radius) var(--radius) 0 0;
}
.ai-modal-header .modal-title {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* setting-cards inside modal lose outer margin */
.ai-modal .setting-card { margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; box-shadow: none; }
.ai-modal .setting-card:last-of-type { border-bottom: none; }

/* "Get free key" inline link next to API Key label */
.ai-key-link {
    font-size: 0.74rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    float: right;
}
.ai-key-link:hover { text-decoration: underline; }

/* Hint text under API key field */
.ai-key-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}

/* Status banner (loading / error) */
.ai-status {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.83rem;
    line-height: 1.5;
    border: 1px solid var(--border);
}
.ai-status.loading {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}
.ai-status.error {
    background: rgba(239,68,68,0.1);
    color: var(--danger);
    border-color: var(--danger);
}
[data-theme="dark"] .ai-status.error {
    background: rgba(239,68,68,0.18);
}

/* Generated word results list */
.ai-results-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ai-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.ai-result-item:last-child { border-bottom: none; }
.ai-result-item:hover { background: var(--bg-app); }
.ai-result-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
.ai-result-word {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 90px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    color: var(--text-main);
}
.ai-result-clue {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Spinner */
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
    vertical-align: middle;
}

/* Generate button disabled state */
#ai-generate-btn:disabled { opacity: 0.55; cursor: not-allowed; }

} /* end @layer components (AI) */

/* ============================================================
   MATHS SUITE — Clue bank, filter bar, problem set, topic badges
   ============================================================ */
@layer components {

/* Filter bar (above clue bank in Editor tab) */
.filter-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.filter-select {
    font-size: 0.8rem;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text-main);
    cursor: pointer;
}

/* Clue bank row (replaces simple word+clue layout) */
.clue-inputs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.clue-row-top {
    display: flex;
    gap: 4px;
    align-items: center;
}
.wm-select {
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.72rem;
    padding: 2px 4px;
    background: var(--bg-panel);
    color: var(--text-main);
    cursor: pointer;
    flex-shrink: 0;
}
.topic-select {
    font-weight: 700;
    max-width: 90px;
}
.diff-select {
    max-width: 68px;
}

/* KaTeX rendered preview below clue input in sidebar */
.clue-katex-preview {
    font-size: 0.78rem;
    color: var(--primary);
    padding: 1px 6px 3px;
    line-height: 1.4;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Topic badge chip (in problem set preview) */
.topic-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Problem Set page preview — CSS multi-column flow auto-balances column heights
   so a tall card (e.g. one with a geometry diagram) no longer leaves a large gap
   in the adjacent column. `break-inside: avoid` keeps each card intact. */
.problem-set-grid {
    width: 100%;
    padding: 4px;
}
.problem-set-grid[data-cols="1"] { column-count: 1; }
.problem-set-grid[data-cols="2"] {
    column-count: 2;
    column-gap: 20px;
    column-fill: balance;
}
.problem-item {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--user-font);
    break-inside: avoid;
    margin-bottom: 18px;
    /* Multi-column items are inline-block by default for break-inside to work
       reliably across browsers; width:100% keeps them filling the column. */
    width: 100%;
}
/* Number + clue on the same line */
.problem-clue-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.problem-num {
    font-weight: 800;
    font-size: calc(0.78rem * var(--global-font-scale) * var(--page-scale));
    color: #94a3b8;
    min-width: 20px;
    flex-shrink: 0;
    line-height: 1.5;
}
.problem-clue {
    font-size: calc(0.9rem * var(--global-font-scale) * var(--page-scale));
    color: var(--text-main);
    line-height: 1.5;
    flex: 1;
    /* min-width:0 is required so a flex child can shrink below its
       intrinsic content width. Without it, an inline-block KaTeX formula
       (e.g. "$A = \frac{1}{2}bh$") forces the clue wider than the column,
       causing the text to bleed into the adjacent column in 2-col layout. */
    min-width: 0;
    overflow-wrap: break-word;
}
/* Same containment fix at the row level so the whole flex chain shrinks. */
.problem-clue-row { min-width: 0; }
/* Equation / expression on its own line beneath the question stem */
.clue-newline {
    display: block;
    margin-top: 3px;
    padding-left: 2px;
    font-size: 1.05em;
}
.problem-working-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 0;
}
.problem-working-label {
    font-size: calc(0.63rem * var(--global-font-scale) * var(--page-scale));
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.problem-working-line {
    display: block;
    width: 100%;
    height: 30px;
    border-bottom: 1px dashed #cbd5e1;
}
[data-theme="dark"] .problem-working-line { border-bottom-color: #334155; }

.problem-answer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
}
.problem-answer-label {
    font-size: calc(0.7rem * var(--global-font-scale) * var(--page-scale));
    color: #94a3b8;
    flex-shrink: 0;
    font-style: italic;
    letter-spacing: 0.03em;
}
.problem-answer-line {
    flex: 1;
    height: 22px;
    border-bottom: 2px solid #cbd5e1;
    min-width: 60px;
}
.problem-answer-unit {
    font-size: calc(0.75rem * var(--global-font-scale) * var(--page-scale));
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}
/* Geometry diagram — shown between question clue and working lines */
.problem-diagram {
    margin: 5px 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);   /* SVG uses currentColor for fills/labels */
}
.geo-diagram-svg {
    max-width: min(100%, 190px);
    height: auto;
    display: block;
}
/* Rounded joins/caps make every shape outline and dashed guide read as one
   consistent, polished set rather than sharp mitred corners. */
.geo-diagram-svg polygon,
.geo-diagram-svg rect,
.geo-diagram-svg path,
.geo-diagram-svg polyline,
.geo-diagram-svg line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* Legibility halo: paint a panel-coloured outline behind every label so
   numbers/letters stay crisp where they sit over outlines, arcs or grid
   lines. paint-order:stroke keeps the halo behind the glyph fill. */
.geo-diagram-svg text {
    paint-order: stroke;
    stroke: var(--bg-panel, #fff);
    stroke-width: 2.4px;
    stroke-linejoin: round;
}
[data-theme="dark"] .problem-diagram { color: var(--text-main, #f1f5f9); }
[data-theme="dark"] .geo-diagram-svg text { stroke: var(--bg-panel, #1e293b); }

/* Topic + outcome chips on one centered line below the answer box */
.problem-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
}
.problem-tag {
    font-size: calc(0.6rem * var(--global-font-scale) * var(--page-scale));
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.6;
}
/* Bold instruction verb (e.g. "Calculate:", "Find $x$:") in question clues */
.clue-verb {
    font-weight: 700;
}
/* Inline emphasis inside a clue body — kept in sync with the PDF inline
   renderer so HTML preview and exported PDF look consistent.
   <strong>: structural qualifier (e.g. "the **missing** length")
   <em>:     operative noun (e.g. "the *area*", "the *median*") */
.problem-clue strong {
    font-weight: 700;
    color: var(--text-main);
}
.problem-clue em {
    /* teal-600 — matches drawColor in pdfExport's _drawClueInline italic fallback */
    color: #0d9488;
    font-style: italic;
    font-weight: 500;
}
[data-theme="dark"] .problem-clue em { color: #2dd4bf; }   /* teal-400, AA on dark */
/* Difficulty instruction line between header and question grid */
.page-instruction {
    font-size: calc(0.72rem * var(--global-font-scale, 1));
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding: 5px 0 6px;
    border-bottom: 1px solid #e2e8f0;
}

/* Cap-overflow notice shown at the bottom of a capped page */
.problem-overflow-notice {
    grid-column: 1 / -1;
    text-align: center;
    font-size: calc(0.72rem * var(--global-font-scale) * var(--page-scale));
    color: var(--text-muted);
    padding: 8px 0 0;
    font-style: italic;
}

/* Formula hints bulk toggle bar */
.formula-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.formula-bulk-btn {
    background: var(--bg-page, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--text-main);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.formula-bulk-btn:hover { background: var(--bg-hover, #e2e8f0); }
.formula-bulk-diff { font-weight: 700; }
.formula-bulk-sep { color: var(--text-muted); margin: 0 2px; }

/* Per-topic block inside the Formulas & Hints card. Replaces the inline
   styles that were duplicated 6× on the topic blocks. */
.formula-topic {
    margin-bottom: 8px;
}
.formula-topic:last-child {
    margin-bottom: 4px;
}
.formula-topic-label {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}
.formula-topic-label > i {
    margin-right: 5px;
    opacity: 0.55;
    font-size: 10px;
}
.formula-topic-row {
    display: flex;
    justify-content: space-between;
    max-width: 180px;
}

/* Score bar at the bottom-right of each difficulty section */
.problem-student-header {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: calc(0.8rem * var(--global-font-scale, 1) * var(--page-scale, 1));
}
.problem-student-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.problem-student-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85em;
    white-space: nowrap;
    color: var(--text-muted, #64748b);
}
.problem-student-line {
    flex: 1;
    border-bottom: 1px solid var(--text-base, #1e293b);
    min-width: 60px;
}
.problem-student-line--short {
    min-width: 40px;
    max-width: 90px;
}

.problem-score-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 10px;
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: calc(0.82rem * var(--global-font-scale, 1) * var(--page-scale, 1));
    color: var(--text-muted, #64748b);
}
.problem-score-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85em;
}
.problem-score-blank {
    display: inline-block;
    width: 52px;
    border-bottom: 1.5px solid var(--text-muted, #94a3b8);
    height: 1em;
}
.problem-score-sep,
.problem-score-eq,
.problem-score-pct { color: var(--text-muted, #64748b); }

/* Number Search clue list label */
.ns-clue-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Expression Scramble clue text below scrambled token */
.scramble-clue {
    font-size: calc(0.75rem * var(--global-font-scale) * var(--page-scale));
    color: #64748b;
    font-style: italic;
    margin-top: 2px;
    text-align: center;
}

/* KaTeX rendered math overrides for page preview */
.katex { font-size: 1em; }
.katex-target .katex-html { display: inline; }

/* Dark mode additions */
[data-theme="dark"] .filter-bar { background: #0f172a; }
[data-theme="dark"] .filter-select,
[data-theme="dark"] .wm-select { background: var(--input-bg); color: #f8fafc; border-color: var(--border); }
[data-theme="dark"] .problem-item { background: #1e293b; border-color: var(--border); }

/* ─── Per-question action buttons (reroll / lock) ─────────────────────── */
.problem-item { position: relative; }

.problem-actions {
    /* Lives inside the clue row (reserving its own space) so question text can
       never run underneath it. */
    position: static;
    flex-shrink: 0;
    align-self: flex-start;
    margin: -3px -7px 0 4px;
    display: flex;
    gap: 3px;
    /* Faintly visible at rest so the controls are discoverable on touch and
       keyboard (not hover-only); brighten on hover/focus. */
    opacity: 0.4;
    transition: opacity 0.15s;
    z-index: 2;
}
.problem-item:hover .problem-actions,
.problem-actions:focus-within { opacity: 1; }
/* A locked question keeps its lock control visible as a status cue. */
.problem-item.is-locked .problem-actions { opacity: 1; }

.prob-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.prob-btn:hover {
    background: var(--bg-page);
    border-color: var(--border);
    color: var(--text);
}
.prob-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.prob-btn.prob-lock.is-locked {
    color: #f59e0b;
    border-color: #f59e0b40;
    background: #f59e0b10;
}
.problem-item.is-locked {
    border-left: 3px solid #f59e0b;
}
@media print {
    .problem-actions { display: none !important; }
}

/* Stage selector — segmented radio button group */
.stage-selector-group {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin: 6px 0 4px;
}
.stage-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--input-bg);
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid var(--border);
    user-select: none;
    text-align: center;
    line-height: 1.3;
}
.stage-btn:last-child { border-right: none; }
.stage-btn input[type="radio"] { display: none; }
.stage-btn:hover:not(:has(input:checked)) {
    background: var(--hover-bg, rgba(99,102,241,0.06));
    color: var(--text-main);
}
.stage-btn:has(input:checked) {
    background: var(--primary);
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.stage-years {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.8;
}
[data-theme="dark"] .stage-btn { background: #1e293b; color: var(--text-muted); }
[data-theme="dark"] .stage-btn:has(input:checked) { background: var(--primary); color: #fff; }

/* Strand section heading inside topic list — NESA syllabus grouping
   (Number and Algebra / Measurement and Space / Statistics and Probability).
   A collapse toggle for the whole strand group. */
.strand-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 4px 4px;
    margin-top: 6px;
    border: none;
    border-top: 1px solid var(--border);
    background: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}
.strand-heading:hover { color: var(--text-main); }
.strand-heading:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.strand-chevron {
    order: -1;
    font-size: 8px;
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.strand-group.collapsed .strand-chevron { transform: rotate(-90deg); }
.strand-group.collapsed .strand-topics  { display: none; }
.strand-heading::after {
    content: '';
    order: 2;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.strand-group:first-child .strand-heading {
    padding-top: 4px;
    margin-top: 0;
    border-top: none;
}
/* Count of selected topics within the strand (e.g. "2/5") */
.strand-count {
    order: 3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 8px;
    padding: 1px 6px;
    flex-shrink: 0;
}
[data-theme="dark"] .strand-count {
    color: #a5b4fc;
    background: rgba(99,102,241,0.18);
}

/* Topic toggle rows in sidebar */
.topic-toggles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
}

.topic-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--text-main);
    border: 1px solid transparent;
}

.topic-toggle-row:hover {
    background: var(--surface-hover, rgba(99,102,241,0.08));
    border-color: var(--border);
}

.topic-toggle-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.topic-toggle-name {
    flex: 1;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.topic-icon {
    width: 14px;
    text-align: center;
    font-size: 10px;
    opacity: 0.55;
    flex-shrink: 0;
}

.page-order-icon {
    width: 14px;
    text-align: center;
    font-size: 11px;
    opacity: 0.65;
    margin-right: 6px;
}

.toggle-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 10px;
    opacity: 0.55;
    margin-right: 5px;
    flex-shrink: 0;
}

/* Shared structure for all outcome code badges */
.outcome-chip,
.outcome-code-pill {
    font-size: 9.5px;
    letter-spacing: 0.03em;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

/* Inline chip — topic toggle list (always indigo) */
.outcome-chip {
    font-weight: 700;
    padding: 1px 5px;
    cursor: default;
    background: rgba(99,102,241,0.10);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,0.22);
}
[data-theme="dark"] .outcome-chip {
    background: rgba(99,102,241,0.18);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}

/* ---- NESA Outcomes panel --------------------------------- */
.outcomes-details {
    margin: 10px 0 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    overflow: hidden;
}
.outcomes-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.outcomes-summary::-webkit-details-marker { display: none; }
.outcomes-summary::before {
    content: '▾';
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
    order: 99;
    margin-left: auto;
    line-height: 1;
}
.outcomes-details[open] .outcomes-summary::before { transform: rotate(180deg); }
.outcomes-summary-label { display: flex; align-items: center; gap: 6px; flex: 1; }
.outcomes-count-badge {
    font-size: 10px;
    font-weight: 700;
    background: #6366f1;
    color: #fff;
    border-radius: 20px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.6;
}
.outcomes-panel {
    padding: 0 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.outcome-row {
    display: flex;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    align-items: flex-start;
    transition: background 0.12s;
}
.outcome-row:hover { background: rgba(99,102,241,0.06); }

/* Outcome focus button — shown on hover */
.outcome-focus-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 5px;
    font-size: 10px;
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 4px;
    background: transparent;
    color: #6366f1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.outcome-row:hover .outcome-focus-btn { opacity: 1; }
[data-theme="dark"] .outcome-focus-btn { color: #a5b4fc; border-color: rgba(165,180,252,0.3); }

/* Outcome filter checkbox */
.outcome-filter-chk {
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: #6366f1;
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.outcome-filter-spacer {
    flex-shrink: 0;
    width: 13px;
    display: inline-block;
}
.outcome-filter-notice {
    font-size: 11px;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 6px;
    padding: 5px 8px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.outcome-filter-clear {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 4px;
    color: #6366f1;
    font-size: 10px;
    padding: 2px 7px;
    cursor: pointer;
    transition: background 0.12s;
}
.outcome-filter-clear:hover { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .outcome-filter-notice { color: #a5b4fc; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.30); }
[data-theme="dark"] .outcome-filter-clear { color: #a5b4fc; border-color: rgba(99,102,241,0.40); }

/* Pill variant — outcomes panel list (color set by parent .outcome-wm or default) */
.outcome-code-pill {
    font-weight: 800;
    padding: 2px 6px;
    margin-top: 1px;
}
.outcome-wm .outcome-code-pill  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.outcome-row:not(.outcome-wm) .outcome-code-pill { background: rgba(99,102,241,0.10); color: #6366f1; border: 1px solid rgba(99,102,241,0.22); }
[data-theme="dark"] .outcome-wm .outcome-code-pill { background: #14532d; color: #4ade80; border-color: #166534; }
[data-theme="dark"] .outcome-row:not(.outcome-wm) .outcome-code-pill { background: rgba(99,102,241,0.18); color: #a5b4fc; border-color: rgba(99,102,241,0.35); }
[data-theme="dark"] .outcome-row:hover { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .outcomes-count-badge { background: rgba(165,180,252,0.2); color: #a5b4fc; }
.outcome-text { flex: 1; }
.outcome-content-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}
.outcome-statement {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 1px;
    font-style: italic;
}

.topic-ops {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

/* Topic group — collapsible sub-operations */
.topic-group { position: relative; }

/* Shared structure for all sidebar status pills — each variant below only
   overrides color so spacing/shape stay in lock-step (single source of truth). */
.topic-qcount,
.sub-op-badge,
.path-badge {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: default;
}

/* Per-topic question count — muted teal pill shown after generation */
.topic-qcount {
    font-weight: 500;
    background: rgba(16,185,129,0.10);
    color: #059669;
    border-color: rgba(16,185,129,0.20);
}
[data-theme="dark"] .topic-qcount {
    background: rgba(52,211,153,0.10);
    color: #34d399;
    border-color: rgba(52,211,153,0.20);
}

/* Sub-op filter badge — amber pill showing "n/total" when some ops are disabled */
.sub-op-badge {
    background: rgba(217,119,6,0.12);
    color: #d97706;
    border-color: rgba(217,119,6,0.25);
}
[data-theme="dark"] .sub-op-badge {
    background: rgba(251,191,36,0.12);
    color: #fbbf24;
    border-color: rgba(251,191,36,0.25);
}

/* Stage 5.3 "Path" badge — indigo pill on path-only sub-operations */
.path-badge {
    font-size: 9px;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    margin-left: 4px;
    background: var(--primary-light);
    color: var(--primary);
    border-color: rgba(99,102,241,0.22);
}
[data-theme="dark"] .path-badge {
    background: rgba(99,102,241,0.18);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}

/* Stage 5.3 Path divider inside a topic's sub-op accordion — separates NESA
   Core content from Path (5.3) content */
.subop-path-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 2px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
    border-top: 1px dashed rgba(99,102,241,0.30);
}
.subop-path-divider i { font-size: 9px; opacity: 0.8; }
[data-theme="dark"] .subop-path-divider {
    color: #a5b4fc;
    border-top-color: rgba(165,180,252,0.30);
}

/* Sub-op group heading (e.g. "Factorising") — optional `group` metadata in
   generators/subOps.js. Sits in the same layer as the path divider above. */
.subop-group-heading {
    margin: 6px 0 1px;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.subop-group-heading:first-child { margin-top: 2px; }

/* Stage 5 "Path" toggle — reads as an indented sub-option of the stage block */
.path-toggle {
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--primary-light);
    border: 1px solid rgba(99,102,241,0.18);
}
[data-theme="dark"] .path-toggle {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.28);
}
.path-toggle .sub-op-name { font-size: 12px; }

/* Per-topic outcomes accordion wrapper (injected by renderOutcomes) */
.topic-outcomes-wrapper { padding: 0 4px 6px; }

/* Compact secondary button — topic All/None action row */
.btn-sec--compact {
    flex: 1;
    font-size: 11px;
}

/* Generator status line under the Regenerate button */
.placed-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* Zero-question warning — red left border + warning icon on topic name */
.topic-group.topic-warn > label > .topic-toggle-name::after {
    content: ' ⚠';
    color: #ef4444;
    font-style: normal;
    font-size: 11px;
}
.topic-group.topic-warn > label {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.04);
}
[data-theme="dark"] .topic-group.topic-warn > label {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.06);
}

.topic-expand-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 10px;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.topic-expand-btn:hover { opacity: 1; }
.topic-expand-btn.open { transform: rotate(180deg); opacity: 0.8; }

.topic-subtypes {
    padding: 2px 0 4px 16px;
    margin-left: 16px;
    border-left: 2px solid rgba(99,102,241,0.10);
    display: none;
}

.sub-op-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    transition: background 0.15s;
}
.sub-op-row:hover {
    background: var(--surface-hover, rgba(99,102,241,0.06));
    color: var(--text-main);
}
.sub-op-row input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}
.sub-op-name {
    font-weight: 400;
    display: flex;
    align-items: center;
}

.sub-op-icon {
    width: 10px;
    font-size: 8px;
    opacity: 0.35;
    flex-shrink: 0;
    margin-right: 5px;
    text-align: center;
}

/* Answer key 3-column grid */
.key-sets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    padding: 4px;
}

.key-section {
    break-inside: avoid;
    /* Subtle tinted card (tint set inline per difficulty) so the three bands
       read as distinct columns on a dense answer key. */
    border-radius: 8px;
    padding: 8px 10px;
}

/* Worked solution under a key answer — legible, distinct from the answer. */
.key-worked {
    font-size: 0.92em;
    color: #475569;          /* slate-600 — readable on white */
    padding-left: 18px;
    margin-top: 3px;
    line-height: 1.35;
}
[data-theme="dark"] .key-worked { color: #cbd5e1; }   /* slate-300 on dark */

.key-section-title {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.key-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 11px;
}

.key-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.key-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.key-num {
    font-weight: 700;
    font-size: 9px;
    color: #94a3b8;
    min-width: 16px;
    flex-shrink: 0;
}

.key-clue {
    flex: 1;
    color: var(--text-muted);
    font-size: 9.5px;
    line-height: 1.3;
    word-break: break-word;
}

.key-answer {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    font-size: 11px;
    min-width: 28px;
    text-align: right;
}

/* Difficulty label in page instruction */
.page-instruction {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 4px 0 10px 0;
    font-weight: 600;
}

/* New page layout for question pages */
.page-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* The whole worksheet (header title/subtitle + Name/Class/Date strip
       included) uses the selected font, matching the PDF export. KaTeX math
       keeps its own fonts via the .katex selectors. */
    font-family: var(--user-font);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

/* Worksheet page title / subtitle — font-size scales with the user's
   "Title Scale" slider (the --title-scale CSS var). Was inline-styled on
   every page; now lives here so the four .page blocks stay readable. */
.page .disp-title {
    font-size: calc(1.5rem * var(--title-scale));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.page .disp-sub {
    font-size: calc(1rem * var(--title-scale));
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Difficulty band tint on the instruction strip icon. The icon colour
   was an inline style on each page; this consolidates them and matches
   the colours used by .page-btn[data-page=N].active for visual coherence. */
#p1-instruction .fa-seedling { color: #10b981; margin-right: 6px; }
#p2-instruction .fa-bolt     { color: #f59e0b; margin-right: 6px; }
#p3-instruction .fa-fire     { color: #ef4444; margin-right: 6px; }

/* Name / Class / Date strip. Rows are LEFT-aligned inside the block so the
   "Name:" / "Class:" labels line up in a column (matching the PDF header),
   while the underlines flex out to the block's right edge. The block itself
   is pushed to the right of the header by .page-header's space-between. */
.page-header-right {
    display: flex;
    flex-direction: column;
    /* space-between pushes Name to the top and Class/Date to the bottom so the
       strip balances with the title (top) and subtitle (bottom) of the left
       block, which stretches it to full header height. */
    justify-content: space-between;
    gap: 7px;
    align-items: stretch;
    width: 240px;
    max-width: 46%;
    flex-shrink: 0;
    padding: 1px 0;
}
.page-header-right > div {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.hdr-label { flex: 0 0 auto; }
.hdr-line {
    flex: 1 1 auto;
    min-width: 28px;
    border-bottom: 1.5px solid currentColor;
    height: 0;
    opacity: .5;
}
.hdr-date-label { margin-left: 8px; }

.p-area {
    flex: 1;
    overflow: hidden;
    font-size: calc(1rem * var(--global-font-scale, 1) * var(--page-scale, 1));
}

/* Key page can grow beyond A4 when outcomes header is expanded */
#key-container {
    overflow: visible;
}

/* Generate button in sidebar */
#btn-generate {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.25s, transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
#btn-generate:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px -2px rgba(79,70,229,0.35); }
#btn-generate:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
#btn-generate:disabled { opacity: 0.6; cursor: not-allowed; }
#btn-generate.no-topics { background: #94a3b8; }
#btn-generate.no-topics:hover { background: #7c8fa3; }
[data-theme="dark"] #btn-generate.no-topics { background: #475569; }
[data-theme="dark"] #btn-generate.no-topics:hover { background: #334155; }
#btn-generate.pending { background: #d97706; }
#btn-generate.pending:hover { background: #b45309; }
[data-theme="dark"] #btn-generate.pending { background: #b45309; }
[data-theme="dark"] #btn-generate.pending:hover { background: #92400e; }

/* Status row */
.status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

[data-theme="dark"] .topic-toggle-row:hover {
    background: rgba(99,102,241,0.12);
}

[data-theme="dark"] .sub-op-row:hover {
    background: rgba(99,102,241,0.12);
}

[data-theme="dark"] .topic-subtypes {
    border-left: 2px solid rgba(99,102,241,0.15);
    margin-left: 16px;
}

[data-theme="dark"] .key-item {
    border-bottom-color: var(--border);
}

[data-theme="dark"] .page-header {
    border-bottom-color: var(--border);
}

/* ---- Outcomes worksheet header (above questions) ----------- */
.outcomes-ws-header {
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 7px;
    background: rgba(99,102,241,0.04);
    padding: 0;
    margin-bottom: 10px;
}
/* Collapsible variant used in HTML key preview */
.outcomes-ws-collapsible { cursor: default; }
.outcomes-ws-collapsible .outcomes-ws-list { padding: 0 10px 8px; }
.outcomes-ws-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.outcomes-ws-summary::-webkit-details-marker { display: none; }
.outcomes-ws-summary::after {
    content: '▾';
    margin-left: auto;
    font-size: 12px;
    color: #6366f1;
    transition: transform 0.18s;
    line-height: 1;
}
details.outcomes-ws-header:not([open]) .outcomes-ws-summary::after { transform: rotate(-90deg); }
.outcomes-ws-count {
    font-size: 10px;
    font-weight: 700;
    background: #6366f1;
    color: #fff;
    border-radius: 20px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.6;
}
.outcomes-ws-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1;
}
.outcomes-ws-list { display: flex; flex-direction: column; gap: 3px; }
.outcomes-ws-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 8.5px;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
}
.outcomes-ws-row--wm .outcomes-ws-pill {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}
.outcomes-ws-pill {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 7.5px;
    font-weight: 700;
    background: rgba(99,102,241,0.10);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 3px;
    padding: 1px 4px;
    letter-spacing: 0.02em;
}
.outcomes-ws-desc {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.outcomes-ws-desc strong { font-weight: 600; color: var(--text, #0f172a); }

[data-theme="dark"] .outcomes-ws-header {
    border-color: rgba(99,102,241,0.30);
    background: rgba(99,102,241,0.08);
}
[data-theme="dark"] .outcomes-ws-title { color: #a5b4fc; }
[data-theme="dark"] .outcomes-ws-pill {
    background: rgba(99,102,241,0.18);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] .outcomes-ws-row--wm .outcomes-ws-pill {
    background: #14532d;
    color: #4ade80;
    border-color: #166534;
}
[data-theme="dark"] .outcomes-ws-desc strong { color: var(--text, #f1f5f9); }

/* ---- Per-question outcome chips (used inside .problem-meta-row) ---- */
.q-outcome-chips {
    display: contents; /* chips merge directly into .problem-meta-row flow */
}
.q-outcome-chip {
    font-family: 'Courier New', monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(99,102,241,0.08);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,0.20);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.5;
    white-space: nowrap;
}
[data-theme="dark"] .q-outcome-chip {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.32);
}

/* ─── The worksheet is paper ──────────────────────────────────────────────
   In dark mode only the app chrome goes dark. The page and everything printed on
   it stays light so the preview matches the PDF (no dark cards on white paper,
   no pale-grey labels on white). Re-declaring the tokens here fixes every
   var()-based rule inside .page at once; the few hard-coded dark overrides above
   are countered individually below. */
[data-theme="dark"] .page {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #e0e7ff;
    --bg-panel: #ffffff;
    --border: #cbd5e1;
    --text-main: #0f172a;
    --text: #0f172a;
    --text-muted: #475569;
    --input-bg: #f8fafc;
    --track-bg: #cbd5e1;
    --hover-bg: rgba(15, 23, 42, .05);
    color-scheme: light;
    color: #0f172a;
}
[data-theme="dark"] .page .problem-item { background: #ffffff; border-color: var(--border); }
[data-theme="dark"] .page .problem-working-line { border-bottom-color: #cbd5e1; }
[data-theme="dark"] .page .problem-diagram { color: #0f172a; }
[data-theme="dark"] .page .geo-diagram-svg text { stroke: #ffffff; }
[data-theme="dark"] .page .problem-clue em { color: #0d9488; }
[data-theme="dark"] .page .key-worked { color: #475569; }
[data-theme="dark"] .page .outcomes-ws-header { border-color: rgba(99,102,241,0.22); background: rgba(99,102,241,0.04); }
[data-theme="dark"] .page .outcomes-ws-title { color: #4f46e5; }
[data-theme="dark"] .page .outcomes-ws-pill { background: rgba(99,102,241,0.10); color: #4f46e5; border-color: rgba(99,102,241,0.25); }
[data-theme="dark"] .page .outcomes-ws-row--wm .outcomes-ws-pill { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
[data-theme="dark"] .page .outcomes-ws-desc strong { color: #0f172a; }
[data-theme="dark"] .page .q-outcome-chip { background: rgba(99,102,241,0.08); color: #6366f1; border-color: rgba(99,102,241,0.20); }


/* ── Narrow phones (≤ 480 px) ────────────────────────────────────────────
   Found by emulated-viewport QA at 320 px: the sidebar drawer is only ~270 px
   wide, so each topic row (checkbox + name + outcome chip + counts + chevron)
   overflowed and pushed the expand chevron off the drawer; and the Easy/Medium/
   Hard/Key/Blank tab strip was wider than the screen and clipped at both ends. */
@media (max-width: 480px) {
    .topic-toggle-name { min-width: 0; overflow-wrap: anywhere; }
    .topic-toggle-row { gap: 6px; padding: 6px 6px; }
    .topic-toggle-row .outcome-chip { display: none; }   /* code is still in the chip's title / Outcomes panel */
    .page-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .page-tabs::-webkit-scrollbar { display: none; }
    .page-btn { flex: 0 0 auto; padding: 8px 9px; }
}
} /* end @layer components (maths) */

/* =============================================================
   Monetisation / Tier UI
   ============================================================= */

/* PRO pill badge — inline label next to gated controls */
.pro-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Dimmed row for a feature the current tier cannot use */
.feature-gated {
    opacity: .5;
    pointer-events: none;
    position: relative;
}
.feature-gated::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: not-allowed;
}

/* Ghost / locked Pro upsell row — advertises a Pro feature without offering a
   working control. Pairs with .feature-gated (dim + non-interactive). */
.ghost-pro-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.ghost-pro-row > i { width: 14px; text-align: center; font-size: 11px; opacity: 0.7; }
.ghost-pro-row .pro-badge { margin-left: auto; }

/* =============================================================
   Export Preview Panel
   ============================================================= */
.export-preview-panel {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-top: 12px;
}
.export-preview-panel .ep-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.export-preview-panel .ep-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
    opacity: .5;
}
.export-preview-panel .ep-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.export-preview-panel .ep-note {
    font-size: 10px;
    color: var(--text-muted);
    opacity: .8;
    margin-top: 4px;
}

/* =============================================================
   Upsell Upgrade Strip
   ============================================================= */
.upsell-strip {
    background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(139,92,246,.06));
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upsell-strip .upsell-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.upsell-strip .upsell-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.upsell-strip .upsell-btn {
    align-self: flex-start;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 2px;
    transition: opacity .15s;
}
.upsell-strip .upsell-btn:hover { opacity: .88; }

/* Admin mode banner */
.admin-mode-banner {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(5,150,105,.08));
    border: 1px solid rgba(16,185,129,.35);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-banner-title {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
}
.admin-banner-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.admin-banner-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.admin-banner-btn {
    background: rgba(16,185,129,.15);
    color: #059669;
    border: 1px solid rgba(16,185,129,.4);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.admin-banner-btn--primary {
    background: rgba(16,185,129,.25);
}
.admin-banner-btn:hover { background: rgba(16,185,129,.35); }

/* ================================================================
   Access Control Panel
   ================================================================ */
.access-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-panel {
    background: var(--bg-panel);
    width: 580px;
    max-width: 95vw;
    max-height: 88vh;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.acp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.acp-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.acp-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: color .15s;
}
.acp-close-btn:hover { color: var(--text-main); }
.acp-body {
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}
.acp-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}
.acp-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.acp-sublabel {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
.acp-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: -4px;
}
.acp-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}
/* Group preset buttons */
.acp-group-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.acp-group-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-main);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.acp-group-btn:hover {
    border-color: #059669;
    color: #059669;
}
.acp-group-btn.active {
    background: rgba(16,185,129,.15);
    border-color: #059669;
    color: #059669;
    font-weight: 700;
}
/* Feature category blocks */
.acp-category {
    margin-top: 12px;
}
.acp-category-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: .7;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.acp-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.acp-feature-row:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }
.acp-feature-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #059669;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.acp-feature-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.acp-feature-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.acp-feature-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.acp-feature-row.is-override .acp-feature-name { color: #059669; }
.acp-override-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #059669;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.3);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
}
/* Dark mode: increase translucent teal fills so they're visible on dark panels */
[data-theme="dark"] .acp-group-btn.active {
    background: rgba(16, 185, 129, .28);
}
[data-theme="dark"] .acp-override-badge {
    background: rgba(16, 185, 129, .25);
}
[data-theme="dark"] .admin-mode-banner {
    background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(5,150,105,.14));
}

/* Footer — pinned outside the scroll area, always visible */
.acp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ================================================================
   SIDEBAR UI REFRESH — Brand gradient, pill nav tabs, section
   labels with trailing rules, card-wrapped utility rows.
   All overrides live in @layer components so they beat layout/base
   but stay in the correct architectural home.
   ================================================================ */
@layer components {

/* ─── Brand header — indigo gradient ────────────────────────── */
.brand {
    background: linear-gradient(150deg, #4338ca 0%, #5b5cf6 55%, #7c7ef7 100%);
    padding: 14px 16px 14px 20px;
    border-bottom: none;
}
.brand h1            { color: #fff; font-size: 1.1rem; }
.brand .brand-icon   { background: rgba(255,255,255,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 9px; }
.brand-actions-sep   { background: rgba(255,255,255,0.18); }
.brand-actions button {
    color: rgba(255,255,255,0.7);
    background: transparent;
    border-color: transparent;
}
.brand-actions button:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .brand {
    background: linear-gradient(150deg, #312e81 0%, #3730a3 55%, #4338ca 100%);
}

/* ─── Nav tabs — pill / capsule style ───────────────────────── */
.nav-tabs {
    padding: 7px 10px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    gap: 3px;
}
.nav-tab {
    padding: 7px 10px;
    border-radius: 7px;
    border-bottom: none;
    font-size: 0.79rem;
    gap: 6px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.nav-tab:hover {
    background: rgba(79,70,229,0.08);
    color: var(--text-main);
}
.nav-tab.active {
    background: var(--bg-panel);
    color: var(--primary);
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px var(--border);
}
[data-theme="dark"] .nav-tabs   { background: #080d18; }
[data-theme="dark"] .nav-tab:hover { background: rgba(165,180,252,0.08); color: var(--text-main); }
[data-theme="dark"] .nav-tab.active {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px var(--border);
}

/* ─── Scroll area — slightly tighter padding ─────────────────── */
.scroll-area { padding: 14px 16px; }

/* ─── Section labels — text + trailing hairline rule ─────────── */
.section-label {
    display: flex;
    align-items: center;
    margin: 16px 0 8px;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    font-family: inherit;
}
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.65;
}
.section-label i { font-size: 9px; opacity: 0.6; }

/* ─── Seed row — subtle inset card ───────────────────────────── */
.seed-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.seed-row label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
    margin: 0;
}
.seed-row input[type="number"] {
    flex: 1;
    font-size: 11px;
    padding: 2px 4px;
    min-width: 0;
    width: auto;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: monospace;
    box-shadow: none;
}
.seed-row input[type="number"]:focus {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
}

/* ─── btn-icon — used for seed copy etc ──────────────────────── */
.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.btn-icon:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}
/* Brief confirmation after copying the seed. */
.btn-icon.copied,
.btn-icon.copied:hover {
    color: #10b981;
    border-color: #10b981;
    background: #10b9811a;
}

/* ─── Status row — inset card matching seed row ──────────────── */
.status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ─── Topic action row (All / None + count) ─────────────────── */
.topic-action-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    align-items: center;
}
.topic-count-label {
    font-size: 11px;
    color: var(--text-muted);
    align-self: center;
    flex: 2;
    text-align: right;
}

/* ─── Pages-per-difficulty row ───────────────────────────────── */
.pgs-per-diff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* ─── Questions-per-page summary text ───────────────────────── */
.qpp-summary {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.7;
}

/* ─── Footer actions — subtle top shadow ────────────────────── */
.footer-actions {
    padding: 12px 16px;
    gap: 8px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
}

/* ─── Setting card summary — slightly tighter type ───────────── */
.card-header-inner { font-size: 0.83rem; font-weight: 700; }

/* ─── Setting card — thicker left accent when open ───────────── */
details.setting-card[open] { border-left-width: 3px; }

} /* end @layer components (sidebar refresh) */