/* UCS Academy component library (WU-03). Built only on tokens.css. No framework. */

/* ---------- Layout ---------- */
.stack > * + * { margin-top: var(--ucs-space-3); }
/* Utility classes replacing inline style="" attributes (WU-26) — this app's CSP (style-src 'self',
   no 'unsafe-inline') blocks the style attribute the same way it blocks JS-set inline styles. */
.list-reset { list-style: none; padding-left: 0; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 32rem; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); align-items: center; }
.grid { display: grid; gap: var(--ucs-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* Explicit 1/2/3-column catalogue grid (WU-26A) — the generic auto-fill .grid above sizes columns
   from each card's own content width, which gave an inconsistent, often 2-wide layout at 1440px;
   this guarantees exactly 3 columns on wide screens, 2 on tablet, 1 on mobile, as specified. */
.grid--catalog { grid-template-columns: 1fr; gap: var(--ucs-space-3); }
@media (min-width: 700px) { .grid--catalog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid--catalog { grid-template-columns: repeat(3, 1fr); } }
/* Compact auth-form layout (WU-27) — login/register previously used the generic .grid--2 (two equal,
   full-stretch columns), which made both the form and its secondary note card balloon to ~550px wide
   with a lot of empty space below the shorter card's short content. This caps the form itself to a
   realistic width and lets the secondary card size to its own content instead of stretching to match. */
.auth-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ucs-space-4); }
.auth-layout > .card:first-child { flex: 1 1 320px; max-width: 26rem; }
.auth-layout > .card:last-child { flex: 1 1 260px; max-width: 22rem; }
.sidebar-layout { display: grid; gap: var(--ucs-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .sidebar-layout { grid-template-columns: 300px minmax(0, 1fr); } .sidebar-layout--right { grid-template-columns: minmax(0, 1fr) 320px; } }
.page-header { padding: var(--ucs-space-4) 0 var(--ucs-space-3); border-bottom: 1px solid var(--ucs-line); margin-bottom: var(--ucs-space-4); }
.page-header h1 { margin-bottom: var(--ucs-space-1); }
.page-header .lede { margin-bottom: 0; }
/* Compact page-header variant (WU-26A): less padding/margin for pages where the filter bar and
   results should start close beneath the heading, instead of the roomier default used on pages
   with no immediately-following controls. */
.page-header--compact { padding: var(--ucs-space-3) 0 var(--ucs-space-2); margin-bottom: var(--ucs-space-3); }
/* Compact horizontal filter bar (WU-26A) — replaces the permanent wide filter sidebar on the
   catalogue. A single low, wrapping row of native controls instead of a tall stack of bordered
   choice boxes, so filtering no longer costs a fixed ~300px-wide, often taller-than-the-grid column. */
/* Grid (WU-27, corrected WU-30): WU-27 found that a plain <fieldset> sits taller than a <div
   class="field"> (the browser default fieldset border/padding and legend box), which is what
   actually pulled the Learning-level field out of alignment with its siblings and forced the
   actions row onto its own permanently-separate line. WU-30 resets the fieldset/legend box model
   to match a plain field instead, so all four fields -- and the actions -- can share one row and
   one baseline on desktop, in a fixed (not auto-fit) column count that doesn't reflow
   unpredictably with viewport width. */
.filter-bar { display: grid; grid-template-columns: 1fr; align-items: end; gap: var(--ucs-space-2) var(--ucs-space-3); padding: var(--ucs-space-2) var(--ucs-space-3); background: var(--color-surface); border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); margin-bottom: var(--ucs-space-3); }
@media (min-width: 700px) { .filter-bar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .filter-bar { grid-template-columns: 1fr 1fr 1fr 1fr auto; } }
.filter-bar .field { margin: 0; min-width: 0; }
.filter-bar fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-bar fieldset legend { display: block; width: auto; float: none; padding: 0; margin-bottom: 4px; font-size: var(--ucs-fs-sm); font-weight: 600; }
.filter-bar select, .filter-bar input[type="search"] { width: 100%; height: 38px; padding: 8px 10px; border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); background: var(--color-surface); font: inherit; box-sizing: border-box; }
.filter-bar .field label { display: block; margin-bottom: 4px; font-size: var(--ucs-fs-sm); font-weight: 600; }
/* A fixed 2x2 layout (not flex-wrap) so the four learning-level options never reflow mid-row;
   this keeps multi-select (an intentional, functional capability -- app/web/pages.py::catalog
   accepts several `level` values at once) in a compact footprint the same width as one grid
   column, rather than switching to a single-select and silently dropping that capability. */
.filter-bar__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 38px; align-content: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); cursor: pointer; font-size: var(--ucs-fs-sm); background: var(--color-surface); white-space: nowrap; }
.filter-chip:has(input:checked) { border-color: var(--ucs-navy); background: var(--ucs-bg-soft); color: var(--ucs-navy); font-weight: 600; }
.filter-chip:focus-within { outline: var(--ucs-focus-width) solid var(--ucs-focus); outline-offset: 2px; }
.filter-chip input { width: 16px; height: 16px; accent-color: var(--ucs-navy); flex: none; }
.filter-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ucs-space-2); grid-column: 1 / -1; }
@media (min-width: 1024px) { .filter-bar__actions { grid-column: auto; } }
.section { margin-block: var(--ucs-space-5); }
.section > h2 { margin-bottom: var(--ucs-space-3); }
.muted { color: var(--color-text-soft); }
.small { font-size: var(--ucs-fs-sm); }
.text-right { text-align: right; }

/* ---------- Demo banner (visible on every preview page) ---------- */
.demo-banner { background: var(--ucs-accent-soft); color: var(--ucs-accent-deep); border-bottom: 1px solid var(--ucs-accent); padding: var(--ucs-space-2) 0; font-size: var(--ucs-fs-sm); }
.demo-banner strong { font-family: var(--ucs-font-heading); }

/* ---------- Header / navigation ---------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--ucs-line); position: relative; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ucs-space-3); min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: var(--ucs-space-2); text-decoration: none; margin-right: auto; }
.brand__logo { height: 84px; width: auto; display: block; max-width: none; }
.brand__logo--compact { display: none; }
.menu-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ucs-space-1); }
.site-nav a, .site-nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--ucs-text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--ucs-bg-soft); color: var(--ucs-navy); }
.site-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--ucs-navy); }
.site-search { display: flex; gap: var(--ucs-space-1); align-items: center; }
.site-search input { min-width: 0; width: 100%; }
@media (max-width: 959px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--ucs-navy); border-radius: var(--ucs-radius-pill); background: var(--color-surface); color: var(--ucs-navy); font: inherit; font-weight: 600; cursor: pointer; }
  .site-nav { flex-basis: 100%; }
  .site-nav[hidden] { display: none; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: var(--ucs-space-2); }
  .site-nav a { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--ucs-line); margin-top: var(--ucs-space-5); padding: var(--ucs-space-4) 0; color: var(--color-text-soft); font-size: var(--ucs-fs-sm); background: var(--color-surface); }
.site-footer__cols { display: grid; gap: var(--ucs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: var(--ucs-space-4); }
.site-footer h2 { font-size: var(--ucs-fs-md); color: var(--ucs-navy); margin-bottom: var(--ucs-space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--ucs-space-1); }
.site-footer a { color: var(--ucs-navy); }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: var(--ucs-radius-pill); font-family: var(--ucs-font-heading); font-weight: 600; font-size: var(--ucs-fs-md); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color var(--ucs-transition), color var(--ucs-transition); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-surface); color: var(--ucs-navy); border-color: var(--ucs-navy); }
.btn-secondary:hover { background: var(--ucs-bg-soft); color: var(--ucs-navy); }
.btn-ghost { background: transparent; color: var(--ucs-navy); }
.btn-ghost:hover { background: var(--ucs-bg-soft); }
.btn-danger { background: var(--ucs-danger); color: #fff; }
.btn-danger:hover { background: #991b1b; color: #fff; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: var(--ucs-fs-sm); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: not-allowed; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: var(--ucs-space-1) 0; }

/* ---------- Cards ---------- */
.card { background: var(--color-surface); border-radius: var(--ucs-radius); box-shadow: var(--ucs-shadow-soft); padding: var(--ucs-space-4); }
.card--flat { box-shadow: none; border: 1px solid var(--ucs-line); }
.course-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--ucs-radius-sm); border: 1px solid var(--ucs-line); overflow: hidden; height: 100%; }
.course-card__media { aspect-ratio: 16 / 9; background: var(--ucs-gradient-brand); color: #fff; display: flex; align-items: flex-end; padding: var(--ucs-space-3); font-family: var(--ucs-font-heading); font-weight: 700; font-size: var(--ucs-fs-lg); }
.course-card__body { padding: var(--ucs-space-3); display: flex; flex-direction: column; gap: var(--ucs-space-2); flex: 1; }
.course-card__title { font-size: var(--ucs-fs-lg); margin: 0; }
.course-card__title a { color: var(--ucs-navy); text-decoration: none; }
.course-card__title a:hover, .course-card__title a:focus-visible { text-decoration: underline; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); color: var(--color-text-soft); font-size: var(--ucs-fs-sm); margin: 0; }
.course-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--ucs-space-2); }
.course-card__summary { color: var(--color-text-soft); font-size: var(--ucs-fs-sm); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.enroll-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ucs-space-1); }
.enroll-card__facts li { padding-left: 1.1em; position: relative; }
.enroll-card__facts li::before { content: "✓"; position: absolute; left: 0; color: var(--ucs-success); }
.price { font-family: var(--ucs-font-heading); font-weight: 700; color: var(--ucs-navy); }
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--ucs-radius-pill); font-size: var(--ucs-fs-sm); font-weight: 600; background: var(--ucs-bg-soft); color: var(--ucs-navy); }
.badge--accent { background: var(--ucs-accent-soft); color: var(--ucs-accent-deep); }
.badge--success { background: #ecfdf5; color: var(--ucs-success); }
.badge--warning { background: #fffbeb; color: var(--ucs-warning); }
.badge--danger { background: #fef2f2; color: var(--ucs-danger); }
.rating { color: var(--ucs-accent-deep); font-weight: 600; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--ucs-space-3); }
.field label, .field legend, .field__label { display: block; font-weight: 600; margin-bottom: var(--ucs-space-1); color: var(--ucs-text); }
.field .hint { display: block; color: var(--color-text-soft); font-size: var(--ucs-fs-sm); margin-bottom: var(--ucs-space-1); }
input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="file"], select, textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 2px solid var(--ucs-line-strong); border-radius: 8px; font: inherit; color: var(--ucs-text); background: var(--color-surface); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ucs-navy); outline: var(--ucs-focus-width) solid var(--ucs-focus); outline-offset: 2px; }
textarea { min-height: 120px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--ucs-danger); }
.error-message { color: var(--ucs-danger); font-weight: 600; font-size: var(--ucs-fs-sm); margin-top: var(--ucs-space-1); }
.error-message::before { content: "Error: "; }
.error-summary { border: 3px solid var(--ucs-danger); border-radius: var(--ucs-radius-sm); padding: var(--ucs-space-3); margin-bottom: var(--ucs-space-4); background: var(--color-surface); }
.error-summary h2 { color: var(--ucs-danger); font-size: var(--ucs-fs-lg); margin-bottom: var(--ucs-space-2); }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--ucs-danger); font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--ucs-space-3); min-width: 0; }
.choice { display: flex; align-items: flex-start; gap: var(--ucs-space-2); padding: 10px 12px; border: 2px solid var(--ucs-line); border-radius: 8px; margin-bottom: var(--ucs-space-2); background: var(--color-surface); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ucs-navy); background: var(--ucs-bg-soft); }
.choice:focus-within { outline: var(--ucs-focus-width) solid var(--ucs-focus); outline-offset: 2px; }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ucs-navy); }
.choice span { font-weight: 400; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); margin-top: var(--ucs-space-4); }

/* ---------- Tabs (ARIA APG, keyboard via ui.js) ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--ucs-line); margin: 0 0 var(--ucs-space-3); padding: 0; list-style: none; }
.tabs__tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; min-height: 44px; font: inherit; font-weight: 600; color: var(--color-text-soft); cursor: pointer; border-radius: 8px 8px 0 0; }
.tabs__tab:hover { color: var(--ucs-navy); background: var(--ucs-bg-soft); }
.tabs__tab[aria-selected="true"] { color: var(--ucs-navy); border-bottom-color: var(--ucs-navy); }
.tabs__panel[hidden] { display: none; }
.tabs--nojs .tabs__list { display: none; }
.tabs--nojs .tabs__panel { display: block !important; }
.tabs--nojs .tabs__panel > :is(h2, h3):first-child { border-top: 1px solid var(--ucs-line); padding-top: var(--ucs-space-3); }

/* ---------- Breadcrumbs ---------- */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ucs-space-2); padding: 0; margin: 0 0 var(--ucs-space-3); font-size: var(--ucs-fs-sm); }
.breadcrumb li { display: flex; align-items: center; gap: var(--ucs-space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--color-text-soft); }
.breadcrumb a { color: var(--ucs-blue); }
.breadcrumb [aria-current="page"] { color: var(--color-text-soft); }
/* WU-49: long course/criterion titles (amplified by QA-mirror disclaimer suffixes, but real
   enough with ordinary long titles too) wrapped across several lines above the lesson, pushing
   content below the fold on narrow screens. Ancestor crumbs are truncated with an ellipsis --
   the link's accessible name (its text content) is unchanged for assistive tech, only the
   visual rendering is clipped -- while the current page keeps full, unclipped text. */
@media (max-width: 719px) {
  .breadcrumb ol { gap: 4px; row-gap: 2px; }
  .breadcrumb li + li::before { margin-inline-end: 2px; }
  .breadcrumb li:not(:last-child) a { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
}

/* ---------- Progress ---------- */
.progress { display: block; }
.progress__label { display: flex; justify-content: space-between; font-size: var(--ucs-fs-sm); margin-bottom: 4px; }
.progress__track { height: 10px; background: var(--ucs-bg-soft); border: 1px solid var(--ucs-line-strong); border-radius: var(--ucs-radius-pill); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--ucs-navy); transition: width var(--ucs-transition); }
.progress--success .progress__bar { background: var(--ucs-success); }
/* Width is set by adding one of these classes in JS (nearest 5%), never via the style attribute or
   the CSSOM — both are blocked by this app's CSP (style-src 'self', no 'unsafe-inline'). A div's
   JS-set .style.width silently does nothing under that policy, so every progress bar rendered at 0%
   width until this was caught (WU-26). */
.progress__bar.p-0 { width: 0%; } .progress__bar.p-5 { width: 5%; } .progress__bar.p-10 { width: 10%; }
.progress__bar.p-15 { width: 15%; } .progress__bar.p-20 { width: 20%; } .progress__bar.p-25 { width: 25%; }
.progress__bar.p-30 { width: 30%; } .progress__bar.p-35 { width: 35%; } .progress__bar.p-40 { width: 40%; }
.progress__bar.p-45 { width: 45%; } .progress__bar.p-50 { width: 50%; } .progress__bar.p-55 { width: 55%; }
.progress__bar.p-60 { width: 60%; } .progress__bar.p-65 { width: 65%; } .progress__bar.p-70 { width: 70%; }
.progress__bar.p-75 { width: 75%; } .progress__bar.p-80 { width: 80%; } .progress__bar.p-85 { width: 85%; }
.progress__bar.p-90 { width: 90%; } .progress__bar.p-95 { width: 95%; } .progress__bar.p-100 { width: 100%; }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); counter-reset: step; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: var(--ucs-fs-sm); }
.steps li::before { counter-increment: step; content: counter(step); display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--ucs-line-strong); font-weight: 700; }
.steps li[aria-current="step"] { font-weight: 700; color: var(--ucs-navy); }
.steps li[aria-current="step"]::before { background: var(--ucs-navy); color: #fff; border-color: var(--ucs-navy); }
.steps li.is-done::before { background: var(--ucs-success); color: #fff; border-color: var(--ucs-success); }

/* ---------- Dialog (native <dialog>) ---------- */
dialog.dialog { border: 0; border-radius: var(--ucs-radius); box-shadow: var(--ucs-shadow-strong); padding: var(--ucs-space-4); width: min(560px, calc(100vw - 2 * var(--ucs-gutter))); max-height: calc(100vh - 2 * var(--ucs-gutter)); overflow: auto; color: var(--ucs-text); }
dialog.dialog::backdrop { background: rgba(18, 35, 61, .55); }
.dialog__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ucs-space-3); }
.dialog__header h2 { margin-bottom: var(--ucs-space-2); }
.dialog__close { background: none; border: 2px solid transparent; border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ucs-text); }
.dialog__close:hover { background: var(--ucs-bg-soft); }

/* ---------- Notifications / alerts ---------- */
.alert { display: flex; gap: var(--ucs-space-2); align-items: flex-start; padding: var(--ucs-space-3); border-radius: var(--ucs-radius-sm); border: 1px solid; border-left-width: 6px; background: var(--color-surface); margin-bottom: var(--ucs-space-3); }
.alert p:last-child { margin-bottom: 0; }
.alert--info { border-color: var(--ucs-info); }
.alert--success { border-color: var(--ucs-success); }
.alert--warning { border-color: var(--ucs-warning); }
.alert--danger { border-color: var(--ucs-danger); }
.alert__title { font-weight: 700; display: block; }
.alert--info .alert__title { color: var(--ucs-info); }
.alert--success .alert__title { color: var(--ucs-success); }
.alert--warning .alert__title { color: var(--ucs-warning); }
.alert--danger .alert__title { color: var(--ucs-danger); }
.toast-region { position: fixed; inset-inline: var(--ucs-gutter); bottom: var(--ucs-gutter); display: flex; flex-direction: column; gap: var(--ucs-space-2); align-items: flex-end; pointer-events: none; z-index: 50; }
.toast { pointer-events: auto; max-width: min(420px, 100%); background: var(--ucs-navy); color: #fff; padding: var(--ucs-space-2) var(--ucs-space-3); border-radius: var(--ucs-radius-sm); box-shadow: var(--ucs-shadow-strong); display: flex; gap: var(--ucs-space-2); align-items: center; }
.toast button { background: none; border: 2px solid rgba(255,255,255,.6); color: #fff; border-radius: var(--ucs-radius-pill); min-height: 36px; padding: 4px 12px; font: inherit; cursor: pointer; }

/* ---------- Empty / loading / error states ---------- */
.state { text-align: center; padding: var(--ucs-space-5) var(--ucs-space-3); border: 2px dashed var(--ucs-line-strong); border-radius: var(--ucs-radius); background: var(--color-surface); }
.state h2, .state h3 { margin-bottom: var(--ucs-space-2); }
.state--error { border-style: solid; border-color: var(--ucs-danger); }
.spinner { display: inline-block; width: 28px; height: 28px; border: 4px solid var(--ucs-bg-soft); border-top-color: var(--ucs-navy); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--ucs-bg-soft), #e4ecf7, var(--ucs-bg-soft)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; min-height: 1em; }
@keyframes shimmer { to { background-position: -200% 0; } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; /* contains visually-hidden descendants */ }
table.table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--ucs-fs-sm); }
.table caption { text-align: left; font-weight: 700; padding: var(--ucs-space-2) 0; font-family: var(--ucs-font-heading); color: var(--ucs-navy); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ucs-line); vertical-align: top; }
.table th { background: var(--ucs-bg-soft); color: var(--ucs-navy); }
.table tbody tr:hover { background: var(--ucs-bg); }

/* ---------- Stat tiles ---------- */
.stat { background: var(--color-surface); border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); padding: var(--ucs-space-3); }
.stat__value { font-family: var(--ucs-font-heading); font-size: var(--ucs-fs-2xl); font-weight: 700; color: var(--ucs-navy); line-height: 1.1; }
.stat__label { color: var(--color-text-soft); font-size: var(--ucs-fs-sm); }

/* ---------- Curriculum tree (course player rail) ---------- */
.curriculum { background: var(--color-surface); border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); }
.curriculum details { border-bottom: 1px solid var(--ucs-line); }
.curriculum summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--ucs-navy); list-style: none; display: flex; justify-content: space-between; gap: var(--ucs-space-2); min-height: 44px; align-items: center; }
.curriculum summary::-webkit-details-marker { display: none; }
.curriculum summary::after { content: "+"; font-weight: 700; }
.curriculum details[open] summary::after { content: "−"; }
.curriculum ol { list-style: none; margin: 0; padding: 0 0 var(--ucs-space-1); }
.curriculum li a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px 10px 28px; color: var(--ucs-text); text-decoration: none; font-size: var(--ucs-fs-sm); min-height: 44px; }
.curriculum li a:hover { background: var(--ucs-bg-soft); }
.curriculum li a[aria-current="page"] { background: var(--ucs-bg-soft); font-weight: 600; color: var(--ucs-navy); box-shadow: inset 4px 0 0 var(--ucs-navy); }
.curriculum .lesson-status { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ucs-line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.curriculum .lesson-status--done { background: var(--ucs-success); border-color: var(--ucs-success); color: #fff; }

/* ---------- Player ---------- */
.player-layout { display: grid; gap: var(--ucs-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .player-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  /* WU-31: without this, the curriculum sidebar (often 20-40+ lessons tall) stretches the grid
     row to its own full height, leaving a lesson with genuinely short content (a quiz or
     assignment intro card, say) floating above a large empty gap before the footer. A sticky,
     independently-scrolling sidebar is the standard fix: the page's height follows the lesson
     content, and the curriculum list scrolls within its own viewport-bounded box instead. */
  .player-layout .curriculum { position: sticky; top: var(--ucs-space-3); max-height: calc(100vh - var(--ucs-space-3) * 2); overflow-y: auto; }
}
/* WU-49: below 1024px the two-column grid stacks into one column, which previously put the
   curriculum sidebar after the entire lesson article -- on Advanced/Intermediate with an 86-item
   course list this meant scrolling past the whole lesson to find "where am I / how do I move".
   Moving the (now collapsed-by-default) sidebar to the front of the stack puts a compact
   navigation entry point right after the progress bar, before the lesson content. */
@media (max-width: 1023px) {
  .player-layout .curriculum { order: -1; }
}
.curriculum-disclosure > summary {
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--ucs-space-2);
  padding: 12px 14px; font-weight: 600; color: var(--ucs-navy); list-style: none; min-height: 44px;
  border-top: 1px solid var(--ucs-line);
}
.curriculum-disclosure > summary::-webkit-details-marker { display: none; }
.curriculum-disclosure > summary::after { content: "Show ▾"; font-weight: 400; font-size: var(--ucs-fs-sm); color: var(--color-text-soft); }
.curriculum-disclosure[open] > summary::after { content: "Hide ▴"; }
@media (min-width: 1024px) {
  /* Desktop keeps the sidebar permanently expanded, as before WU-49 -- the disclosure chrome is
     mobile/tablet-only UI. The element is server-rendered with the `open` attribute already set
     (see player.html), so this stays correctly expanded even without JavaScript; ui.js only
     removes `open` on narrow viewports so mobile defaults to collapsed. */
  .curriculum-disclosure > summary { display: none; }
}
.player-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ucs-space-2); align-items: center; padding: var(--ucs-space-2) 0; border-top: 1px solid var(--ucs-line); margin-top: var(--ucs-space-4); }
.lesson-content { background: var(--color-surface); border-radius: var(--ucs-radius-sm); border: 1px solid var(--ucs-line); padding: var(--ucs-space-4); }
.lesson-content video { width: 100%; height: auto; background: #000; border-radius: 8px; }
.example { padding: var(--ucs-space-3); border-radius: 8px; border-left: 6px solid; margin: var(--ucs-space-3) 0; }
.example--pass { background: #ecfdf5; border-color: var(--ucs-success); }
.example--fail { background: #fef2f2; border-color: var(--ucs-danger); }
.example h3 { margin-bottom: var(--ucs-space-1); font-size: var(--ucs-fs-md); }
pre.code { background: #0f2747; color: #e8eef8; padding: var(--ucs-space-3); border-radius: 8px; overflow-x: auto; font-family: var(--ucs-font-mono); font-size: var(--ucs-fs-sm); }

/* ---------- Rubric ---------- */
.rubric .table th { white-space: normal; }
.rubric-level { display: block; }
.rubric-level input { margin-right: 6px; accent-color: var(--ucs-navy); }
.rubric-level__pts { font-weight: 600; color: var(--ucs-navy); }

/* ---------- Pagination ---------- */
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: var(--ucs-space-4) 0 0; }
.pagination a, .pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--ucs-navy); }
.pagination a:hover { background: var(--ucs-bg-soft); }
.pagination [aria-current="page"] { background: var(--ucs-navy); color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .spinner, .skeleton { animation: none; } }

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .btn, .choice, .course-card, .card, .stat, .alert { forced-color-adjust: none; border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .btn-primary, .pagination [aria-current="page"] { background: Highlight; color: HighlightText; }
  .progress__bar { background: Highlight; }
  .tabs__tab[aria-selected="true"] { border-bottom-color: Highlight; }
}

/* ---------- Target size (2.5.8): list and breadcrumb links get a >= 24px box ---------- */
.site-footer li a, .breadcrumb a, .link-list a { display: inline-block; padding-block: 4px; min-height: 24px; }

/* ---------- Rubric matrix: stack levels vertically below 720px (no horizontal scrolling needed) ---------- */
@media (max-width: 719px) {
  .brand__logo--full { display: none; }
  .brand__logo--compact { display: block; height: 40px; }
  .rubric .table-wrap { overflow: visible; }
  .rubric table.table, .rubric .table thead, .rubric .table tbody, .rubric .table tr, .rubric .table td { display: block; width: 100%; }
  .rubric .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rubric .table td { border: 2px solid var(--ucs-line); border-radius: 8px; margin-bottom: var(--ucs-space-2); padding: 10px 12px; }
  .rubric .table td:has(input:checked) { border-color: var(--ucs-navy); background: var(--ucs-bg-soft); }
  .rubric .rubric-level .visually-hidden { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; font-weight: 600; color: var(--ucs-navy); }
}

/* ---------- Lesson editor (TipTap, WU-05) ---------- */
.editor { border: 2px solid var(--ucs-line-strong); border-radius: 8px; background: var(--color-surface); }
.editor:focus-within { border-color: var(--ucs-navy); outline: var(--ucs-focus-width) solid var(--ucs-focus); outline-offset: 2px; }
.editor__toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--ucs-line); background: var(--ucs-bg-soft); border-radius: 8px 8px 0 0; }
.editor__btn { min-height: 36px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: var(--ucs-fs-sm); color: var(--ucs-navy); cursor: pointer; }
.editor__btn:hover { background: var(--color-surface); border-color: var(--ucs-line-strong); }
.editor__btn[aria-pressed="true"] { background: var(--ucs-navy); color: #fff; }
.editor__surface { padding: 12px 14px; min-height: 320px; }
.editor__content:focus { outline: none; }
.editor__content > * + * { margin-top: 0.75em; }
.editor__content h2 { font-size: var(--ucs-fs-xl); }
.editor__content h3 { font-size: var(--ucs-fs-lg); }
.editor__content pre { background: #0f2747; color: #e8eef8; padding: 12px; border-radius: 8px; overflow-x: auto; font-family: var(--ucs-font-mono); font-size: var(--ucs-fs-sm); }
.editor__content blockquote { border-left: 4px solid var(--ucs-line-strong); margin: 0; padding-left: 12px; color: var(--color-text-soft); }
.editor__content ul, .editor__content ol { padding-left: 1.4em; }
textarea[data-editor] { font-family: var(--ucs-font-mono); font-size: var(--ucs-fs-sm); min-height: 320px; }

/* ---------- Authoring ---------- */
.curriculum-editor .section-block { border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); background: var(--color-surface); margin-bottom: var(--ucs-space-3); }
.curriculum-editor .section-block > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ucs-space-2); padding: 10px 14px; background: var(--ucs-bg-soft); border-radius: var(--ucs-radius-sm) var(--ucs-radius-sm) 0 0; }
.curriculum-editor .section-block > header h2 { margin: 0; margin-right: auto; font-size: var(--ucs-fs-lg); }
.curriculum-editor ol { list-style: none; margin: 0; padding: 0; }
.curriculum-editor li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ucs-space-2); padding: 8px 14px; border-top: 1px solid var(--ucs-line); }
.curriculum-editor li .lesson-title { margin-right: auto; }
.inline-form { display: inline; }
.inline-form button { min-height: 36px; }
.status-pill { text-transform: capitalize; }
.callout { padding: var(--ucs-space-3); border-radius: 8px; border-left: 6px solid var(--ucs-info); background: #eff6ff; margin: var(--ucs-space-3) 0; }
.callout--warning { border-color: var(--ucs-warning); background: #fffbeb; }
/* Readability measure for long-form lesson prose, consistent with the platform's own WCAG 1.4.8
   guidance (max ~80 characters per line); tables/figures are exempt via their own max-width: 100%. */
.lesson-body > p, .lesson-body > ul, .lesson-body > ol, .lesson-body > blockquote { max-width: 80ch; }
.lesson-body h2 { font-size: var(--ucs-fs-xl); margin-top: var(--ucs-space-4); }
.lesson-body h3 { font-size: var(--ucs-fs-lg); }
.lesson-body img { max-width: 100%; height: auto; }
.lesson-body table { border-collapse: collapse; width: 100%; }
.lesson-body th, .lesson-body td { border: 1px solid var(--ucs-line-strong); padding: 6px 10px; text-align: left; }
.lesson-body pre { background: #0f2747; color: #e8eef8; padding: var(--ucs-space-3); border-radius: 8px; overflow-x: auto; font-family: var(--ucs-font-mono); font-size: var(--ucs-fs-sm); }

/* WU-49: Intermediate/Advanced render as one continuous full-page article (unlike Beginner's
   slide player), so the audit found them reading as dense reference documents. The selector
   below is scoped to the full-page lesson body only (a direct child of .lesson-content) -- it
   does NOT match `.lesson-body.slide__content`, which is nested inside .slide-player__panels
   .slide, so Beginner's slide canvas is untouched. This is typography/spacing only: no
   instructional content, heading text or section order changes. */
.lesson-content > .lesson-body { max-width: 72ch; }
.lesson-content > .lesson-body > p, .lesson-content > .lesson-body > ul, .lesson-content > .lesson-body > ol { line-height: 1.7; margin-bottom: var(--ucs-space-4); }
.lesson-content > .lesson-body > h2 { margin-top: var(--ucs-space-5); padding-top: var(--ucs-space-4); border-top: 1px solid var(--ucs-line); }
.lesson-content > .lesson-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lesson-content > .lesson-body > h3 { margin-top: var(--ucs-space-4); color: var(--ucs-accent-deep); font-size: var(--ucs-fs-md); text-transform: uppercase; letter-spacing: 0.03em; }
.lesson-content > .lesson-body > table, .lesson-content > .lesson-body > pre, .lesson-content > .lesson-body > figure { margin: var(--ucs-space-4) 0; }

/* ---------- Assessments (WU-07) ---------- */
.timer { font-family: var(--ucs-font-heading); font-weight: 700; color: var(--ucs-navy); padding: 8px 14px; border: 2px solid var(--ucs-navy); border-radius: var(--ucs-radius-pill); display: inline-block; }
.question { margin-bottom: var(--ucs-space-4); }
.question legend, .question .question__stem { font-weight: 600; }
.question__meta { color: var(--color-text-soft); font-size: var(--ucs-fs-sm); }
.question .lesson-body p { margin-bottom: var(--ucs-space-2); }
.result-row { display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); align-items: center; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ucs-space-2); align-items: center; margin-bottom: var(--ucs-space-2); }
@media (max-width: 480px) { .pair-row { grid-template-columns: 1fr; } }
.order-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--ucs-space-2); align-items: center; margin-bottom: var(--ucs-space-2); }
.mark { font-weight: 700; }
.mark--correct { color: var(--ucs-success); }
.mark--incorrect { color: var(--ucs-danger); }
.mark--pending { color: var(--ucs-warning); }
/* Keep the question legend inside the card (legend stays a real <legend> for screen readers) */
.question legend { float: left; width: 100%; margin: 0 0 var(--ucs-space-2); padding: 0; }
.question > *:not(legend) { clear: both; }

/* Description lists (credential details) */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ucs-space-1) var(--ucs-space-3); margin: 0 0 var(--ucs-space-3); }
.dl dt { font-weight: 600; color: var(--ucs-color-text); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .dl { grid-template-columns: 1fr; } .dl dd { margin-bottom: var(--ucs-space-2); } }
.hint, .error-summary a, .link-list a { overflow-wrap: anywhere; }

/* SCORM player frame */
.scorm-frame { width: 100%; height: min(70vh, 640px); min-height: 320px; border: 1px solid var(--ucs-color-border, #c9d3e3); border-radius: var(--ucs-radius-md, 12px); background: #fff; }

/* Utility classes replacing inline style attributes (CSP style-src 'self') */
.h-sm { font-size: var(--ucs-fs-lg); }
.m-0 { margin: 0; }
.w-full { width: 100%; }
.w-5r { width: 5rem; }
.mw-640 { max-width: 640px; } .mw-560 { max-width: 560px; } .mw-360 { max-width: 360px; } .mw-320 { max-width: 320px; } .mw-240 { max-width: 240px; }
.mw-48r { max-width: 48rem; } .mw-40r { max-width: 40rem; } .mw-6r { max-width: 6rem; }
.mt-3 { margin-top: var(--ucs-space-3); } .mt-4 { margin-top: var(--ucs-space-4); } .mb-4 { margin-bottom: var(--ucs-space-4); }
.pre-wrap { white-space: pre-wrap; }
.p-14 { padding: 14px; }
.btn-auto { min-height: 36px; width: auto; }
.indent-1 { padding-left: calc(var(--ucs-space-3) * 2); } .indent-2 { padding-left: calc(var(--ucs-space-3) * 3); } .indent-3 { padding-left: calc(var(--ucs-space-3) * 4); } .indent-4 { padding-left: calc(var(--ucs-space-3) * 5); }
.price--tight { margin: .25rem 0; } .price--xl { font-size: var(--ucs-fs-lg); }
.lesson-row { display: flex; gap: 10px; padding: 10px 14px 10px 28px; font-size: var(--ucs-fs-sm); }
.mt-1 { margin-top: 6px; } .mw-180 { max-width: 180px; } .indent-0 { padding-left: var(--ucs-space-3); }

/* ---------- Lesson formative knowledge check (WU-34 Phase C) ---------- */
.lesson-quiz { margin-top: var(--ucs-space-4); }
.lesson-quiz__item { border: 0; border-top: 1px solid var(--ucs-line); padding: var(--ucs-space-3) 0 0; margin: var(--ucs-space-3) 0 0; }
.lesson-quiz__item:first-of-type { border-top: 0; margin-top: var(--ucs-space-2); }
.lesson-quiz__item legend { font-weight: 700; padding: 0; margin-bottom: var(--ucs-space-2); }
.lesson-quiz__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--ucs-space-2); }
.lesson-quiz__option { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.lesson-quiz__feedback { padding: var(--ucs-space-2) var(--ucs-space-3); border-radius: var(--ucs-radius-sm); border-left: 6px solid var(--ucs-info); background: var(--color-surface); margin-top: var(--ucs-space-2); }
.lesson-quiz__feedback--correct { border-color: var(--ucs-success); }
.lesson-quiz__feedback--incorrect { border-color: var(--ucs-danger); }
.lesson-quiz__feedback--warning { border-color: var(--ucs-warning); }

/* ---------- WU-38 pilot: image gallery + code reveal + practical exercise ---------- */
.lesson-practical { border-left: 4px solid var(--ucs-accent, var(--ucs-info)); }
.image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ucs-space-4); margin: var(--ucs-space-3) 0; }
@media (max-width: 400px) {
  /* WU-41: a 220px grid-track floor doesn't fit a ~236-320px content column (confirmed overflow
     via automated 320px-reflow testing) -- collapse to a single column instead of trying to
     honor that minimum. */
  .image-gallery { grid-template-columns: 1fr; }
}
.image-card { border: 1px solid var(--ucs-line); border-radius: var(--ucs-radius-sm); padding: var(--ucs-space-3); background: var(--color-surface); }
.image-card img, .image-card svg { display: block; max-width: 100%; height: auto; margin-bottom: var(--ucs-space-2); background: #fff; border: 1px solid var(--ucs-line); }
.image-card h3 { margin: 0 0 var(--ucs-space-2); font-size: var(--ucs-fs-md); }
.image-card--pass { border-left: 4px solid var(--ucs-success); }
.image-card--fail { border-left: 4px solid var(--ucs-danger); }
.code-reveal { margin-top: var(--ucs-space-2); }
.code-reveal summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.code-reveal pre { background: var(--ucs-bg-soft); color: var(--ucs-text); padding: var(--ucs-space-2); border-radius: var(--ucs-radius-sm); overflow-x: visible; white-space: pre-wrap; word-break: break-word; font-size: var(--ucs-fs-sm); margin-top: var(--ucs-space-2); }
.remediation-checklist li { margin-bottom: var(--ucs-space-1); }

/* ---------- WU-39/40: slide-based lesson player ---------- */
.slide-player { max-width: 760px; margin: 0 auto; }
.slide-player__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ucs-space-2); margin-bottom: var(--ucs-space-2); }
.slide-player__status { font-weight: 600; color: var(--ucs-text-soft); }
.slide-player__references-link { white-space: nowrap; }
.slide-player__progress { width: 100%; height: 8px; margin-bottom: var(--ucs-space-4); accent-color: var(--ucs-accent, var(--ucs-info)); }
/* WU-46: slide content height varies a lot (measured 247-943px across one lesson), so the
   Previous/Next buttons visibly jump up and down as a learner steps through a lesson. A min-height
   floor on the panels wrapper (only the current slide is ever visible, via the `hidden` attribute,
   so this is effectively "the canvas", not each individual slide) steadies the canvas for shorter
   slides without clipping or constraining taller ones, which simply grow past the floor as before. */
/* WU-49: WU-46's 420px/320px minimums kept every slide the same tall canvas regardless of
   content, which left large blank gaps below short slides before reaching the Previous/Next
   controls. A much smaller floor still keeps single-line/title-only slides from feeling
   collapsed, while letting slides with real content (most of them, per WU-47's measured
   247-934px range) size to their own content as before. */
.slide-player__panels { min-height: 160px; }
@media (max-width: 480px) { .slide-player__panels { min-height: 120px; } }
.slide-player__panels .slide { padding: var(--ucs-space-2) 0; overflow-wrap: break-word; word-break: break-word; }
.slide-player__panels .slide h2 { margin-top: 0; }
.slide-player__panels .slide table { width: 100%; }
.slide-player__panels .slide td, .slide-player__panels .slide th { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 480px) {
  /* WU-41: a multi-column table reads as unreadably narrow, hyphenated columns below ~480px even
     once it no longer overflows -- stack it into one column of labeled blocks instead, the
     standard responsive-table pattern. The first cell of each row (a self-sufficient label, like
     a category name or a day of the week) still reads correctly on its own; any other cell that
     needs its column header to make sense carries a `data-label` attribute (WU-41 content update)
     whose value is injected visibly before it, so no information that `thead` previously carried
     is lost by hiding it. */
  .slide-player__panels .slide table, .slide-player__panels .slide tbody,
  .slide-player__panels .slide tr, .slide-player__panels .slide td, .slide-player__panels .slide th {
    display: block; width: auto;
  }
  .slide-player__panels .slide thead { display: none; }
  .slide-player__panels .slide tr { border-top: 2px solid var(--ucs-line-strong); padding-top: var(--ucs-space-2); margin-top: var(--ucs-space-2); }
  .slide-player__panels .slide tr:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .slide-player__panels .slide td, .slide-player__panels .slide th { padding: 4px 0; border: 0; }
  .slide-player__panels .slide td:first-child { font-weight: 700; }
  .slide-player__panels .slide td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
}
.slide-player__panels .slide h2 { overflow-wrap: break-word; word-break: break-word; }
.slide-player__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ucs-space-2); margin-top: var(--ucs-space-4); }
.slide-player__reading-alt { text-align: center; margin-top: var(--ucs-space-3); }
.slide-player[data-reading-mode] .slide-player__nav,
.slide-player[data-reading-mode] .slide-player__progress,
.slide-player[data-reading-mode] .slide-player__status { display: none; }
.slide-player[data-reading-mode] .slide-player__panels .slide { border-top: 1px solid var(--ucs-line); padding-top: var(--ucs-space-4); margin-top: var(--ucs-space-4); }
.slide-player[data-reading-mode] .slide-player__panels .slide:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 640px) {
  .slide-player__nav { flex-direction: column-reverse; align-items: stretch; }
  .slide-player__header { flex-wrap: wrap; }
}

/* Lesson-level table of contents (replaces the persistent full-course sidebar in slide mode).
   WU-46: the heading and list previously had no padding of their own, so "In this lesson" sat
   flush against the card's top and left edges -- adding container padding (with a matching
   negative margin on the list so its items still reach the card's full width for a larger
   click/tap target) restores normal breathing room without shrinking the clickable area. */
.slide-toc { margin-bottom: var(--ucs-space-3); padding: 14px 14px 0; }
.slide-toc h3 { margin-top: 0; }
.slide-toc ol { list-style: none; margin: 0 -14px; padding: 0; }
.slide-toc__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--ucs-radius-sm); padding: 6px 14px; font: inherit; color: inherit; cursor: pointer; }
.slide-toc__item:hover { background: var(--ucs-bg-soft); }
.slide-toc__item--current { background: var(--ucs-accent-soft); font-weight: 600; }
.slide-toc__check { flex: none; width: 16px; color: var(--ucs-success); font-weight: 700; }
.course-contents-toggle { margin-top: var(--ucs-space-3); border-top: 1px solid var(--ucs-line); padding-top: var(--ucs-space-2); }
.course-contents-toggle > summary { cursor: pointer; font-weight: 600; }