/* Primitive tokens */
:root {
    color-scheme: light;
    --sf-brand-navy: #19173b;
    --sf-brand-cyan: #159be3;
    --sf-brand-orange: #e3701c;
    --sf-brand-white: #ffffff;
    --sf-action-blue: #0068b5;
    --sf-action-blue-hover: #075e9e;
    --sf-action-orange: #c2570a;
    --sf-light-background: #f4f6f8;
    --sf-light-surface: #ffffff;
    --sf-light-strong-surface: #eef1f4;
    --sf-light-text: #19173b;
    --sf-light-muted: #666b7a;
    --sf-light-border: #dfe1e8;
    --sf-dark-background: #0f1420;
    --sf-dark-surface: #171d2a;
    --sf-dark-strong-surface: #202838;
    --sf-dark-text: #f5f5f8;
    --sf-dark-muted: #b7b8c6;
    --sf-dark-border: #313a4c;
    --sf-blue-soft: #e7f3fb;
    --sf-blue-soft-dark: #173b5b;
    --sf-orange-soft: #fff0e5;
    --sf-orange-soft-dark: #4c2b20;
    --sf-success: #147a55;
    --sf-success-soft: #e6f5ee;
    --sf-success-dark: #61d4a9;
    --sf-success-soft-dark: #173d34;
    --sf-warning: #8a5a00;
    --sf-warning-soft: #fff4cf;
    --sf-warning-dark: #ffd166;
    --sf-warning-soft-dark: #493b1c;
    --sf-danger: #b42318;
    --sf-danger-hover: #912018;
    --sf-danger-soft: #fdebea;
    --sf-danger-dark: #ff8c85;
    --sf-danger-soft-dark: #4b2228;
    --sf-focus-light: #075e9e;
    --sf-focus-dark: #8ed6f7;
    --sf-black: #070812;
    --sf-rgb-navy: 25 23 59;
    --sf-rgb-cyan: 21 155 227;
    --sf-rgb-orange: 227 112 28;
    --sf-rgb-white: 255 255 255;
    --sf-rgb-black: 7 8 18;

    /* Semantic tokens: Light */
    --color-canvas: var(--sf-light-background);
    --color-panel-surface: var(--sf-light-surface);
    --color-surface: var(--sf-light-surface);
    --color-surface-strong: var(--sf-light-strong-surface);
    --color-surface-raised: var(--sf-light-surface);
    --color-working-surface: var(--sf-light-surface);
    --color-text: var(--sf-light-text);
    --color-text-muted: var(--sf-light-muted);
    --color-border: var(--sf-light-border);
    --color-border-strong: var(--sf-light-muted);
    --color-primary: var(--sf-action-blue);
    --color-primary-hover: var(--sf-action-blue-hover);
    --color-primary-text: var(--sf-brand-white);
    --color-primary-soft: var(--sf-blue-soft);
    --color-accent: var(--sf-brand-orange);
    --color-accent-text: var(--sf-action-orange);
    --color-accent-soft: var(--sf-orange-soft);
    --color-success: var(--sf-success);
    --color-success-soft: var(--sf-success-soft);
    --color-warning: var(--sf-warning);
    --color-warning-soft: var(--sf-warning-soft);
    --color-danger: var(--sf-danger);
    --color-danger-hover: var(--sf-danger-hover);
    --color-danger-soft: var(--sf-danger-soft);
    --color-danger-action: var(--sf-danger);
    --color-danger-action-hover: var(--sf-danger-hover);
    --color-on-danger: var(--sf-brand-white);
    --color-rail: var(--sf-light-surface);
    --color-rail-text: var(--sf-light-text);
    --color-rail-muted: var(--sf-light-muted);
    --color-overlay: rgb(var(--sf-rgb-navy) / .58);
    --color-focus-ring: var(--sf-focus-light);
    --color-selection: rgb(var(--sf-rgb-cyan) / .24);
    --color-video: var(--sf-black);
    --color-tooltip: var(--sf-black);
    --color-tooltip-text: var(--sf-brand-white);
    --color-object-resting: var(--sf-light-surface);
    --color-object-raised: var(--sf-light-surface);
    --color-object-floating: var(--sf-light-surface);
    --elevation-subtle: 0 1px 2px rgb(var(--sf-rgb-navy) / .06);
    --elevation-resting: 0 1px 2px rgba(25,23,59,.04), 0 4px 12px rgba(25,23,59,.06);
    --elevation-raised: 0 2px 4px rgba(25,23,59,.06), 0 8px 20px rgba(25,23,59,.10);
    --elevation-floating: 0 4px 8px rgba(25,23,59,.08), 0 12px 28px rgba(25,23,59,.14);
    --elevation-toast: var(--elevation-floating);

    /* Component and scale tokens */
    --font-ui: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --font-condensed: "Arial Narrow", "Aptos Narrow", "Bahnschrift SemiCondensed", "Helvetica Neue Condensed", "Segoe UI", Arial, sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-display: clamp(2rem, 3vw, 3.25rem);
    --font-size-page-title: clamp(1.875rem, 2.2vw, 2.375rem);
    --font-size-section-title: clamp(1.15rem, 1.5vw, 1.4rem);
    --font-weight-display: 900;
    --font-weight-kpi: 780;
    --font-weight-page-title: 700;
    --font-weight-section-title: 650;
    --icon-stroke-width: 1.8;
    --icon-size-rail: 22px;
    --icon-size-control: 22px;
    --icon-size-compact: 18px;
    --line-height-tight: 1.16;
    --line-height-body: 1.58;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-sm: .375rem;
    --radius-md: .625rem;
    --radius-lg: .75rem;
    --radius-pill: 999px;
    --rail-width: 88px;
    --topbar-height: 72px;
    --curriculum-width: 316px;
    --context-width: 318px;
    --touch-target: 44px;
    --motion-ease: cubic-bezier(.2,.7,.3,1);
    --motion-fast: 160ms var(--motion-ease);
    --motion-object: 180ms var(--motion-ease);
    --motion-press: 105ms var(--motion-ease);
    --motion-local: 180ms var(--motion-ease);
    --motion-panel: 210ms var(--motion-ease);
    --motion-progress: 520ms ease-out;
    --button-danger-background: var(--color-danger-action);
    --button-danger-background-hover: var(--color-danger-action-hover);
    --button-danger-text: var(--color-on-danger);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: var(--sf-dark-background);
    --color-panel-surface: var(--sf-dark-surface);
    --color-surface: var(--sf-dark-surface);
    --color-surface-strong: var(--sf-dark-strong-surface);
    --color-surface-raised: var(--sf-dark-strong-surface);
    --color-working-surface: var(--sf-dark-strong-surface);
    --color-text: var(--sf-dark-text);
    --color-text-muted: var(--sf-dark-muted);
    --color-border: var(--sf-dark-border);
    --color-border-strong: var(--sf-dark-muted);
    --color-primary: var(--sf-brand-cyan);
    --color-primary-hover: var(--sf-brand-cyan);
    --color-primary-text: var(--sf-brand-navy);
    --color-primary-soft: var(--sf-blue-soft-dark);
    --color-accent-text: var(--sf-brand-orange);
    --color-accent-soft: var(--sf-orange-soft-dark);
    --color-success: var(--sf-success-dark);
    --color-success-soft: var(--sf-success-soft-dark);
    --color-warning: var(--sf-warning-dark);
    --color-warning-soft: var(--sf-warning-soft-dark);
    --color-danger: var(--sf-danger-dark);
    --color-danger-hover: var(--sf-danger-dark);
    --color-danger-soft: var(--sf-danger-soft-dark);
    --color-danger-action: var(--sf-danger);
    --color-danger-action-hover: var(--sf-danger-hover);
    --color-on-danger: var(--sf-brand-white);
    --color-rail: var(--sf-dark-surface);
    --color-rail-text: var(--sf-dark-text);
    --color-rail-muted: var(--sf-dark-muted);
    --color-overlay: rgb(var(--sf-rgb-black) / .72);
    --color-focus-ring: var(--sf-focus-dark);
    --color-selection: rgb(var(--sf-rgb-cyan) / .3);
    --color-object-resting: var(--sf-dark-strong-surface);
    --color-object-raised: color-mix(in srgb, var(--sf-dark-strong-surface) 92%, var(--sf-brand-white));
    --color-object-floating: color-mix(in srgb, var(--sf-dark-strong-surface) 86%, var(--sf-brand-white));
    --elevation-subtle: inset 0 1px 0 rgba(255,255,255,.03);
    --elevation-resting: inset 0 1px 0 rgba(255,255,255,.04);
    --elevation-raised: inset 0 1px 0 rgba(255,255,255,.06);
    --elevation-floating: inset 0 1px 0 rgba(255,255,255,.08);
    --elevation-toast: var(--elevation-floating);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --color-canvas: var(--sf-dark-background);
        --color-panel-surface: var(--sf-dark-surface);
        --color-surface: var(--sf-dark-surface);
        --color-surface-strong: var(--sf-dark-strong-surface);
        --color-surface-raised: var(--sf-dark-strong-surface);
        --color-working-surface: var(--sf-dark-strong-surface);
        --color-text: var(--sf-dark-text);
        --color-text-muted: var(--sf-dark-muted);
        --color-border: var(--sf-dark-border);
        --color-border-strong: var(--sf-dark-muted);
        --color-primary: var(--sf-brand-cyan);
        --color-primary-hover: var(--sf-brand-cyan);
        --color-primary-text: var(--sf-brand-navy);
        --color-primary-soft: var(--sf-blue-soft-dark);
        --color-accent-text: var(--sf-brand-orange);
        --color-accent-soft: var(--sf-orange-soft-dark);
        --color-success: var(--sf-success-dark);
        --color-success-soft: var(--sf-success-soft-dark);
        --color-warning: var(--sf-warning-dark);
        --color-warning-soft: var(--sf-warning-soft-dark);
        --color-danger: var(--sf-danger-dark);
        --color-danger-hover: var(--sf-danger-dark);
        --color-danger-soft: var(--sf-danger-soft-dark);
        --color-danger-action: var(--sf-danger);
        --color-danger-action-hover: var(--sf-danger-hover);
        --color-on-danger: var(--sf-brand-white);
        --color-rail: var(--sf-dark-surface);
        --color-rail-text: var(--sf-dark-text);
        --color-rail-muted: var(--sf-dark-muted);
        --color-overlay: rgb(var(--sf-rgb-black) / .72);
        --color-focus-ring: var(--sf-focus-dark);
        --color-selection: rgb(var(--sf-rgb-cyan) / .3);
        --color-object-resting: var(--sf-dark-strong-surface);
        --color-object-raised: color-mix(in srgb, var(--sf-dark-strong-surface) 92%, var(--sf-brand-white));
        --color-object-floating: color-mix(in srgb, var(--sf-dark-strong-surface) 86%, var(--sf-brand-white));
        --elevation-subtle: inset 0 1px 0 rgba(255,255,255,.03);
        --elevation-resting: inset 0 1px 0 rgba(255,255,255,.04);
        --elevation-raised: inset 0 1px 0 rgba(255,255,255,.06);
        --elevation-floating: inset 0 1px 0 rgba(255,255,255,.08);
        --elevation-toast: var(--elevation-floating);
    }
}

/* Global foundation */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 0;
    overflow-x: clip;
    background: var(--color-canvas);
    scrollbar-color: var(--color-border-strong) var(--color-surface-strong);
}

body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    color: var(--color-text);
    background: var(--color-canvas);
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
}

::selection {
    color: var(--color-text);
    background: var(--color-selection);
}

[hidden] {
    display: none !important;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

a {
    color: var(--color-primary);
    text-underline-offset: .18em;
}

a:hover {
    color: var(--color-primary-hover);
}

:where(button, a, input, textarea, select):focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

h2 {
    margin: var(--space-2) 0 var(--space-3);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -.025em;
}

h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    letter-spacing: -.015em;
}

fieldset {
    min-width: 0;
}

.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;
}

.icon {
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
    stroke-width: var(--icon-stroke-width);
}

.nav-item > .icon,
.topbar .icon-button > .icon {
    width: var(--icon-size-control);
    height: var(--icon-size-control);
}

.course-tool-icon > .icon,
.course-tool > .icon,
.curriculum-module-chevron > .icon {
    width: var(--icon-size-compact);
    height: var(--icon-size-compact);
}

.muted {
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}

.eyebrow {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.section {
    margin-top: var(--space-6);
}

.app-shell {
    min-height: 100vh;
}

.app-shell[aria-busy="true"]::before {
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    width: 32vw;
    min-width: 96px;
    height: 3px;
    background: var(--color-primary);
    content: "";
    animation: request-progress 1s ease-in-out infinite alternate;
}

@keyframes request-progress {
    from { transform: translateX(-25%); }
    to { transform: translateX(240%); }
}

.maintenance,
.network-status {
    position: sticky;
    z-index: 100;
    top: 0;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 750;
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.maintenance {
    color: var(--color-warning);
    background: var(--color-warning-soft);
}

/* Authentication */
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    background: var(--color-canvas);
}

.auth-theme {
    position: absolute;
    z-index: 3;
    top: var(--space-5);
    right: var(--space-5);
}

.auth-hero {
    display: grid;
    align-items: end;
    min-width: 0;
    padding: clamp(2rem, 7vw, 6.5rem);
    color: var(--sf-brand-white);
    background: var(--sf-brand-navy);
    border-right: 1px solid var(--color-border);
}

.auth-hero > div {
    max-width: 700px;
}

.auth-logo {
    display: block;
    width: clamp(112px, 13vw, 176px);
    height: clamp(112px, 13vw, 176px);
    margin-bottom: var(--space-8);
    object-fit: contain;
}

.auth-hero .eyebrow {
    color: var(--sf-brand-cyan);
}

.auth-hero h1 {
    margin: 0 0 var(--space-4);
    color: var(--sf-brand-white);
    font-size: clamp(3rem, 7vw, 6.75rem);
    font-weight: 800;
    letter-spacing: -.065em;
}

.auth-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--sf-dark-text);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    line-height: 1.45;
}

.auth-panel {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(5.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4.5rem) var(--space-12);
    background: var(--color-surface);
}

.auth-card {
    width: min(100%, 430px);
}

.auth-card > h2 {
    margin-top: var(--space-2);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
}

/* Controls */
.stack {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: grid;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: 650;
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,
.field select,
input[type="search"] {
    width: 100%;
    min-height: var(--touch-target);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.field textarea {
    min-height: 132px;
    resize: vertical;
}

.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field textarea:focus,
.field select:focus,
input[type="search"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

input[type="radio"],
input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
}

:where(.button, .icon-button, .account-button, .nav-item, .brand-button, .lesson-nav-item) {
    min-height: var(--touch-target);
    transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: var(--touch-target);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    color: var(--color-primary-text);
    background: var(--color-primary);
    box-shadow: var(--elevation-resting);
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-object), transform var(--motion-press), opacity var(--motion-fast);
}

.button:hover {
    color: var(--color-primary-text);
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--elevation-raised);
}

.button:active:not(:disabled) {
    transform: scale(.98);
    transition-duration: 105ms;
}

.button.secondary {
    font-weight: 650;
    color: var(--color-primary);
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: var(--elevation-subtle);
}

.button.secondary:hover {
    color: var(--color-primary-text);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.button.ghost {
    font-weight: 650;
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
}

.button.ghost:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: var(--elevation-subtle);
}

.button.danger {
    color: var(--button-danger-text);
    background: var(--button-danger-background);
    border-color: var(--button-danger-background);
}

.button.danger:hover {
    color: var(--button-danger-text);
    background: var(--button-danger-background-hover);
    border-color: var(--button-danger-background-hover);
}

.button:disabled,
.icon-button:disabled {
    opacity: .48;
}

.link-button {
    min-height: var(--touch-target);
    justify-self: start;
    border: 0;
    padding: var(--space-2) 0;
    color: var(--color-primary);
    background: transparent;
    font-weight: 700;
    text-align: left;
    transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast);
}

.link-button:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--elevation-subtle);
    transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-object);
}

.icon-button:hover:not(:disabled) {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: var(--elevation-resting);
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface-strong);
}

.theme-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 750;
    white-space: nowrap;
}

.theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.theme-option:has(input:checked) {
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--elevation-subtle);
}

.theme-option:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* Multi-panel application shell */
.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    background: var(--color-canvas);
}

.sidebar {
    position: sticky;
    z-index: 50;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0 var(--space-2) var(--space-3);
    color: var(--color-rail-text);
    background: var(--color-rail);
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    --color-focus-ring: var(--sf-focus-light);
}

.brand-button {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    width: 100%;
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    margin: 0 0 var(--space-3);
    padding: var(--space-1);
    border: 1px solid transparent;
    border-radius: 0;
    border-bottom-color: var(--color-border);
    color: var(--color-rail-text);
    background: transparent;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brand-button:hover,
.brand-button:focus-visible {
    background: rgb(var(--sf-rgb-white) / .08);
    border-color: rgb(var(--sf-rgb-white) / .14);
}

.brand-logo {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.nav {
    display: grid;
    gap: var(--space-2);
}

.nav-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .35rem;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: var(--space-3) var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-rail-muted);
    background: transparent;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.nav-item::before {
    position: absolute;
    top: var(--space-2);
    bottom: var(--space-2);
    left: calc(var(--space-2) * -1);
    width: 3px;
    background: transparent;
    content: "";
}

.nav-item:hover,
.nav-item.active {
    color: var(--color-rail-text);
    background: rgb(var(--sf-rgb-white) / .09);
}

.nav-item.active::before {
    background: var(--sf-brand-cyan);
}

.sidebar-user {
    display: grid;
    place-items: center;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.account-avatar {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    color: var(--sf-brand-navy);
    background: var(--sf-brand-cyan);
    font-weight: 850;
}

.app-frame {
    min-width: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    min-width: 0;
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: auto minmax(172px, auto) minmax(240px, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

.topbar-spacer {
    width: 0;
}

.topbar-search {
    width: min(100%, 480px);
    height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    justify-self: stretch;
    min-width: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: var(--color-canvas);
}

.topbar-search-area {
    width: min(100%, 480px);
    height: 42px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-self: stretch;
    margin-inline: auto;
}

.topbar-search-area .topbar-search {
    width: 100%;
}

.topbar-search-toggle {
    display: none;
}

.topbar-search-placeholder {
    min-width: 0;
}

.topbar-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.topbar-search-input {
    min-width: 0;
    border: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

.topbar-utilities {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.account-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 220px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: transparent;
    text-align: left;
}

.account-button:hover {
    background: var(--color-surface-strong);
    border-color: var(--color-border);
}

.account-copy {
    min-width: 0;
}

.account-copy strong,
.account-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-copy small {
    color: var(--color-text-muted);
}

.drawer-trigger,
.drawer-close,
.drawer-scrim,
.mobile-nav {
    display: none;
}

.shell-body {
    position: relative;
    min-width: 0;
    min-height: calc(100vh - var(--topbar-height));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.has-workspace .shell-body {
    grid-template-columns: var(--curriculum-width) minmax(500px, 1fr) var(--context-width);
}

.workspace-panel {
    min-width: 0;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 18px 28px;
    background: var(--color-panel-surface);
    box-shadow: none;
}

.curriculum-panel {
    border-right: 1px solid var(--color-border);
}

.context-panel {
    border-left: 1px solid var(--color-border);
    padding-inline: 20px;
    box-shadow: none;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.panel-head h2 {
    margin: var(--space-1) 0 0;
    font-family: var(--font-ui);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-page-title);
    letter-spacing: -.02em;
}

.curriculum-list,
.curriculum-group {
    display: grid;
    gap: var(--space-2);
}

.curriculum-list {
    gap: var(--space-5);
}

.curriculum-group h3 {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lesson-nav-item {
    position: relative;
    display: grid;
    min-height: 54px;
    grid-template-columns: 32px 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: transparent;
    text-align: left;
}

.lesson-nav-item:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.lesson-nav-item:disabled .lesson-nav-copy strong {
    color: var(--color-text-muted);
}

.lesson-nav-item:disabled .lesson-index,
.lesson-nav-item:disabled .lesson-nav-copy small {
    color: var(--color-text-muted);
    background: transparent;
    border-color: var(--color-border);
}

.lesson-nav-item:hover:not(:disabled) {
    border-color: var(--color-border);
    background: var(--color-surface-strong);
}

.lesson-nav-item.active {
    color: var(--color-text);
    border-color: transparent;
    background: var(--color-primary-soft);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.lesson-index {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    background: var(--color-surface-strong);
    font-family: var(--font-condensed);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.lesson-nav-item.active .lesson-index {
    color: var(--color-primary-text);
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: var(--font-weight-display);
}

.lesson-nav-item:disabled .lesson-index .icon {
    width: 16px;
    height: 16px;
}

.lesson-nav-item.complete .lesson-index {
    color: var(--color-success);
    background: var(--color-success-soft);
    border-color: var(--color-success);
}

.lesson-nav-copy {
    min-width: 0;
}

.lesson-nav-copy strong,
.lesson-nav-copy small {
    display: block;
}

.lesson-nav-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-condensed);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.01em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lesson-nav-type-marker {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.lesson-nav-type-marker.lesson-type-document {
    border: 0;
    background: transparent;
    color: var(--color-accent-text);
}

.lesson-nav-type-marker > .icon {
    width: 16px;
    height: 16px;
}

.lesson-nav-copy small {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: .68rem;
    line-height: 1.25;
}

.lesson-nav-item.active .lesson-nav-copy small {
    color: var(--color-text-muted);
}

.context-card {
    display: grid;
    gap: var(--space-3);
    padding: 0 0 var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
}

.context-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.context-metric strong {
    color: var(--color-text);
    font-family: var(--font-condensed);
    font-stretch: condensed;
    font-size: 2.65rem;
    font-weight: var(--font-weight-kpi);
    line-height: 1;
    letter-spacing: -.04em;
}

.context-metric span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.context-facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.context-facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.context-facts dt {
    color: var(--color-text-muted);
}

.context-facts dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.context-actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.content {
    min-width: 0;
    overflow-x: clip;
    padding: clamp(1.5rem, 2.4vw, 2.5rem);
    background: var(--color-canvas);
}

.screen {
    width: min(100%, 1180px);
    margin-inline: auto;
    animation: academy-content-in var(--motion-local) both;
}

.has-workspace .screen {
    width: min(100%, 1040px);
}

.content.has-floating-action {
    height: calc(100dvh - var(--topbar-height));
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-3);
    overflow: hidden;
    padding-bottom: var(--space-4);
}

.content.has-floating-action > .screen {
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--space-4);
}

.content.has-floating-action > .lesson-ali-fab {
    position: sticky;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    right: auto;
    bottom: auto;
    margin: 0;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.page-head h1 {
    max-width: 20ch;
    margin: var(--space-1) 0 0;
    color: var(--color-text);
    font-size: var(--font-size-display);
    font-weight: 780;
    letter-spacing: -.05em;
}

/* Cards, lists and states */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-4);
}

.card {
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-object-resting);
    box-shadow: var(--elevation-resting);
    transition: background-color var(--motion-object), border-color var(--motion-object), box-shadow var(--motion-object), transform var(--motion-object);
}

fieldset.card {
    padding-top: var(--space-4);
}

fieldset.card > legend {
    max-width: calc(100% - var(--space-6));
    padding: 0 var(--space-2);
    color: var(--color-text);
    font-weight: 750;
}

.card p {
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.stat {
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 820;
    letter-spacing: -.045em;
}

.progress-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width var(--motion-progress);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid var(--color-success);
    border-radius: var(--radius-pill);
    padding: .2rem .65rem;
    color: var(--color-success);
    background: var(--color-success-soft);
    box-shadow: var(--elevation-subtle);
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.2;
}

.badge.warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
}

.badge.danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.list {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
}

.list-row {
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface);
    text-decoration: none;
}

a.list-row:hover {
    color: var(--color-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.list-row[aria-disabled="true"] {
    opacity: .58;
}

.list-main {
    min-width: 0;
}

.list-main strong,
.list-main small {
    display: block;
}

.list-main small {
    margin-top: .2rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.result,
.notice {
    padding: var(--space-4);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-sm);
    color: var(--color-success);
    background: var(--color-success-soft);
    box-shadow: var(--elevation-subtle);
}

.result.error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.notice.warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
}

.empty {
    display: grid;
    gap: var(--space-2);
    max-width: 640px;
    padding: var(--space-5) 0;
    color: var(--color-text-muted);
    background: transparent;
    border-width: 1px 0;
    border-color: var(--color-border);
    border-style: solid;
    text-align: left;
}

.empty-state strong {
    color: var(--color-text);
    font-size: var(--font-size-lg);
}

.empty-state p {
    max-width: 54ch;
    margin: 0;
    line-height: var(--line-height-body);
}

.empty-state {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-object-resting);
    box-shadow: var(--elevation-resting);
}

.empty.compact {
    padding: var(--space-5);
}

.local-search-empty {
    margin-top: var(--space-5);
}

.lesson-copy {
    max-width: 72ch;
    white-space: pre-wrap;
    line-height: 1.72;
}

.lesson-copy p {
    margin: 0 0 var(--space-4);
}

.chat {
    display: grid;
    gap: var(--space-3);
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) 0;
}

.bubble {
    max-width: min(82%, 68ch);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border: 1px solid var(--color-border);
    border-width: 0 0 0 3px;
    border-radius: 0;
    background: transparent;
    line-height: 1.55;
    white-space: pre-wrap;
}

.bubble.student {
    justify-self: end;
    color: var(--color-primary-text);
    background: var(--color-primary);
    border-color: var(--color-primary);
    border-bottom-right-radius: var(--space-1);
}

.bubble.ali {
    justify-self: start;
    color: var(--color-text);
    background: var(--color-surface-strong);
    border-bottom-left-radius: var(--space-1);
}

.timer {
    color: var(--color-danger);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 850;
    letter-spacing: .04em;
}

.exam-answer-readonly {
    max-width: 100%;
    margin: 0;
    padding: var(--space-4);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface-strong);
}

.toast {
    position: fixed;
    z-index: 130;
    right: var(--space-5);
    bottom: var(--space-5);
    max-width: min(420px, calc(100vw - var(--space-10)));
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-object-floating);
    box-shadow: var(--elevation-floating);
}

/* Video player: keep the proven Cloudflare-safe control geometry. */
.video {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 68vh;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-video);
}

.video-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-video);
}

.video-stage .video {
    display: block;
    border-radius: inherit;
}

.video-fullscreen-button {
    position: absolute;
    z-index: 2;
    right: max(176px, calc(174px + env(safe-area-inset-right)));
    bottom: max(10px, calc(8px + env(safe-area-inset-bottom)));
    display: inline-grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--sf-brand-white);
    background: transparent;
    box-shadow: none;
    touch-action: manipulation;
}

.video-fullscreen-visual {
    display: inline-grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast), transform var(--motion-fast);
}

.video-fullscreen-visual svg {
    display: block;
    width: 24px;
    height: 24px;
}

.video-fullscreen-button.is-visible .video-fullscreen-visual {
    opacity: 1;
}

.video-fullscreen-button:focus-visible .video-fullscreen-visual,
.video-fullscreen-button[aria-pressed="true"] .video-fullscreen-visual {
    opacity: 1;
    transform: translateY(0);
}

.video-fullscreen-button:hover .video-fullscreen-visual {
    opacity: 1;
}

.video-fullscreen-button:active .video-fullscreen-visual {
    opacity: .82;
}

.video-fullscreen-button:focus-visible {
    outline-color: var(--sf-brand-white);
}

.video-fullscreen-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-2));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100vw - var(--space-6));
    padding: .45rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--color-tooltip-text);
    background: var(--color-tooltip);
    font: 700 var(--font-size-sm)/1.2 var(--font-ui);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, var(--space-1));
    transition: opacity var(--motion-fast), transform var(--motion-fast), visibility var(--motion-fast);
}

.video-fullscreen-shortcut {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 24px;
    padding: 0 var(--space-1);
    border: 1px solid rgb(var(--sf-rgb-white) / .55);
    border-radius: var(--radius-sm);
    color: inherit;
    background: transparent;
    font: inherit;
}

.video-fullscreen-button:hover .video-fullscreen-tooltip,
.video-fullscreen-button:focus-visible .video-fullscreen-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.video-fullscreen-fallback {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--sf-brand-white);
    background: var(--sf-brand-navy);
}

.video-stage:fullscreen,
.video-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    border-radius: 0;
}

.video-stage:fullscreen .video,
.video-stage:-webkit-full-screen .video {
    width: 100vw;
    height: 100vh;
    max-height: none;
    aspect-ratio: auto;
}

/* Content-first LMS composition */

html[data-theme="dark"] .sidebar {
    --color-focus-ring: var(--sf-focus-dark);
}

.brand-button:hover,
.brand-button:focus-visible {
    color: var(--color-rail-text);
    background: var(--color-surface-strong);
    border-color: transparent transparent var(--color-border);
}

.nav-item:hover {
    color: var(--color-text);
    background: var(--color-surface-strong);
}

.nav-item.active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.nav-item.active::before {
    background: var(--color-primary);
}

.topbar-product {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    white-space: nowrap;
}

.topbar-product strong,
.curriculum-module-copy strong {
    font-family: var(--font-condensed);
    font-stretch: condensed;
}

.topbar-product strong {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.topbar-product span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.icon-button,
.theme-toggle {
    height: var(--touch-target);
    border-radius: 50%;
}

.theme-toggle:focus {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.auth-theme .theme-toggle {
    background: var(--color-surface);
}

.curriculum-summary {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.curriculum-summary-copy,
.course-card-progress-copy,
.section-heading,
.context-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.curriculum-summary-copy {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.curriculum-summary-copy strong {
    color: var(--color-text);
    font: var(--font-weight-kpi) 1rem/1 var(--font-condensed);
}

.curriculum-module-lessons {
    display: grid;
    gap: var(--space-1);
}

.curriculum-module-lessons[hidden] {
    display: none;
}

.curriculum-module-toggle {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    background: transparent;
    text-align: left;
    transition: color var(--motion-fast), background-color var(--motion-fast);
}

.curriculum-module-toggle:hover {
    background: var(--color-surface-strong);
}

.curriculum-module-index {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-condensed);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    background: var(--color-surface);
    font-size: var(--font-size-xs);
}

.curriculum-module-copy {
    min-width: 0;
}

.curriculum-module-copy strong,
.curriculum-module-copy span {
    display: block;
}

.curriculum-module-copy strong {
    overflow: hidden;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
}

.curriculum-module-kicker {
    margin-bottom: 2px;
    color: var(--color-text-muted);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.curriculum-module-count {
    min-width: 24px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
}

.curriculum-module-chevron {
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    transform: rotate(90deg);
    transition: transform var(--motion-local);
}

.curriculum-module-toggle[aria-expanded="false"] .curriculum-module-chevron {
    transform: rotate(0deg);
}

.context-metric span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: right;
}

.context-access-notice {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border-left: 3px solid var(--color-warning);
    color: var(--color-warning);
    background: var(--color-warning-soft);
    font-size: var(--font-size-xs);
}

.context-access-notice span {
    line-height: 1.4;
}

.context-primary-action {
    margin-top: var(--space-4);
}

.context-primary-action .button {
    width: 100%;
}

.context-section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.context-section-heading h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .98rem;
    font-weight: var(--font-weight-section-title);
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 28px;
    min-height: 28px;
    padding: .2rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: var(--color-surface-strong);
    box-shadow: var(--elevation-subtle);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.meta-chip > .icon {
    width: 14px;
    height: 14px;
}

.lesson-type-chip {
    border-color: rgb(var(--sf-rgb-cyan) / .28);
    color: var(--color-text);
    background: var(--color-primary-soft);
}

.lesson-type-chip > .icon {
    flex: 0 0 auto;
    color: var(--color-primary);
}

.lesson-type-document {
    border-color: rgb(var(--sf-rgb-orange) / .34);
    background: var(--color-accent-soft);
}

.lesson-type-document > .icon {
    color: var(--color-accent-text);
}

.count-badge {
    justify-content: center;
}

.course-tool-list {
    display: grid;
}

.course-tool {
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    background: transparent;
    text-align: left;
    transition: color var(--motion-fast), background-color var(--motion-fast);
}

.course-tool:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.course-tool-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
}

.course-tool-copy {
    min-width: 0;
}

.course-tool-copy strong,
.course-tool-copy small {
    display: block;
}

.course-tool-copy strong {
    font-size: .8rem;
}

.course-tool-copy small {
    margin-top: 1px;
    color: var(--color-text-muted);
    font-size: .66rem;
    line-height: 1.25;
}

.course-tool > .icon {
    color: var(--color-text-muted);
}

@keyframes academy-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes academy-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (hover: hover) and (pointer: fine) {
    .course-card:hover,
    .assessment-question:hover {
        background: var(--color-object-raised);
        box-shadow: var(--elevation-raised);
        transform: translateY(-2px);
    }
}

.page-head h1 {
    max-width: 30ch;
    font-family: var(--font-ui);
    font-size: var(--font-size-page-title);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.section-heading {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.section-heading h2 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-section-title);
}

.course-catalog-screen {
    width: min(100%, 1120px);
}

.course-catalog-screen > .page-head {
    margin-bottom: var(--space-4);
}

.course-catalog-section:first-of-type {
    margin-top: var(--space-4);
}

.course-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 520px));
    align-items: stretch;
    justify-content: start;
    gap: var(--space-4);
}

.cover-pattern {
    --cover-primary-x: 67%;
    --cover-primary-y: -42%;
    --cover-primary-size: 54%;
    --cover-secondary-x: 6%;
    --cover-secondary-y: 30%;
    --cover-accent-x: 74%;
    --cover-accent-y: 70%;
    --cover-angle: 14deg;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cover-artwork {
    position: absolute;
    z-index: 0;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
}

.cover-photo {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-artwork::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: transparent;
    content: "";
}

.cover-artwork[data-cover-mode="photo"][data-cover-loaded="true"]::after {
    background: linear-gradient(to top, rgba(25,23,59,.68) 0%, rgba(25,23,59,.68) 78%, transparent 100%);
}

[data-cover-variant="1"] {
    --cover-primary-x: 58%;
    --cover-primary-y: -58%;
    --cover-primary-size: 66%;
    --cover-secondary-x: 14%;
    --cover-secondary-y: 66%;
    --cover-accent-x: 82%;
    --cover-accent-y: 18%;
    --cover-angle: -12deg;
}

[data-cover-variant="2"] {
    --cover-primary-x: 72%;
    --cover-primary-y: 18%;
    --cover-primary-size: 48%;
    --cover-secondary-x: -8%;
    --cover-secondary-y: 22%;
    --cover-accent-x: 58%;
    --cover-accent-y: 78%;
    --cover-angle: 22deg;
}

[data-cover-variant="3"] {
    --cover-primary-x: 48%;
    --cover-primary-y: -52%;
    --cover-primary-size: 62%;
    --cover-secondary-x: 22%;
    --cover-secondary-y: 74%;
    --cover-accent-x: 88%;
    --cover-accent-y: 54%;
    --cover-angle: -22deg;
}

[data-cover-variant="4"] {
    --cover-primary-x: 76%;
    --cover-primary-y: -30%;
    --cover-primary-size: 46%;
    --cover-secondary-x: 4%;
    --cover-secondary-y: 58%;
    --cover-accent-x: 52%;
    --cover-accent-y: 14%;
    --cover-angle: 8deg;
}

[data-cover-variant="5"] {
    --cover-primary-x: 55%;
    --cover-primary-y: 30%;
    --cover-primary-size: 58%;
    --cover-secondary-x: 16%;
    --cover-secondary-y: 12%;
    --cover-accent-x: 86%;
    --cover-accent-y: 76%;
    --cover-angle: -7deg;
}

.cover-shape {
    position: absolute;
    display: block;
    pointer-events: none;
}

.cover-shape-primary {
    left: var(--cover-primary-x);
    top: var(--cover-primary-y);
    width: var(--cover-primary-size);
    aspect-ratio: 1;
    border: 1px solid rgb(var(--sf-rgb-cyan) / .72);
    background: rgb(var(--sf-rgb-cyan) / .13);
    transform: rotate(var(--cover-angle));
}

.cover-shape-secondary {
    left: var(--cover-secondary-x);
    top: var(--cover-secondary-y);
    width: 48%;
    height: 2px;
    background: rgb(var(--sf-rgb-cyan) / .72);
    transform: rotate(var(--cover-angle));
    transform-origin: left center;
}

.cover-shape-accent {
    left: var(--cover-accent-x);
    top: var(--cover-accent-y);
    width: clamp(18px, 5vw, 34px);
    aspect-ratio: 1;
    border: 2px solid rgb(var(--sf-rgb-orange) / .9);
    background: rgb(var(--sf-rgb-orange) / .16);
    transform: rotate(45deg);
}

.course-card {
    --course-card-inline-padding: var(--space-4);
    display: grid;
    grid-row: span 6;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-template-areas:
        "cover cover"
        "order head"
        "title title"
        "next next"
        "progress progress"
        "footer footer";
    align-items: start;
    gap: var(--space-3) var(--space-4);
    min-height: 100%;
    overflow: hidden;
    padding: var(--space-4) var(--course-card-inline-padding);
    border-radius: var(--radius-md);
    animation: academy-card-in var(--motion-object) both;
    animation-delay: calc(var(--catalog-order, 0) * 35ms);
}

.course-card:focus-within {
    background: var(--color-object-raised);
    box-shadow: var(--elevation-raised);
    transform: translateY(-2px);
}

.course-card-cover {
    position: relative;
    isolation: isolate;
    grid-area: cover;
    min-height: 96px;
    overflow: hidden;
    margin: calc(var(--space-4) * -1) calc(var(--course-card-inline-padding) * -1) 0;
    border-bottom: 1px solid rgb(var(--sf-rgb-white) / .16);
    background: var(--sf-brand-navy);
}

.course-card-cover::after {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 38%;
    height: 3px;
    background: var(--sf-brand-cyan);
    content: "";
}

.course-card-cover-label {
    position: absolute;
    z-index: 3;
    left: var(--space-4);
    bottom: var(--space-3);
    color: var(--sf-brand-white);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.course-card-order {
    grid-area: order;
    align-self: center;
    padding-right: var(--space-3);
    border-right: 1px solid var(--color-border);
    color: var(--color-border-strong);
    font-family: var(--font-condensed);
    font-stretch: condensed;
    font-size: 2.15rem;
    font-weight: 750;
    line-height: .9;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
}

.course-card-head {
    grid-area: head;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.course-card-percent {
    color: var(--color-text);
    font-family: var(--font-condensed);
    font-stretch: condensed;
    font-size: 1.35rem;
    font-weight: var(--font-weight-kpi);
    line-height: 1;
    letter-spacing: -.04em;
}

.course-card-copy {
    display: contents;
}

.course-card-copy h3 {
    grid-area: title;
    min-width: 0;
    max-width: 28ch;
    margin: 0;
    font-family: var(--font-ui);
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.course-card-next {
    grid-area: next;
    display: grid;
    gap: 3px;
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.course-card-next span,
.course-card-next small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.course-card-next strong {
    color: var(--color-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.course-card-progress {
    grid-area: progress;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.course-card-progress-copy {
    align-items: flex-end;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.course-card-progress-copy strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.course-card-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-1);
}

.course-card-xp {
    color: var(--color-accent-text);
    font-weight: 850;
}

.daily-xp-card {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 2fr);
    grid-template-areas:
        "title actions"
        "copy actions";
    align-items: center;
    gap: 2px var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-left: 3px solid var(--color-accent);
}

.daily-xp-card h3 {
    grid-area: title;
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.25;
}

.daily-xp-card p {
    grid-area: copy;
    margin-bottom: 0;
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.daily-xp-card .card-actions {
    grid-area: actions;
    justify-content: flex-end;
    margin-top: 0;
}

.daily-xp-card .button {
    min-height: var(--touch-target);
    padding: .55rem .75rem;
    font-size: .78rem;
}

.assessment-metrics,
.progress-metrics {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.assessment-metrics .card,
.progress-metrics .card {
    margin: 0;
}

.assessment-metrics .metric-primary,
.progress-metrics .metric-primary {
    flex: 1 1 210px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-working-surface);
}

.metric-primary .stat {
    margin-top: var(--space-1);
    font-family: var(--font-condensed);
    font-stretch: condensed;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: var(--font-weight-kpi);
}

.assessment-metrics .metric-chip,
.progress-metrics .metric-chip {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: 16px auto;
    grid-template-rows: auto auto;
    align-content: center;
    padding-block: .45rem;
    border: 1px solid var(--color-border);
    background: var(--color-panel-surface);
}

.metric-chip > .icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.metric-chip > .muted,
.metric-chip > .stat {
    grid-column: 2;
}

.metric-chip > .muted {
    font-size: .68rem;
    line-height: 1.1;
}

.metric-chip > .stat {
    margin: 1px 0 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0;
}

.course-overview-progress {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(220px, 1fr);
    align-items: center;
    gap: var(--space-5);
    padding: 0 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.course-overview-progress-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 2px var(--space-3);
}

.course-overview-progress-copy span,
.course-overview-progress-copy small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.course-overview-progress-copy strong {
    color: var(--color-text);
    font: var(--font-weight-kpi) 1.8rem/1 var(--font-condensed);
    font-variant-numeric: tabular-nums;
}

.course-overview-progress-copy small {
    grid-column: 1 / -1;
}

.course-access-notice {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.course-lesson-list,
.exam-history {
    gap: 0;
    border-top: 1px solid var(--color-border);
}

.course-lesson-row,
.exam-history .list-row {
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding-inline: var(--space-2);
    background: transparent;
}

.course-lesson-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin-top: 5px;
}

.course-lesson-meta small {
    min-width: min(100%, 260px);
}

.course-lesson-type {
    min-height: 24px;
    padding: 2px 8px;
    box-shadow: none;
    font-size: .68rem;
}

.course-lesson-row:hover {
    background: var(--color-surface-strong);
}

.course-lesson-index {
    color: var(--color-text-muted);
    font: 850 var(--font-size-sm)/1 var(--font-condensed);
    font-variant-numeric: tabular-nums;
}

.lesson-screen {
    width: 100%;
}

.lesson-ali-fab {
    position: fixed;
    z-index: 55;
    right: calc(var(--context-width) + 24px);
    bottom: 24px;
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary-text);
    background: var(--color-primary);
    box-shadow: var(--elevation-floating);
}

.lesson-ali-fab:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.lesson-ali-fab > .icon {
    width: 22px;
    height: 22px;
}

.lesson-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: -10px 0 18px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 750;
}

.lesson-breadcrumb-link {
    min-height: var(--touch-target);
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
    background: transparent;
    text-decoration: none;
}

.lesson-breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lesson-breadcrumb-current {
    color: var(--color-text);
}

.lesson-heading {
    margin-bottom: 24px;
}

.lesson-heading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
}

.lesson-heading h1 {
    max-width: 13ch;
    margin: 7px 0 13px;
    font-family: var(--font-condensed);
    font-size: clamp(2.55rem, 4.1vw, 3.65rem);
    font-stretch: condensed;
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.lesson-heading .eyebrow,
.lesson-reading > .eyebrow,
.lesson-resource-section > .eyebrow {
    color: var(--color-primary);
}

.lesson-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lesson-position {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: baseline;
    justify-items: end;
    color: var(--color-text);
    font-family: var(--font-condensed);
    font-stretch: condensed;
    font-variant-numeric: tabular-nums;
    line-height: .8;
    letter-spacing: -.045em;
}

.lesson-position-label {
    grid-column: 1 / -1;
    margin-bottom: 7px;
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lesson-position-value {
    color: var(--color-primary);
    font-size: 3.3rem;
    font-weight: 900;
}

.lesson-position-divider {
    margin-inline: 5px;
    color: var(--color-border-strong);
    font-size: 1.35rem;
    font-weight: 600;
}

.lesson-position-total {
    color: var(--color-text-muted);
    font-size: 1.35rem;
    font-weight: 750;
}

.lesson-media {
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: var(--color-video);
}

.lesson-media-caption {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    color: var(--sf-brand-white);
    background: var(--sf-brand-navy);
    border-bottom: 1px solid rgb(var(--sf-rgb-white) / .16);
    font-size: var(--font-size-xs);
}

.lesson-media-caption span {
    color: var(--sf-brand-cyan);
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lesson-media-caption strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-video-stage {
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--sf-brand-navy);
    box-shadow: var(--elevation-resting);
    transition: border-color var(--motion-object), box-shadow var(--motion-object);
}

.lesson-video-stage::before {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 34%;
    height: 3px;
    background: var(--sf-brand-cyan);
    content: "";
    pointer-events: none;
}

.lesson-video-stage::after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 3px solid var(--sf-brand-cyan);
    border-bottom: 3px solid var(--sf-brand-orange);
    content: "";
    pointer-events: none;
}

.lesson-video-stage .video {
    min-height: 300px;
    border-radius: 0;
}

.lesson-video-stage:not([data-player-state="ready"]) {
    min-height: clamp(236px, 56.25vw, 420px);
}

.video-state {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    align-items: end;
    padding: clamp(20px, 4vw, 40px);
    color: var(--sf-brand-white);
    background: var(--sf-brand-navy);
    text-align: left;
}

.video-state[hidden] {
    display: none;
}

.lesson-cover-pattern {
    z-index: 0;
}

.video-state-content {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: start;
    gap: 8px;
    width: min(100%, 620px);
}

.video-state-fraction {
    display: inline-flex;
    align-items: baseline;
    gap: .12em;
    margin-bottom: var(--space-1);
    color: var(--sf-brand-white);
    font-family: var(--font-condensed);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.video-state-fraction strong {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: var(--font-weight-display);
    letter-spacing: -.075em;
}

.video-state-fraction::after {
    width: 9px;
    height: 9px;
    margin-left: var(--space-2);
    border-radius: 50%;
    background: var(--sf-brand-orange);
    content: "";
    animation: academy-player-pulse 900ms var(--motion-ease) infinite alternate;
}

[data-player-state="error"] .video-state-fraction::after {
    width: 12px;
    height: 12px;
    border: 2px solid var(--sf-brand-orange);
    background: transparent;
    animation: none;
}

.video-state-kicker {
    color: var(--sf-brand-cyan);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.video-state-title {
    max-width: 24ch;
    color: var(--sf-brand-white);
    font: 900 clamp(1.35rem, 3vw, 2rem)/1.08 var(--font-condensed);
    letter-spacing: -.03em;
    text-wrap: balance;
}

.video-state-copy {
    max-width: 38ch;
    margin-top: var(--space-1);
    color: rgb(var(--sf-rgb-white) / .86);
    font-size: .85rem;
    font-weight: 700;
}

.video-state-retry {
    color: var(--sf-brand-white);
    background: transparent;
    border-color: var(--sf-brand-white);
}

.lesson-video-stage:fullscreen,
.lesson-video-stage:-webkit-full-screen {
    border: 0;
    border-radius: 0;
}

.lesson-video-stage:fullscreen::before,
.lesson-video-stage:fullscreen::after,
.lesson-video-stage:-webkit-full-screen::before,
.lesson-video-stage:-webkit-full-screen::after {
    display: none;
}

@keyframes academy-player-pulse {
    to { opacity: .35; }
}

.lesson-tabs-wrap {
    position: relative;
    min-width: 0;
    margin-top: 20px;
}

.lesson-tabs {
    display: flex;
    min-width: 0;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lesson-tabs-wrap::before,
.lesson-tabs-wrap::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 1px;
    width: 28px;
    content: "";
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-local);
}

.lesson-tabs-wrap::before {
    left: 0;
    border-left: 3px solid var(--color-primary);
    background: rgb(var(--sf-rgb-cyan) / .08);
}

.lesson-tabs-wrap::after {
    right: 0;
    border-right: 3px solid var(--color-primary);
    background: rgb(var(--sf-rgb-cyan) / .08);
}

.lesson-tabs-wrap[data-overflow-start="true"]::before,
.lesson-tabs-wrap[data-overflow-end="true"]::after {
    opacity: 1;
}

.lesson-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lesson-tab {
    position: relative;
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0;
    color: var(--color-text-muted);
    background: transparent;
    font-size: .78rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--motion-local), background-color var(--motion-local);
}

.lesson-tab::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: transparent;
    content: "";
}

.lesson-tab:focus-visible {
    z-index: 1;
    outline-offset: -4px;
}

.lesson-tab:hover,
.lesson-tab.active {
    color: var(--color-text);
}

.lesson-tab.active::after {
    background: var(--color-primary);
}

.lesson-tab-entering {
    animation: academy-tab-in var(--motion-local) both;
}

@keyframes academy-tab-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.lesson-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    gap: 1px;
    margin-top: 20px;
    border-block: 1px solid var(--color-border);
    background: var(--color-border);
}

.lesson-reading {
    min-width: 0;
    padding: clamp(22px, 3vw, 34px);
    background: var(--color-working-surface);
}

.lesson-reading .lesson-copy {
    margin-top: 18px;
}

.lesson-reading .lesson-copy p {
    max-width: 68ch;
    margin: 0 0 1em;
    font-size: .96rem;
    line-height: 1.66;
}

.lesson-completion-actions {
    display: flex;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.lesson-resources {
    min-width: 0;
    display: grid;
    align-content: start;
    background: var(--color-working-surface);
}

.lesson-resource-section {
    min-width: 0;
    padding: 22px;
}

.lesson-resource-section + .lesson-resource-section {
    border-top: 1px solid var(--color-border);
}

.lesson-resource-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lesson-resource-heading h2 {
    margin: 3px 0 0;
    font-family: var(--font-condensed);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.lesson-resource-list {
    gap: 0;
}

.lesson-resource-list .list-row {
    min-height: 58px;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
}

.lesson-resource-list .list-main strong {
    font-size: .82rem;
}

.lesson-resource-list .list-main small {
    font-size: .7rem;
}

.has-workspace .assessment-screen,
.has-workspace .homework-screen,
.has-workspace .exam-screen,
.has-workspace .exam-attempt-screen {
    width: min(100%, 760px);
    margin-inline: auto;
}

.assessment-form {
    gap: var(--space-4);
    padding-inline: 0;
    border-top: 0;
    background: transparent;
}

.assessment-question {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-object-resting);
    box-shadow: var(--elevation-resting);
    transition: background-color var(--motion-object), border-color var(--motion-object), box-shadow var(--motion-object), transform var(--motion-object);
}

.assessment-question:focus-within {
    background: var(--color-object-raised);
    box-shadow: var(--elevation-raised);
    transform: translateY(-2px);
}

.assessment-question > legend {
    max-width: 100%;
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: 720;
    line-height: 1.45;
}

.assessment-question-step {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.assessment-question-text {
    display: block;
    color: var(--color-text);
    max-width: 56ch;
}

.answer-option {
    min-height: var(--touch-target);
    align-content: center;
    margin-top: 10px;
    padding: 10px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 500;
    transition: color var(--motion-local), background-color var(--motion-local), border-color var(--motion-local);
}

.answer-option:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-strong);
}

.answer-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary), inset 3px 0 0 var(--color-primary);
}

.answer-option:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.answer-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: .62;
}

.assessment-question .answer-option[data-result="correct"] {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.assessment-question .answer-option[data-result="incorrect"],
.assessment-question .answer-option[aria-invalid="true"] {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.assessment-submit {
    position: sticky;
    bottom: var(--space-3);
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-canvas);
}

.assessment-progress {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

.assessment-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.assessment-progress-copy strong {
    color: var(--color-text);
}

.assignment-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-object-resting);
    box-shadow: var(--elevation-resting);
}

.assignment-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.assignment-card:last-child {
    border-bottom: 0;
}

.assignment-card h3,
.assignment-card p {
    margin: 0;
}

.assignment-form {
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.assignment-form > .button {
    justify-self: start;
    width: auto;
}

.exam-entry-card,
.exam-attempt-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-object-resting);
    box-shadow: var(--elevation-resting);
}

.exam-attempt-card .timer {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.content:has(> .ali-screen) {
    display: grid;
    min-height: 0;
    height: calc(100dvh - var(--topbar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--space-4);
}

.has-workspace .ali-screen {
    width: min(100%, 780px);
    margin-inline: auto;
    display: grid;
    grid-template-rows: auto auto minmax(min-content, 1fr);
    min-height: 0;
}

.ali-mode-switcher {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.ali-mode-switcher .button {
    min-height: 45px;
}

.ali-workspace {
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto auto;
    min-height: 0;
    margin-top: 0;
    padding: 0 var(--space-4) var(--space-4);
    border: 0;
    border-block: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-working-surface);
}

.ali-chat-region {
    position: relative;
    display: grid;
    min-height: 0;
}

.ali-workspace .chat {
    max-height: none;
    /* Three message lines plus author, bubble and history spacing. Size
       containment keeps 24+ messages out of the grid's intrinsic minimum. */
    contain: size;
    min-height: calc(3 * 1.58em + 6rem);
    overflow-y: auto;
    padding: var(--space-4) 0 var(--space-5);
    scroll-padding-block: var(--space-4);
}

.ali-workspace .chat:focus-visible {
    outline-offset: -3px;
}

/* Подсказка висит над концом истории, не отбирая у неё высоту и не перехватывая
   прокрутку: указатель принимает только сама кнопка. */
.ali-new-message-slot {
    position: absolute;
    inset-inline: 0;
    bottom: var(--space-4);
    display: grid;
    justify-items: center;
    pointer-events: none;
}

.ali-new-message {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    color: var(--color-primary-text);
    background: var(--color-primary);
    box-shadow: var(--elevation-floating);
    font: 650 var(--font-size-sm)/1.2 var(--font-ui);
    pointer-events: auto;
    cursor: pointer;
    transition: transform var(--motion-fast), background var(--motion-fast);
}

.ali-new-message:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.ali-new-message-mark {
    display: inline-flex;
    transform: rotate(90deg);
}

.ali-empty {
    align-self: center;
    justify-self: center;
    display: grid;
    justify-items: center;
    max-width: 38ch;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-muted);
    text-align: center;
}

.ali-empty-mark {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.ali-empty strong {
    color: var(--color-text);
    font: var(--font-weight-page-title) 1.25rem/1.1 var(--font-ui);
}

.ali-empty p {
    margin: 0;
}

.ali-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bubble.student {
    justify-self: end;
    padding-right: var(--space-3);
    padding-left: var(--space-4);
    color: var(--color-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.bubble.ali {
    padding-right: var(--space-4);
    padding-left: var(--space-3);
    background: transparent;
    border-color: var(--color-border-strong);
}

.bubble-author {
    color: var(--color-text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bubble-copy {
    line-height: 1.58;
    overflow-wrap: anywhere;
}

.ali-composer-field {
    grid-column: 1;
    min-width: 0;
}

.ali-composer-field textarea {
    min-height: 88px;
    resize: vertical;
}

.ali-composer-submit {
    grid-column: 2;
    grid-row: 1;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    margin-bottom: 1px;
    padding-inline: var(--space-3);
}

.ali-composer > .card,
.ali-composer > .voice-capture {
    grid-column: 1 / -1;
}

.ali-composer-status {
    grid-column: 1;
    min-height: 1.25em;
    font-size: var(--font-size-xs);
}

.achievement-grid,
.document-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.document-card {
    display: grid;
    align-content: start;
}

.document-card .card-actions {
    margin-top: auto;
    padding-top: var(--space-4);
}

.notification-preferences-form {
    max-width: 640px;
}

.access-screen > .card,
.access-screen > .section,
.progress-screen > .list,
.progress-screen > .empty {
    max-width: 980px;
}

@media (min-width: 1600px) {
    .lesson-tabs-wrap,
    .lesson-content-grid {
        width: min(100%, 760px);
        margin-inline: auto;
    }

    .lesson-tabs-wrap {
        margin-top: 20px;
    }

    .lesson-content-grid {
        margin-top: 20px;
    }
}

@media (max-width: 1399px) {
    .lesson-ali-fab {
        right: 24px;
    }

    .has-workspace .shell-body {
        grid-template-columns: var(--curriculum-width) minmax(0, 1fr);
    }

    .context-trigger,
    .context-panel .drawer-close {
        display: inline-grid;
    }

    .context-panel {
        position: fixed;
        z-index: 80;
        top: var(--topbar-height);
        right: 0;
        bottom: 0;
        width: min(var(--context-width), calc(100vw - var(--rail-width)));
        height: auto;
        border-left: 1px solid var(--color-border);
        transform: translateX(100%);
        transition: transform var(--motion-panel);
    }

    .shell[data-open-drawer="context"] .context-panel {
        transform: translateX(0);
    }

    .drawer-scrim {
        position: fixed;
        z-index: 70;
        inset: var(--topbar-height) 0 0 var(--rail-width);
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--color-overlay);
    }

    .drawer-open .drawer-scrim {
        display: block;
    }

    .account-copy {
        display: none;
    }
}

@media (max-width: 1199px) {
    .topbar {
        grid-template-columns: auto minmax(180px, 1fr) auto;
    }

    .topbar-product {
        display: none;
    }

}

@media (max-width: 1099px) {
    .lesson-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-resource-section + .lesson-resource-section {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

@media (max-width: 899px) {
    .has-workspace .shell-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .curriculum-trigger,
    .curriculum-panel .drawer-close {
        display: inline-grid;
    }

    .curriculum-panel {
        position: fixed;
        z-index: 80;
        top: var(--topbar-height);
        bottom: 0;
        left: var(--rail-width);
        width: min(360px, calc(100vw - var(--rail-width)));
        height: auto;
        border-right: 1px solid var(--color-border);
        transform: translateX(calc(-100% - var(--rail-width)));
        transition: transform var(--motion-panel);
    }

    .shell[data-open-drawer="curriculum"] .curriculum-panel {
        transform: translateX(0);
    }

    .topbar {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .topbar-search-area {
        width: 100%;
    }

}

@media (max-width: 767px), (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
    :root,
    .shell:not(.has-workspace) {
        --topbar-height: 62px;
    }

    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-theme {
        top: var(--space-3);
        right: var(--space-3);
    }

    .auth-hero {
        min-height: 250px;
        padding: var(--space-8) var(--space-5);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .auth-logo {
        width: 96px;
        height: 96px;
        margin-bottom: var(--space-4);
    }

    .auth-hero h1 {
        font-size: clamp(2.6rem, 14vw, 4.5rem);
    }

    .auth-panel {
        padding: var(--space-8) var(--space-4) var(--space-12);
    }

    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        display: none;
    }

    .app-frame {
        height: 100dvh;
        min-height: 0;
        grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .topbar {
        height: var(--topbar-height);
        min-height: var(--topbar-height);
        grid-template-columns: var(--touch-target) minmax(0, 1fr) auto;
        grid-template-rows: var(--touch-target);
        gap: var(--space-2);
        padding: 9px var(--space-3);
    }

    .topbar > .curriculum-trigger,
    .topbar > .topbar-spacer,
    .topbar-search-area,
    .topbar-search-placeholder,
    .topbar-actions,
    .topbar .theme-toggle,
    .topbar-notifications,
    .context-trigger {
        grid-column: auto;
        grid-row: auto;
    }

    .topbar-product,
    .topbar .account-button {
        display: none;
    }

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

    .topbar-utilities {
        gap: 2px;
    }

    .topbar-utilities .theme-toggle,
    .topbar-utilities .topbar-notifications {
        border-color: transparent;
        background: transparent;
    }

    .has-workspace .topbar-utilities {
        padding-right: 6px;
        border-right: 1px solid var(--color-border);
    }

    .drawer-trigger,
    .topbar-search-toggle {
        color: var(--color-primary);
        background: var(--color-primary-soft);
        border-color: transparent;
    }

    .topbar-search-area {
        width: 100%;
        justify-self: stretch;
    }

    .shell:not(.has-workspace) .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: var(--touch-target);
    }

    .shell:not(.has-workspace) .topbar > .topbar-spacer {
        display: none;
    }

    .shell:not(.has-workspace) .topbar-search-area,
    .shell:not(.has-workspace) .topbar-search-placeholder {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .shell:not(.has-workspace) .topbar-actions {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        justify-self: end;
    }

    .shell-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: var(--space-6);
    }

    .workspace-panel {
        top: 0;
        bottom: 0;
        width: min(360px, 100vw);
        height: 100vh;
        padding: var(--space-5);
    }

    .curriculum-panel {
        left: 0;
        transform: translateX(-100%);
    }

    .context-panel {
        width: min(var(--context-width), 100vw);
    }

    .drawer-scrim {
        inset: 0;
    }

    .content {
        padding: 24px 16px calc(72px + 32px + env(safe-area-inset-bottom));
    }

    .content.has-floating-action {
        height: 100%;
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }

    .lesson-ali-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(72px + 14px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }

    .page-head h1 {
        max-width: 100%;
        font-size: clamp(1.75rem, 8vw, 2.125rem);
    }

    .course-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .course-card-cover {
        min-height: 82px;
    }

    .course-card-order {
        align-self: center;
        padding-right: var(--space-3);
        font-size: 2rem;
    }

    .course-card-head {
        align-self: center;
    }

    .course-card-copy h3 {
        font-size: 1.25rem;
    }

    .course-overview-progress {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .daily-xp-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "copy"
            "actions";
        gap: var(--space-1);
        padding: var(--space-3);
    }

    .daily-xp-card .card-actions {
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .daily-xp-card .card-actions::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .daily-xp-card .card-actions .button {
        flex: 0 0 auto;
        max-width: min(250px, calc(100vw - 64px));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .assessment-metrics .metric-primary,
    .progress-metrics .metric-primary {
        flex-basis: 100%;
    }

    .course-lesson-row,
    .exam-history .list-row {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        padding-block: var(--space-3);
    }

    .course-lesson-row > :last-child:not(.list-main),
    .exam-history .list-row > :last-child:not(.list-main) {
        grid-column: 2;
        justify-self: start;
    }

    .lesson-breadcrumbs {
        margin-top: -10px;
        margin-bottom: 6px;
        gap-inline: 6px;
        overflow-wrap: anywhere;
    }

    .lesson-heading {
        margin-bottom: 14px;
    }

    .lesson-heading-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--space-3);
    }

    .lesson-heading h1 {
        max-width: 13ch;
        margin: 4px 0 8px;
        font-size: clamp(2rem, 9vw, 2.65rem);
    }

    .lesson-position {
        justify-content: end;
        justify-items: end;
        margin: 0 0 3px;
    }

    .lesson-position-value {
        font-size: 2.3rem;
    }

    .lesson-position-divider,
    .lesson-position-total {
        font-size: 1rem;
    }

    .lesson-media-caption {
        padding-inline: var(--space-3);
    }

    .lesson-video-stage .video {
        min-height: 0;
    }

    .lesson-tabs-wrap {
        margin-top: 18px;
    }

    .lesson-tab {
        padding-inline: 14px;
    }

    .lesson-content-grid {
        margin-top: 16px;
    }

    .lesson-resources {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-resource-section + .lesson-resource-section {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .assessment-submit {
        bottom: calc(72px + var(--space-2) + env(safe-area-inset-bottom));
    }

    .content:has(> .ali-screen) {
        height: calc(100dvh - var(--topbar-height) - 72px - env(safe-area-inset-bottom));
        padding-block: var(--space-2);
    }

    .ali-screen .page-head {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-1);
        padding-bottom: var(--space-1);
    }

    .ali-screen .page-head > .button {
        flex-shrink: 0;
        padding-inline: var(--space-2);
    }

    .ali-mode-switcher {
        flex-wrap: nowrap;
        margin-bottom: var(--space-1);
        padding-bottom: var(--space-1);
    }

    .ali-screen .ali-mode-switcher .button {
        flex: 1 1 auto;
        padding-inline: var(--space-2);
        white-space: nowrap;
    }

    .ali-screen .ali-workspace {
        padding: 0 var(--space-3) var(--space-2);
    }

    .ali-workspace .chat {
        padding-block: var(--space-3);
    }

    .ali-composer {
        gap: var(--space-1);
        padding-top: var(--space-2);
    }

    .ali-composer-field {
        gap: var(--space-1);
    }

    .ali-composer-status:empty {
        min-height: 0;
    }

    .mobile-nav {
        position: static;
        z-index: 1;
        height: calc(72px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
    }

    .mobile-nav .nav-item {
        min-height: 60px;
        color: var(--color-text-muted);
        border-radius: var(--radius-sm);
        padding: var(--space-2);
    }

    .mobile-nav .nav-item:hover,
    .mobile-nav .nav-item.active {
        color: var(--color-primary);
        background: var(--color-primary-soft);
    }

    .mobile-nav .nav-item::before {
        display: none;
    }

    .list-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .list-row > :last-child:not(.list-main) {
        align-self: stretch;
    }

    .card-actions .button {
        flex: 1 1 180px;
    }

    .bubble {
        max-width: 92%;
    }

    .toast {
        right: var(--space-3);
        bottom: calc(72px + var(--space-3) + env(safe-area-inset-bottom));
        max-width: calc(100vw - var(--space-6));
    }

    .video-fullscreen-button {
        right: max(176px, calc(174px + env(safe-area-inset-right)));
        bottom: max(8px, calc(6px + env(safe-area-inset-bottom)));
    }

    .video-fullscreen-tooltip {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 390px) {
    .topbar {
        gap: var(--space-1);
        padding-inline: var(--space-2);
    }

    .topbar-search-area {
        width: var(--touch-target);
        height: var(--touch-target);
        justify-self: end;
    }

    .topbar-search-area .topbar-search {
        display: none;
    }

    .topbar-search-toggle {
        display: inline-grid;
        flex: 0 0 var(--touch-target);
    }

    .topbar-search-area.is-open {
        position: absolute;
        z-index: 5;
        inset: 9px var(--space-2);
        width: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--touch-target);
        gap: var(--space-2);
        padding: 0;
        background: var(--color-surface);
    }

    .topbar-search-area.is-open .topbar-search {
        display: grid;
    }

    .topbar-actions {
        gap: var(--space-1);
    }

    .topbar-utilities {
        gap: 0;
    }

    .content {
        padding-inline: var(--space-3);
    }

    .card {
        padding: var(--space-4);
    }

    .course-card {
        --course-card-inline-padding: var(--space-3);
        padding-inline: var(--space-3);
    }

    .lesson-heading h1 {
        font-size: clamp(1.8rem, 9.5vw, 2.35rem);
    }

    .lesson-meta {
        gap: var(--space-1);
    }

    .lesson-reading,
    .lesson-resource-section {
        padding: 18px;
    }

    .card-actions .button {
        flex-basis: 100%;
    }

    .assessment-submit .button,
    .assignment-form > .button,
    .ali-composer-submit {
        flex-basis: auto;
    }

    .ali-composer-submit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* A low, wide viewport has room beside the history, not below it.
   Keep the same controls and reading sizes; only their placement changes. */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    .has-workspace .ali-screen {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(min-content, 1fr);
        column-gap: var(--space-4);
    }

    .ali-screen .page-head {
        grid-column: 1;
    }

    .ali-mode-switcher {
        grid-column: 2;
        align-items: center;
    }

    .ali-screen .ali-workspace {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
        grid-template-rows: minmax(min-content, 1fr) auto;
        column-gap: var(--space-4);
    }

    .ali-chat-region {
        grid-column: 1;
        grid-row: 1;
    }

    .ali-workspace > .notice {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ali-composer {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding-top: var(--space-3);
        border-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        transition-delay: 0ms !important;
    }

    .button:active:not(:disabled),
    .course-card:hover,
    .course-card:focus-within,
    .assessment-question:hover,
    .assessment-question:focus-within {
        transform: none;
    }

    .app-shell[aria-busy="true"]::before {
        width: 100%;
        animation: none;
        transform: none;
    }
}