/* ============================================================================
   Student workspace — library cards, the course workspace, chapter documents
   and the lesson stage.

   Loaded after app.css and built only on its tokens, so light and dark themes,
   the Auraz red/white (black/red in dark) palette and the rectangular control
   corners all carry over. Logical properties throughout: Arabic mirrors with
   no per-component rules.
   ========================================================================== */

:root { color-scheme: light; --cw-radius: 10px; --cw-hero-ink: #F4F5F7; --cw-hero-sub: #C9CED6;
  --cw-hero-bg: #0B0E13; --cw-format-video: var(--az-red); --cw-format-practice: #1B7A54; --cw-format-quiz: #6A5BC2; --cw-format-reading: #38414E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --cw-format-practice: #5FD3A2; --cw-format-quiz: #A99CF0; --cw-format-reading: #B7BDC7; } }
:root[data-theme="dark"] { color-scheme: dark; --cw-format-practice: #5FD3A2; --cw-format-quiz: #A99CF0; --cw-format-reading: #B7BDC7; }

/* Workspace routes get a wider canvas than reading pages. */
body[data-route="library"] main, body[data-route="study"] main, body[data-route="lesson"] main { max-width: 1280px; }

/* ── Theme switch, beside the language picker ────────────────────────────── */
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; color: var(--sub); background: var(--card); border: 1px solid var(--line); }
.theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .theme-icon-moon { fill: currentColor; stroke: none; }
.theme-toggle[data-theme="dark"] .theme-icon-moon, .theme-toggle:not([data-theme="dark"]) .theme-icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent-ring); }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.chip { min-height: 34px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--sub);
  background: var(--card); border: 1px solid var(--line); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cw-eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cw-empty { padding: 28px; text-align: center; color: var(--muted); background: var(--bg-tint); border: 1px dashed var(--line); border-radius: var(--cw-radius); }
.cw-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cw-checklist li { position: relative; padding-inline-start: 28px; line-height: 1.5; }
.cw-checklist li::before { content: ''; position: absolute; inset-inline-start: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 4px; background: var(--accent-tint); }
.cw-checklist li::after { content: ''; position: absolute; inset-inline-start: 6px; top: 6px; width: 5px; height: 9px;
  border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cw-state { font-size: 11.5px; font-weight: 700; }
.cw-state-free { color: var(--accent-text); }
.cw-state-locked { color: var(--warn); }
.cw-state-included { color: var(--ok); }

/* ── My Library ──────────────────────────────────────────────────────────── */
.lib-head .sub { margin-bottom: 18px; }
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.lib-search { position: relative; flex: 1 1 280px; min-width: 0; }
.lib-search svg, .cw-search svg { position: absolute; inset-inline-start: 13px; top: 50%; width: 17px; height: 17px;
  transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.lib-search input, .cw-search input { padding-inline-start: 40px; }
.lib-chips, .cw-format-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-selects { display: flex; gap: 8px; }
.lib-selects select { width: auto; min-height: 40px; padding-block: 6px; font-size: 13px; }
.lib-count { margin: 4px 0 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.lib-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--cw-radius); overflow: hidden; box-shadow: var(--shadow-1);
  transition: box-shadow var(--mo), border-color var(--mo), transform var(--mo); }
.lib-card:hover { border-color: var(--accent-ring); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.lib-card:focus-within { border-color: var(--accent); }
.lib-card[data-state="archived"] { opacity: .78; }
.lib-cover { position: relative; aspect-ratio: 16 / 9; background: var(--soft); overflow: hidden; }
.lib-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lib-state { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; padding: 4px 9px; font-size: 11.5px; font-weight: 700;
  color: #fff; background: rgba(8, 9, 12, .78); border-radius: 4px; backdrop-filter: blur(4px); }
.lib-card[data-state="active"] .lib-state { background: var(--az-red); }
.lib-card[data-state="complete"] .lib-state { background: #1B7A54; }
/* The menu button and menu sit above the card-wide link. */
.lib-menu-button { position: absolute; z-index: 2; inset-block-start: 8px; inset-inline-end: 8px; width: 38px; min-height: 38px; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); border-color: transparent; color: #14181F; }
.lib-menu-button svg { width: 18px; height: 18px; fill: currentColor; }
.lib-menu-button:hover, .lib-menu-button[aria-expanded="true"] { background: #fff; border-color: var(--accent); }
.lib-menu { position: absolute; z-index: 3; inset-block-start: 50px; inset-inline-end: 8px; min-width: 190px; padding: 6px;
  display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-2); }
.lib-menu button { justify-content: flex-start; text-align: start; border: 0; background: none; font-weight: 600; font-size: 13.5px; }
.lib-menu button:hover, .lib-menu button:focus-visible { background: var(--soft); }
.lib-menu .lib-menu-danger { color: var(--danger); }
/* Remove from library: asked inside the card (D90). */
.lib-remove { position: relative; z-index: 2; margin-block-start: 10px; padding: 12px; border: 1px solid var(--danger); border-radius: 10px; background: var(--danger-bg); }
.lib-remove p { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.lib-remove .row { gap: 8px; flex-wrap: wrap; }
.lib-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.lib-eyebrow { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.lib-body h3 { margin: 0; font-size: 18px; line-height: 1.3; }
/* The whole card opens the course: the title's hit area is stretched over it. */
.lib-card-link { all: unset; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; }
.lib-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lib-card-link:focus-visible { outline: none; }
.lib-card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--cw-radius); }
.lib-desc { margin: 0; color: var(--sub); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.lib-facts b { color: var(--ink); }
.lib-progress { margin-top: auto; padding-top: 6px; }
.lib-progress .bar { height: 6px; }
.lib-progress-text { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }
.lib-progress-text b { color: var(--ink); }
.lib-continue { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center;
  text-align: start; margin-top: 4px; padding: 10px 12px; background: var(--accent-tint); border-color: transparent; }
.lib-continue:hover { background: var(--accent-tint); border-color: var(--accent); }
.lib-continue-label { grid-row: span 2; padding: 4px 9px; font-size: 12px; color: var(--accent-ink); background: var(--accent); border-radius: 4px; }
.lib-continue-title { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-continue-chapter { font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-archive-status:empty { display: none; }
.lib-empty { grid-column: 1 / -1; padding: 36px; text-align: center; border: 1px dashed var(--line); border-radius: var(--cw-radius); background: var(--bg-tint); }

/* ── Course workspace: hero ──────────────────────────────────────────────── */
.course-hero.cw-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; margin-bottom: 18px;
  border-radius: 14px; overflow: hidden; color: var(--cw-hero-ink);
  background: var(--cw-hero-bg); }
.cw-hero-copy { padding: 34px 36px 30px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cw-hero .course-eyebrow { margin: 0; color: #F08076; }
.cw-hero h1 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.cw-subtitle { margin: 0; max-width: 56ch; color: var(--cw-hero-sub); font-size: 15.5px; }
.cw-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.cw-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 13px; color: var(--cw-hero-sub); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; }
.cw-facts svg { width: 15px; height: 15px; fill: none; stroke: #F08076; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cw-facts b { color: #fff; }
.cw-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cw-hero-actions button:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.cw-hero-actions button:not(.primary):hover { background: rgba(255, 255, 255, .08); }
.cw-continue { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 58px; padding: 8px 22px 8px 9px; text-align: start; font-size: 15px; }
.cw-continue-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.cw-continue-icon svg { width: 18px; height: 18px; fill: currentColor; margin-inline-start: 2px; }
.cw-continue-text { display: grid; gap: 1px; min-width: 0; }
.cw-continue-label { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .88; }
.cw-continue-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; }
.cw-hero .course-next-title { margin: 2px 0 0; font-size: 13px; color: var(--cw-hero-sub); }
.cw-hero .course-next-title span { color: #F08076; font-weight: 700; margin-inline-end: 6px; }
.cw-hero .course-next-title b { color: #fff; font-weight: 600; }
.cw-hero .course-content-pending { color: var(--cw-hero-sub); }
.cw-hero-media { position: relative; min-height: 260px; }
.cw-hero .course-hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-hero-media::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--cw-hero-bg) 0%, rgba(11, 14, 19, .25) 38%, transparent 70%); }
:root[dir="rtl"] .cw-hero-media::before { background: linear-gradient(270deg, var(--cw-hero-bg) 0%, rgba(11, 14, 19, .25) 38%, transparent 70%); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.cw-tabs { display: flex; gap: 2px; margin: 8px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.cw-tabs [role="tab"] { flex: none; min-height: 46px; padding: 10px 16px; margin-bottom: -1px; color: var(--sub); background: none;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-size: 14.5px; }
.cw-tabs [role="tab"]:hover { color: var(--ink); background: var(--soft); }
.cw-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cw-tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.cw-tab-count { display: inline-block; min-width: 22px; margin-inline-start: 6px; padding: 1px 6px; font-size: 11.5px; text-align: center;
  color: var(--muted); background: var(--soft); border-radius: 10px; }
.cw-tabs [aria-selected="true"] .cw-tab-count { color: var(--accent-ink); background: var(--accent); }
.cw-panel-head { margin-bottom: 18px; }
.cw-panel-head h2 { margin: 0 0 4px; }
.cw-panel-head p { margin: 0; max-width: 70ch; }

/* ── Overview ────────────────────────────────────────────────────────────── */
.cw-overview { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.cw-block { margin-bottom: 30px; }
.cw-block h2 { margin: 0 0 12px; font-size: 19px; }
.cw-block > p { margin: 0; max-width: 68ch; color: var(--sub); font-size: 15.5px; }
.cw-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw-path-step { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-align: start;
  padding: 14px 16px; font-weight: 500; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cw-path-step:hover { border-color: var(--accent-ring); background: var(--card); }
.cw-path-num { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--accent-text); }
.cw-path-text { display: grid; gap: 3px; min-width: 0; }
.cw-path-text b { font-size: 15px; }
.cw-path-text > span:not(.cw-road-top) { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cw-path-meta { display: grid; justify-items: end; gap: 2px; font-size: 12px; color: var(--muted); }
.cw-overview-side { display: grid; gap: 14px; }
.cw-card { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius); }
.cw-card h2 { margin: 0 0 12px; font-size: 16px; }
.cw-card > .muted { margin: 10px 0 0; font-size: 13px; }
.cw-overview-side .course-progress-panel { margin: 0; }
.cw-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-stat-grid div { padding: 10px; background: var(--soft); border-radius: 6px; display: grid; gap: 2px; }
.cw-stat-grid b { font-size: 18px; }
.cw-stat-grid span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.cw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cw-card .card { margin-bottom: 10px; padding: 12px; box-shadow: none; }
.cw-card .card h3 { font-size: 14.5px; }
.cw-card .card .row.spread { align-items: flex-start; }
.cw-overview-side .course-record { margin: 0; font-size: 13px; }

/* ── Overview, made to be read at a glance (D92) ─────────────────────────── */
/* The road: one stop per chapter, joined by a line; the stop says in a
   picture whether it is done (tick), where you are (red), open (its number)
   or locked (a lock). */
.cw-road { gap: 4px; }
.cw-road-stop { position: relative; }
.cw-road-stop:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 31px; top: 50px; bottom: -16px; width: 2px; background: var(--line); }
.cw-road-stop.is-done:not(:last-child)::before { background: var(--ok); }
.cw-road .cw-path-step { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 14px; background: transparent; border-color: transparent; border-radius: 12px; }
.cw-road .cw-path-step:hover { background: var(--soft); border-color: transparent; }
.cw-road-stop.is-now .cw-path-step { background: var(--accent-tint); }
.cw-road-node { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; font-weight: 800;
  color: var(--sub); background: var(--card); border: 2px solid var(--line); border-radius: 50%; }
.cw-road-node svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-done .cw-road-node { color: #fff; background: var(--ok); border-color: var(--ok); }
.is-now .cw-road-node { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-tint); }
.is-locked .cw-road-node { color: var(--muted); background: var(--soft); border-style: dashed; }
.is-locked .cw-path-text b { color: var(--sub); }
.cw-road-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cw-road-here { padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--az-red-deep); border-radius: 999px; }
.cw-road .cw-path-text .cw-road-sum { -webkit-line-clamp: 1; }
.cw-road .cw-path-meta { display: flex; align-items: center; gap: 10px; }
.cw-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cw-mini-bar { display: inline-block; width: 56px; height: 5px; overflow: hidden; background: var(--soft); border-radius: 3px; }
.cw-mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.is-done .cw-mini-bar i { background: var(--ok); }

.cw-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.cw-block-head h2 { margin: 0; }
.cw-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-text); background: none; border: 0; }
.cw-link:hover { background: var(--accent-tint); }
.cw-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"] .cw-link svg, :root[dir="rtl"] .cw-goal-link svg { transform: scaleX(-1); }
/* What you will learn: one goal from each chapter, as cards with its number. */
.cw-learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cw-learn li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; font-size: 14px; line-height: 1.45;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius); }
.cw-learn-n { padding: 3px 7px; font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: var(--accent-text); background: var(--accent-tint); border-radius: 6px; }
/* How it works: pictures joined by arrows, not a paragraph. */
.cw-flow { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 14px 40px; margin: 0; padding: 0; list-style: none; }
.cw-flow li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.cw-flow li:not(:last-child)::after { content: ''; position: absolute; inset-inline-end: -26px; top: 50%; width: 9px; height: 9px;
  border: solid var(--accent-text); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
:root[dir="rtl"] .cw-flow li:not(:last-child)::after { transform: translateY(-50%) rotate(-135deg); }
.cw-flow-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent-text); background: var(--accent-tint); border-radius: 12px; }
.cw-flow-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cw-flow-small { max-width: 860px; }
.cw-flow-small li { font-size: 13.5px; font-weight: 500; }
.cw-flow-small .cw-flow-icon { width: 36px; height: 36px; border-radius: 10px; }
.cw-panel-head .cw-flow { margin-top: 12px; }
.cw-more { margin: 0 0 30px; }
.cw-more summary { display: flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--sub); cursor: pointer; }
.cw-more p { margin: 4px 0 0; max-width: 68ch; color: var(--sub); }
/* Access as a row of chapters: filled ones are open, dashed ones locked. */
.cw-access-row { display: flex; align-items: center; gap: 14px; }
.cw-access-row p { margin: 0; font-size: 14px; font-weight: 600; }
.cw-access-dots { flex: none; display: inline-flex; gap: 4px; }
.cw-access-dots i { width: 10px; height: 18px; background: var(--accent); border-radius: 3px; }
.cw-access-dots i.is-locked { background: transparent; border: 1.5px dashed var(--muted); }
.cw-access-card .cw-card-actions { margin-top: 14px; }
/* A card that would only say what is missing is not shown. */
.course-support:not(:has(#studyExtras > *)) { display: none; }
#courseAccessDetails:not(:empty) { margin-bottom: 24px; }

/* ── Chapters: rail + stage ──────────────────────────────────────────────── */
.cw-chapters { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 28px; align-items: start; margin: 0; }
.cw-rail { position: sticky; top: 84px; display: grid; gap: 12px; max-height: calc(100vh - 100px); overflow-y: auto; padding-inline-end: 4px; }
.cw-rail h2 { margin: 0; font-size: 16px; }
.cw-search { position: relative; }
.cw-search input { min-height: 42px; }
.cw-chapter-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.cw-chapter-pick { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: start;
  padding: 12px; font-weight: 500; background: transparent; border: 1px solid transparent; border-radius: 8px; }
.cw-chapter-pick:hover { background: var(--soft); border-color: transparent; }
.cw-chapter-pick[aria-current="true"] { background: var(--card); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
:root[dir="rtl"] .cw-chapter-pick[aria-current="true"] { box-shadow: inset -3px 0 0 var(--accent), var(--shadow-1); }
.cw-pick-num { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--muted); padding-top: 1px; }
.cw-chapter-pick[aria-current="true"] .cw-pick-num { color: var(--accent-text); }
.cw-pick-text { display: grid; gap: 5px; min-width: 0; }
.cw-pick-text b { font-size: 14px; line-height: 1.35; }
.cw-pick-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cw-pick-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; vertical-align: -2px; }
.cw-pick-bar { display: block; height: 4px; background: var(--soft); border-radius: 2px; overflow: hidden; }
.cw-pick-bar i { display: block; height: 100%; background: var(--accent); }
.cw-stage { min-width: 0; }
.cw-chapter.course-chapter { margin: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
.cw-chapter-head { padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius);
  border-top: 4px solid var(--accent); }
.cw-chapter-head h3 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; text-wrap: balance; }
.cw-chapter-summary { margin: 0 0 10px; max-width: 70ch; color: var(--sub); font-size: 15.5px; }
.cw-chapter-head .chapter-progress { margin: 0; }
.cw-chapter-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cw-chapter-progress .cw-mini-bar { width: 120px; height: 6px; }
.cw-chapter-head .free-preview-text { font-size: 11.5px; }
.cw-objectives { margin: 18px 0 0; padding: 18px 22px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--cw-radius); }
.cw-objectives h4 { margin: 0 0 12px; font-size: 14px; }
/* Under each goal: the lessons that teach it, and the handout page behind it. */
.cw-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; font-size: 13px; }
.cw-goal-label { font-size: 12px; color: var(--muted); }
.cw-goal-link, .cw-goal-page { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; font-size: 13px; font-weight: 600;
  color: var(--accent-text); background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.cw-goal-link:hover, .cw-goal-page:hover { border-color: var(--accent-ring); background: var(--accent-tint); }
.cw-goal-page[hidden] { display: none; }
.cw-goal-page svg { width: 15px; height: 15px; }
.cw-goal-page span + span { font-weight: 500; color: var(--sub); }
/* The lesson behind a goal is a quiet link with an arrow, not a red box (D92). */
.cw-goal-link { min-height: 30px; padding: 2px 0; gap: 4px; background: none; border: 0; border-radius: 0; }
.cw-goal-link:hover { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.cw-goal-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-goal-lesson { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; font-size: 13px; color: var(--sub); border: 1px dashed var(--line); border-radius: 6px; }
.cw-chapter-doc:not(:empty) { margin-top: 14px; }
.cw-chapter .course-format-group { margin: 22px 0 0; border: 0; }
.cw-chapter .course-format-group h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cw-chapter .format-symbol { width: 26px; height: 26px; border-radius: 6px; }
.format-symbol svg, .cw-unit-icon svg { width: 15px; height: 15px; fill: currentColor; }
.cw-format-reading svg, .cw-format-practice svg, .cw-format-quiz svg, .cw-doc-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cw-find-results h3 { margin: 0 0 14px; font-size: 16px; }
.cw-unit-list { display: grid; gap: 10px; }
.cw-unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cw-unit-list .cw-unit { margin: 0; }
.cw-unit[data-locked="true"] { background: var(--bg-tint); }
.cw-unit-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; }
.cw-unit-icon svg, .format-symbol svg { width: 18px; height: 18px; }
.cw-format-video { color: var(--cw-format-video); background: var(--accent-tint); }
.cw-format-motion { color: var(--accent-text); background: var(--accent-tint); }
.cw-format-reading { color: var(--cw-format-reading); background: var(--soft); }
.cw-format-practice { color: var(--cw-format-practice); background: var(--ok-bg); }
.cw-format-quiz { color: var(--cw-format-quiz); background: rgba(139, 123, 216, .14); }
.cw-unit-body h5 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.4; }
.cw-unit-summary { margin: 3px 0 0; font-size: 13.5px; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A lesson row's state is a picture (D92): a tick when done, a lock when
   closed, a red edge on the lesson to take next. Tags only for what is not
   the default. */
.cw-unit[data-state="done"] .cw-unit-icon { color: #fff; background: var(--ok); }
.cw-unit[data-state="locked"] .cw-unit-icon { color: var(--muted); background: var(--soft); }
.cw-unit[data-state="done"] .cw-unit-icon svg, .cw-unit[data-state="locked"] .cw-unit-icon svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cw-unit[data-state="next"] { border-color: var(--accent-ring); box-shadow: inset 3px 0 0 var(--accent); }
:root[dir="rtl"] .cw-unit[data-state="next"] { box-shadow: inset -3px 0 0 var(--accent); }
.cw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--sub); background: var(--soft); border-radius: 999px; }
.cw-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cw-tag-practice { color: var(--cw-format-practice); background: var(--ok-bg); }
.cw-tag-notes { color: var(--accent-text); background: var(--accent-tint); }
.cw-scenes { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cw-scenes-bar { display: inline-block; width: 72px; height: 4px; overflow: hidden; background: var(--soft); border-radius: 2px; }
.cw-scenes-bar i { display: block; height: 100%; background: var(--accent); }
.cw-scenes .unit-reading-progress { font-size: 12px; color: var(--muted); }
button.cw-quiet { color: var(--ink); background: transparent; border-color: var(--line); }
button.cw-quiet:hover { border-color: var(--accent-ring); background: var(--accent-tint); }
.unit-unavailable svg { width: 13px; height: 13px; margin-inline-end: 4px; fill: none; stroke: currentColor; stroke-width: 2.2; vertical-align: -2px; }
.cw-unit .unit-detail { margin-top: 4px; }
.cw-unit-action { text-align: end; }
.cw-unit-action .unit-unavailable { display: inline-block; max-width: 150px; text-align: end; }

/* ── Videos ──────────────────────────────────────────────────────────────── */
.cw-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.cw-video { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius); overflow: hidden; }
.cw-video-thumb { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #2A2F38, #14181F); }
.cw-video-thumb.is-ready { background: radial-gradient(18rem 10rem at 85% 110%, rgba(199, 49, 46, .75), transparent 70%), linear-gradient(135deg, #1A1215, #0B0E13); }
.cw-video-chapter { position: absolute; inset-block-start: 10px; inset-inline-start: 14px; font-family: var(--font-display);
  font-size: 44px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .12); }
.cw-video-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .14); }
.cw-video-thumb.is-ready .cw-video-play { background: var(--az-red); box-shadow: 0 8px 24px -8px rgba(199, 49, 46, .9); }
.cw-video-play svg { width: 22px; height: 22px; fill: currentColor; }
.cw-video-duration { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; padding: 2px 7px; font-size: 11.5px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, .65); border-radius: 4px; }
.cw-video-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.cw-video-body h4 { margin: 0; font-size: 15px; line-height: 1.35; }
.cw-video-body .unit-detail { margin: 0 0 8px; }
.cw-video-body button, .cw-video-body .unit-unavailable { margin-top: auto; align-self: flex-start; max-width: none; }

/* ── Documents ───────────────────────────────────────────────────────────── */
.cw-doc-statement { margin: 0 0 14px; font-size: 13px; }
.cw-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.cw-doc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--cw-radius); }
.cw-doc-compact { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 12px 14px; }
.cw-doc[data-doc-state="locked"], .cw-doc[data-doc-state="unavailable"] { background: var(--bg-tint); }
.cw-doc-icon { position: relative; display: grid; place-items: center; width: 44px; height: 54px; color: var(--accent-text);
  background: var(--accent-tint); border-radius: 6px; }
.cw-doc-icon svg { width: 24px; height: 24px; margin-bottom: 10px; }
.cw-doc-icon span { position: absolute; inset-block-end: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; }
.cw-doc-body h4 { margin: 0; font-size: 15px; line-height: 1.35; }
.cw-doc-body .unit-detail { margin-top: 3px; }
.cw-doc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cw-doc-compact .cw-doc-actions { grid-column: auto; }
.cw-reader { margin-top: 22px; padding: 22px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius); }
.cw-reader-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cw-reader-head h3 { margin: 0; font-size: 20px; }
.cw-reader-page { max-width: 76ch; margin-inline: auto; padding: 26px 30px; background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: var(--shadow-1); }
.cw-reader-page-label { margin: 0 0 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
.cw-reader-text { white-space: pre-wrap; font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.cw-reader-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 16px 0 6px; }
.cw-reader > .muted { text-align: center; font-size: 12.5px; margin: 6px 0 0; }

/* ── Exams ───────────────────────────────────────────────────────────────── */
#coursePanel-exams .course-assessments .card { padding: 18px 20px; border-radius: var(--cw-radius); border-inline-start: 4px solid var(--cw-format-quiz); }
#coursePanel-exams .course-assessments h2 { margin-top: 0; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cw-overview { grid-template-columns: 1fr; }
  .cw-chapters { grid-template-columns: 1fr; gap: 18px; }
  .cw-rail { position: static; max-height: none; overflow: visible; padding: 0; }
  .cw-chapter-list { grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
}
@media (max-width: 760px) {
  .course-hero.cw-hero { grid-template-columns: 1fr; }
  .cw-hero-media { order: -1; min-height: 170px; }
  .cw-hero-media::before { background: linear-gradient(0deg, var(--cw-hero-bg) 0%, transparent 60%); }
  :root[dir="rtl"] .cw-hero-media::before { background: linear-gradient(0deg, var(--cw-hero-bg) 0%, transparent 60%); }
  .cw-hero-copy { padding: 18px 20px 24px; }
  .cw-chapter-head { padding: 18px; }
  .cw-chapter-head h3 { font-size: 21px; }
  .cw-unit { grid-template-columns: auto minmax(0, 1fr); }
  .cw-unit-action { grid-column: 2; text-align: start; }
  .cw-unit-action .unit-unavailable { text-align: start; max-width: none; }
  .cw-doc-compact { grid-template-columns: auto minmax(0, 1fr); }
  .cw-doc-compact .cw-doc-actions { grid-column: 1 / -1; }
  .cw-reader { padding: 16px; }
  .cw-reader-page { padding: 18px; }
  .lib-selects { width: 100%; }
  .lib-selects select { flex: 1; }
}
@media (max-width: 600px) {
  .cw-flow { grid-template-columns: 1fr; gap: 22px; }
  .cw-flow li:not(:last-child)::after, :root[dir="rtl"] .cw-flow li:not(:last-child)::after { inset-inline-end: auto; inset-inline-start: 18px; top: auto; bottom: -15px; transform: rotate(135deg); }
  .cw-flow-small li:not(:last-child)::after { inset-inline-start: 14px; }
  .cw-road .cw-path-step { grid-template-columns: 36px minmax(0, 1fr); }
  .cw-road .cw-path-meta { grid-column: 2; }
  .cw-continue-text b { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-card, .lib-card:hover { transition: none; transform: none; }
}

/* Study support cards in the narrow side column: text first, action below. */
.cw-overview-side .course-support .card .row.spread { flex-direction: column; align-items: flex-start; }
.cw-overview-side .course-support .card .grow { width: 100%; }

/* ── Lesson player ───────────────────────────────────────────────────────── */
.lp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.lp-top .grow { flex: 1; }
.lp-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.lp-count { font-weight: 700; color: var(--sub); }
.lp-top .lesson-navigation { display: flex; gap: 8px; flex-wrap: nowrap; }
.lp-head h1 { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; text-wrap: balance; }
.lp-status { margin: 0 0 12px; padding: 10px 14px; font-size: 13.5px; color: var(--sub); background: var(--soft); border-radius: 8px; }
.lp-status:empty { display: none; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.lp-objective { margin: 0 0 14px; padding: 12px 16px; font-size: 15px; color: var(--sub); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; }
.lp-objective b { margin-inline-end: 8px; color: var(--accent-text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* The stage (D86): a light canvas in both themes, as the owner asked. The
   picture is what a lesson is about, so it is drawn bright and large. Its
   colours are tokens shared by the scenes, the drawings and the player's
   answers (.lp-feedback), so all of the video reads as one light screen. */
.lp-stage, .lp-feedback {
  --st-bg: #F6F8FB; --st-dot: rgba(58, 71, 90, .1); --st-ink: #141922; --st-sub: #434D5F; --st-muted: #4E5768;
  --st-card: #FFFFFF; --st-line: #DCE2EA; --st-soft: #EDF1F6; --st-shadow: 0 14px 30px -18px rgba(20, 25, 34, .42);
  --st-accent: #C7312E; --st-accent-ink: #A22323; --st-accent-tint: #FDEDEB; --st-accent-line: #EFB1AB;
  --st-code-bg: #161B24; --st-code-ink: #E9EDF3;
}
.lp-stage { position: relative; isolation: isolate; min-height: 430px; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  color: var(--st-ink); border-radius: 12px 12px 0 0;
  background: radial-gradient(var(--st-dot) 1.2px, transparent 1.5px) 0 0 / 22px 22px, var(--st-bg); }
/* Two soft lights drift slowly behind the scene. */
.lp-stage::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(36% 40% at 16% 20%, rgba(226, 87, 78, .14), transparent 70%),
              radial-gradient(40% 44% at 86% 80%, rgba(79, 163, 218, .16), transparent 70%);
  animation: st-drift 24s ease-in-out infinite alternate; }
@keyframes st-drift { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 2%, 0) rotate(5deg); } }
.lp-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lp-scene-host { display: grid; align-content: center; padding: 26px clamp(18px, 4vw, 48px) 14px; min-width: 0; }
.lp-scene { display: grid; gap: 20px; justify-items: center; text-align: center; }
.lp-scene.concept-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.lp-scene-count { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--st-accent-ink); }
.lp-scene h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; color: var(--st-ink); text-wrap: balance; }
.lp-visual { width: 100%; display: grid; justify-items: center; }
/* Captions as a video gives them: the sentence being spoken, on a dark band. */
.lp-caption { justify-self: center; max-width: min(90%, 780px); margin: 0 0 16px; padding: 8px 18px; background: rgba(16, 19, 26, .86); border-radius: 8px; }
.lp-caption:empty { display: none; }
/* The whole narration, kept for screen readers, in the band's own colours. */
#lpCaption .sr-only { color: #fff; }
.lp-caption .concept-explanation { margin: 0; font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.5; color: #fff; text-align: center; text-wrap: balance; }
.lp-caption.is-off { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #14181F; border-radius: 0 0 12px 12px; color: #EEF0F3; }
.lp-icon-button { width: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; color: #EEF0F3; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.lp-icon-button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.lp-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-play { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding-inline: 16px 18px; }
.lp-play svg { width: 16px; height: 16px; fill: currentColor; }
.lp-play .lp-pause-icon, .lp-play[aria-pressed="true"] .lp-play-icon { display: none; }
.lp-play[aria-pressed="true"] .lp-pause-icon { display: inline; }
.lp-timeline { flex: 1; display: flex; gap: 4px; min-width: 80px; }
.lp-mark { flex: 1; min-height: 32px; padding: 0; background: none; border: 0; display: grid; align-items: center; }
.lp-mark:hover { background: none; }
.lp-mark i { position: relative; display: block; height: 6px; overflow: hidden; background: rgba(255, 255, 255, .16); border-radius: 3px; }
.lp-mark i::after { content: ""; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--az-red-soft); }
.lp-mark.is-past i::after { transform: scaleX(1); background: rgba(255, 255, 255, .55); }
.lp-mark.is-current i::after { transform: scaleX(.18); }
.lp-mark.is-current.is-running i::after { animation: lp-pace var(--lp-pace, 7s) linear forwards; }
.lp-mark.is-withheld i { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 4px, transparent 4px 7px); }
.lp-mark:hover:not(:disabled) i { background: rgba(255, 255, 255, .3); }
.lp-mark:focus-visible { outline: 2px solid var(--az-red-soft); outline-offset: 1px; }
@keyframes lp-pace { from { transform: scaleX(.18); } to { transform: scaleX(1); } }
.lp-toggle { min-height: 34px; padding: 5px 11px; font-size: 12.5px; color: #C9CED6; background: transparent; border-color: rgba(255, 255, 255, .18); }
.lp-toggle:hover { background: rgba(255, 255, 255, .08); }
.lp-toggle[aria-pressed="true"] { color: #fff; border-color: var(--az-red-soft); background: rgba(199, 49, 46, .25); }
/* Above the player: the goal, and the choice of how to learn, side by side. */
.lp-intro { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 0 0 14px; }
.lp-intro .lp-objective { flex: 1 1 340px; margin: 0; }
.lp-modes { flex: 0 1 auto; display: grid; gap: 6px; align-content: center; margin: 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.lp-modes .lesson-mode-controls { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lp-modes .lesson-mode-controls button { min-height: 40px; padding: 6px 14px; font-size: 13.5px; }
.lp-modes-hint { margin: 0; max-width: 42ch; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Under the player: one quiet line of progress, not a second timeline. */
#readingJourney.lp-journey { display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; padding: 0; background: none; border-radius: 0; font-size: 13px; color: var(--muted); }
#readingJourney.lp-journey:empty { display: none; }
.lp-journey-bar { flex: 0 0 120px; height: 4px; overflow: hidden; background: var(--line); border-radius: 2px; }
.lp-journey-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.lp-note { margin: 0; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--sub); background: var(--soft); border-radius: 8px; }
.lp-about { margin: 22px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.lp-about summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--sub); }
.lp-about-body { display: grid; gap: 8px; padding: 2px 0 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.lp-about-body p { margin: 0; max-width: 72ch; }
.lp-about-body b { color: var(--sub); margin-inline-end: 6px; }
.lp-about .development-note { padding: 0; background: none; font-size: 13px; }

/* ── The question card ─────────────────────────────────────────────────────
   One question, one field, one button. The page glides here when the lesson
   asks, and the card pulses once so the eye lands on it. */
.lp-tasks:not(:empty) { margin: 18px 0 0; display: grid; gap: 12px; }
.lp-tasks .lp-q { margin: 0; padding: 20px 22px 18px; display: grid; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 90px; }
.lp-q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lp-q-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent-text); background: var(--accent-tint); border-radius: 999px; }
.lp-q-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-q[data-state="closed"] .lp-q-chip { color: var(--ok); background: var(--ok-bg); }
.lp-q-tries { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lp-q-dots { display: inline-flex; gap: 4px; }
.lp-q-dots i { width: 8px; height: 8px; background: var(--line); border-radius: 50%; }
.lp-q-dots i.is-left { background: var(--accent); }
.lp-q-prompt { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.lp-q[data-state="closed"] .lp-q-prompt { font-size: 15.5px; font-weight: 500; color: var(--sub); }
.lp-q-field label { margin: 0 0 6px; }
.lp-q-field small { font-weight: 500; color: var(--muted); }
.lp-q-input { display: flex; align-items: stretch; max-width: 420px; }
.lp-q .lp-q-input [data-answer] { flex: 1; min-width: 0; font-size: 17px; }
.lp-q .lp-q-input [data-answer]:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.lp-q-unit { display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: var(--sub); white-space: nowrap; background: var(--soft);
  border: 1px solid var(--line); border-inline-start: 0; border-start-end-radius: 6px; border-end-end-radius: 6px; }
.lp-q textarea[data-reason] { min-height: 66px; max-width: 620px; resize: vertical; }
.lp-q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 2px; }
.lp-q-actions .primary { min-height: 44px; padding-inline: 22px; }
.lp-q-hint { font-size: 13px; color: var(--muted); }
.lp-q-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sub); }
.lp-q-done { margin: 0; font-weight: 600; color: var(--ok); }
.lp-q-status { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.lp-q-status:empty { display: none; }
.lp-q-status.is-warn { color: var(--warn); }
.lp-link { display: inline; min-height: 0; padding: 4px 2px; font-size: inherit; font-weight: 600; color: var(--accent-text); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.lp-link:hover { background: none; color: var(--accent-text); }
.lp-q.is-called { animation: lp-called 1.4s var(--ease-brand) 1; }
@keyframes lp-called { 0% { box-shadow: 0 0 0 0 rgba(199, 49, 46, .5); } 35% { box-shadow: 0 0 0 8px rgba(199, 49, 46, .16); } 100% { box-shadow: 0 0 0 0 rgba(199, 49, 46, 0); } }
.lp-empty { padding: 28px; }

/* Side guide: scenes, transcript, course. */
.lp-side { position: sticky; top: 84px; display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 100px); background: var(--card); border: 1px solid var(--line); border-radius: var(--cw-radius); overflow: hidden; }
.lp-side-tabs { display: flex; border-bottom: 1px solid var(--line); }
.lp-side-tabs [role="tab"] { flex: 1; min-height: 44px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--sub); font-size: 13.5px; }
.lp-side-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.lp-side [role="tabpanel"] { overflow-y: auto; padding: 10px; }
.lp-scene-list { display: grid; gap: 4px; }
.lp-scene-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: start; padding: 9px 10px;
  font-weight: 500; font-size: 13.5px; background: none; border-color: transparent; }
.lp-scene-item:hover { background: var(--soft); border-color: transparent; }
.lp-scene-item[aria-current="step"] { background: var(--accent-tint); color: var(--accent-text); font-weight: 650; }
.lp-scene-num { display: grid; place-items: center; width: 26px; height: 26px; font-size: 12px; font-weight: 700; background: var(--soft); border-radius: 50%; }
.lp-scene-item[aria-current="step"] .lp-scene-num { background: var(--accent); color: var(--accent-ink); }
.lp-scene-lock { font-size: 11px; color: var(--warn); }
/* How closely to watch a scene (D91), in the scene list. */
.lp-scene-focus { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lp-scene-focus svg { width: 13px; height: 13px; flex: none; }
.lp-scene-focus.is-key { background: var(--accent-tint); color: var(--accent-text); }
.lp-scene-focus.is-light { color: var(--muted); font-weight: 600; }
.lp-transcript { display: grid; gap: 4px; }
.lp-cue { margin: 0; padding: 10px; border-radius: 6px; font-size: 13.5px; line-height: 1.55; color: var(--sub); }
.lp-cue.is-current { background: var(--accent-tint); color: var(--ink); }
.lp-cue[data-withheld="true"] { color: var(--muted); font-style: italic; }
.lp-cue-jump { display: block; min-height: 0; padding: 0; margin-bottom: 3px; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--ink); text-align: start; }
.lp-cue-jump:hover { background: none; color: var(--accent-text); }
.lp-side .lesson-outline { border: 0; padding: 0; background: none; }
.lp-side .lesson-outline summary { font-size: 13.5px; }

/* ── Motion scenes ───────────────────────────────────────────────────────── */
/* Drawn large on the light stage (D86). Every colour is a stage token. */
.mo-visual { width: 100%; max-width: 900px; display: grid; gap: 14px; justify-items: center; }
.mo-caption { margin: 0; font-size: 14px; color: var(--st-muted); }
.mo-visual > * { animation: mo-fade .45s var(--ease-brand) both; }
.mo-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.mo-block { display: grid; place-items: center; gap: 2px; width: 96px; height: 96px; border-radius: 14px; font-size: 30px;
  animation: mo-drop .55s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 140ms)); }
.mo-block small { font-size: 12px; font-weight: 600; opacity: .8; }
.mo-tone-a { color: var(--st-ink); background: var(--st-card); border: 2px solid var(--st-line); box-shadow: var(--st-shadow); }
.mo-tone-b { color: #fff; background: var(--az-red); box-shadow: 0 12px 26px -12px rgba(199, 49, 46, .75); }
.mo-calc { display: grid; gap: 12px; justify-items: center; }
.mo-calc-line { font-family: var(--font-mono); font-size: clamp(19px, 2.2vw, 28px); font-weight: 600; color: var(--st-ink); padding: 4px 14px; border-radius: 8px; }
.mo-calc-line.is-emphasis { position: relative; color: var(--st-accent-ink); font-weight: 800; }
.mo-calc-line.is-emphasis::after { content: ""; position: absolute; inset-inline: 10px; bottom: -2px; height: 4px; border-radius: 2px; background: var(--st-accent);
  transform-origin: left; animation: mo-sweep .6s .45s var(--ease-brand) both; }
/* Program text in an editor window, dark as the editor students use; left to
   right with its indentation kept. */
.mo-editor { width: min(100%, 820px); overflow: hidden; text-align: left; background: var(--st-code-bg); border-radius: 12px;
  box-shadow: 0 24px 44px -24px rgba(16, 19, 26, .75), 0 0 0 1px rgba(16, 19, 26, .1); }
.mo-editor-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #212834; }
.mo-editor-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF6159; }
.mo-editor-bar i:nth-child(2) { background: #FFBD2E; }
.mo-editor-bar i:nth-child(3) { background: #28C941; }
.mo-editor-bar span { margin-inline-start: 10px; font: 600 12px/1 var(--font-mono); letter-spacing: .04em; color: #A3ACBB; }
.mo-code { margin: 0; max-height: 100%; overflow: auto; padding: 14px 18px 18px 8px; text-align: left;
  font: 500 clamp(15px, 1.55vw, 18px)/1.65 var(--font-mono); color: var(--st-code-ink); white-space: pre; background: none; border: 0; }
.mo-code code { font: inherit; }
.mo-code-line { display: block; padding-inline-end: 10px; border-radius: 3px;
  animation: mo-rise .45s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 160ms)); }
.mo-code-no { display: inline-block; width: 2.4em; margin-inline-end: 14px; text-align: right; color: #6F7888; user-select: none; }
.mo-code-line.is-highlight { background: rgba(226, 87, 78, .26); box-shadow: inset 3px 0 0 #E2574E; color: #fff; }
.mo-note { max-width: 680px; padding: 22px 30px; text-align: center; background: var(--st-card); border: 1px solid var(--st-line); border-top: 5px solid var(--st-accent);
  border-radius: 12px; box-shadow: var(--st-shadow); animation: mo-pop .55s var(--ease-brand) both; }
.mo-note-label { display: inline-block; margin-bottom: 10px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-accent-ink); background: var(--st-accent-tint); border-radius: 999px; }
.mo-note p { margin: 0; font-family: var(--font-mono); font-size: clamp(19px, 2.3vw, 26px); font-weight: 600; color: var(--st-ink); }
.mo-compare { display: flex; align-items: flex-end; justify-content: center; gap: 26px; }
.mo-compare-side { display: grid; justify-items: center; gap: 6px; width: 200px; animation: mo-rise .5s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * 260ms); }
.mo-compare-bar { display: flex; align-items: flex-end; width: 84px; height: 190px; background: var(--st-soft); border-radius: 8px 8px 0 0; }
.mo-compare-bar i { display: block; width: 100%; background: var(--az-red); border-radius: 8px 8px 0 0; transform-origin: bottom; animation: mo-grow-y .8s var(--ease-brand) both; animation-delay: calc(.25s + var(--mo-i, 0) * 260ms); }
.mo-compare-side + .mo-compare-vs + .mo-compare-side .mo-compare-bar i { background: #5B82C0; }
.mo-compare-side b { font-size: 30px; color: var(--st-ink); }
.mo-compare-side span { font-size: 14px; color: var(--st-sub); }
.mo-compare-vs { align-self: center; font-size: 14px; font-weight: 800; color: var(--st-muted); }
.mo-bars { width: 100%; display: grid; gap: 12px; }
.mo-bar-row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 14px; align-items: center; text-align: start;
  animation: mo-rise .45s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 180ms)); }
.mo-bar-label { font-size: 15px; color: var(--st-sub); }
.mo-bar-track { height: 22px; background: var(--st-soft); border-radius: 6px; overflow: hidden; }
.mo-bar-track i { display: block; height: 100%; background: #7F8EA3; transform-origin: left; animation: mo-grow-x .8s var(--ease-brand) both; animation-delay: calc(.2s + var(--mo-i, 0) * 180ms); }
.mo-bar-row.is-highlight .mo-bar-track i { background: var(--az-red); }
.mo-bar-row.is-highlight .mo-bar-label, .mo-bar-row b { color: var(--st-ink); }
.mo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.mo-steps li { position: relative; display: flex; gap: 12px; align-items: flex-start; max-width: 230px; padding: 12px 14px; text-align: start;
  background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow);
  animation: mo-rise .5s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 380ms)); }
.mo-steps li + li::before { content: "\2192"; position: absolute; inset-inline-start: -27px; top: 50%; margin-top: -12px; font-size: 18px; color: var(--st-accent); font-weight: 800; }
.mo-step-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; font-weight: 800; font-size: 14px; color: #fff; background: var(--az-red); border-radius: 50%; }
.mo-steps b { display: block; color: var(--st-ink); font-size: 16px; line-height: 1.35; }
.mo-steps .mo-step-detail { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--st-sub); }
.mo-table-wrap { width: 100%; overflow-x: auto; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow); }
/* Separate borders, so a row still to come hides its lines with it. */
.mo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; color: var(--st-ink); }
.mo-table th { padding: 10px 14px; text-align: start; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--st-sub); background: var(--st-soft); border-bottom: 1px solid var(--st-line); }
.mo-table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--st-line); }
.mo-table tbody tr:last-child td { border-bottom: 0; }
.mo-table tbody tr { animation: mo-rise .45s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 220ms)); }
.mo-table tr.is-highlight td { background: var(--st-accent-tint); color: var(--st-accent-ink); font-weight: 700; }
.mo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: start; width: min(100%, 720px); }
.mo-points li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.4; color: var(--st-ink);
  background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow);
  animation: mo-rise .5s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-step, 420ms)); }
.mo-point-no { flex: none; display: grid; place-items: center; width: 32px; height: 32px; font-size: 14px; font-weight: 800; color: var(--st-accent-ink); background: var(--st-accent-tint); border-radius: 50%; }
.mo-source { margin: 0; max-width: 680px; padding: 18px 22px; text-align: start; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow); animation: mo-fade .6s var(--ease-brand) both; }
.mo-source blockquote { margin: 0; padding-block: 2px; padding-inline: 18px 0; font-size: 18px; line-height: 1.6; color: var(--st-ink); border-inline-start: 4px solid var(--st-accent); }
.mo-source figcaption { margin-top: 10px; padding-inline-start: 22px; font-size: 13px; color: var(--st-muted); }
.mo-unsupported { padding: 16px; font-size: 14px; color: #8F5205; background: #FFF6E5; border: 1px dashed #D9A441; border-radius: 8px; }
/* Built up with the lesson (D86, motion-scenes.js): a part waits unseen until
   the narration reaches it, rises in, and the part being explained stands
   out. Without a clock (data-step unset) every part shows, as before. */
.mo-seq[data-step] > [data-s] { animation: none; transition: opacity .5s var(--ease-brand), transform .5s var(--ease-brand), box-shadow .3s, border-color .3s, background-color .3s; }
.mo-seq[data-step] > [data-s]:not(.is-on) { opacity: 0; transform: translateY(14px); }
.mo-seq.mo-instant > [data-s] { transition: none !important; }
.mo-points.mo-seq[data-step]:not([data-whole]) > .is-on:not(.is-now), .mo-steps.mo-seq[data-step]:not([data-whole]) > .is-on:not(.is-now) { opacity: .62; }
.mo-points:not([data-whole]) > .is-now, .mo-steps:not([data-whole]) > .is-now { border-color: var(--st-accent-line); box-shadow: 0 0 0 3px var(--st-accent-tint), var(--st-shadow); transform: translateY(-2px); }
.mo-points:not([data-whole]) > .is-now .mo-point-no { color: #fff; background: var(--az-red); }
.mo-calc.mo-seq[data-step]:not([data-whole]) > .is-now:not(.is-emphasis) { background: var(--st-accent-tint); }
tbody.mo-seq:not([data-whole]) > tr.is-now td { background: var(--st-accent-tint); }

/* Real-life scenes (D78): a drawn situation above, and under it the step in
   words beside the line of code that does the same thing. Steps follow the
   lesson's clock (AcademyMotion.progress); with no clock the last step shows. */
.mo-kind-reallife { max-width: 860px; }
.mo-life { width: 100%; display: grid; gap: 10px; justify-items: stretch; }
.mo-life-title { margin: 0; justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-accent-ink); }
.mo-life-pic { display: block; width: 100%; height: auto; max-height: 360px; border-radius: 14px; box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); }
.mo-life-pic text { font-family: var(--font-body); }
.mo-life-strip { display: grid; min-height: 58px; }
.mo-life-row { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  padding: 12px 16px; text-align: start; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow); }
.mo-life-say { margin: 0; font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.45; color: var(--st-ink); }
.mo-life-code { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.mo-life-code code { padding: 6px 11px; font: 600 15px/1.3 var(--font-mono); color: var(--st-code-ink); background: var(--st-code-bg); border-radius: 6px; white-space: pre; }
.mo-life-state { padding: 6px 11px; font: 700 15px/1.3 var(--font-mono); color: var(--st-accent-ink); background: var(--st-accent-tint); border: 1px solid var(--st-accent-line); border-radius: 6px; white-space: nowrap; }
.mo-life-dots { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mo-life-dots li { width: 24px; height: 5px; border-radius: 3px; background: #B9C3D0; }
/* The states. Without a clock: the last step (anything that ends is gone). */
.mo-life:not([data-step]) [data-u] { opacity: 0; }
.mo-life [data-s], .mo-life [data-u] { transition: opacity .45s var(--ease-brand); }
.mo-life .mo-mv, .mo-life .mo-lv { transition: transform 1.1s var(--ease-brand), opacity .45s var(--ease-brand); }
.mo-life[data-step] [data-s]:not(.is-on) { opacity: 0; }
.mo-life[data-step] [data-u].is-gone { opacity: 0; }
.mo-life[data-step] .mo-mv:not(.is-on) { transform: translate(var(--fx, 0px), var(--fy, 0px)); }
.mo-life[data-step] .mo-lv.is-gone { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
/* A row that is not the current step is hidden from reading as well as sight. */
.mo-life .mo-life-row { transition: opacity .45s var(--ease-brand), visibility .45s; }
.mo-life:not([data-step]) .mo-life-row[data-u], .mo-life[data-step] .mo-life-row:not(.is-on), .mo-life[data-step] .mo-life-row.is-gone { visibility: hidden; }
.mo-life[data-step] .mo-life-dots li:not(.is-on) { background: #D7DEE7; }
.mo-life .mo-life-dots li { opacity: 1 !important; }
.mo-life .mo-life-dots li.is-on, .mo-life:not([data-step]) .mo-life-dots li { background: var(--st-accent); }
.mo-life .mo-pop.is-on { animation: mo-pop .4s var(--ease-brand) both; }
.mo-life-pic .mo-mono { font-family: var(--font-mono); }
/* A lap run: the trail goes round the track once while its step lasts. */
.mo-life .mo-trail { stroke-dasharray: 1160; stroke-dashoffset: 1160; transition: stroke-dashoffset 2.4s linear; }
.mo-life .is-on > .mo-trail, .mo-life:not([data-step]) .mo-trail { stroke-dashoffset: 0; }
/* Story scenes (D89): what the voice names, drawn, appearing as it is said.
   Clock-driven (data-clock), a thing not yet named is hidden, ready to come
   in from its side; a poster or a preview shows the finished picture. */
.mo-kind-story { max-width: 880px; }
.mo-story { width: 100%; display: grid; gap: 8px; }
.mo-story-pic { display: block; width: 100%; height: auto; max-height: 380px; border-radius: 14px; box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow); }
.mo-story-pic text { font-family: var(--font-body); }
.mo-story-pic .mo-mono { font-family: var(--font-mono); }
.mo-story .mo-act { transform-box: fill-box; transform-origin: center bottom; transition: opacity .5s var(--ease-brand), transform .75s var(--ease-brand); }
.mo-story[data-clock] .mo-act[data-cue]:not(.is-on) { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)); }
.mo-story .mo-move { transition: transform 1.2s var(--ease-brand); }
.mo-story:not([data-clock]) .mo-move, .mo-story .mo-move.is-on { transform: translate(var(--mx), var(--my)); }
.mo-story .mo-link .ln { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-brand); }
.mo-story .mo-link .hd, .mo-story .mo-link > g, .mo-story .mo-link .flow { transition: opacity .3s .6s; }
/* Hidden too, or the round cap leaves a dot where the arrow will start. */
.mo-story[data-clock] .mo-link[data-cue]:not(.is-on) .ln { stroke-dashoffset: 100; stroke-opacity: 0; }
.mo-story[data-clock] .mo-link[data-cue]:not(.is-on) .hd, .mo-story[data-clock] .mo-link[data-cue]:not(.is-on) > g,
.mo-story[data-clock] .mo-link[data-cue]:not(.is-on) .flow { opacity: 0; transition-delay: 0s; }
.mo-story .mo-link .flow { animation: mo-flow 1.1s linear infinite; }
@keyframes mo-flow { to { stroke-dashoffset: -24; } }
.mo-story[data-clock] .mo-act:not(.is-on) .mo-type { opacity: 0; }
.mo-story .mo-act.is-on .mo-type { animation: mo-type-in .3s both; animation-delay: calc(.55s + var(--i, 0) * .5s); }
/* The finished picture (a poster, a preview) shows its words at once. */
.mo-story:not([data-clock]) .mo-act.is-on .mo-type, .mo-story:not([data-clock]) .mo-act .mo-type { animation: none; }
@keyframes mo-type-in { from { opacity: 0; } to { opacity: 1; } }
.mo-story .mo-caret { animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
.mo-story .mo-spin { transform-box: fill-box; transform-origin: center; animation: mo-turn 1.6s linear infinite; }
.mo-story .mo-spin-r { animation-direction: reverse; animation-duration: 1.1s; }
.mo-story .mo-spin-slow { transform-box: fill-box; transform-origin: center; animation: mo-turn 6s linear infinite; }
.mo-story .mo-hand { transform-box: fill-box; transform-origin: left center; animation: mo-turn 8s linear infinite; }
.mo-story .mo-act.is-on .mo-print, .mo-story:not([data-clock]) .mo-print { animation: mo-print 1.4s var(--ease-brand) both .4s; }
@keyframes mo-print { from { transform: translateY(-16px); } to { transform: none; } }
/* A program running (D89): what is typed, then what it prints. */
.mo-console { width: min(100%, 820px); margin-top: 10px; overflow: hidden; text-align: left; background: #0D1117; border-radius: 12px;
  box-shadow: 0 18px 36px -24px rgba(16, 19, 26, .75), 0 0 0 1px rgba(16, 19, 26, .1); }
.mo-console-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font: 700 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8B949E; background: #161B22; }
.mo-console-run { width: 9px; height: 9px; border-radius: 50%; background: #3FB950; box-shadow: 0 0 0 3px rgba(63, 185, 80, .25); }
.mo-console-body { padding: 10px 16px 12px; font: 600 clamp(14px, 1.45vw, 17px)/1.6 var(--font-mono); white-space: pre; color: #E6EDF3; }
.mo-console-line.is-in { color: #7EE787; }
.mo-console-key { margin-inline-end: 8px; font-size: .9em; opacity: .8; }
.mo-console-line.is-now { background: rgba(126, 231, 135, .12); border-radius: 4px; }
/* A journey (D86): the road travelled draws itself in. */
.mo-life .mo-road { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease-brand); }
.mo-life .is-on > .mo-road, .mo-life .mo-road.is-drawn, .mo-life:not([data-step]) .mo-road { stroke-dashoffset: 0; }
/* A machine at work. */
.mo-life .mo-spin { transform-box: fill-box; transform-origin: center; animation: mo-turn 1.6s linear infinite; }
.mo-life .mo-spin-r { animation-direction: reverse; animation-duration: 1.1s; }
/* The inner loop walking a row of seats, one seat after another. */
.mo-life .is-on > .mo-seat-hl { animation: mo-pop .35s var(--ease-brand) both; animation-delay: calc(var(--mo-i, 0) * 260ms); }
@keyframes mo-turn { to { transform: rotate(360deg); } }
.mo-life.mo-instant *, .mo-life.mo-instant { transition: none !important; }
@media (max-width: 640px) {
  .mo-life-row { grid-template-columns: 1fr; }
  .mo-life-code { justify-content: flex-start; }
  .mo-life-say { font-size: 14.5px; }
}
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mo-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1060px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-side { position: static; max-height: 460px; }
}
@media (max-width: 640px) {
  .lp-stage { min-height: 340px; border-radius: 10px 10px 0 0; }
  .lp-scene-host { padding: 22px 16px 12px; }
  .lp-caption { max-width: 94%; margin-bottom: 12px; }
  .lp-caption .concept-explanation { font-size: 15px; }
  .lp-controls { flex-wrap: wrap; gap: 8px; }
  .lp-timeline { order: 5; flex-basis: 100%; }
  .lp-top .lesson-navigation { width: 100%; }
  .lp-top .lesson-navigation button { flex: 1; }
  .lp-crumb { max-width: 100%; }
  .mo-block { width: 64px; height: 64px; font-size: 21px; }
  .mo-compare-side { width: 130px; }
  .mo-compare-bar { height: 130px; width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-visual *, .mo-visual > *, .lp-mark i::after { animation: none !important; }
  .mo-life *, .mo-life { transition: none !important; }
  .lp-mark.is-current i::after { transform: scaleX(.5); }
}

/* Lesson top bar: the old bottom-of-page navigation margin no longer applies. */
.lp-top .lesson-navigation { margin: 0; }
#conceptNav.lp-scene-list { padding: 0; }
#conceptNav .lp-scene-item[aria-current=step] { border-color: transparent; }

/* Reflowed document text: paragraphs, not printed lines. */
.cw-reader-text { white-space: normal; }
.cw-reader-text p { margin: 0 0 12px; }

/* ── Course builds (admin) ───────────────────────────────────────────────── */
.build-panel { border-top: 4px solid var(--accent); }
.build-panel h3 { margin: 0; font-size: 18px; }
.build-panel > .muted { max-width: 80ch; }
.build-card { margin: 14px 0; padding: 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; }
.build-card h4 { margin: 0; font-size: 16px; }
.build-card .mono { font-size: 12px; overflow-wrap: anywhere; }
.build-steps { margin: 12px 0; padding-inline-start: 20px; display: grid; gap: 10px; }
.build-steps code { font-size: 12.5px; overflow-wrap: anywhere; }
.build-copy { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.build-copy code { flex: 1; min-width: 0; padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.build-card .notice ul { margin: 8px 0 0; padding-inline-start: 18px; }
.build-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.build-form h4 { margin: 0 0 4px; font-size: 16px; }
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.build-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.build-options { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin: 14px 0 6px; }
.build-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.build-inline input { width: 72px; min-height: 36px; padding: 6px 8px; }
@media (max-width: 700px) { .build-grid, .build-pair { grid-template-columns: 1fr; } .build-copy { flex-direction: column; } }

/* Where a scene comes from, under the diagram. */
.lp-scene-source { margin: 2px 0 0; font-size: 12px; color: var(--st-muted); }
.lp-scene-source b { color: var(--st-sub); font-weight: 650; }

/* Long paths and commands wrap rather than widening the page on a phone. */
.build-card code { overflow-wrap: anywhere; word-break: break-word; }

/* ── Course editor: review and scene forms ───────────────────────────────── */
.built-panel { border-top: 4px solid var(--accent); }
.built-panel h2 { margin: 0; }
.built-panel h3 { margin: 16px 0 6px; font-size: 14px; }
.built-panel ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.te-code { min-height: 180px; font: 13.5px/1.55 var(--font-mono); white-space: pre; tab-size: 4; overflow-wrap: normal; overflow-x: auto; }
.te-preview { margin: 14px 0 6px; }
.te-preview-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--accent-text); letter-spacing: .04em; }
.te-preview-stage { min-height: 340px; }
.te-preview .lp-controls { margin-bottom: 12px; }
.te-preview-task { margin-top: 10px; padding: 14px 16px; background: var(--bg-tint); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 8px; }
.te-preview-task h4 { margin: 0 0 6px; font-size: 14px; }
.te-preview-task details { margin-top: 8px; }
.te-preview-task summary { cursor: pointer; font-weight: 650; min-height: 32px; padding-block: 4px; }
.te-visual { margin-top: 12px; padding: 12px 14px; background: var(--bg-tint); border: 1px dashed var(--line); border-radius: 8px; }
.te-rows { display: grid; gap: 8px; margin-top: 8px; }
.te-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.te-row-field { display: grid; gap: 4px; flex: 1 1 140px; margin: 0; }
.te-row-field input, .te-row-field select { min-height: 38px; }
.te-row-check { margin: 0 0 8px; }
.te-row-remove { margin-inline-start: auto; }
.te-over { color: var(--danger); font-weight: 700; }

/* ── Lesson player: a video-style player ─────────────────────────────────────
   The player and its scenes are always left to right, in every interface
   language: the owner asked for the video to stay as it is in Arabic.
   Click the picture to play or pause; drag the dot along the timeline; icon
   controls with labels for assistive technology. Scoped to #lpPlayer so the
   editor's reviewer preview keeps its own simpler controls. */
#lpPlayer { position: relative; overflow: hidden; border-radius: 12px; background: #0B0E13; box-shadow: var(--shadow-2); }
#lpPlayer .lp-stage { border-radius: 0; cursor: pointer; min-height: 440px; -webkit-tap-highlight-color: transparent; }
#lpPlayer .lp-stage:focus-visible { outline: 3px solid var(--az-red-soft); outline-offset: -3px; }
/* Before the first play: a poster with one large play button. */
.lp-bigplay { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; pointer-events: none; }
#lpPlayer.is-fresh .lp-bigplay { display: grid; }
#lpPlayer.is-fresh .lp-scene-host { opacity: .5; }
.lp-bigplay svg { width: 84px; height: 84px; padding: 24px 22px 24px 28px; fill: #fff; background: var(--az-red); border-radius: 50%;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8); transition: transform var(--mo); }
#lpPlayer.is-fresh .lp-stage:hover .lp-bigplay svg { transform: scale(1.06); }
/* The brief confirmation after a click. */
.lp-flash { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.lp-flash svg { display: none; width: 68px; height: 68px; padding: 20px; fill: #fff; background: rgba(0, 0, 0, .58); border-radius: 50%; }
.lp-flash.is-on[data-kind="play"] .i-play, .lp-flash.is-on[data-kind="pause"] .i-pause { display: block; animation: lp-flash .6s ease-out forwards; }
@keyframes lp-flash { from { opacity: .95; transform: scale(.8); } to { opacity: 0; transform: scale(1.3); } }
#lpPlayer .lp-caption { position: relative; z-index: 1; }

.lp-chrome { padding: 2px 12px 6px; color: #EEF0F3; background: linear-gradient(180deg, #12161D, #0B0E13); }
/* The timeline: one segment per scene, sized by its length, with a dot. */
.lp-scrub { position: relative; display: flex; align-items: center; height: 32px; cursor: pointer; touch-action: none; }
.lp-scrub:focus-visible { outline: 2px solid var(--az-red-soft); outline-offset: 1px; border-radius: 4px; }
#lpTimeline { display: flex; gap: 3px; width: 100%; height: 5px; transition: height var(--mo-fast); }
.lp-scrub:hover #lpTimeline, .lp-scrub.is-dragging #lpTimeline, .lp-scrub:focus-visible #lpTimeline { height: 8px; }
#lpTimeline .lp-mark { position: relative; display: block; flex: 1 1 0; min-height: 0; height: 100%; padding: 0; overflow: hidden;
  background: rgba(255, 255, 255, .24); border: 0; border-radius: 2px; }
#lpTimeline .lp-mark i { display: block; width: 100%; height: 100%; overflow: visible; background: var(--az-red-soft); border-radius: 0;
  transform-origin: left center; transform: scaleX(var(--fill, 0)); }
#lpTimeline .lp-mark i::after { display: none; }
/* A core scene stands out on the bar before it plays, so a learner sees where
   to replay (D91): a warmer track and a dot above it. An overview is dimmer. */
#lpTimeline .lp-mark.is-key { overflow: visible; background: rgba(240, 128, 118, .45); }
#lpTimeline .lp-mark.is-key::before { content: ""; position: absolute; left: 50%; top: -10px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #F08076; box-shadow: 0 0 0 2px #10141B, 0 0 8px 1px rgba(240, 128, 118, .6); }
#lpTimeline .lp-mark.is-light { background: rgba(255, 255, 255, .13); }
#lpTimeline .lp-mark.is-withheld { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 4px, transparent 4px 7px); }
.lp-thumb { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; margin-inline-start: -7px; pointer-events: none;
  background: var(--az-red-soft); border-radius: 50%; box-shadow: 0 0 0 4px rgba(226, 87, 78, .28); transform: scale(.85); transition: transform var(--mo-fast); }
.lp-scrub:hover .lp-thumb, .lp-scrub.is-dragging .lp-thumb, .lp-scrub:focus-visible .lp-thumb { transform: scale(1.2); }
.lp-tip { position: absolute; bottom: 34px; z-index: 3; display: grid; gap: 2px; max-width: 280px; padding: 7px 11px; pointer-events: none;
  font-size: 12.5px; line-height: 1.35; text-align: center; color: #fff; background: rgba(0, 0, 0, .88); border-radius: 6px; transform: translateX(-50%); }
.lp-tip b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tip span { color: #C9CED6; font-variant-numeric: tabular-nums; }
.lp-tip em { font-style: normal; color: #E3B261; }
/* The control row. Every control is a 44px target with a spoken name. */
.lp-bar { display: flex; align-items: center; gap: 2px; min-height: 44px; }
.lp-ctl { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: #EEF0F3; background: transparent; border: 0; border-radius: 6px; }
.lp-ctl:hover { background: rgba(255, 255, 255, .1); }
.lp-ctl:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.lp-ctl:focus-visible { outline: 2px solid var(--az-red-soft); outline-offset: -2px; }
.lp-ctl svg { width: 22px; height: 22px; fill: currentColor; }
#lpPlay .i-pause, #lpPlay[aria-pressed="true"] .i-play { display: none; }
#lpPlay[aria-pressed="true"] .i-pause { display: block; }
.lp-cc svg, .lp-sound svg, #lpFullscreen svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-cc { position: relative; }
.lp-cc[aria-pressed="false"] { color: #8D96A3; }
.lp-cc[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 11px; bottom: 7px; height: 3px; background: var(--az-red-soft); border-radius: 2px; }
.lp-sound .spk { fill: currentColor; }
.lp-sound[aria-pressed="true"] .mute, .lp-sound[aria-pressed="false"] .waves { display: none; }
.lp-sound[aria-pressed="false"] { color: #8D96A3; }
/* Background music (D86): a note, struck through when off. */
.lp-music svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-music[aria-pressed="true"] .mute { display: none; }
.lp-music[aria-pressed="false"] { color: #8D96A3; }
/* Playback speed: the current speed as the button's face, a menu above it. */
/* Spoken highlights (D87): what the voice names lights up in the picture,
   and a ring glides to it. Said once, a word keeps a faint underline. */
.lp-stage .mo-say { display: inline-block; border-radius: 4px; transition: background-color .25s, box-shadow .25s, color .25s; }
.lp-stage .mo-say.was-said { box-shadow: inset 0 -2px 0 rgba(199, 49, 46, .35); }
.lp-stage .mo-say.is-said { color: var(--st-ink); background: #FFE07A; box-shadow: 0 0 0 2px #FFC72C; animation: mo-say-pop .45s var(--ease-brand); }
.mo-editor .mo-say.was-said { box-shadow: inset 0 -2px 0 rgba(255, 199, 44, .45); }
.mo-editor .mo-say.is-said { color: #fff; background: rgba(255, 199, 44, .32); box-shadow: 0 0 0 2px #FFC72C; }
.mo-life-pic text.mo-say-svg { transition: stroke-width .25s; paint-order: stroke; stroke: transparent; stroke-width: 0; }
.mo-life-pic text.mo-say-svg.is-said { stroke: #FFC72C; stroke-width: 5px; stroke-linejoin: round; transform-box: fill-box; transform-origin: center;
  animation: mo-say-pop .45s var(--ease-brand); }
@keyframes mo-say-pop { 40% { transform: scale(1.14); } }
/* How closely to watch (D91). A core idea: a red sign and a viewfinder frame
   whose corners close in; an overview: a quiet sign. Each settles to its icon
   after a few seconds (.is-compact), so the picture stays clear. */
.lp-focus { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px);
  padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 13px; line-height: 1.25; pointer-events: none; box-shadow: var(--st-shadow);
  animation: lp-focus-in .45s var(--ease-brand) both;
  transition: transform .8s var(--ease-brand), padding .35s var(--ease-brand), gap .35s var(--ease-brand); }
/* The core-idea card, centred and larger, before it flies to its corner. */
.lp-focus.is-hero { transform: translate(var(--hx, 0), var(--hy, 0)) scale(1.35); box-shadow: 0 24px 50px -20px rgba(162, 35, 35, .6); }
/* While a sign is in its corner, a centred title keeps clear of it. */
.lp-stage[data-focus="key"] #conceptHeading, .lp-stage[data-focus="light"] #conceptHeading { padding-inline: 56px; }
.lp-focus.is-key { background: var(--st-accent); color: #fff; }
.lp-focus.is-light { background: rgba(255, 255, 255, .94); color: var(--st-sub); border: 1px solid var(--st-line); }
.lp-focus-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.lp-focus.is-key .lp-focus-icon { background: rgba(255, 255, 255, .2); }
.lp-focus.is-light .lp-focus-icon { background: var(--st-soft); color: var(--st-muted); }
.lp-focus-icon svg { width: 20px; height: 20px; }
.lp-focus.is-key .lp-focus-icon svg { animation: lp-focus-pulse 1.6s ease-in-out infinite; }
.lp-focus-text { display: grid; overflow: hidden; max-width: 280px; transition: max-width .4s var(--ease-brand), opacity .25s; }
.lp-focus-text b { font-weight: 700; white-space: nowrap; }
.lp-focus-text small { font-size: 12px; opacity: .92; white-space: nowrap; }
.lp-focus.is-compact { gap: 0; padding: 6px; }
.lp-focus.is-compact .lp-focus-text { max-width: 0; opacity: 0; }
/* `translate`, not `transform`: the entrance must not hold the transform the
   centred card (.is-hero) uses to fly to its corner. */
@keyframes lp-focus-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes lp-focus-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.lp-frame { position: absolute; inset: 10px; z-index: 1; pointer-events: none; opacity: 0; }
.lp-frame i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--st-accent); }
.lp-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.lp-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.lp-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.lp-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.lp-stage[data-focus="key"] .lp-frame { animation: lp-frame-in 1.1s var(--ease-brand) both; }
@keyframes lp-frame-in { 0% { opacity: 0; transform: scale(1.05); } 35% { opacity: 1; transform: none; } 100% { opacity: .5; transform: none; } }
.lp-spot { position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 0; pointer-events: none; opacity: 0;
  border: 3px solid #FFC72C; border-radius: 10px; box-shadow: 0 0 0 5px rgba(255, 199, 44, .2), 0 0 26px rgba(255, 199, 44, .55);
  transition: opacity .25s, transform .45s var(--ease-brand), width .45s var(--ease-brand), height .45s var(--ease-brand); }
.lp-spot.is-on { opacity: 1; }
.lp-caption .lp-cap-key { font-family: var(--font-mono); font-weight: 700; color: #FFD25E; }
/* Up next (D87): the next lesson, and a ring counting down to it. */
.lp-next { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; cursor: default;
  background: rgba(12, 15, 21, .74); backdrop-filter: blur(3px); }
.lp-next[hidden] { display: none; }
.lp-next-card { width: min(100%, 460px); display: grid; gap: 10px; justify-items: center; padding: 26px 24px 22px; text-align: center;
  color: #EEF0F3; background: #141922; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); animation: mo-pop .35s var(--ease-brand) both; }
.lp-next-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F08076; }
.lp-next-card h3 { margin: 0; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.3; color: #fff; text-wrap: balance; }
.lp-next-meta { margin: 0; font-size: 13.5px; color: #B4BBC6; }
.lp-next-ring { position: relative; width: 66px; height: 66px; margin-top: 4px; }
.lp-next-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
.lp-next-ring circle { fill: none; stroke-width: 5; }
.lp-next-ring .track { stroke: rgba(255, 255, 255, .14); }
.lp-next-ring .arc { stroke: var(--az-red-soft); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.lp-next-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-variant-numeric: tabular-nums; color: #fff; }
.lp-next-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.lp-next-actions button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding-inline: 18px; }
.lp-next-actions svg { width: 16px; height: 16px; fill: currentColor; }
.lp-next-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lp-next-second { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .35); }
.lp-next-second:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.lp-speed { position: relative; display: inline-flex; }
.lp-speed-btn { width: auto; min-width: 52px; padding-inline: 8px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lp-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; z-index: 4; display: grid; min-width: 168px; padding: 6px;
  background: rgba(14, 17, 23, .97); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
.lp-menu[hidden] { display: none; }
.lp-menu-title { padding: 6px 10px 8px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #A9B0BB; }
.lp-menu [role="menuitemradio"] { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; font-size: 14px; text-align: start;
  color: #EEF0F3; background: transparent; border: 0; border-radius: 6px; font-variant-numeric: tabular-nums; }
.lp-menu [role="menuitemradio"]::before { content: ""; width: 14px; height: 8px; margin-top: -3px; border: solid transparent; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.lp-menu [aria-checked="true"]::before { border-color: var(--az-red-soft); }
.lp-menu [role="menuitemradio"] small { margin-inline-start: auto; font-size: 12px; color: #A9B0BB; }
.lp-menu [role="menuitemradio"]:hover, .lp-menu [role="menuitemradio"]:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.lp-menu [role="menuitemradio"]:focus-visible { box-shadow: inset 0 0 0 2px var(--az-red-soft); }
/* Waiting for a scene's voice on a slow connection: a small spinner after a
   moment, so an ordinary fetch inside the lead-in shows nothing. */
#lpPlayer .lp-stage::after { content: ""; position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 22px; height: 22px; opacity: 0;
  pointer-events: none; border: 3px solid rgba(20, 25, 34, .14); border-top-color: var(--st-accent); border-radius: 50%; transition: opacity .2s; }
#lpPlayer.is-waiting .lp-stage::after { opacity: 1; transition-delay: .5s; animation: lp-spin .9s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
#lpFullscreen .fs-out, #lpFullscreen.is-on .fs-in { display: none; }
#lpFullscreen.is-on .fs-out { display: inline; }
.lp-time { padding-inline: 8px 10px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #EEF0F3; }
.lp-now { min-width: 0; overflow: hidden; font-size: 13px; color: #A9B0BB; white-space: nowrap; text-overflow: ellipsis; }
#lpPlayer:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
#lpPlayer:fullscreen .lp-stage { flex: 1; min-height: 0; }
@media (max-width: 640px) {
  #lpPlayer .lp-stage { min-height: 340px; }
  .lp-now { display: none; }
  .lp-ctl { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #lpTimeline, .lp-thumb, .lp-bigplay svg { transition: none; }
  .lp-flash svg { animation: none !important; }
  #lpPlayer.is-waiting .lp-stage::after { animation-duration: 2.4s; }
  .lp-stage::before { animation: none; }
  .mo-story .mo-act, .mo-story .mo-move, .mo-story .mo-link .ln, .mo-story .mo-spin, .mo-story .mo-spin-slow, .mo-story .mo-hand, .mo-story .mo-link .flow, .mo-story .mo-type, .mo-story .mo-print, .mo-story .mo-caret { animation: none !important; transition: none !important; }
  .lp-stage .mo-say, .mo-life-pic text.mo-say-svg, .lp-spot, .lp-next-card, .lp-next-ring .arc { animation: none !important; transition: none !important; }
  .mo-seq[data-step] > [data-s] { transition: none; }
}

/* ── Course hero: progress as a horizontal bar ───────────────────────────── */
.cw-progress { display: grid; gap: 6px; max-width: 460px; margin-top: 4px; }
.cw-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--cw-hero-sub); }
.cw-progress-head b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.cw-progress-track { position: relative; height: 8px; overflow: hidden; background: rgba(255, 255, 255, .14); border-radius: 4px; }
.cw-progress-track i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, var(--az-red), var(--az-red-soft)); border-radius: 4px; }
:root[dir="rtl"] .cw-progress-track i { background: linear-gradient(270deg, var(--az-red), var(--az-red-soft)); }
.cw-progress p { margin: 0; font-size: 12.5px; color: var(--cw-hero-sub); }
.cw-progress .cw-progress-text { font-size: 13px; }
.cw-progress-text b { margin-inline-end: 6px; color: #fff; font-variant-numeric: tabular-nums; }

/* ── The player answers ──────────────────────────────────────────────────────
   When the lesson asks a question, or the learner answers one, the picture is
   replaced by the player's response: the question itself, a right answer, a
   review of a first miss with another example, or the worked solution. Same
   light screen as the scenes (D86), so it reads as part of the lesson.
   Left to right in every language, like the rest of the player. */
.lp-feedback { display: grid; align-content: center; min-height: 440px; padding: 30px clamp(18px, 4vw, 44px);
  color: var(--st-ink); background: radial-gradient(var(--st-dot) 1.2px, transparent 1.5px) 0 0 / 22px 22px, var(--st-bg); }
.lp-feedback[hidden] { display: none; }
/* The video keeps one direction in every language; the words beside it, the
   question card and the drawer under the picture, read in the reader's (D97). */
html[dir="rtl"] #lpFeedback, html[dir="rtl"] #lpFsDrawer { direction: rtl; }
#lpPlayer.has-fb .lp-stage { display: none; }
.lp-fb { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: 14px; justify-items: start; }
.lp-fb > * { margin: 0; animation: mo-rise .42s var(--ease-brand) both; }
.lp-fb > :nth-child(2) { animation-delay: .06s; }
.lp-fb > :nth-child(3) { animation-delay: .12s; }
.lp-fb > :nth-child(4) { animation-delay: .18s; }
.lp-fb > :nth-child(5) { animation-delay: .26s; }
.lp-fb > :nth-child(n+6) { animation-delay: .34s; }
.lp-fb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; font-size: 13px; font-weight: 700; letter-spacing: .03em; border-radius: 999px; }
.lp-fb-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-fb-chip.is-turn { color: #A22323; background: #FDE3E0; }
.lp-fb-chip.is-correct { color: #146B47; background: #DDF4E9; }
.lp-fb-chip.is-repair { color: #8A4B05; background: #FDF0D8; }
.lp-fb-chip.is-solution { color: #4E3FA8; background: #ECE8FF; }
.lp-fb-title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--st-ink); text-wrap: balance; }
.lp-fb-title:focus { outline: none; }
.lp-fb-question { max-width: 62ch; padding-block: 4px; padding-inline: 16px 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--st-ink); border-inline-start: 4px solid var(--st-accent); }
.lp-fb-lead { max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--st-sub); }
.lp-fb-next { font-size: 14px; color: var(--st-muted); }
.lp-fb-answer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 8px; }
.lp-fb-answer-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.lp-fb-answer b { font-size: 18px; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.lp-fb-answer small { font-size: 13px; font-weight: 500; color: var(--st-sub); }
.lp-fb-answer svg { width: 20px; height: 20px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-fb-answer.is-right svg { stroke: #1D7F55; }
.lp-fb-answer.is-wrong svg { stroke: #C7312E; }
.lp-fb-visual { width: 100%; margin: 2px 0; padding: 20px 16px; display: grid; gap: 12px; justify-items: center; background: rgba(255, 255, 255, .6); border: 1px solid var(--st-line); border-radius: 12px; }
.lp-fb-visual figcaption { justify-self: start; font-size: 12.5px; font-weight: 650; color: var(--st-muted); }
/* The worked solution reads top to bottom, one step at a time. */
.lp-fb-visual.is-steps { justify-items: stretch; }
.lp-fb .is-steps .mo-visual { max-width: none; justify-items: stretch; }
.lp-fb-question.is-small { margin: 0 0 4px; font-size: 15.5px; color: var(--st-sub); }
.lp-fb .is-steps .mo-steps { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.lp-fb .is-steps .mo-steps li { max-width: none; align-items: center; }
.lp-fb .is-steps .mo-steps li + li::before { content: none; }
.lp-fb .is-steps .mo-steps b { font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.lp-fb-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lp-fb-grid:empty { display: none; }
.lp-fb-panel { padding: 14px 16px; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: var(--st-shadow);
  animation: mo-rise .45s var(--ease-brand) both; animation-delay: calc(.3s + var(--mo-i, 0) * 140ms); }
.lp-fb-panel h3 { margin: 0 0 6px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); }
.lp-fb-panel p, .lp-fb-panel li { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--st-ink); }
.lp-fb-panel ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
.lp-fb-panel.is-anchor { background: var(--st-accent-tint); border-color: var(--st-accent-line); }
.lp-fb-panel.is-anchor h3 { color: var(--st-accent-ink); }
.lp-fb-limit { max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--st-muted); }
.lp-fb-limit b { color: var(--st-sub); margin-inline-end: 4px; }
.lp-fb-status { font-size: 13.5px; color: #8A4B05; }
.lp-fb-status:empty { display: none; }
.lp-fb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lp-fb-actions button { min-height: 44px; padding-inline: 20px; }
.lp-fb-actions button:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.lp-fb-second { color: var(--st-ink); background: var(--st-card); border-color: #B9C3D0; }
.lp-fb-second:hover { color: var(--st-ink); background: var(--st-soft); border-color: #8E9AAB; }
#lpPlayer:fullscreen .lp-feedback { flex: 1; min-height: 0; overflow-y: auto; }
@media (max-width: 640px) {
  .lp-feedback { min-height: 340px; padding: 24px 16px; }
  .lp-q-input { max-width: none; }
  .lp-modes { flex: 1 1 100%; }
  .lp-modes .lesson-mode-controls button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-fb > *, .lp-fb-panel, .lp-q.is-called { animation: none !important; }
}

/* ── Course editor: which goals each lesson teaches ─────────────────────── */
.goal-coverage { margin: 12px 0; padding: 12px 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; }
.goal-coverage h4 { margin: 0 0 8px; font-size: 14px; }
.goal-coverage ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.goal-coverage .pill { margin-inline-start: 6px; font-size: 11.5px; }
.goal-picks { margin: 10px 0 4px; }
.goal-picks .sound-toggle { font-weight: 500; }

/* ── Getting full access: BenefitPay, confirmed by hand (web/purchase.js) ─── */
#coursePurchase:empty { display: none; }
.buy { display: grid; gap: 14px; margin: 0 0 18px; padding: 22px 24px; border-radius: 12px; }
.buy h2 { margin: 0; font-size: 20px; }
.buy h3 { margin: 0 0 8px; font-size: 16px; }
.buy-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.buy-price { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.buy-terms { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.5; color: var(--sub); }
.buy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: buy; }
.buy-steps > li { position: relative; padding-inline-start: 44px; counter-increment: buy; }
.buy-steps > li::before { content: counter(buy); position: absolute; inset-inline-start: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px;
  font-weight: 800; font-size: 14px; color: var(--accent-ink); background: var(--accent); border-radius: 50%; }
.buy-steps > li + li { padding-top: 18px; border-top: 1px solid var(--line); }
.buy-steps > li + li::before { top: 16px; }
.buy-ways { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 10px 0; }
.buy-qr { margin: 0; display: grid; gap: 6px; justify-items: center; }
.buy-qr img { width: 200px; height: 200px; padding: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.buy-qr figcaption { font-size: 13px; color: var(--muted); }
.buy-iban { display: grid; gap: 6px; align-content: start; justify-items: start; min-width: 0; }
.buy-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.buy-mono { margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.buy-codebox { display: grid; gap: 6px; justify-items: start; margin: 6px 0; padding: 14px 16px; background: var(--accent-tint); border: 1px dashed var(--accent); border-radius: 10px; }
.buy-code { margin: 0; font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.buy-code-line .buy-code { font-size: 18px; }
.buy-iban button, .buy-codebox button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.buy-steps label { margin-top: 10px; }
.buy-steps input[type="file"] { padding: 9px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.buy-actions .primary { min-height: 44px; padding-inline: 20px; }
.buy-state { display: grid; gap: 8px; padding: 14px 16px; background: var(--soft); border-radius: 10px; }
.buy-state p { margin: 0; line-height: 1.55; }
.buy-proof { max-width: 220px; max-height: 260px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.buy-rejected { margin: 0; }
.buy-status { margin: 0; font-size: 13.5px; color: var(--sub); }
.buy-status:empty { display: none; }
.buy-status.is-warn { color: var(--warn); }
.buy-done { border-color: var(--ok); }
.buy-done h2 { color: var(--ok); }

/* ── Admin → Payments (web/payments-admin.js) ───────────────────────────── */
.pay-admin { display: grid; gap: 18px; }
.pay-admin h2 { margin: 0; }
.pay-admin h3 { margin: 0 0 6px; }
.pay-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-item { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pay-shot { min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow: hidden; cursor: zoom-in; }
.pay-shot img { display: block; width: 100%; max-height: 240px; object-fit: contain; }
.pay-item.is-zoomed { grid-template-columns: 1fr; }
.pay-item.is-zoomed .pay-shot { cursor: zoom-out; }
.pay-item.is-zoomed .pay-shot img { max-height: none; }
.pay-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pay-body p { margin: 0; overflow-wrap: anywhere; }
.pay-code { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.pay-note { font-style: italic; color: var(--sub); }
.pay-decide, .pay-reject .row { margin-top: 8px; gap: 8px; }
.pay-reject { margin-top: 6px; }
.pay-status { margin: 4px 0 0; font-size: 13.5px; color: var(--sub); }
.pay-status:empty { display: none; }
.pay-qr-edit { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 14px 0; }
.pay-qr-preview { width: 160px; height: 160px; padding: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pay-course { padding: 12px 0; border-top: 1px solid var(--line); }
.pay-course .pay-current { display: inline-flex; align-items: center; gap: 10px; }
.pay-course .pay-current button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.pay-price-form { margin-top: 10px; }
.pay-refund { margin-top: 6px; }
.pay-mail { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.pay-mail-sent { color: var(--ok); font-weight: 600; }
.pay-mail-failed, .pay-mail-held { color: var(--warn); font-weight: 600; }
.pay-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
@media (max-width: 640px) {
  .pay-item { grid-template-columns: 1fr; }
  .buy { padding: 18px 16px; }
  .buy-steps > li { padding-inline-start: 38px; }
  .buy-code { font-size: 22px; }
}

/* Sign in · create an account · a forgotten password (app.js drawAuth) */
.auth-card .auth-hint { margin: 6px 0 0; font-size: 13px; }
.auth-new { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.auth-new:empty { display: none; }
.auth-new p { margin: 0; }
#codeIn { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12ch; }

/* Two ways to build: Claude in a chat, or Claude Code (course-builder.js) */
.build-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 12px 0; }
.build-way { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.build-way h5 { margin: 0; font-size: 14px; }
.build-way .build-steps { margin-bottom: 4px; }
.build-way .build-steps .row { margin-top: 8px; }
.build-way input[type="file"] { margin-top: 2px; max-width: 100%; min-width: 0; }
@media (max-width: 420px) { .build-way { padding: 12px; } .build-way .build-steps { padding-inline-start: 16px; } }

/* Find a course: one tab per topic; universities appear here too */
.course-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.course-tab { padding: 9px 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.course-tab:hover { border-color: var(--accent-text); }
.course-tab[aria-selected="true"] { background: #C7312E; border-color: #C7312E; color: #fff; }
.home-university { min-height: 150px; cursor: pointer; }
.home-university > span:last-child { color: var(--accent-text); font-weight: 600; }

/* Sign in · test accounts · development mailbox (app.js drawAuth) */
.auth-card { max-width: 440px; }
.auth-actions { margin-top: 14px; }
.auth-switch { margin: 14px 0 0; }
.link-button { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-test { margin-top: 18px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; display: grid; gap: 8px; }
.auth-test p { margin: 0; }
.auth-test-account { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; width: 100%; }
.auth-test-account .mono { font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.dev-mail { margin: 0 0 14px; padding: 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); display: grid; gap: 8px; }
.dev-mail p { margin: 0; }
.dev-mail button { justify-self: start; }
.dev-mail pre { margin: 0; padding: 10px; border-radius: 6px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; font-size: 12.5px; }

/* The dialog's catalogue id (DLG-015 · confirm) is for the team and the
   tests, not for the reader: kept in the page, never shown. */
#dlgId { display: none; }

/* Course settings (web/course-settings.js) and Your courses (course-list.js) */
.cs-courses { margin-bottom: 28px; }
.cs-courses > h2 { margin-bottom: 2px; }
.cs-course .cs-summary { margin: 4px 0 0; }
.cs-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-form { display: grid; gap: 14px; }
.cs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.cs-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-inline input { flex: 1 1 160px; min-width: 0; }
.cs-help { margin: 6px 0 0; font-size: 13px; }
.cs-prices { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
.cs-prices legend { font-weight: 600; padding: 0 4px; }
.cs-check { display: flex; gap: 8px; align-items: center; font-weight: 500; margin-top: 12px; }
.cs-check input { width: auto; }
.cs-split { margin-top: 8px; padding: 12px; background: var(--bg-tint); border-radius: 8px; }
.cs-sub { margin: 0; font-weight: 600; font-size: 13px; color: var(--sub); }
.cs-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0 14px; }
.cs-chapters .cs-check { margin-top: 8px; }
.cs-history-head { margin-top: 8px; }

/* Buying a course in parts (web/purchase.js) */
.buy-options { display: grid; gap: 10px; margin: 10px 0 14px; }
.buy-option { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.buy-option h3 { margin: 0 0 2px; font-size: 16px; }
.buy-option p { margin: 0; }
.buy-option .buy-price { font-size: 18px; }
@media (max-width: 560px) { .buy-option { grid-template-columns: 1fr; } }

/* A temporary course's end date on its page */
.cw-ends { margin: 10px 0 0; font-weight: 600; color: var(--warn); }
.cw-ends.is-ended { color: var(--danger); }

/* Program text inside a question: as written, left to right, indents kept. */
.q-code { margin: 6px 0 0; padding: 10px 14px; overflow-x: auto; white-space: pre; text-align: left;
  font: 500 14.5px/1.55 var(--font-mono); color: var(--ink); background: var(--soft);
  border: 1px solid var(--line); border-radius: 6px; }
.lp-feedback .q-code { color: var(--st-code-ink); background: var(--st-code-bg); border-color: var(--st-code-bg); font-weight: 500; }
.lp-fb-question .q-code { font-size: 13.5px; }
/* A written answer that is a program: typed and read back as written. */
.written-code { min-height: 300px; font: 14px/1.55 var(--font-mono); white-space: pre; tab-size: 4;
  overflow-wrap: normal; overflow-x: auto; text-align: left; }
.written-text { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.quote .written-text { font-family: var(--font-mono); font-size: 13.5px; }


/* ── Revise: flip cards and quests (D80) ─────────────────────────────────── */
.pr-intro p { margin: 0 0 14px; color: var(--sub); }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.pr-chapter { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; align-content: start; }
.pr-chapter h3 { margin: 0; font-size: 16px; }
.pr-chapter.is-locked { opacity: .7; }
.pr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pr-row > div { display: grid; gap: 2px; min-width: 0; }
.pr-row .muted { font-size: 13px; }
.pr-row button { flex: none; min-height: 40px; }
.pr-locked { margin: 0; font-size: 13px; color: var(--muted); }
.pr-session { display: grid; gap: 14px; max-width: 760px; }
.pr-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-top h3 { margin: 0; flex: 1 1 200px; font-size: 17px; }
.pr-back { min-height: 38px; padding: 6px 12px; font-size: 13.5px; }
.pr-count { font-size: 13.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.pr-bar { height: 6px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease-brand); }
/* The card turns over: front and back share one place, the back faces away. */
.pr-card { perspective: 1400px; cursor: pointer; }
.pr-card[data-flipped="true"] { cursor: default; }
.pr-card-inner { display: grid; min-height: 230px; transform-style: preserve-3d; transition: transform .55s var(--ease-brand); }
.pr-card[data-flipped="true"] .pr-card-inner { transform: rotateY(180deg); }
.pr-face { grid-area: 1 / 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 28px 26px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1, 0 6px 18px -10px rgba(0,0,0,.25));
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pr-back-face { transform: rotateY(180deg); border-color: var(--accent); }
.pr-face p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 56ch; }
.pr-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.pr-code { margin: 0; max-width: 100%; overflow-x: auto; padding: 10px 14px; text-align: left; font: 500 14px/1.55 var(--font-mono);
  color: #E8EAEE; background: #14181F; border-radius: 8px; }
.pr-recall { font-size: 13.5px; font-weight: 600; }
.pr-session.is-flipped .pr-recall, .pr-session.is-flipped #prRecall { display: none; }
.pr-session textarea { min-height: 0; }
.pr-controls { display: grid; gap: 10px; justify-items: start; }
.pr-ask { margin: 0; font-weight: 600; }
.pr-typed { margin: 0; font-size: 14px; color: var(--sub); }
.pr-rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pr-rate button { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 6px; position: relative; }
.pr-rate small { font-size: 12px; font-weight: 500; opacity: .8; }
.pr-rate kbd, .pr-choices kbd { font: 600 11px var(--font-mono); padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .55; }
.pr-rate kbd { position: absolute; top: 6px; inset-inline-start: 8px; }
.pr-keys { margin: 0; font-size: 12.5px; }
.pr-done h3 { margin: 0; font-size: 20px; }
/* The quest map: the character walks stone to stone towards the goal. */
.pr-map { display: block; width: 100%; height: auto; }
.pr-map-ground { fill: var(--soft); }
.pr-map-path { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.pr-stone { fill: var(--card); stroke: var(--line); stroke-width: 2; transition: fill .3s; }
.pr-stone.is-done { fill: #F3C969; stroke: #C99A2E; }
.pr-stone.is-here { stroke: var(--accent); stroke-width: 3; }
.pr-goal-hall { fill: var(--card); stroke: var(--sub); stroke-width: 2; }
.pr-goal-roof { fill: var(--accent); }
.pr-goal-door { fill: var(--sub); }
.pr-goal-pole { stroke: var(--sub); stroke-width: 2; }
.pr-goal-flag { fill: var(--accent); transform-box: fill-box; transform-origin: left center; }
.pr-goal.is-reached .pr-goal-flag { animation: pr-wave 1.2s ease-in-out infinite alternate; }
.pr-goal-label { font: 700 12.5px var(--font-body); fill: var(--ink); }
.pr-hero { transition: transform .9s var(--ease-brand); }
@keyframes pr-wave { from { transform: skewY(-6deg); } to { transform: skewY(6deg); } }
.pr-q { display: grid; gap: 12px; }
.pr-prompt { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.pr-choices { display: grid; gap: 8px; }
.pr-choices button { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: start; min-height: 48px; padding: 10px 14px; font-weight: 500; }
.pr-choices button:disabled { opacity: 1; color: var(--ink); cursor: default; }
.pr-choices button:disabled:not(.is-right):not(.is-wrong) { color: var(--sub); }
.pr-choices button.is-right { border-color: var(--ok); border-width: 2px; background: var(--ok-bg); color: var(--ink); }
.pr-choices button.is-wrong { border-color: var(--danger); border-width: 2px; background: var(--danger-bg); color: var(--ink); }
.pr-feedback:empty { display: none; }
.pr-feedback { padding: 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; background: var(--soft); }
.pr-feedback.is-right { background: var(--ok-bg); }
.pr-feedback.is-wrong { background: var(--danger-bg); }
.pr-win { padding: 18px; text-align: center; background: var(--accent-tint); border-radius: 12px; display: grid; gap: 8px; justify-items: center; }
.pr-win-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--accent-text); }
.pr-win p { margin: 0; }
@media (max-width: 640px) {
  .pr-rate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-face p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-card-inner, .pr-hero, .pr-bar i { transition: none; }
  .pr-card[data-flipped="true"] .pr-card-inner { transform: none; }
  .pr-card[data-flipped="true"] .pr-front { visibility: hidden; }
  .pr-back-face { transform: none; visibility: hidden; }
  .pr-card[data-flipped="true"] .pr-back-face { visibility: visible; }
  .pr-goal.is-reached .pr-goal-flag { animation: none; }
}

/* D91: the focus sign and frame appear without moving. */
@media (prefers-reduced-motion: reduce) {
  .lp-focus, .lp-focus.is-key .lp-focus-icon svg { animation: none; }
  .lp-focus.is-hero { transform: none; }
  .lp-focus, .lp-focus-text { transition: none; }
  .lp-stage[data-focus="key"] .lp-frame { animation: none; opacity: .5; }
}

/* ── Admin → Students (D93) ─────────────────────────────────────────────── */
.stu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.stu .card { margin: 0; }
.stu-search { position: relative; margin: 12px 0 10px; }
.stu-search svg { position: absolute; inset-inline-start: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.stu-search input { padding-inline-start: 40px; min-height: 46px; }
.stu-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 70vh; overflow-y: auto; }
.stu-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  text-align: start; font-weight: 500; background: transparent; border: 1px solid transparent; border-radius: 10px; }
.stu-row:hover { background: var(--soft); border-color: transparent; }
.stu-row[aria-current="true"] { background: var(--accent-tint); border-color: var(--accent-ring); }
.stu-avatar { display: grid; place-items: center; width: 38px; height: 38px; font-size: 13px; font-weight: 800; color: var(--accent-text);
  background: var(--accent-tint); border-radius: 50%; }
.stu-avatar-lg { width: 54px; height: 54px; font-size: 18px; }
.stu-who { display: grid; gap: 2px; min-width: 0; }
.stu-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--muted); }
.stu-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.stu-id { padding: 2px 7px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--sub); background: var(--soft); border-radius: 4px; }
.stu-missing { color: var(--warn); }
.stu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.stu-head h2 { margin: 0; }
.stu-head p { margin: 2px 0 0; }
.stu-pills { display: flex; gap: 6px; }
.stu-h { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stu-identity { display: grid; gap: 8px; margin: 0; }
.stu-identity > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.stu-identity dt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.stu-identity dd { margin: 0; overflow-wrap: anywhere; }
.stu-identity svg, .stu-ok svg, .stu-only svg, .stu-access-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stu-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.stu-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stu-phone-form { margin-top: 10px; }
.stu-phone-form .row { gap: 8px; flex-wrap: wrap; }
.stu-phone-form input { flex: 1 1 200px; width: auto; }
.stu-accesses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stu-access { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.stu-access:not(.is-active) { opacity: .72; }
.stu-access-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--ok); border-radius: 50%; }
.stu-access:not(.is-active) .stu-access-icon { color: var(--muted); background: var(--soft); }
.stu-access-text { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; }
.stu-how { font-weight: 700; }
.stu-how-permanent { color: var(--ok); }
.stu-how-until_close { color: var(--accent-text); }
.stu-confirm { margin-top: 10px; padding: 12px; background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 10px; }
.stu-confirm p { margin: 0 0 8px; }
.stu-confirm .row { gap: 8px; margin-top: 8px; }
.stu-pay { margin-top: 12px; font-size: 13px; }
.stu-pay ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.stu-give { display: grid; gap: 8px; margin-top: 18px; padding: 14px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; }
.stu-give .stu-h { margin-top: 0; }
.stu-only { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.stu-choices { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; }
.stu-choices legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
.stu-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.stu-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stu-choice input { width: auto; margin-top: 3px; }
.stu-choice span { display: grid; gap: 2px; }
.stu-choice small { color: var(--muted); font-size: 12.5px; }
.stu-checked { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; }
.stu-checked input { width: auto; }
@media (max-width: 980px) { .stu { grid-template-columns: 1fr; } .stu-list { max-height: 46vh; } }
@media (max-width: 520px) { .stu-identity > div { grid-template-columns: 1fr; gap: 2px; } .stu-row { grid-template-columns: auto minmax(0, 1fr); } .stu-tags { grid-column: 2; justify-content: flex-start; } }

/* ── Course settings: categories and closing (D93, D94) ─────────────────── */
.cs-cats { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.cs-cats legend { padding: 0 6px; font-weight: 600; }
.cs-cat-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.cs-cat-group .cs-sub { flex-basis: 100%; }
.cs-cat { display: inline-flex; align-items: center; gap: 6px; }
.cs-cat .cs-check { margin-top: 4px; }
.cs-cat-remove { font-size: 12px; color: var(--muted); }
.cs-cat-new { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; }
@media (max-width: 700px) { .cs-cat-new { grid-template-columns: 1fr; } }
.cs-closing { padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); border-inline-start: 4px solid var(--warn); border-radius: 10px; }
.cs-closing.is-closed { border-inline-start-color: var(--muted); }
.cs-closing p { margin: 0 0 8px; }
.cs-confirm { margin-top: 10px; padding: 12px; background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 10px; }
.cs-confirm p { margin: 0 0 8px; }
.cs-confirm .row, .cs-closing .row { gap: 8px; }

/* ── Home: a topic's courses grouped by the owner's categories (D94) ────── */
.home-category { grid-column: 1 / -1; display: grid; gap: 14px; }
.home-category + .home-category { margin-top: 10px; }
.home-category-head h3 { margin: 0; font-size: 20px; }
.home-category-head p { margin: 4px 0 0; max-width: 70ch; color: var(--sub); }
.home-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-category-grid { grid-template-columns: 1fr; } }

/* ── Notes while studying (D95) ─────────────────────────────────────────── */
.lp-notes { display: grid; gap: 12px; }
.lp-note-new { display: grid; gap: 8px; }
.lp-note-where { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
.lp-note-text { width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; }
.lp-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lp-note-state { font-size: 12.5px; color: var(--muted); }
.lp-note-head { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lp-note-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-note-item { display: grid; gap: 6px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.lp-note-item.is-here { border-color: var(--accent-ring); box-shadow: inset 3px 0 0 var(--accent); }
:root[dir="rtl"] .lp-note-item.is-here { box-shadow: inset -3px 0 0 var(--accent); }
.lp-note-scene { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; min-height: 28px; padding: 2px 8px 2px 2px;
  font-size: 12px; font-weight: 600; color: var(--sub); background: var(--soft); border: 0; border-radius: 999px; }
.lp-note-scene span:first-child { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; font-size: 11px; font-weight: 800;
  color: var(--accent-text); background: var(--accent-tint); border-radius: 999px; }
.lp-note-scene span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-note-scene:hover { color: var(--ink); background: var(--accent-tint); }
.lp-note-body { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.lp-note-item .lp-note-actions .link-button { font-size: 12.5px; }
.lp-note-del { color: var(--danger); }
.lp-note-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; background: var(--danger-bg); border-radius: 8px; }
.lp-note-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.lp-note-book { justify-self: start; font-size: 13px; }
/* The notes button in the bar, with how many notes the lesson has. */
.lp-notes-btn { position: relative; }
.lp-notes-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lp-notes-count { position: absolute; top: 4px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; font-weight: 800;
  line-height: 16px; text-align: center; color: #fff; background: var(--az-red); border-radius: 999px; }
/* A scene the learner wrote about. */
.lp-scene-item { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.lp-scene-notes { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.lp-scene-notes svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* In full screen the space under the picture holds the notes: writing on
   the left, the lesson's notes on the right. */
.lp-fs-notes { display: none; }
#lpPlayer:fullscreen .lp-fs-notes { display: block; flex: 0 0 auto; max-height: 30vh; overflow-y: auto; padding: 0 clamp(16px, 3vw, 40px) 12px; color: #EEF0F3; background: #0D1016;
  border-top: 1px solid rgba(255, 255, 255, .08);
  --card: #151A22; --line: rgba(255, 255, 255, .1); --soft: rgba(255, 255, 255, .07); --ink: #F4F5F7; --sub: #C9CED6; --muted: #9AA2AE;
  --accent-text: #F08076; --accent-tint: rgba(199, 49, 46, .2); --accent-ring: rgba(240, 128, 118, .45); --danger: #F08076; --danger-bg: rgba(226, 87, 78, .16); }
#lpPlayer:fullscreen.notes-closed .lp-fs-notes { display: none; }
/* Two tabs under the picture: Notes, and the Question when the scene has one. */
.lp-fs-tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; margin: 0 0 10px; padding-top: 6px; background: #0D1016; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-fs-tabs [role="tab"] { min-height: 36px; padding: 6px 14px; margin-bottom: -1px; font-size: 13px; font-weight: 700; color: #A9B0BB; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.lp-fs-tabs [role="tab"][aria-selected="true"] { color: #fff; border-bottom-color: var(--az-red-soft); }
.lp-fs-tabs [role="tab"][hidden] { display: none; }
/* Answering needs more room than a note: the question tab grows the space. */
#lpPlayer:fullscreen .lp-fs-notes:has(#lpQuestionFs:not([hidden])) { max-height: 46vh; }
#lpPlayer:fullscreen #lpNotesFs:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-auto-rows: min-content; gap: 10px 28px; }
#lpPlayer:fullscreen #lpNotesFs .lp-note-new { grid-column: 1; grid-row: 1 / span 4; align-content: start; }
#lpPlayer:fullscreen #lpNotesFs > :not(.lp-note-new) { grid-column: 2; }
#lpPlayer:fullscreen .lp-fs-question .lp-tasks { margin: 0; }
#lpPlayer:fullscreen .lp-fs-question .lp-q { margin: 0; }
#lpPlayer:fullscreen .lp-fs-question input, #lpPlayer:fullscreen .lp-fs-question select, #lpPlayer:fullscreen .lp-fs-question textarea { color: #F4F5F7; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
#lpPlayer:fullscreen .lp-fs-notes .lp-note-text { min-height: 48px; color: #F4F5F7; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
#lpPlayer:fullscreen .lp-fs-notes .link-button { color: #F08076; }
#lpPlayer:fullscreen .lp-fs-notes .lp-note-del { color: #F08076; }
@media (max-width: 760px) {
  #lpPlayer:fullscreen .lp-fs-notes { max-height: 42vh; }
  #lpPlayer:fullscreen #lpNotesFs:not([hidden]) { grid-template-columns: 1fr; }
  #lpPlayer:fullscreen #lpNotesFs .lp-note-new, #lpPlayer:fullscreen #lpNotesFs > :not(.lp-note-new) { grid-column: 1; grid-row: auto; }
}
/* Copy the question into a note (D95). */
.lp-q-head .lp-q-copy { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; font-size: 12.5px; }
.lp-q-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }

/* Admin on a phone, in either direction (D96): a wide table scrolls inside
   itself, and a heading row with a status pill wraps instead of pushing the
   page sideways (it did in Arabic, where overflow runs off the left edge). */
#apanel table.data { display: block; max-width: 100%; overflow-x: auto; }
#apanel .row.spread { flex-wrap: wrap; min-width: 0; }
#apanel .pill { white-space: normal; }
#apanel .pay-admin { grid-template-columns: minmax(0, 1fr); }
#apanel code { overflow-wrap: anywhere; }