/* ===========================
   Course Template - Main CSS
   Mobile-first, Responsive, Accessible
   Updated: 2026 — dark/light mode, modern layout
   =========================== */

/* ===========================
   CSS Reset
   =========================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ===========================
   CSS Variables — Light (default)
   =========================== */
:root {
    /* Surface colors */
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    --text-color: #1e293b;
    --text-light: #5b6675;
    --border-color: #e2e8f0;

    /* Primary accent */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: rgba(59, 130, 246, 0.08);
    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    /* Link/icon text — AA-contrast, theme-aware (see dark blocks) */
    --link-color: #2563eb;
    --link-hover: #1d4ed8;
    --speaker-b: #9333ea;

    /* Code */
    --code-bg: #f1f5f9;
    --code-color: #334155;

    /* Prism tokens (light) */
    --tok-comment: #6a737d;
    --tok-string:  #50a14f;
    --tok-keyword: #4078f2;
    --tok-function:#c18401;
    --tok-number:  #e45649;
    --tok-operator:#a626a4;

    /* Semantic cards */
    --success-bg: #f0fdf4;
    --success-border: #22c55e;
    --warning-bg: #fffbeb;
    --warning-border: #f59e0b;
    --info-bg: #eff6ff;
    --info-border: #3b82f6;
    --danger-bg: #fef2f2;
    --danger-border: #ef4444;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Typography */
    --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --line-height-base: 1.7;
    --line-height-heading: 1.25;

    /* Misc */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    color-scheme: light dark;
}

/* ===========================
   Dark theme variables
   =========================== */
:root[data-theme="dark"] {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --nav-bg: #1e293b;
    --text-color: #e2e8f0;
    --text-light: #94a3b8;
    --border-color: #334155;

    --primary-light: rgba(59, 130, 246, 0.15);
    --link-color: #60a5fa;
    --link-hover: #93c5fd;
    --speaker-b: #c084fc;

    --code-bg: #1e293b;
    --code-color: #e2e8f0;

    --tok-comment: #6b7280;
    --tok-string:  #86efac;
    --tok-keyword: #93c5fd;
    --tok-function:#fcd34d;
    --tok-number:  #fca5a5;
    --tok-operator:#c4b5fd;

    --success-bg: rgba(34, 197, 94, 0.1);
    --success-border: #22c55e;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: #f59e0b;
    --info-bg: rgba(59, 130, 246, 0.1);
    --info-border: #3b82f6;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-border: #ef4444;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
}

/* OS-level dark preference (no explicit toggle yet) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-color: #0f172a;
        --card-bg: #1e293b;
        --nav-bg: #1e293b;
        --text-color: #e2e8f0;
        --text-light: #94a3b8;
        --border-color: #334155;
        --primary-light: rgba(59, 130, 246, 0.15);
        --link-color: #60a5fa;
        --link-hover: #93c5fd;
        --speaker-b: #c084fc;
        --code-bg: #1e293b;
        --code-color: #e2e8f0;
        --tok-comment: #6b7280;
        --tok-string:  #86efac;
        --tok-keyword: #93c5fd;
        --tok-function:#fcd34d;
        --tok-number:  #fca5a5;
        --tok-operator:#c4b5fd;
        --success-bg: rgba(34, 197, 94, 0.1);
        --success-border: #22c55e;
        --warning-bg: rgba(245, 158, 11, 0.1);
        --warning-border: #f59e0b;
        --info-bg: rgba(59, 130, 246, 0.1);
        --info-border: #3b82f6;
        --danger-bg: rgba(239, 68, 68, 0.1);
        --danger-border: #ef4444;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
    }
}

/* Force light when explicitly set */
:root[data-theme="light"] {
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    --text-color: #1e293b;
    --text-light: #5b6675;
    --border-color: #e2e8f0;
    --primary-light: rgba(59, 130, 246, 0.08);
    --code-bg: #f1f5f9;
    --code-color: #334155;
    --tok-comment: #6a737d;
    --tok-string:  #50a14f;
    --tok-keyword: #4078f2;
    --tok-function:#c18401;
    --tok-number:  #e45649;
    --tok-operator:#a626a4;
    --success-bg: #f0fdf4;
    --success-border: #22c55e;
    --warning-bg: #fffbeb;
    --warning-border: #f59e0b;
    --info-bg: #eff6ff;
    --info-border: #3b82f6;
    --danger-bg: #fef2f2;
    --danger-border: #ef4444;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
}

/* ===========================
   Base Styles — Mobile First
   =========================== */

body {
    font-family: var(--font-family-base);
    font-size: 1rem; /* relative so body text respects the user's browser font-size (WCAG 1.4.4) */
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    transition: background-color 0.3s ease, color 0.3s ease;
}

p, li, figcaption, blockquote { overflow-wrap: anywhere; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===========================
   Typography
   =========================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
}

h1 {
    font-size: 2rem;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--primary-gradient);
    color: #fff;
    margin: 0 0 var(--spacing-xl) 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

h2 {
    font-size: 1.6rem;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
}

h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.05rem; }

/* Callout / worked-example titles stay a consistent modest size no matter their
   heading level, so the a11y heading-level normalization (which may promote a
   callout's <h4> title to <h3>) doesn't change how they look. Excludes
   .lesson-card, whose <h3> course/module titles are meant to be prominent. */
.card:not(.lesson-card) > h3, .card:not(.lesson-card) > h4,
.worked-example > h3, .worked-example > h4 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

p { margin-bottom: var(--spacing-md); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 0.875rem; }

.lead {
    font-size: 1.15rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 0.2s, text-decoration-thickness 0.2s;
}
a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 2.5px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Lists */
ul, ol { margin: var(--spacing-md) 0; padding-left: var(--spacing-xl); }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li { margin-bottom: var(--spacing-sm); }
ul ul, ol ol, ul ol, ol ul { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }

/* ===========================
   Code and Pre
   =========================== */

code, pre {
    font-family: var(--font-family-mono);
    background-color: var(--code-bg);
    color: var(--code-color);
    border-radius: var(--radius-sm);
}

code {
    padding: 0.15em 0.4em;
    font-size: 0.88em;
}

pre {
    padding: var(--spacing-md);
    overflow-x: auto;
    line-height: 1.55;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
    white-space: pre;
}

pre code {
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
}

/* Prism-compatible tokens */
.token.comment  { color: var(--tok-comment);  font-style: italic; }
.token.string   { color: var(--tok-string); }
.token.keyword  { color: var(--tok-keyword); }
.token.function { color: var(--tok-function); }
.token.number   { color: var(--tok-number); }
.token.operator { color: var(--tok-operator); }

/* ===========================
   Tables
   =========================== */

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    margin: var(--spacing-md) 0;
    border-collapse: collapse;
}

th, td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border: 1px solid var(--border-color);
}

th {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

tr:nth-child(even) { background-color: var(--primary-light); }

/* ===========================
   Blockquotes
   =========================== */

blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--text-color);
}

/* ===========================
   Images and Media
   =========================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) auto;
    border-radius: var(--radius-md);
}

/* Canvas diagrams have fixed pixel widths (e.g. 600/800px); scale them down to fit their
   container so they don't spill past the card / force horizontal scroll on narrow screens. */
canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) auto;
}

figure { margin: var(--spacing-lg) 0; text-align: center; }
figcaption { margin-top: var(--spacing-sm); font-size: 0.9rem; color: var(--text-light); }

/* ===========================
   Navigation
   =========================== */

nav:first-of-type,
nav.main-nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    padding: calc(var(--spacing-sm) + env(safe-area-inset-top)) var(--spacing-md) var(--spacing-sm);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.nav-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--link-color);
    text-decoration: none;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.92rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover {
    color: var(--link-color);
    background-color: var(--primary-light);
}

.nav-divider {
    width: 1px;
    height: 1.2rem;
    background-color: var(--border-color);
    flex-shrink: 0;
}

/* Theme toggle button in nav */
#theme-toggle {
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    transition: background-color 0.2s, transform 0.2s;
}
#theme-toggle:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--link-color);
    padding: var(--spacing-xs);
}

/* ===========================
   Cards
   =========================== */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.card:hover { box-shadow: var(--shadow-md); }

.lesson-card { border-left: 4px solid var(--primary-color); }

/* Semantic card variants — use classes instead of inline styles */
.card-success {
    background: var(--success-bg);
    border-left: 4px solid var(--success-border);
}
.card-warning {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning-border);
}
.card-info {
    background: var(--info-bg);
    border-left: 4px solid var(--info-border);
}
.card-danger {
    background: var(--danger-bg);
    border-left: 4px solid var(--danger-border);
}
.card-accent {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
}
.card-accent h3,
.card-accent h4,
.card-accent p { color: #fff; }

.card-output {
    background: var(--code-bg);
    border-left: 4px solid var(--success-border);
}

.exercise-card {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
}
.exercise-card h3 { color: #fff; }

/* ===========================
   Buttons
   =========================== */

.button, button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}
.button:hover, button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.button:active, button:active { transform: translateY(0); }

.button-secondary {
    background-color: transparent;
    color: var(--link-color);
    border: 2px solid var(--primary-color);
}
.button-secondary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* ===========================
   Forms
   =========================== */

input, textarea, select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--card-bg);
    color: var(--text-color);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

label { display: block; margin-bottom: var(--spacing-xs); font-weight: 600; }

/* ===========================
   Utility Classes
   =========================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

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

/* ===========================
   Progress Indicator (REMOVED)
   =========================== */

/* .progress-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--border-color);
    z-index: 1000;
}
.progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    width: 0;
    transition: width 0.3s ease;
} */

/* Skip to main content */
.skip-to-main {
    position: absolute;
    left: -10000px;
    top: 30px;
    z-index: 999;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.skip-to-main:focus { left: 0; }

/* ===========================
   Lesson Navigation (prev/next)
   =========================== */

.lesson-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--spacing-xxl) 0;
    padding: var(--spacing-lg);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
    transition: background-color 0.3s ease;
}

.lesson-nav a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.3s;
    font-weight: 600;
}
.lesson-nav a:hover { background: var(--primary-hover); }

.lesson-nav .home-link {
    background: transparent;
    color: var(--link-color);
    border: 2px solid var(--primary-color);
}
.lesson-nav .home-link:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ===========================
   Breadcrumb Navigation
   =========================== */

.breadcrumb {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.88rem;
    background: transparent;
    border: none;
    box-shadow: none;
    position: static;
}

.breadcrumb ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.breadcrumb li::after {
    content: "›";
    margin: 0 var(--spacing-sm);
    color: var(--text-light);
}
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--link-color); text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--text-light); font-weight: 500; }

/* ===========================
   Sticky Table of Contents ("In This Lesson")
   Open:   full sticky card under the nav
   Closed: small round floating button (FAB), upper-left, just below nav
   Pairs with the span-based markup:
     <details class="card toc-card" open>
       <summary aria-label="Toggle table of contents">
         <span class="toc-icon" aria-hidden="true">[icon]</span>
         <span class="toc-label">In This Lesson</span>
         <span class="toc-chevron" aria-hidden="true">[chevron]</span>
       </summary>
       <nav aria-label="Table of Contents"> ... </nav>
     </details>
   =========================== */

.toc-card {
    position: sticky;
    top: 80px;                 /* clears the sticky main nav */
    z-index: 90;               /* below nav (100), above content */
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-xl);
    transition: box-shadow 0.3s ease, transform 0.2s ease, background-color 0.3s;
}

/* Hide native disclosure marker — we render our own chevron */
.toc-card summary { list-style: none; }
.toc-card summary::-webkit-details-marker { display: none; }
.toc-card summary::marker { content: ''; }

.toc-card summary {
    cursor: pointer;
    font-weight: bold;
    padding: var(--spacing-sm) var(--spacing-md);
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.toc-card .toc-icon  { font-size: 1.25rem; line-height: 1; }
.toc-card .toc-label { font-size: 1.1rem; font-weight: bold; }
.toc-card .toc-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-light);
    transition: transform 0.3s ease;
}
.toc-card[open] .toc-chevron { transform: rotate(180deg); }

.toc-card nav {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.toc-link {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    padding: 0.3rem 0.25rem;
    transition: color 0.2s;
}
.toc-link:hover { color: var(--link-color); }
.toc-link.active {
    color: var(--link-color);
    font-weight: 600;
}

/* ---- Collapsed state: floating action button (upper-left, below nav) ---- */
.toc-card:not([open]) {
    position: fixed;
    top: 76px;
    left: var(--spacing-lg);
    right: auto;
    bottom: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 95;
    overflow: hidden;
}
.toc-card:not([open]):hover {
    transform: scale(1.08);
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.toc-card:not([open]) summary {
    width: 100%;
    height: 100%;
    padding: 0;
    justify-content: center;
    color: white;
}
.toc-card:not([open]) .toc-icon { font-size: 1.25rem; color: white; }

/* Keep label/chevron for screen readers but hide them visually in FAB mode */
.toc-card:not([open]) .toc-label,
.toc-card:not([open]) .toc-chevron {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* On small screens, hug the left edge a little tighter */
@media (max-width: 767px) {
    .toc-card:not([open]) {
        top: 68px;
        left: var(--spacing-md);
        width: 40px;
        height: 40px;
    }
    .toc-card:not([open]) .toc-icon { font-size: 1.1rem; }
}

/* ===========================
   Quiz Styles
   =========================== */

.quiz-container { padding: var(--spacing-lg); }

.quiz-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    background: var(--card-bg);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 0.2s, background-color 0.2s;
}
.quiz-option:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    transform: none;
    box-shadow: none;
}
.quiz-option.correct {
    border-color: var(--success-border);
    background-color: var(--success-bg);
}
.quiz-option.incorrect {
    border-color: var(--danger-border);
    background-color: var(--danger-bg);
}
/* Shape cue (not colour alone) so correct/incorrect is distinguishable for
   colour-blind users directly on the option, not only via the feedback text. */
.quiz-option.correct::after   { content: " ✓"; float: right; font-weight: 700; color: var(--success-border); }
.quiz-option.incorrect::after { content: " ✗"; float: right; font-weight: 700; color: var(--danger-border); }

.quiz-feedback {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.quiz-feedback.correct { color: var(--success-border); }
.quiz-feedback.incorrect { color: var(--danger-border); }

/* ===========================
   Footer
   =========================== */

.site-footer {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    margin-top: var(--spacing-xxl);
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 0.9rem;
}
.site-footer a { color: var(--link-color); }
.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

/* ===========================
   SVG / Canvas / Mermaid Dark Mode
   =========================== */

/* Mermaid diagrams: container handles theme via JS reinit.
   Fallback filter for any embedded SVG that doesn't use CSS vars */
:root[data-theme="dark"] .diagram-auto-invert svg,
:root[data-theme="dark"] .svg-auto-invert {
    filter: invert(0.88) hue-rotate(180deg);
}

/* Canvas elements that need dark mode adaptation */
:root[data-theme="dark"] canvas.auto-invert {
    filter: invert(0.88) hue-rotate(180deg);
}

/* Mermaid specific: ensure text is readable */
.mermaid {
    text-align: center;
    margin: var(--spacing-lg) 0;
    overflow-x: auto;
}

/* Mermaid loads from a CDN, so on a slow (or failed) connection a diagram would
   otherwise show its raw `graph TD ...` source until the library renders it —
   confusing for this audience. Until Mermaid marks the block data-processed,
   hide the source and show a small placeholder instead. */
.mermaid:not([data-processed="true"]) {
    color: transparent;
    max-height: 2.75rem;
    overflow: hidden;
    position: relative;
}
.mermaid:not([data-processed="true"])::after {
    content: "📊 Diagram loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-style: italic;
    font-family: var(--font-family-base);
    white-space: normal;
}

/* SVG diagrams using CSS vars will adapt automatically.
   For inline SVGs, use var(--text-color), var(--card-bg), etc. */
svg text { fill: var(--text-color); }
svg .svg-bg { fill: var(--card-bg); }

/* ===========================
   Search Results (dark-aware)
   =========================== */

#search-results {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.search-result-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s;
}
.search-result-item:hover { background-color: var(--primary-light); }

.highlight {
    animation: highlight-flash 2s ease;
}
@keyframes highlight-flash {
    0%, 100% { background-color: transparent; }
    30% { background-color: var(--warning-bg); }
}

/* ===========================
   Keyboard Shortcuts Modal
   =========================== */

.shortcuts-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.shortcuts-content {
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.shortcuts-content .close-modal {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: transparent;
    color: var(--text-light);
    border: none;
    font-size: 1.5rem;
    padding: var(--spacing-xs);
    box-shadow: none;
}
.shortcuts-content .close-modal:hover {
    color: var(--text-color);
    transform: none;
    box-shadow: none;
}
.shortcuts-content dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
}
.shortcuts-content dt {
    font-family: var(--font-family-mono);
    background: var(--code-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: center;
}
.shortcuts-content dd { margin: 0; }

/* ===========================
   Progress bar (index page - REMOVED)
   =========================== */

/* .progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin: var(--spacing-sm) 0;
}
.progress-bar-container .progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 4px;
    transition: width 0.5s ease;
} */

/* Lesson link visited checkmark */
.lesson-link { text-decoration: none; }
.lesson-link.visited { opacity: 0.8; }
.checkmark {
    color: var(--success-border);
    margin-left: var(--spacing-sm);
    font-weight: 700;
}

/* ===========================
   Responsive Design
   =========================== */

@media (min-width: 768px) {
    body { padding: var(--spacing-lg); }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.8rem; }
    .container { padding: 0 var(--spacing-lg); }
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    body { padding: var(--spacing-xl); }
    h1 { font-size: 2.5rem; }
    .container { padding: 0 var(--spacing-xl); }
}

/* Collapse the top nav to a hamburger for tablet-portrait and below. The full
   horizontal menu plus a long course name does not fit under ~1024px (e.g.
   "Manufacturing & Trades Bridge" overflowed the viewport at 768px); the full
   menu is only shown at >=1024px, where it is verified to fit. The breakpoint
   is in em (63.99em = 1023px at the default 16px) so it also collapses when the
   user enlarges their browser font size, keeping the nav from overflowing on
   text zoom (WCAG 1.4.4). */
@media (max-width: 63.99em) {
    .mobile-menu-toggle { display: block; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--nav-bg);
        border-top: 1px solid var(--border-color);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-md);
        z-index: 300;
    }
    .nav-links.active { display: flex; }

    .nav-divider { display: none; }
}

@media (max-width: 767px) {
    /* Long subject brand names (e.g. "ABE Digital & Life Skills") plus the
       theme + menu toggles can exceed the width of very small phones (~320px),
       causing a sliver of horizontal scroll. Let the logo take a touch less
       room and ellipsis if it ever must, so the header never overflows. */
    .nav-logo {
        font-size: 1rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lesson-nav { flex-direction: column; }
    .lesson-nav a { width: 100%; text-align: center; justify-content: center; }

    table { font-size: 0.875rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
}

/* ===========================
   Print Styles
   =========================== */

@media print {
    body { background: #fff; color: #000; }
    nav, .lesson-nav, .progress-indicator, .skip-to-main,
    .mobile-menu-toggle, .copy-button, button, #theme-toggle { display: none !important; }
    h1, h2, h3, h4, h5, h6 {
        background: none !important;
        color: #000 !important;
        page-break-after: avoid;
    }
    a { color: #000; text-decoration: underline; }
    pre { page-break-inside: avoid; border: 1px solid #ccc; }
    img { page-break-inside: avoid; }

    /* Screen-only chrome that must not appear on paper. */
    .tts-panel, .toc-card, .audio-unavailable, .speak-toolbar { display: none !important; }

    /* Neutralize the coloured cards for print. Several (notably .card-accent and
       the Mindset cards) use white text on a gradient/tinted background; browsers
       strip background graphics when printing, which would leave that text
       invisible on white paper. Force black text on white with a light border. */
    .card, .card-accent, .card-danger, .card-info, .card-output,
    .card-success, .card-warning {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    .card-accent *, .card-danger *, .card-info *, .card-output *,
    .card-success *, .card-warning * { color: #000 !important; }

    /* Mermaid diagrams: force dark-on-light so a diagram printed from dark mode
       (light text on dark nodes) stays legible on paper. */
    .mermaid svg text, .mermaid svg .nodeLabel, .mermaid svg span {
        fill: #000 !important; color: #000 !important;
    }
    .mermaid svg .node rect, .mermaid svg .node polygon,
    .mermaid svg .node circle, .mermaid svg .cluster rect {
        fill: #fff !important; stroke: #000 !important;
    }
}

/* ===========================
   Accessibility
   =========================== */

@media (prefers-contrast: high) {
    :root {
        --primary-color: #0052cc;
        --text-color: #000;
        --bg-color: #fff;
        --border-color: #000;
    }
}

/* Windows High Contrast / forced-colors mode. The OS forces text, background
   and border COLOURS to its palette but does not recolour background *images*,
   so decorative gradients (the hero <h1>, .card-accent, .exercise-card — all
   white text on a blue gradient) would keep the gradient while the text is
   forced to the system colour, risking low contrast. Drop those gradients so
   the forced text sits on the forced background. (Quiz correct/incorrect stays
   distinguishable via the ✓/✗ shape cues; focus outlines and card borders are
   recoloured to the system palette automatically.) */
@media (forced-colors: active) {
    h1, .card-accent, .exercise-card {
        background: none !important;
        background-image: none !important;
        color: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.keyboard-nav *:focus {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* ===========================
   Scrollbar
   =========================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
* { scrollbar-width: thin; scrollbar-color: var(--text-light) var(--bg-color); }

/* Touch UX */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* ============================================================
   ESL CURRICULUM COMPONENTS (theme-aware, added for A1 course)
   ============================================================ */

/* Dialogue / conversation blocks */
.dialogue {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.dialogue .line { margin: .5rem 0; padding-left: 0; }
.dialogue .speaker {
    display: inline-block;
    min-width: 2.5rem;
    font-weight: 700;
    color: var(--link-color);
}
.line.b .speaker { color: var(--speaker-b); }

/* Phrase banks — chips of useful language */
.phrase-bank {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}
.phrase {
    display: inline-block;
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .95rem;
}

/* Pronunciation / IPA callout */
.pron {
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    background: var(--code-bg);
    color: var(--code-color);
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: .9em;
}

/* Model-answer / say-it box */
.model {
    background: var(--info-bg);
    border-left: 4px solid var(--info-border);
    padding: .75rem 1rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

/* Word list grid */
.wordlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}
.wordlist li {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .5rem .75rem;
    list-style: none;
}
.wordlist li strong { color: var(--link-color); }

/* Fill-in blank helper */
.blank {
    display: inline-block;
    min-width: 4rem;
    border-bottom: 2px solid var(--primary-color);
}

/* ============================================================
   ABE READING & WRITING COMPONENTS (theme-aware, adult literacy)
   ============================================================ */

/* Letter / sound tiles — big, clear, dignified */
.letter-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}
.letter-tiles li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .6rem .8rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    list-style: none;
}
.letter-tiles .tile-letter {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--link-color);
    line-height: 1.1;
}
.letter-tiles .tile-sound {
    font-size: .9rem;
    color: var(--text-muted, var(--text-color));
    margin-top: .2rem;
}

/* Sound-out / decoding strip: c · a · t → cat */
.sound-out {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 10px;
    padding: .5rem .9rem;
    margin: .4rem .4rem .4rem 0;
    font-size: 1.15rem;
}
.sound-out .part {
    font-weight: 700;
    color: var(--link-color);
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
.sound-out .arrow { color: var(--text-color); opacity: .6; }
.sound-out .whole { font-weight: 800; }

/* Word-building steps: base + ending */
.word-build {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin: .75rem 0;
    font-size: 1.1rem;
}
.word-build .chip {
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .25rem .6rem;
    font-weight: 700;
}

/* Real-world form / document mockup (applications, labels, schedules) */
.form-mock {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    max-width: 32rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.form-mock .form-title {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--border-color);
}
.form-mock .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: .6rem 0;
}
.form-mock .form-label { font-weight: 600; min-width: 8rem; }
.form-mock .form-line {
    flex: 1;
    min-width: 6rem;
    border-bottom: 1.5px solid var(--primary-color);
    min-height: 1.4rem;
    overflow-wrap: anywhere;
}

/* Annotated example text (main idea / details highlighting) */
.reading-passage {
    background: var(--card-bg);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    line-height: 1.8;
}
.reading-passage .hl-main {
    background: rgba(59, 130, 246, 0.18);
    border-radius: 4px;
    padding: 0 .2rem;
    font-weight: 600;
}
.reading-passage .hl-detail {
    background: rgba(168, 85, 247, 0.18);
    border-radius: 4px;
    padding: 0 .2rem;
}

/* ============================================================
   ABE MATH & NUMERACY COMPONENTS (theme-aware, adult numeracy)
   ============================================================ */

/* Worked-example box — a step-by-step calculation the learner can follow */
.worked-example {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.worked-example h4 { margin-top: 0; }
.worked-example ol { margin: .5rem 0 0; padding-left: 1.4rem; }
.worked-example ol li { margin: .4rem 0; }

/* Vertical (column) arithmetic — monospace so digits line up */
.math-vert {
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-size: 1.4rem;
    line-height: 1.5;
    display: inline-block;
    text-align: right;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: .9rem 1.3rem;
    margin: 1rem 0;
    white-space: pre;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}
.math-vert .rule {
    border-bottom: 3px solid var(--primary-color);
    display: block;
    height: .2rem;
    margin: .2rem 0;
}
.math-vert .op { color: var(--link-color); font-weight: 700; }
.math-vert .carry { color: var(--speaker-b); font-size: .8em; }

/* Inline math expression / equation chip */
.mathex {
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    background: var(--code-bg);
    color: var(--code-color);
    padding: .1rem .45rem;
    border-radius: 5px;
    font-size: .95em;
    white-space: nowrap;
}

/* Number line */
.number-line {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 1.25rem 0;
    overflow-x: auto;
    padding-bottom: .3rem;
}
.number-line .tick {
    flex: 1 0 2.4rem;
    text-align: center;
    border-top: 3px solid var(--primary-color);
    padding-top: .35rem;
    position: relative;
    font-weight: 600;
}
.number-line .tick::before {
    content: "";
    position: absolute;
    top: -3px; left: 50%;
    width: 2px; height: .5rem;
    background: var(--primary-color);
    transform: translateX(-50%);
}
.number-line .tick.mark { color: var(--link-color); }

/* Money amount emphasis */
.money-amount {
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-weight: 700;
    color: #15803d;
}
:root[data-theme="dark"] .money-amount { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .money-amount { color: #4ade80; } }

/* Place-value / fact grid: reuse .table-wrap > table; small helper for centered number cells */
.num-table td, .num-table th { text-align: center; font-variant-numeric: tabular-nums; }

/* Fraction bar (a over b) */
.frac {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    vertical-align: middle;
    line-height: 1.1;
    margin: 0 .15rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
.frac .top { border-bottom: 2px solid currentColor; padding: 0 .3rem; }
.frac .bot { padding: 0 .3rem; }

/* ============================================================
   ABE DIGITAL & LIFE SKILLS COMPONENTS (theme-aware)
   ============================================================ */

/* Device / app screen mockup — a rounded frame with a title bar */
.screen-mock {
    max-width: 22rem;
    margin: 1.25rem 0;
    border: 3px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.screen-mock .screen-bar {
    background: var(--primary-color);
    color: #fff;
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.screen-mock .screen-body {
    padding: 1rem 1.1rem;
    font-size: .98rem;
}
.screen-mock .screen-body p { margin: .5rem 0; }
/* A tappable-looking button inside a screen mock */
.screen-mock .btn-ui {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-weight: 600;
    margin: .4rem 0;
}
.screen-mock .field-ui {
    display: block;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: .5rem .7rem;
    margin: .35rem 0;
    color: var(--text-muted, var(--text-color));
    background: var(--secondary-color, transparent);
}

/* Tap / step sequence: numbered chips joined by arrows */
.tap-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 1.1rem 0;
    padding: 0;
    list-style: none;
}
.tap-steps li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-weight: 600;
    list-style: none;
}
.tap-steps li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}
.tap-steps li:not(:last-child)::after {
    content: "→";
    margin-left: .45rem;
    color: var(--text-color);
    opacity: .55;
}

/* Keyboard-key / button label chip (e.g. a real on-screen button name) */
.ui-btn {
    display: inline-block;
    background: var(--code-bg);
    color: var(--code-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: .05rem .45rem;
    font-weight: 600;
    font-size: .95em;
    white-space: nowrap;
}

/* Do / Don't two-column grid (safety, etiquette) */
.do-dont {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

/* ============================================================
   ABE GED / HSE PREP COMPONENTS (theme-aware, exam prep)
   ============================================================ */

/* Static practice-question multiple-choice options, lettered A/B/C/D */
.choices {
    list-style: none;
    counter-reset: choice;
    margin: 1rem 0;
    padding: 0;
}
.choices li {
    counter-increment: choice;
    position: relative;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: .7rem .9rem .7rem 3rem;
    margin: .5rem 0;
    list-style: none;
}
.choices li::before {
    content: counter(choice, upper-alpha);
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    border: 1.5px solid var(--border-color);
    color: var(--link-color);
    font-weight: 700;
    font-size: .9rem;
}
.choices li.correct {
    border-color: var(--success-border, #16a34a);
    background: var(--success-bg, rgba(22,163,74,.08));
}
.choices li.correct::after {
    content: "✓";
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #16a34a;
    font-weight: 800;
}

/* Test-item wrapper: a labeled practice question card */
.test-item {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    background: var(--card-bg);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.test-item .item-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--link-color);
    background: var(--primary-light);
    border-radius: 999px;
    padding: .15rem .6rem;
    margin-bottom: .5rem;
}

/* Small unaffiliated/independent disclaimer line */
.disclaimer-note {
    font-size: .82rem;
    color: var(--text-muted, var(--text-color));
    opacity: .85;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: .6rem;
}

/* Placed at end of file so it wins by source order over the base .mathex /
   .ui-btn rules above (equal specificity). Inline math-expression and UI-step
   chips are nowrap for one-line display on wide screens; on small phones a
   long one (a full equation, a multi-word button label) would push past the
   viewport, so let them wrap there. */
@media (max-width: 767px) {
    .mathex {
        white-space: normal;
        overflow-wrap: break-word;
    }
    /* UI-step chips can hold long unbreakable tokens (e.g. an email address);
       allow a break anywhere so they never push past a narrow viewport. */
    .ui-btn {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   Text-to-speech "Listen" controls (progressive enhancement)
   ============================================================ */
.say-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 1.9rem;
    height: 1.9rem;
    margin-left: .4rem;
    padding: 0 .55rem;
    font-size: .95rem;
    line-height: 1;
    color: var(--link-color);
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s, color .15s, transform .15s;
}
.say-btn:hover { background: var(--primary-color); color: #fff; }
.say-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.say-btn.say-all {
    height: auto;
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    margin-left: 0;
}
.say-btn.speaking {
    background: var(--primary-color);
    color: #fff;
    animation: sayPulse 1s ease-in-out infinite;
}
@keyframes sayPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.speak-toolbar { margin-bottom: .6rem; }
.dialogue .line .say-btn { margin-left: .3rem; }
@media (prefers-reduced-motion: reduce) { .say-btn.speaking { animation: none; } }

/* Shown once if the browser has no text-to-speech voices */
.audio-unavailable {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: min(38rem, calc(100vw - 2rem));
    z-index: 1000;
    background: var(--warning-bg);
    color: var(--text-color);
    border: 1px solid var(--warning-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: .7rem 2.4rem .7rem 1rem;
    font-size: .9rem;
    line-height: 1.5;
}
.audio-dismiss {
    position: absolute;
    top: .35rem;
    right: .5rem;
    font-size: 1.1rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
}

/* Listening-settings control: voice picker + speed slider */
.tts-settings {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
.tts-toggle {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: 999px;
    padding: .5rem .9rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.tts-toggle:hover { background: var(--primary-hover); }
.tts-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.tts-panel {
    width: min(20rem, calc(100vw - 2rem));
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.tts-row { display: flex; flex-direction: column; gap: .3rem; }
.tts-row label { font-size: .85rem; font-weight: 600; color: var(--text-light); }
.tts-row select {
    width: 100%;
    font-size: .9rem;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: .4rem .5rem;
}
.tts-row input[type="range"] { width: 100%; accent-color: var(--primary-color); }
.tts-rate-val { color: var(--link-color); font-weight: 700; }
.tts-panel .tts-test { align-self: flex-start; margin-left: 0; }
/* Collapse the panel when hidden — beats the .tts-panel display:flex above. */
.tts-panel[hidden] { display: none; }
.tts-caret { display: inline-block; margin-left: .35rem; font-size: .8em; transition: transform .15s; }

/* ============================================================
   Auto-checked exercises (gap-fill / matching)
   ============================================================ */
.exercise-check .gap {
    font: inherit;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: .2rem .45rem;
}
.exercise-check input.gap { width: 5.5rem; text-align: center; }
.exercise-check .gap:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.exercise-check .gap.correct { border-color: var(--success-border); background: var(--success-bg); }
.exercise-check .gap.incorrect { border-color: var(--danger-border); background: var(--danger-bg); }
.match-list { list-style: none; padding-left: 0; display: grid; gap: .55rem; margin: 1rem 0; }
.match-list li { display: flex; align-items: center; gap: .6rem; }
.match-list .match-term { min-width: 6rem; font-weight: 600; }
.exercise-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.check-btn, .reveal-btn {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    padding: .4rem .85rem;
    border: 1px solid var(--border-color);
}
.check-btn { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.check-btn:hover { background: var(--primary-hover); }
.reveal-btn { background: transparent; color: var(--link-color); }
.reveal-btn:hover { background: var(--primary-light); }
.check-feedback { margin-top: .6rem; font-weight: 600; min-height: 1.2em; }
.check-feedback.correct { color: var(--success-border); }
.check-feedback.incorrect { color: var(--danger-border); }

/* ============================================================
   Learning Journal editor (autosaved to this device)
   ============================================================ */
.journal-editor { margin-top: 1.25rem; }
.journal-label { display: block; font-weight: 600; margin-bottom: .45rem; }
.journal-note { font-weight: 400; color: var(--text-light); font-size: .9em; }
.journal-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .75rem .9rem;
    resize: vertical;
    min-height: 8rem;
}
.journal-textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
    border-color: var(--primary-color);
}
.journal-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
.journal-status { font-size: .85rem; color: var(--text-light); }
.journal-export {
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--link-color);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: .35rem .7rem;
}
.journal-export:hover { background: var(--primary-light); }

/* Word list grid */
.wordlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}
.wordlist li {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .5rem .75rem;
    list-style: none;
}
.wordlist li strong { color: var(--link-color); }

/* Fill-in blank helper */
.blank {
    display: inline-block;
    min-width: 4rem;
    border-bottom: 2px solid var(--primary-color);
}