/* ==========================================================================
   LOGISTIKKOPERATØR STUDY PLATFORM — DESIGN SYSTEM & STYLESHEET
   Curated Futuristic Theme, Glassmorphism, Responsive Grid, Global Chat & Print
   ========================================================================== */

/* The site's own faces, plus the reading fonts offered in Settings.
   Only the weights actually used are requested, to keep this small.

   NOTE: these need the network. The copy opened straight from disk has no
   internet, so the Settings list also offers System, Arial, Verdana and
   Georgia, which are already on the machine and need no download. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700&family=Lato:wght@400;700&family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600&family=Nunito+Sans:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&family=Merriweather:wght@400;700&display=swap');

:root {
    /* Brand & Accent Colors */
    /* #2563eb sat at 2.83:1 against the darkest background — under the 3:1
       that a border or focus ring needs. Nudged just far enough to clear it
       while white text on a --primary button still clears 4.5:1 (4.57). */
    --primary: #2f6feb;
    --primary-glow: rgba(37, 99, 235, 0.35);
    --primary-light: #60a5fa;
    --secondary: #0ea5e9;
    --accent: #f59e0b;
    --accent-purple: #8b5cf6;
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.3);
    --danger: #f87171;          /* 5.29:1 — was #ef4444 at 3.89 */
    --warning: #f59e0b;

    /* Theme Tokens (Dark Default) */
    --bg-main: #0b0f19;
    --bg-surface: #111827;
    --bg-surface-elevated: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-card-hover: rgba(51, 65, 85, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(96, 165, 250, 0.3);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #94a3b8;      /* 5.71:1 on the darkest background — was #64748b at 3.07 */
    --text-inverse: #0f172a;

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    --chat-width: 360px;

    /* Inline code / figures. The old value (#38bdf8 on a dark wash) was almost
       invisible in the light theme, which is where the numbers matter most. */
    --code-fg: #fcd34d;
    --code-bg: rgba(251, 191, 36, 0.12);
    --code-border: rgba(251, 191, 36, 0.30);

    /* Heights of the two sticky bars above the content. The reader toolbar
       parks directly beneath them, so these must stay accurate. */
    --header-h: 0px;   /* the header was folded into the side menu */
    --navbar-h: 0px;

    /* 4px spacing scale — every gap, pad and radius below is a multiple, so
       the rail reads as designed rather than assembled. */
    --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 20px; --s6: 24px;  --s8: 32px;

    /* the docked rail */
    --rail-w: 108px;          /* the floating reading rail */
    --rail-item-h: 36px;
    --sidebar-w: 208px;       /* the docked side menu */
}

/* Light Theme Overrides */
[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: #ffffff;
    --border-color: #e2e8f0;
    --border-highlight: #93c5fd;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #5b6b7f;
    --text-inverse: #ffffff;

    /* ----------------------------------------------------------------------
       THE ACCENT COLOURS HAVE TO BE REDEFINED HERE.

       The light theme used to inherit them from :root, where they are picked
       to glow against a near-black background. On white they were washed out
       to the point of being unreadable — measured, not guessed:

           --primary-light  #60a5fa   2.43 : 1     ("this blue is barely
           --accent         #f59e0b   2.05 : 1      seeable, making it a bad
           --success        #10b981   2.42 : 1      reading experience")
           --text-muted     #94a3b8   2.45 : 1
           --danger         #ef4444   3.60 : 1

       WCAG AA wants 4.5:1 for body text. Every value below clears that against
       all three light backgrounds — page, surface and elevated — with the
       worst case in the comment. Check with the script in the change log if
       you ever alter them.
       ---------------------------------------------------------------------- */
    --primary: #1d4ed8;          /* 6.12 : 1 */
    --primary-light: #1d4ed8;    /* 6.12 : 1 — was #60a5fa at 2.43 */
    --primary-glow: rgba(29, 78, 216, 0.18);
    --secondary: #0369a1;        /* 5.42 : 1 */
    --accent: #b45309;           /* 4.58 : 1 */
    --success: #047857;          /* 5.01 : 1 */
    --danger: #b91c1c;           /* 5.91 : 1 */
    --warning: #b45309;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.08);

    --code-fg: #9a3412;
    --code-bg: #fff7ed;
    --code-border: #fdba74;
}

/* Places where a colour sits on a *coloured* background rather than the page,
   so the values above are not the whole story. */
[data-theme="light"] .badge-primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] .chat-thread-unread,
[data-theme="light"] .chat-sec-unread,
[data-theme="light"] .sb-badge {
    color: #ffffff;              /* white on the darker blue: 6.12 : 1 */
}

/* The search highlight is a tint of the accent; on white it needs to be
   darker than the dark-theme version to stay legible under black text. */
[data-theme="light"] mark.hit.in-text.is-current {
    background: #fde68a;
    color: #0f172a;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.08) 0%, transparent 40%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.3;
    font-weight: 700;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: #93c5fd;
    text-decoration: underline;
}

code {
    font-family: var(--font-mono);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-weight: 600;
    color: var(--code-fg);
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   NAVIGATION & HEADER
   ========================================================================== */
.site-header {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.9);
}

.header-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-badge {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-glow);
}

.logo-text h1 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text .tagline {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* Search in Header */
.header-search {
    flex: 1;
    max-width: 380px;
    position: relative;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper input {
    width: 100%;
    padding: 9px 16px 9px 38px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all var(--transition-normal);
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Header Controls & Profile */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Online Presence Pill */
.online-presence-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.online-presence-pill:hover {
    background: rgba(16, 185, 129, 0.22);
    border-color: #34d399;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.user-profile-badge:hover {
    border-color: var(--primary-light);
    transform: translateY(-1px);
}

.user-avatar {
    font-size: 1.15rem;
}

.user-name-role {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
}

.user-role {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

/* Main Top Nav Tabs */
.site-nav-bar {
    background: rgba(15, 23, 42, 0.94);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    position: sticky;
    top: var(--header-h);
    z-index: 850;
}
[data-theme="light"] .site-nav-bar { background: rgba(255, 255, 255, 0.94); }

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-container::-webkit-scrollbar {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    background: none;
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: color var(--transition-fast), background var(--transition-fast);
}

/* the emoji was washing out on inactive tabs — keep it legible */
.nav-item::first-letter { font-size: 1.05em; }

/* animated underline instead of a hard border, so nothing jumps */
.nav-item::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--primary-light);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-smooth);
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .nav-item:hover { background: rgba(15, 23, 42, 0.05); }
.nav-item:hover::after { transform: scaleX(0.45); }

.nav-item.active {
    color: var(--primary-light);
    background: rgba(37, 99, 235, 0.14);
}
.nav-item.active::after { transform: scaleX(1); }

/* What used to sit here was the wreckage of the PREVIOUS .nav-item rule: an
   edit removed its selector and opening brace but left the declarations and
   the closing brace behind, so the file contained a block of properties
   belonging to nothing, followed by two stale duplicate rules from the old
   border-bottom design.

   Browsers skip the garbage silently, which is why it went unnoticed. Stricter
   parsers refuse the ENTIRE stylesheet — which is what made eight test suites
   fail on a machine with a different jsdom version. check_css.py now looks for
   this shape specifically. */

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
.app-layout-container {
    display: flex;
    flex: 1;
    position: relative;
    width: 100%;
}

.main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    flex: 1;
    width: 100%;
}

/* Tab Panes */
.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   FLOATING RESIZABLE & MOVEABLE CHAT POPUP WINDOW
   ========================================================================== */
.floating-chat-window {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 390px;
    height: 540px;
    min-width: 300px;
    min-height: 380px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 1500;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(37, 99, 235, 0.15);
    backdrop-filter: blur(18px);
    overflow: hidden;
    resize: both; /* Native CSS resize */
    transform-origin: bottom right;
    transition: box-shadow var(--transition-fast);
}

.floating-chat-window.collapsed {
    display: none;
}

/* Fluid popup and condense animations */
.floating-chat-window.anim-pop-in {
    animation: chatPopupIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.floating-chat-window.anim-condense {
    animation: chatCondenseDown 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes chatPopupIn {
    0% {
        opacity: 0;
        transform: scale(0.2) translate(40px, 40px);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

@keyframes chatCondenseDown {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.15) translate(60px, 60px);
    }
}

/* Chat Header (Moveable Drag Handle) */
.chat-window-drag-header {
    padding: 12px 16px;
    background: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
}

.chat-window-drag-header:active, .chat-window-drag-header.dragging {
    cursor: grabbing !important;
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    pointer-events: none;
}

.chat-online-indicator {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: var(--radius-full);
    box-shadow: 0 0 8px var(--success);
    display: inline-block;
}

.chat-header-actions {
    display: flex;
    gap: 5px;
}

.chat-btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.chat-btn-icon:hover {
    color: var(--text-primary);
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.05);
}

.chat-btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger);
    color: #f87171;
}

/* Chat Messages Container */
.chat-messages-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.15);
}

/* Chat Message Bubbles */
.chat-bubble-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 90%;
    animation: fadeIn 0.2s ease;
}

.chat-bubble-wrapper.other-message {
    align-self: flex-start;
}

.chat-bubble-wrapper.my-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    font-size: 1.1rem;
    background: var(--bg-surface-elevated);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chat-bubble-content {
    display: flex;
    flex-direction: column;
}

.chat-bubble-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 0.72rem;
}

.chat-sender-name {
    font-weight: 700;
    color: var(--text-primary);
}

.chat-timestamp {
    color: var(--text-muted);
}

.chat-bubble-text {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.chat-bubble-wrapper.my-message .chat-bubble-text {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(14, 165, 233, 0.85));
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.5);
    border-bottom-right-radius: 2px;
}

.chat-bubble-wrapper.other-message .chat-bubble-text {
    border-bottom-left-radius: 2px;
}

/* Chat Input Footer */
.chat-footer-wrapper {
    padding: 10px 12px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    position: relative;
    flex-shrink: 0;
}

.chat-quick-emojis {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.chat-quick-emoji {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: transform var(--transition-fast);
}

.chat-quick-emoji:hover {
    transform: scale(1.15);
    border-color: var(--primary-light);
}

.chat-input-form {
    display: flex;
    gap: 8px;
}

.chat-input-form input {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
}

/* Custom Edge & Corner Drag Resize Handles */
.chat-resize-handle {
    position: absolute;
    z-index: 1600;
}

.chat-resize-e { top: 0; right: 0; width: 6px; height: 100%; cursor: ew-resize; }
.chat-resize-w { top: 0; left: 0; width: 6px; height: 100%; cursor: ew-resize; }
.chat-resize-s { bottom: 0; left: 0; width: 100%; height: 6px; cursor: ns-resize; }
.chat-resize-n { top: 0; left: 0; width: 100%; height: 6px; cursor: ns-resize; }
.chat-resize-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.chat-resize-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.chat-resize-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.chat-resize-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }

.chat-resize-grip {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

/* ==========================================================================
   FLOATING RESIZABLE & MOVEABLE NOTES POPUP WINDOW
   ========================================================================== */
.floating-notes-window {
    position: fixed;
    bottom: 30px;
    right: 110px;
    width: 440px;
    height: 570px;
    min-width: 320px;
    min-height: 380px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 1500;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(18px);
    overflow: hidden;
    resize: both;
    transform-origin: bottom right;
    transition: box-shadow var(--transition-fast);
}

.floating-notes-window.collapsed {
    display: none;
}

.floating-notes-window.anim-pop-in {
    animation: chatPopupIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.floating-notes-window.anim-condense {
    animation: chatCondenseDown 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Notes Drag Header */
.notes-window-drag-header {
    padding: 12px 16px;
    background: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
}

.notes-window-drag-header:active, .notes-window-drag-header.dragging {
    cursor: grabbing !important;
}

.notes-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #34d399;
}

.notes-save-indicator {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: normal;
}

.notes-header-actions {
    display: flex;
    gap: 5px;
}

.notes-btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.notes-btn-icon:hover {
    color: var(--text-primary);
    border-color: #34d399;
    background: rgba(16, 185, 129, 0.1);
}

.notes-btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger);
    color: #f87171;
}

/* Chapter Reference Bar */
.notes-chapter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.notes-select {
    flex: 1;
    padding: 5px 8px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Markdown Toolbar */
.notes-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 6px;
}

.notes-tools-group {
    display: flex;
    gap: 4px;
}

.notes-tool-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 3px 7px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.notes-tool-btn:hover {
    border-color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.notes-preview-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 3px 8px;
    font-size: 0.78rem;
    cursor: pointer;
}

.notes-preview-toggle-btn.active {
    background: rgba(37, 99, 235, 0.25);
    border-color: var(--primary-light);
    color: #60a5fa;
}

/* Notes Body & Editor */
.notes-body-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.notes-editor-textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    resize: none;
    outline: none;
}

.notes-rendered-preview {
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow-y: auto;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.6;
}

.notes-rendered-preview h2, .notes-rendered-preview h3, .notes-rendered-preview h4 {
    color: #34d399;
    margin: 12px 0 6px 0;
}

.notes-mark {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    padding: 1px 4px;
    border-radius: 2px;
}

.notes-quote {
    border-left: 3px solid #34d399;
    background: rgba(16, 185, 129, 0.08);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}

.notes-todo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

/* Presence Users Modal List */
.presence-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presence-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: var(--radius-md);
}

/* Streamlined Module Footer Actions */
.module-footer-actions-clean {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   MODULES STUDY READER
   ========================================================================== */
.modules-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.module-reader-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.module-reader-card.completed {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.module-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.mod-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mod-icon {
    font-size: 2.2rem;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.mod-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mod-num-badge {
    background: var(--primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.mod-duration {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mod-no-title {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
}

.mod-title {
    font-size: 1.4rem;
    color: var(--text-primary);
}

.btn-toggle-complete {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-toggle-complete:hover {
    border-color: var(--success);
    color: var(--success);
}

.btn-toggle-complete.is-completed {
    background: var(--success);
    color: #ffffff;
    border-color: var(--success);
}

.mod-summary-bar {
    background: rgba(37, 99, 235, 0.08);
    border-left: 4px solid var(--primary);
    padding: 10px 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.module-body {
    font-size: 1rem;
    color: var(--text-primary);
}

.content-block {
    margin-bottom: 28px;
}

.content-block h3 {
    font-size: 1.2rem;
    color: #38bdf8;
    margin-bottom: 12px;
}

.no-term {
    font-style: italic;
    color: #38bdf8;
    font-weight: 600;
}

/* Term Cards Grid */
.term-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.term-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast);
}

.term-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-highlight);
}

.term-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.term-header h4 {
    font-size: 1.05rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.badge-sm { font-size: 0.65rem; padding: 1px 5px; }
.badge-primary { background: rgba(37, 99, 235, 0.25); color: #60a5fa; border: 1px solid rgba(37, 99, 235, 0.4); }
.badge-info { background: rgba(14, 165, 233, 0.25); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.4); }
.badge-purple { background: rgba(139, 92, 246, 0.25); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.4); }
.badge-warning { background: rgba(245, 158, 11, 0.25); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-success { background: rgba(16, 185, 129, 0.25); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-danger { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

/* Value Chain Steps */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.step-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    border-radius: var(--radius-md);
}

.step-number {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.step-content h5 {
    font-size: 1.05rem;
    margin-bottom: 4px;
    color: #e2e8f0;
}

.step-content p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Grids & Cards */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.info-box {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: var(--radius-md);
}

.info-box-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: #e0f2fe;
}

.feature-card, .task-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--radius-md);
}

.feat-icon, .task-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.golden-rule {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.golden-badge {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #fbbf24;
    margin-bottom: 6px;
}

.golden-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fef3c7;
}

/* Pallet & Specs */
.pallet-diagram-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
}

.pallet-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.spec-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    padding: 14px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.spec-val {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 4px;
}

.spec-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.spec-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.limits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.limit-box {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: var(--radius-md);
}

.limit-weight {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #f59e0b;
}

.limit-cond {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 4px 0;
}

.limit-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Alnabru Spotlight */
.hub-spotlight {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.25), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.hub-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.hub-flag {
    font-size: 2.2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-item {
    background: var(--bg-surface-elevated);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-align: center;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    color: #60a5fa;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Timeline */
.timeline-box {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
}

.timeline-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.time-tag {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    height: fit-content;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    margin: 16px 0;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.styled-table th, .styled-table td {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.styled-table th {
    background: var(--bg-surface-elevated);
    color: #93c5fd;
    font-weight: 700;
}

.styled-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Module Notes & Footer */
.module-footer-actions {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-notes-toggle {
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    width: 100%;
    text-align: left;
    transition: all var(--transition-fast);
}

.btn-notes-toggle:hover {
    border-color: var(--primary-light);
    color: var(--text-primary);
}

.notes-panel {
    margin-top: 10px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
}

.notes-textarea {
    width: 100%;
    min-height: 80px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    resize: vertical;
}

.notes-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.note-save-status {
    font-size: 0.85rem;
    color: var(--success);
    font-weight: 600;
}

/* ==========================================================================
   FLASHCARDS VIEW (3D Interactive Deck)
   ========================================================================== */
.flashcards-wrapper {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.fc-controls-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fc-card-container {
    width: 100%;
    height: 380px;
    perspective: 1000px;
    cursor: pointer;
}

.fc-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.fc-card-container.flipped .fc-card-inner {
    transform: rotateY(180deg);
}

.fc-card-front, .fc-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    backdrop-filter: blur(16px);
}

.fc-card-front {
    border-top: 4px solid var(--primary);
}

.fc-card-back {
    transform: rotateY(180deg);
    border-top: 4px solid var(--accent-purple);
    background: var(--bg-surface-elevated);
}

.fc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fc-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
}

.fc-term-no {
    font-size: 2rem;
    font-weight: 800;
    color: #60a5fa;
    margin-bottom: 8px;
}

.fc-term-en {
    font-size: 1.2rem;
    color: #c084fc;
    margin-bottom: 12px;
}

.fc-definition {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.fc-hint-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.fc-action-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   QUIZ & MOCK EXAM VIEW
   ========================================================================== */
.quiz-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.quiz-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.exam-hero-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(17, 24, 39, 0.8));
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-glow);
}

.exam-hero-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.exam-meta-pills {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.exam-pill {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
}

/* A distinct practice panel makes "one chapter" visibly different from the
   full mock exam next to it. */
.chapter-practice-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.chapter-practice-head { margin-bottom: 14px; }
.chapter-practice-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.chapter-practice-head h4 { margin: 0 0 4px; font-size: 1.15rem; }
.chapter-practice-head p { margin: 0; color: var(--text-secondary); font-size: 0.86rem; }
.chapter-quiz-list { display: grid; gap: 8px; }
.chapter-quiz-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text-primary);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.chapter-quiz-card:hover,
.chapter-quiz-card:focus-visible {
    border-color: var(--primary-light);
    background: var(--bg-card-hover);
    outline: none;
    transform: translateX(3px);
}
.chapter-quiz-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(37, 99, 235, 0.16);
    font-size: 1.05rem;
}
.chapter-quiz-copy { display: grid; gap: 2px; min-width: 0; }
.chapter-quiz-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-quiz-copy > span { color: var(--text-muted); font-size: 0.78rem; }
.chapter-quiz-start { color: var(--primary-light); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }

/* Active Quiz View */
.quiz-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.quiz-timer {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    color: #38bdf8;
}

.quiz-timer.timer-warning {
    color: #f87171;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.quiz-question-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    padding: 32px;
}

.quiz-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quiz-q-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-surface-elevated);
    border: 2px solid var(--border-color);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quiz-option-card:hover {
    border-color: var(--primary-light);
    transform: translateX(4px);
}

.quiz-option-card.selected {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.15);
}

.option-letter {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.quiz-option-card.selected .option-letter {
    background: var(--primary);
    color: #ffffff;
}

.quiz-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Palette Matrix */
.quiz-palette-wrapper {
    margin-top: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: var(--radius-md);
}

.palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.palette-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.palette-btn.active { border-color: var(--primary); color: var(--primary-light); }
.palette-btn.answered { background: rgba(37, 99, 235, 0.3); border-color: var(--primary); }
.palette-btn.flagged { border-color: var(--warning); color: var(--warning); }

/* Results & Review */
.quiz-results-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
}

.res-score-circle {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 16px 0;
}

.assessment-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.grade-top { background: rgba(16, 185, 129, 0.25); color: #34d399; border: 1px solid #10b981; }
.grade-pass { background: rgba(59, 130, 246, 0.25); color: #60a5fa; border: 1px solid #3b82f6; }
.grade-fail { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid #ef4444; }

.review-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
    border-left: 5px solid var(--text-muted);
}

.review-card.correct { border-left-color: var(--success); }
.review-card.incorrect { border-left-color: var(--danger); }

.review-option {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
}

.review-option.opt-correct {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--success);
}

.review-option.opt-user-wrong {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger);
}

.opt-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.tag-correct { background: var(--success); color: #ffffff; }
.tag-wrong { background: var(--danger); color: #ffffff; }

.review-explanation {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   CALCULATORS VIEW
   ========================================================================== */
.calc-grid {
    display: grid;
    /* minmax(360px, …) pinned each column to 360px, which is wider than the
       usable width of a 360px phone once the page padding is taken off — so
       the calculator ran off the right edge. The `min(…, 100%)` lets the
       column shrink below its preferred width when there is no room. */
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 24px;
}

.calc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.calc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

input, select, textarea {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: var(--font-body);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-light);
}

.calc-results-panel {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 20px;
}

.calc-res-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.calc-res-item {
    background: var(--bg-surface);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.calc-res-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.calc-res-val {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: #38bdf8;
}

.math-breakdown {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

/* ==========================================================================
   GLOSSARY VIEW
   ========================================================================== */
.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.glossary-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.glossary-card:hover {
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.glossary-card.bookmarked {
    border-color: var(--accent);
}

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

.glossary-term-no {
    font-size: 1.1rem;
    color: #60a5fa;
    margin-bottom: 2px;
}

.glossary-term-en {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.glossary-actions {
    display: flex;
    gap: 6px;
}

.btn-speak-term, .btn-bookmark-term {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-bookmark-term.active {
    color: var(--accent);
    border-color: var(--accent);
}

.glossary-def {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0;
}

/* ==========================================================================
   BUTTONS & COMMON UI
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff;
    box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-secondary {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.05);
}

.btn-secondary.active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary-light);
}

.btn-success { background: var(--success); color: #ffffff; }
.btn-danger { background: var(--danger); color: #ffffff; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin: 14px 0;
}

.alert-success { background: rgba(16, 185, 129, 0.15); border: 1px solid var(--success); color: #34d399; }
.alert-warning { background: rgba(245, 158, 11, 0.15); border: 1px solid var(--warning); color: #fbbf24; }

/* ==========================================================================
   MODALS (Login, Users, Stats, Search)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp 0.3s ease;
}

.modal-dialog-large {
    max-width: 850px;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 24px;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.quick-login-pills {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Shown only when the page was opened straight from disk, where there is no
   server to authenticate against and nothing shared to protect. */
/* the password form inside Settings */
.set-password {
    display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%;
}

/* The font and text-size pickers. These had no styling at all — the label and
   the select ran together inline and wrapped wherever they felt like it. */
.settings-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--s3);
    width: 100%;
}
.settings-choice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.settings-choice > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.settings-choice select {
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}
.settings-choice select:focus { outline: none; border-color: var(--primary); }
.set-password input {
    flex: 1 1 150px; min-width: 0;
    padding: var(--s2) var(--s3);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.set-password input:focus {
    outline: none; border-color: var(--primary);
}
.set-note {
    font-size: 0.78rem; margin-top: var(--s2); line-height: 1.5;
    color: var(--text-muted);
}
.set-note.is-good { color: var(--success); }
.set-note.is-bad  { color: var(--danger); }

.login-offline-note {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px dashed var(--border-color);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Bulk User Box */
.bulk-names-textarea {
    width: 100%;
    min-height: 90px;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    padding: 10px;
    margin-top: 6px;
}

/* Search Modal List */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-result-item:hover {
    border-color: var(--primary-light);
    transform: translateX(4px);
}

.res-type-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--s2);
}

/* Marks a result whose match sits in the language you are not reading in, so
   an English line under a Norwegian interface is explained rather than odd. */
.res-lang {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 4px;
    line-height: 1.5;
}

.res-item-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.res-item-snippet {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   SEARCH HIT HIGHLIGHT
   The matched word, wherever it is shown: finder results and the term filter.
   A tinted box rather than the browser's default yellow, which fights the
   dark theme; the text itself keeps full contrast so it stays readable.
   -------------------------------------------------------------------------- */
mark.hit {
    background: rgba(56, 189, 248, 0.22);
    color: var(--text-primary);
    font-weight: 700;
    border-radius: 3px;
    padding: 0 2px;
    box-shadow: inset 0 -1px 0 rgba(56, 189, 248, 0.55);
}

.res-item-title mark.hit {
    background: rgba(56, 189, 248, 0.3);
}

/* On the highlighted row the tint has to lift off a lighter background. */
.search-result-item.is-active mark.hit {
    background: rgba(56, 189, 248, 0.34);
}

.term-row-term mark.hit,
.term-row-alt mark.hit {
    padding: 0 3px;
}

/* --------------------------------------------------------------------------
   THE SAME MARK, INSIDE THE BOOK TEXT
   Applied to every occurrence in the reader after you pick a search result.
   Slightly stronger than the one in the results list, because here it has to
   be findable while scrolling a page of prose; the current hit is stronger
   again so stepping through is obvious.
   -------------------------------------------------------------------------- */
mark.hit.in-text {
    background: rgba(250, 204, 21, 0.25);
    box-shadow: inset 0 -2px 0 rgba(250, 204, 21, 0.7);
    color: inherit;
    font-weight: inherit;
}

mark.hit.in-text.is-current {
    background: rgba(250, 204, 21, 0.85);
    color: #1e293b;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
}

[data-theme="light"] mark.hit.in-text {
    background: rgba(234, 179, 8, 0.28);
    box-shadow: inset 0 -2px 0 rgba(202, 138, 4, 0.7);
}

.res-count {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
}

.search-more {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: var(--s3) 0 var(--s1);
}

/* --------------------------------------------------------------------------
   FIND BAR — floats above the reader while a term is highlighted
   -------------------------------------------------------------------------- */
.find-bar {
    position: fixed;
    left: calc(var(--sidebar-w) + var(--s6));
    bottom: var(--s6);
    z-index: 1350;
    display: none;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    font-size: 0.82rem;
}

.find-bar.active { display: flex; }

.find-bar-ico { font-size: 0.8rem; opacity: 0.75; }
.find-bar-term { font-weight: 700; color: var(--text-primary); max-width: 220px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-bar-count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }

.find-bar-btn {
    appearance: none; cursor: pointer;
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: none; border: 1px solid var(--border-color);
    color: var(--text-secondary); line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.find-bar-btn:hover { color: var(--text-primary); border-color: var(--border-highlight); }
.find-bar-x:hover { color: var(--danger); border-color: var(--danger); }

[data-theme="light"] mark.hit {
    background: rgba(2, 132, 199, 0.18);
    box-shadow: inset 0 -1px 0 rgba(2, 132, 199, 0.5);
}

/* ==========================================================================
   PRINT STYLESHEET
   ========================================================================== */
@media print {
    /* ----------------------------------------------------------------------
       PRINTING = the cheat sheet, and only the cheat sheet.

       This used to force `.tab-pane { display: block }`, which un-hid every
       tab at once — all twelve chapters of the book, the quiz, the term list —
       and printed about a hundred pages with the menu down the side of each.
       Here everything is hidden by default and just the cheat sheet is let
       back in.
       ---------------------------------------------------------------------- */
    @page { size: A4 portrait; margin: 14mm 12mm; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
    }

    /* every piece of interface: gone */
    .app-sidebar, .side-nav, .side-reader, .modal-overlay, .tr-pop,
    .floating-chat-window, .floating-notes-window, .toast-stack,
    .btn, .btn-chip, .btn-toggle-complete, .page-actions,
    .seg, .lang-switch, .notes-accordion {
        display: none !important;
    }

    /* the page no longer steps aside for a menu that is not printing */
    .app-layout-container { padding-left: 0 !important; }
    .main-wrapper, .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* hide every tab, then bring back the one being printed */
    .tab-pane { display: none !important; }
    .tab-pane#tab-cheatsheet { display: block !important; }

    /* ---- the sheet itself ---- */
    /* One column reads better on paper and, more to the point, a two-column
       CSS grid cannot be kept off page breaks reliably. */
    .cheat-grid {
        display: block !important;
        column-count: 1 !important;
        gap: 0 !important;
    }

    /* A card is never split across two sheets. If it does not fit in what is
       left of the page it moves to the next one whole. */
    .cheat-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        background: #fff !important;
        border: 1px solid #bbb !important;
        box-shadow: none !important;
        margin: 0 0 8mm !important;
        padding: 5mm 6mm 6mm !important;
        width: 100% !important;
    }

    /* a heading never ends up alone at the foot of a page */
    .cheat-head, .cheat-card h3, .cheat-card h4 {
        break-after: avoid !important;
        page-break-after: avoid !important;
        color: #000 !important;
    }

    .cheat-card li {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* no widows or orphans anywhere on the sheet */
    .cheat-card p, .cheat-card li { orphans: 3; widows: 3; }

    .cheat-badge, .cheat-pages {
        color: #444 !important;
        border-color: #999 !important;
        background: none !important;
    }

    .cheat-card code, .cheat-card .num {
        background: #f2f2f2 !important;
        color: #000 !important;
        border: 1px solid #ddd !important;
    }

    mark.hit { background: #eee !important; box-shadow: none !important; }

    .info-box, #cheatsheet-note {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        background: #f7f7f7 !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
    }

    h1, h2, h3, h4, h5 { color: #000 !important; }

    /* links print as text; the URLs are of no use on paper */
    a { color: #000 !important; text-decoration: none !important; }
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
    }
    .header-search {
        order: 3;
        max-width: 100%;
    }
    .module-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .floating-chat-window {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: 75vh !important;
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
    }
}

/* ==========================================================================
   LANGUAGE SWITCH + BOOK-CONTENT ELEMENTS
   Added when the site was rebuilt around the actual textbook.
   ========================================================================== */

/* --- NO / EN segmented toggle in the header --- */
.lang-switch {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.lang-switch .lang-opt {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-switch .lang-opt:hover { color: var(--text-primary); }

.lang-switch .lang-opt.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 12px var(--primary-glow);
}

/* --- chapter summary line under the key-focus bar --- */
.mod-chapter-summary {
    margin: 0 0 18px;
    padding: 0 4px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* --- "s. 34" marker tying a section back to the printed page --- */
.page-ref {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

/* --- description of a figure that exists in the physical book --- */
.figure-note {
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 70%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px;
    margin: 16px 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary);
    font-style: italic;
}

.figure-note strong {
    font-style: normal;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* --- long chapters need breathing room between blocks --- */
/* ==========================================================================
   SIDE MENU — the sections, docked to the left edge
   ========================================================================== */

.app-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 750;
    display: flex; flex-direction: column; gap: var(--s4);
    padding: var(--s4) var(--s3);
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    scrollbar-width: thin;
}
.app-sidebar::-webkit-scrollbar { width: 0; }

/* short windows: tighten the menu so it never needs to scroll either */
@media (max-height: 820px) {
    .app-sidebar { gap: var(--s3); padding: var(--s3) var(--s3); }
    .app-sidebar .nav-item, .sb-item { min-height: var(--rail-item-h); }
    .sb-brand { padding-bottom: var(--s3); }
    .sb-brand-text span { display: none; }
}
@media (max-height: 700px) {
    .sb-label { display: none; }
    .sb-user-text span { display: none; }
}

/* ---- brand ---- */
.sb-brand {
    display: flex; align-items: center; gap: var(--s3);
    padding: 0 var(--s2) var(--s4);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.sb-brand .logo-badge {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    border-radius: var(--radius-md);
}
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sb-brand-text strong {
    font-family: var(--font-heading); font-size: 0.98rem; font-weight: 800;
    color: var(--text-primary); line-height: 1.1;
}
.sb-brand-text span {
    font-size: 0.62rem; color: var(--text-muted);
    letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- sections + tools share one row shape ---- */
.side-tabs { display: flex; flex-direction: column; gap: var(--s1); }

.app-sidebar .nav-item,
.sb-item {
    display: flex; align-items: center; gap: var(--s3);
    width: 100%;
    min-height: calc(var(--rail-item-h) + var(--s2));
    padding: 0 var(--s3);
    font-family: var(--font-heading); font-size: 0.84rem; font-weight: 600;
    color: var(--text-secondary);
    background: none; border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer; text-align: left; white-space: nowrap;
    transition: all var(--transition-fast);
}
.app-sidebar .nav-item::after { display: none; }
.app-sidebar .nav-item:hover,
.sb-item:hover {
    color: var(--text-primary);
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
}
.app-sidebar .nav-item.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    border-color: transparent;
    box-shadow: 0 var(--s1) var(--s3) -4px var(--primary-glow);
}
.side-ico { font-size: 1.05rem; line-height: 1; width: 1.3em; text-align: center; flex-shrink: 0; }
.side-label { overflow: hidden; text-overflow: ellipsis; }

/* ---- tools ---- */
.sb-group { display: flex; flex-direction: column; gap: var(--s1); }
.sb-label {
    font-family: var(--font-mono);
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 var(--s3) var(--s1);
}
.sb-badge {
    margin-left: auto;
    background: var(--danger); color: #fff;
    font-size: 0.62rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* ---- account + preferences, pinned to the foot ---- */
.sb-foot {
    margin-top: auto;
    display: flex; flex-direction: column; gap: var(--s2);
    padding-top: var(--s4);
    border-top: 1px solid var(--border-color);
}

.sb-foot .lang-switch { width: 100%; justify-content: stretch; }
.sb-foot .lang-switch .lang-opt { flex: 1; text-align: center; }

/* badge and cog side by side; only the badge opens the progress panel */
.sb-account {
    display: flex; align-items: stretch; gap: var(--s2);
}
.sb-account .sb-user { flex: 1; min-width: 0; }

.sb-user {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.sb-user:hover { border-color: var(--border-highlight); }
.sb-avatar { font-size: 1.15rem; flex-shrink: 0; }
.sb-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-user-text strong {
    font-size: 0.8rem; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-text span { font-size: 0.64rem; color: var(--text-muted); }
.sb-logout {
    appearance: none; cursor: pointer; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    background: none; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.sb-logout:hover { color: var(--danger); border-color: var(--danger); }

/* the page steps aside for the menu */
.app-layout-container { padding-left: var(--sidebar-w); }

/* ==========================================================================
   READING RAIL — floats in the gutter beside the text
   Sizes come from the 4px scale: 36px controls, 8px gaps, 12px padding,
   so the column widths and rhythm line up down the whole rail.
   ========================================================================== */

.side-nav {
    position: fixed;
    /* `left` comes from JS, measured off the text column and the side menu, so
       the rail sits in the gutter between them. */
    left: var(--sidebar-w);
    bottom: var(--s6);
    z-index: 700;
    width: var(--rail-w);
    max-height: calc(100vh - var(--s6) * 2);
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s3);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;                 /* the layout adapts instead of scrolling */
    transition: opacity var(--transition-normal);
}
.side-nav.hidden { opacity: 0; pointer-events: none; }

/* ---------- search trigger ---------- */
.rail-search {
    appearance: none; cursor: pointer; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: var(--s1);
    padding: var(--s2) var(--s1);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
    transition: all var(--transition-fast);
}
.rail-search:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
    background: var(--bg-card-hover);
}
.rail-search-ico { font-size: 1rem; line-height: 1; }
.rail-search-kbd {
    font-family: var(--font-mono); font-size: 0.58rem;
    color: var(--text-muted); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 1px var(--s1);
}

/* ---------- groups ---------- */
.side-reader { display: flex; flex-direction: column; gap: var(--s3); }
.side-reader.hidden { display: none; }

.rail-group {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--s2);
}
.rail-label {
    font-family: var(--font-mono);
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--s2);
}

/* ---------- reading depth ---------- */
.read-mode-switch { display: flex; flex-direction: column; gap: var(--s1); }

.read-mode-switch .read-opt {
    appearance: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s1);
    min-height: calc(var(--rail-item-h) + var(--s5));
    padding: var(--s2) var(--s1);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
    line-height: 1.2; text-align: center;
    transition: all var(--transition-normal);
}
.read-mode-switch .read-opt .opt-icon {
    font-size: 1.05rem; line-height: 1;
    transition: transform var(--transition-normal);
}
.read-mode-switch .read-opt:hover {
    color: var(--text-primary); border-color: var(--border-highlight);
}
.read-mode-switch .read-opt:hover .opt-icon { transform: scale(1.12); }
.read-mode-switch .read-opt.active {
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    border-color: transparent; color: #fff;
    box-shadow: 0 var(--s1) var(--s3) -4px var(--primary-glow);
}

/* ---------- chapter buttons ---------- */
/* One column when there's room. On shorter windows the chapters reflow into a
   grid rather than growing a scrollbar — twelve numbers fit in a third of the
   height, and the hover popover still names each one. */
.reader-chapters {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s1);
}

.chapter-chip {
    appearance: none; cursor: pointer; width: 100%;
    position: relative; overflow: visible;
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    height: var(--rail-item-h);
    padding: 0 var(--s2);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.78rem; font-weight: 700;
    transition: all var(--transition-fast);
}
.chapter-chip .chip-num {
    font-family: var(--font-mono); font-size: 0.76rem;
    min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums;
}
.chapter-chip .chip-icon { font-size: 0.92rem; line-height: 1; }

.chapter-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
    transform: translateX(2px);
}

/* ---- the chapter you are reading right now ---- */
.chapter-chip.is-current {
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    border-color: transparent; color: #fff;
    box-shadow: 0 var(--s1) var(--s4) -3px var(--primary-glow);
    z-index: 1;
}
.chapter-chip.is-current .chip-num { color: #fff; }
.chapter-chip.is-current .chip-icon { transform: scale(1.1); }

.chapter-chip.is-current::before {
    content: '';
    position: absolute; left: calc(var(--s2) * -1); top: 50%;
    width: 3px; height: 60%;
    transform: translateY(-50%);
    background: var(--primary-light);
    border-radius: 2px;
    box-shadow: 0 0 var(--s2) var(--primary-glow);
}

@keyframes chip-land {
    0%   { box-shadow: 0 4px 16px -3px var(--primary-glow), 0 0 0 0 var(--primary-glow); }
    60%  { box-shadow: 0 4px 16px -3px var(--primary-glow), 0 0 0 6px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 4px 16px -3px var(--primary-glow), 0 0 0 0 rgba(37, 99, 235, 0); }
}
.chapter-chip.is-current { animation: chip-land 0.45s ease-out; }
@media (prefers-reduced-motion: reduce) { .chapter-chip.is-current { animation: none; } }

/* a chapter you have marked as read */
.chapter-chip.is-read { border-color: rgba(16, 185, 129, 0.45); }
.chapter-chip.is-read .chip-num { color: var(--success); }
.chapter-chip.is-current.is-read .chip-num { color: #fff; }


/* ---------- reading column ---------- */
.book-stage { padding: 6px 0 80px; }

.modules-container {
    display: flex; flex-direction: column; gap: 30px;
    max-width: 1000px; margin: 0 auto;
}

.chapter-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    scroll-margin-top: var(--s6);
}
.chapter-card.is-read { border-color: rgba(16, 185, 129, 0.35); }

.chapter-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap;
    padding: 24px 30px 20px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), transparent 65%);
    border-bottom: 1px solid var(--border-color);
}

.chapter-title {
    font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800;
    line-height: 1.2; margin: 0; color: var(--text-primary);
}

.chapter-lede {
    margin: 0; padding: 18px 30px 0;
    font-size: 0.94rem; line-height: 1.7; color: var(--text-secondary);
}

/* ---------- essentials ---------- */
.ess-block + .ess-block { margin-top: 26px; }
.ess-block h3 {
    font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700;
    color: var(--primary-light); margin: 0 0 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.ess-list { list-style: none; padding: 0; margin: 0; }
.ess-list li {
    position: relative; padding: 5px 8px 5px 24px; margin: 0 0 10px -8px;
    font-size: 0.92rem; line-height: 1.75;
}
.ess-list li:last-child { margin-bottom: 0; }
.ess-list li::before {
    content: '▸'; position: absolute; left: 8px; top: 5px;
    color: var(--primary); font-size: 0.85rem;
}

/* ---------- chapter header ---------- */
.chapter-head-main { display: flex; gap: 16px; align-items: flex-start; }

.chapter-icon {
    font-size: 2rem; line-height: 1; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface-elevated); border: 1px solid var(--border-color);
}

.chapter-num {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--primary-light); margin-bottom: 5px;
}
.chapter-pages {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
    text-transform: none; color: var(--text-muted);
    background: var(--bg-surface-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 1px 7px;
}
.chapter-alt { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-top: 3px; }

.chapter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-chip {
    appearance: none; cursor: pointer; font-size: 0.75rem; font-weight: 600;
    padding: 6px 12px; border-radius: var(--radius-full);
    background: var(--bg-surface-elevated); border: 1px solid var(--border-color);
    color: var(--text-secondary); transition: all var(--transition-fast);
}
.btn-chip:hover { color: var(--text-primary); border-color: var(--border-highlight); }

/* ---------- chapter body: each block is its own panel ---------- */
.chapter-body { padding: 22px 30px 28px; }

.chapter-body .content-block,
.chapter-body .ess-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-bottom: 22px;
}
.chapter-body .content-block:last-child,
.chapter-body .ess-block:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   READING TYPOGRAPHY
   These rules previously targeted .module-body, which the reader no longer
   uses — which is why the full-book text ran together with no spacing.
   -------------------------------------------------------------------------- */

.chapter-body { font-size: 0.95rem; }

/* Text fills its panel. An earlier 74ch reading measure left a wide gap on the
   right of every paragraph, which read as broken rather than comfortable. */
.chapter-body .content-block > p,
.chapter-body .content-block > ul,
.chapter-body .content-block > ol { max-width: none; }

.chapter-body h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-light);
    margin: 30px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.3;
}
.chapter-body > .content-block > h3:first-child,
.chapter-body > .ess-block > h3:first-child { margin-top: 0; }

.chapter-body h4 {
    font-family: var(--font-heading);
    font-size: 1.04rem; font-weight: 700;
    margin: 26px 0 9px; color: var(--text-primary);
}
.chapter-body h5 {
    font-size: 0.94rem; font-weight: 700;
    margin: 20px 0 7px; color: var(--text-primary);
}

.chapter-body p {
    line-height: 1.8;
    margin: 0 0 18px;
    color: var(--text-secondary);
}
.chapter-body p:last-child { margin-bottom: 0; }

.chapter-body ul,
.chapter-body ol { line-height: 1.8; margin: 0 0 18px; padding-left: 24px; }
.chapter-body li { margin-bottom: 10px; }
.chapter-body li:last-child { margin-bottom: 0; }

.chapter-body strong { color: var(--text-primary); }

/* space around anything boxed inside a block */
.chapter-body .info-box,
.chapter-body .term-grid,
.chapter-body .table-responsive,
.chapter-body .formula-box,
.chapter-body .process-steps,
.chapter-body .timeline-box,
.chapter-body .grid-2,
.chapter-body .grid-3,
.chapter-body .info-grid-2 { margin: 20px 0; }

.chapter-body > .content-block > *:last-child,
.chapter-body > .ess-block > *:last-child { margin-bottom: 0; }

/* hovering a passage shouldn't crop it against the outline */
.chapter-body p.has-tr,
.chapter-body h3.has-tr,
.chapter-body h4.has-tr,
.chapter-body h5.has-tr { padding: 3px 8px; margin-left: -8px; }

/* List items keep their left indent — the marker sits in that space, so
   flattening the padding pushed the ▸ on top of the first word. */
.chapter-body li.has-tr { padding: 5px 8px 5px 24px; margin-left: 0; }

.ess-list code, .chapter-body code {
    font-family: var(--font-mono); font-size: 0.86em; font-weight: 600;
    background: var(--code-bg); border: 1px solid var(--code-border);
    padding: 1px 6px; border-radius: var(--radius-sm); color: var(--code-fg);
}

/* ---------- term list ---------- */
.term-section { margin-bottom: 34px; }
.term-section-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
    margin: 0 0 14px; padding-bottom: 9px;
    border-bottom: 2px solid var(--border-color); color: var(--text-primary);
}
.term-sec-icon { font-size: 1.25rem; }
.term-sec-count {
    margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted); background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 2px 9px;
}
.term-rows { display: grid; gap: 10px; }
.term-row {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md); padding: 13px 16px;
    transition: all var(--transition-fast);
}
.term-row:hover { background: var(--bg-card-hover); transform: translateX(2px); }
.term-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.term-row-term { font-size: 1rem; color: var(--text-primary); }
.term-row-alt { font-size: 0.83rem; color: var(--primary-light); font-style: italic; }
.term-row-def { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }

/* ---------- cheat sheet ---------- */
.cheat-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.cheat-grid {
    display: grid; gap: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    align-items: start;
    margin-bottom: var(--s6);
}

/* room under the last card and the note, so neither ends flush against the
   bottom of the scroll area */
#tab-cheatsheet { padding-bottom: var(--s8); }
#cheatsheet-note { margin-bottom: var(--s6); }
.cheat-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-top: 3px solid var(--cheat-accent, var(--primary));
    border-radius: var(--radius-lg);
    padding: var(--s5) var(--s5) var(--s6);
    transition: all var(--transition-normal);
}
.cheat-card:hover { border-color: var(--border-highlight); box-shadow: var(--shadow-md); }
.cheat-head { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-color); }
.cheat-tag {
    display: inline-block; font-family: var(--font-mono);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cheat-accent, var(--primary));
    border: 1px solid currentColor; border-radius: var(--radius-sm);
    padding: 2px 8px; margin-bottom: 9px;
}
.cheat-head h4 {
    font-family: var(--font-heading); font-size: 1.14rem; font-weight: 700;
    margin: 0; color: var(--text-primary);
}
.cheat-pages { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.cheat-list { list-style: none; margin: 0; padding: 0; }
.cheat-list li {
    position: relative; padding: 0 0 0 var(--s4); margin-bottom: var(--s3);
    font-size: 0.87rem; line-height: 1.65; color: var(--text-secondary);
}
.cheat-list li:last-child { margin-bottom: 0; }
.cheat-list li::before {
    content: ''; position: absolute; left: 0; top: 10px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cheat-accent, var(--primary));
}
.cheat-list strong { color: var(--text-primary); }

/* ---------- scanned page viewer ---------- */
.scan-box { max-width: 940px; width: 92vw; }
.scan-body {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: var(--bg-main); border-radius: var(--radius-md); padding: 10px;
    max-height: 74vh; overflow: auto;
}
.scan-body img {
    max-width: 100%; max-height: 72vh; display: block;
    border-radius: 4px; box-shadow: var(--shadow-md); background: #fff;
}
.scan-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    background: var(--bg-surface-elevated); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 1.5rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast); z-index: 2;
}
.scan-nav:hover { background: var(--primary); color: #fff; }
.scan-nav.prev { left: 14px; }
.scan-nav.next { right: 14px; }
.scan-hint {
    text-align: center; font-size: 0.76rem; color: var(--text-muted); margin: 12px 0 0;
}

/* ---------- responsive: one page per row on narrow screens ---------- */
@media (max-width: 1100px) {
    /* narrow window: the menu lies along the foot, the rail follows it */
    .app-layout-container { padding-left: 0; }
    .app-sidebar {
        left: 0; right: 0; top: auto; bottom: 0; width: auto;
        flex-direction: row; align-items: center; gap: var(--s2);
        border-right: 0; border-top: 1px solid var(--border-color);
        padding: var(--s2) var(--s3); overflow-x: auto;
    }
    .sb-brand, .sb-label, .sb-user-text { display: none; }
    .side-tabs, .sb-group { flex-direction: row; }
    .sb-foot { margin-top: 0; flex-direction: row; padding-top: 0; border-top: 0; }
    .app-sidebar .nav-item .side-label,
    .sb-item .side-label { display: none; }
    .app-sidebar .nav-item, .sb-item { width: auto; justify-content: center; padding: 0 var(--s3); }
    .side-nav {
        left: 0 !important; right: 0; top: auto; bottom: 56px; width: auto;
        flex-direction: row; align-items: center; gap: var(--s2);
        border-radius: 0; border-left: 0; border-right: 0;
        overflow-x: auto; padding: var(--s2) var(--s3);
    }
    .rail-search { width: auto; flex-direction: row; padding: var(--s2) var(--s3); }
    .rail-search-kbd { display: none; }
    .side-reader { flex-direction: row; gap: 8px; align-items: center; }
    .rail-group { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
    .rail-label { display: none; }
    .read-mode-switch { flex-direction: row; }
    .read-mode-switch .read-opt { flex-direction: row; gap: 6px; padding: 7px 10px; }
    .reader-chapters { flex-direction: row; }
    .chapter-chip { width: auto; }
    .chapter-chip.is-current::before,
    .chapter-chip.is-current::after { display: none; }
    .chapter-head { padding: 20px 20px 16px; }
    .chapter-lede { padding: 16px 20px 0; }
    .chapter-body { padding: 18px 20px 22px; }
    .chapter-title { font-size: 1.35rem; }
}

/* The popover needs room beside the text; below that, suppress it and let the
   language toggle do the work instead. */
@media (max-width: 900px) {
    .tr-pop { display: none !important; }
}

/* The full print stylesheet lives earlier in this file; this only repeats the
   hide rules for elements defined down here, so they cannot win on order. */
@media print {
    .side-nav, .tr-pop, .toast-stack { display: none !important; }
}


/* ==========================================================================
   HOVER TRANSLATION
   Any passage can be hovered to see the same passage in the other language.
   ========================================================================== */

/* the passage being hovered lifts and outlines */
.has-tr {
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), box-shadow var(--transition-normal),
                transform var(--transition-normal), outline-color var(--transition-fast);
    outline: 1px solid transparent;
    outline-offset: 4px;
}
.has-tr:hover,
.has-tr.tr-hot {
    background: var(--bg-card-hover);
    outline-color: var(--border-highlight);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
    cursor: help;
}
[data-theme="light"] .has-tr:hover,
[data-theme="light"] .has-tr.tr-hot {
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.25);
}

/* Chips and buttons already have their own hover treatment — they only need
   the popover, not a second lift on top of it. */
.chapter-chip.has-tr:hover,
.chapter-chip.has-tr.tr-hot,
.quiz-option-card.has-tr:hover,
.quiz-option-card.has-tr.tr-hot {
    transform: none;
    box-shadow: none;
    background: inherit;
}
.chapter-chip.has-tr { outline-offset: 2px; }

/* the popover itself */
.tr-pop {
    position: fixed; z-index: 900;
    width: min(380px, 32vw);
    max-height: 70vh; overflow: auto;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px 18px 16px;
    opacity: 0; visibility: hidden;
    transform: translateX(-8px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    pointer-events: none;   /* never steals the hover */
}
.tr-pop.is-left { transform: translateX(8px); }
.tr-pop.active { opacity: 1; visibility: visible; transform: translateX(0); }

.tr-pop-head {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--primary-light);
    padding-bottom: 9px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.tr-pop-flag { font-size: 0.95rem; }
.tr-pop-body { font-size: 0.9rem; line-height: 1.65; color: var(--text-primary); }
.tr-pop-body strong { color: var(--text-primary); }
.tr-pop-body code {
    font-family: var(--font-mono); font-size: 0.86em; font-weight: 600;
    background: var(--code-bg); border: 1px solid var(--code-border);
    padding: 1px 6px; border-radius: var(--radius-sm); color: var(--code-fg);
}
.tr-pop-body .page-ref { display: none; }   /* the page marker is already on screen */

/* second line inside a popover: the other language, or a hint */
.tr-pop-body .tr-sub,
.tr-pop-body .tr-note {
    display: block;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 0.86em;
}
.tr-pop-body .tr-note { font-style: italic; color: var(--text-muted); }

/* ==========================================================================
   CHAT — conversation list + thread, in the familiar messaging shape
   ========================================================================== */

.chat-shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.chat-shell .chat-window-drag-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: move;
    background: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.chat-back { display: none; background: none; border: 0; color: var(--text-secondary);
             font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.chat-peer { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.chat-peer-avatar { font-size: 1.3rem; }
.chat-peer-name { font-weight: 700; font-size: 0.94rem; color: var(--text-primary); }
.chat-peer-sub { font-size: 0.72rem; color: var(--text-muted); }

.chat-body { display: flex; flex: 1; min-height: 0; }

/* ---- conversation list ---- */
.chat-threads {
    width: 190px; flex-shrink: 0; overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: var(--bg-surface);
}
.chat-thread {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; background: none; border: 0; cursor: pointer;
    text-align: left; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}
.chat-thread:hover { background: var(--bg-card-hover); }
.chat-thread.active { background: rgba(37, 99, 235, 0.14); color: var(--text-primary); }
.chat-thread-avatar { position: relative; font-size: 1.2rem; flex-shrink: 0; }
.chat-thread-avatar .dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); border: 2px solid var(--bg-surface);
}
.chat-thread-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chat-thread-title { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.chat-thread-preview {
    font-size: 0.72rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-unread {
    background: var(--primary); color: #fff; font-size: 0.68rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   THREAD LIST SECTIONS — Group chat, then Online, then Offline
   -------------------------------------------------------------------------- */
.chat-thread-label {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    padding: var(--s3) var(--s3) var(--s1);
    background: var(--bg-surface);
    border: 0; text-align: left;
}
.chat-thread-label:first-child { padding-top: var(--s2); }

/* Online and Offline fold away; the group room does not, so it is a plain
   heading rather than a button. */
.chat-thread-label.is-toggle {
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.chat-thread-label.is-toggle:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.chat-thread-label.is-toggle:focus-visible {
    outline: 2px solid var(--primary-light); outline-offset: -2px;
}

.chat-sec-caret { font-size: 0.7rem; width: 10px; flex-shrink: 0; }
.chat-sec-name  { flex: 1; min-width: 0; }
.chat-sec-count {
    font-family: var(--font-mono); font-size: 0.62rem;
    color: var(--text-muted); opacity: 0.8;
}
/* A folded section still has to admit that something is waiting inside it. */
.chat-sec-unread {
    background: var(--primary); color: #fff;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0;
    min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
}

.chat-thread-empty {
    font-size: 0.72rem; color: var(--text-muted);
    padding: var(--s1) var(--s3) var(--s3);
    font-style: italic;
}

/* someone unreachable is dimmed, but still writable — the message waits */
.chat-thread.is-offline .chat-thread-avatar,
.chat-thread.is-offline .chat-thread-title { opacity: 0.55; }

/* a conversation with something waiting in it pulls the eye */
.chat-thread.has-unread .chat-thread-title { color: var(--text-primary); font-weight: 700; }
.chat-thread.has-unread { background: rgba(37, 99, 235, 0.07); }
.chat-thread.has-unread.is-offline .chat-thread-title { opacity: 1; }

.chat-peer-sub.is-online { color: var(--success); }

/* --------------------------------------------------------------------------
   CONNECTION DOT on the menu's Chat entry
   Green only when the socket is actually up: "there was a server when the page
   loaded" is not the same thing as "a message would arrive".
   -------------------------------------------------------------------------- */
.sb-status {
    width: 8px; height: 8px; border-radius: 50%;
    margin-left: auto; flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--bg-surface);
}
.sb-status.is-up   { background: var(--success); }
.sb-status.is-down { background: var(--danger); }

/* with an unread badge present the badge takes the auto margin instead */
.sb-item .sb-badge + .sb-status,
.sb-item .sb-status + .sb-badge { margin-left: var(--s2); }

/* --------------------------------------------------------------------------
   TOASTS — bottom right, where the floating bubbles used to be
   -------------------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    right: var(--s5); bottom: var(--s5);
    z-index: 1600;
    display: flex; flex-direction: column; gap: var(--s2);
    width: min(330px, calc(100vw - 2 * var(--s5)));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateX(16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.in { opacity: 1; transform: none; }
.toast.leaving { opacity: 0; transform: translateX(16px); }
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { border-color: var(--border-highlight); }

.toast-ico { font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; }
.toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.toast-title { font-size: 0.8rem; color: var(--text-primary); }
.toast-body {
    font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.toast-x {
    appearance: none; background: none; border: 0; cursor: pointer;
    color: var(--text-muted); font-size: 0.72rem; padding: 2px 4px;
    flex-shrink: 0; border-radius: var(--radius-sm);
}
.toast-x:hover { color: var(--text-primary); }

/* ---- the open conversation ---- */
.chat-conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-messages-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 3px; }

.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg + .chat-msg:not(.grouped) { margin-top: 10px; }

.chat-msg-meta { font-size: 0.7rem; margin-bottom: 3px; padding: 0 4px; }
.chat-msg-name { font-weight: 700; color: var(--primary-light); }

.chat-bubble-msg {
    position: relative;
    padding: 8px 12px 8px 12px;
    border-radius: 14px;
    font-size: 0.88rem; line-height: 1.5;
    word-break: break-word;
    display: inline-block;
}
.chat-msg.mine .chat-bubble-msg {
    background: var(--primary); color: #fff; border-bottom-right-radius: 4px;
}
.chat-msg.theirs .chat-bubble-msg {
    background: var(--bg-surface-elevated); color: var(--text-primary);
    border: 1px solid var(--border-color); border-bottom-left-radius: 4px;
}
.chat-msg-time {
    display: inline-block; margin-left: 8px;
    font-size: 0.64rem; opacity: 0.7; vertical-align: bottom;
}

.chat-offline, .chat-offline-note {
    padding: 18px 14px; font-size: 0.82rem; color: var(--text-muted); text-align: center; line-height: 1.6;
}

/* narrow window: one pane at a time, with a back button */
@media (max-width: 520px) {
    .chat-threads { display: none; }
    .floating-chat-window.show-threads .chat-threads { display: block; width: 100%; }
    .floating-chat-window.show-threads .chat-conversation { display: none; }
    .chat-back { display: block; }
}

/* ---- short windows: reflow rather than scroll ----------------------------
   Each tier keeps the same rhythm: square-ish targets, one gap value, the
   panels intact. Only labels are traded away, never structure.
   ------------------------------------------------------------------------ */

@media (max-height: 940px) {
    .side-nav { --rail-item-h: 34px; gap: var(--s2); padding: var(--s2); }
    .rail-group { padding: var(--s2); }
    .rail-label { margin-bottom: var(--s1); }

    .reader-chapters { grid-template-columns: repeat(2, 1fr); }
    .chapter-chip { padding: 0; gap: 0; justify-content: center; }
    .chapter-chip .chip-icon { display: none; }      /* the number carries it */
    .chapter-chip .chip-num { min-width: auto; text-align: center; }

    /* the edge bar has no room outside a grid cell — put it on the inside */
    .chapter-chip.is-current::before {
        left: 0; width: 3px; height: 100%;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        box-shadow: none;
    }
    .chapter-chip:hover { transform: none; }
}

@media (max-height: 820px) {
    .side-nav { --rail-item-h: 30px; }
    .reader-chapters { grid-template-columns: repeat(3, 1fr); }

    /* search collapses to a square that matches the chapter buttons */
    .rail-search {
        flex-direction: row; justify-content: center;
        gap: var(--s2); padding: var(--s2);
        min-height: calc(var(--rail-item-h) + var(--s2));
    }
    .rail-search-kbd { display: none; }

    /* the two view buttons sit side by side, same square as the chapters */
    .read-mode-switch { flex-direction: row; gap: var(--s1); }
    .read-mode-switch .read-opt {
        flex: 1; min-height: calc(var(--rail-item-h) + var(--s2));
        padding: 0; gap: 0;
    }
    .read-mode-switch .read-opt .opt-text { display: none; }
    .read-mode-switch .read-opt .opt-icon { font-size: 1.05rem; }
}

@media (max-height: 700px) {
    /* last resort: the group captions and the search word go */
    .rail-label { display: none; }
    .rail-search-label { display: none; }
    .side-nav { gap: var(--s1); }
    .rail-group { padding: var(--s1); }
    .side-reader { gap: var(--s1); }
}

/* ==========================================================================
   FINDER — the search overlay, opened from the rail or ⌘K / Ctrl+K
   ========================================================================== */

#search-results-modal { align-items: flex-start; }

.finder {
    width: min(680px, 92vw);
    margin-top: 12vh;
    background: var(--bg-surface);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 70vh;
}

.finder-head {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.finder-ico { font-size: 1.05rem; opacity: 0.75; }
.finder-head input {
    flex: 1; border: 0; background: none; outline: none;
    color: var(--text-primary);
    font-family: var(--font-body); font-size: 1.02rem;
}
.finder-head input::placeholder { color: var(--text-muted); }
.finder-close {
    appearance: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--s1) var(--s2);
    transition: all var(--transition-fast);
}
.finder-close:hover { color: var(--text-primary); border-color: var(--border-highlight); }

.finder .search-results-list {
    overflow-y: auto; padding: var(--s2);
    flex: 1; min-height: 0;
}

.finder-foot {
    display: flex; gap: var(--s5);
    padding: var(--s2) var(--s5);
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-elevated);
    font-size: 0.66rem; color: var(--text-muted);
    flex-shrink: 0;
}
.finder-foot kbd {
    font-family: var(--font-mono); font-size: 0.62rem;
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 1px var(--s1); margin-right: 2px;
}

/* keyboard selection in the results list */
.search-result-item.is-active {
    background: var(--bg-card-hover);
    border-color: var(--border-highlight);
    box-shadow: inset 3px 0 0 var(--primary);
}

.search-empty { padding: var(--s6); text-align: center; color: var(--text-muted); font-size: 0.88rem; }

.search-hint {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* ==========================================================================
   PAGE HEADS, TERMS PAGE, PROGRESS PAGE
   ========================================================================== */

.page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s6);
}
.page-sub { color: var(--text-secondary); font-size: 0.88rem; margin: var(--s1) 0 0; }

/* ---- segmented control ---- */
.terms-controls { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color); border-radius: var(--radius-full);
}
.seg-opt {
    appearance: none; cursor: pointer; border: 0; background: transparent;
    color: var(--text-secondary); font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 600; padding: 6px 14px;
    border-radius: var(--radius-full); transition: all var(--transition-fast);
    white-space: nowrap;
}
.seg-opt:hover { color: var(--text-primary); }
.seg-opt.active { background: var(--primary); color: #fff; }

.seg-opt.starred-only {
    border: 1px solid var(--border-color);
    background: var(--bg-surface-elevated);
    padding: 7px 14px;
}
.seg-opt.starred-only.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }

#terms-filter-input { min-width: 220px; }

/* ---- terms ---- */
.term-letter {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.12em; color: var(--primary-light);
    padding: var(--s4) 0 var(--s1) var(--s1);
}
.term-row.is-starred { border-left-color: var(--accent); }
.term-star {
    appearance: none; cursor: pointer; margin-left: auto;
    background: none; border: 0; font-size: 1rem; line-height: 1;
    color: var(--text-muted); transition: all var(--transition-fast);
}
.term-star:hover { color: var(--accent); transform: scale(1.15); }
.term-star.on { color: var(--accent); }

/* ---- progress ---- */
.stat-row {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: var(--s4);
    text-align: center;
}
.stat-v {
    font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800;
    color: var(--primary-light); line-height: 1.1;
}
.stat-l { font-size: 0.72rem; color: var(--text-muted); margin-top: var(--s1); }

.weak-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.weak-chip {
    appearance: none; cursor: pointer;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--danger); color: var(--text-primary);
    border-radius: var(--radius-full); padding: 6px 12px;
    font-size: 0.8rem; font-weight: 600;
    transition: all var(--transition-fast);
}
.weak-chip:hover { background: var(--danger); color: #fff; }

/* ==========================================================================
   SETTINGS SHEET — appearance and account.
   Language and reading mode are not here on purpose: both have their own
   always-visible control, so duplicating them only adds places to look.
   ========================================================================== */

.sb-cog {
    appearance: none; cursor: pointer; flex-shrink: 0;
    width: auto; min-width: 34px; align-self: stretch;
    border-radius: var(--radius-md);
    background: var(--bg-surface-elevated);
    background: none; border: 1px solid var(--border-color);
    color: var(--text-secondary); font-size: 0.9rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.sb-cog:hover {
    color: var(--text-primary); border-color: var(--border-highlight);
    background: var(--bg-card-hover);
}

.settings-box {
    width: min(460px, 92vw);
    background: var(--bg-surface);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.settings-box .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border-color);
}
.settings-box .modal-head h3 { margin: 0; font-size: 1.05rem; }

.settings-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }

.set-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap;
}
.set-row.set-stack { flex-direction: column; align-items: stretch; gap: var(--s3); }
.set-label {
    font-family: var(--font-heading); font-size: 0.86rem; font-weight: 600;
    color: var(--text-primary);
}
.set-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.set-danger { color: var(--danger); }
.set-danger:hover { border-color: var(--danger); }

/* ===========================================================================
   MOBILE NAVIGATION
   A phone gets one obvious Menu button and a vertical drawer. The old mobile
   treatment squeezed every destination into a horizontally scrolling bar,
   which hid options and made the app feel like a carousel instead of a menu.
   =========================================================================== */
.mobile-menu-toggle,
.mobile-nav-scrim { display: none; }

@media (max-width: 760px) {
    .mobile-menu-toggle {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 860;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 13px;
        color: var(--text-primary);
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        font-family: var(--font-heading);
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
    }
    .mobile-menu-toggle span:first-child { font-size: 1.15rem; line-height: 1; }
    .mobile-menu-toggle:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

    .mobile-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 840;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(2, 6, 23, 0.62);
        transition: opacity var(--transition-normal), visibility var(--transition-normal);
    }
    .mobile-nav-scrim.is-visible { visibility: visible; opacity: 1; }

    .app-sidebar {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 850;
        width: min(320px, 88vw);
        padding: 20px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s4);
        overflow-y: auto;
        border-top: 0;
        border-right: 1px solid var(--border-color);
        border-radius: 0;
        transform: translateX(-105%);
        transition: transform var(--transition-normal);
    }
    .app-sidebar.mobile-open { transform: translateX(0); }
    .sb-brand { display: flex; }
    .sb-label { display: block; }
    .sb-user-text { display: flex; }
    .side-tabs,
    .sb-group { flex-direction: column; }
    .app-sidebar .nav-item .side-label,
    .sb-item .side-label { display: inline; }
    .app-sidebar .nav-item,
    .sb-item { width: 100%; justify-content: flex-start; padding: 0 var(--s3); }
    .sb-foot { margin-top: auto; flex-direction: column; padding-top: var(--s4); border-top: 1px solid var(--border-color); }
    .side-nav { display: none; }

    .app-layout-container { padding-left: 0; }
    .main-wrapper { padding: 72px 16px 28px; }
    /* Every two-column form becomes one column. This is what sent the account
       form and the calculator off the side of the screen. */
    .form-row,
    .calc-grid,
    .quiz-setup-grid,
    .settings-choice-grid,
    .cheat-grid,
    .stat-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* The floating windows were fixed pixel sizes wider than a phone. */
    .floating-chat-window,
    .floating-notes-window {
        top: auto;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        height: min(78vh, 560px) !important;
        max-width: none;
    }
    /* Dragging and resizing make no sense at this size. */
    .chat-resize-handle { display: none; }

    /* A phone has room for one pane at a time: the list or the conversation. */
    .chat-body { position: relative; }
    .chat-threads {
        position: absolute; inset: 0; z-index: 2;
        width: 100%; border-right: 0;
        display: none;
    }
    .floating-chat-window.show-threads .chat-threads { display: block; }
    .chat-back { display: inline-flex; }

    /* Anything laid out in a row that can afford to wrap, wraps. */
    .set-password, .set-actions, .quick-login-pills, .cheat-header { flex-wrap: wrap; }
    .set-password input { flex: 1 1 100%; }

    /* Modals get the screen, minus a margin. */
    .modal-dialog, .modal-dialog-large, .settings-box {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px;
    }

    /* Long words and codes must not push the page wide. */
    body { overflow-x: hidden; }
    .chapter-body, .term-row-def, .cheat-list li { overflow-wrap: anywhere; }
    .exam-hero-card,
    .chapter-practice-panel { padding: 18px; }
    .chapter-quiz-card { grid-template-columns: auto minmax(0, 1fr); }
    .chapter-quiz-start { grid-column: 2; }
    .quiz-top-bar,
    .quiz-question-header,
    .quiz-footer-bar { gap: 12px; flex-wrap: wrap; }
    .quiz-question-box { padding: 20px; }
    .quiz-footer-bar > div { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}