/* LORE console — the editors (2026-09-24): the lesson editor page, question
   cards, the course page's lesson rows (reorder, rename, status), course
   details, and Studio's review mode. Tokens only, so every theme (LORE Blue,
   Light, Dark, Easy reading) is right without a line of its own here, except
   where Easy reading asks for more room. */

/* --- the lesson editor: header ----------------------------------------------- */
.le { --le-gap: var(--space-5); }
.le-bar {
  position: sticky; top: var(--tabs-h, 49px); z-index: 15;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--surface-1);   /* solid: text scrolling under a pinned bar must not show through */
  -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.le-bar-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.le-bar-top .grow { flex: 1 1 auto; }
.le-back { padding-left: .35rem; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.le-bar-top .le-kicker { padding-left: var(--space-2); margin-left: 2px; border-left: 1px solid var(--border); }
/* THE TITLE HAS A ROW TO ITSELF (2026-10-11). It is an <input>, which cannot
   wrap, and it used to share its row with the save controls: .le-heading was
   `flex: 1 1 28rem` beside .le-actions, so whenever the two fitted on one
   line the input got only what the controls left ("Saved · Undo" + Save at a
   960px window left it ~490px) and a long title was cut off under them.
   .le-heading is now `display: contents`, so its two children are rows of
   .le-bar-main in their own right: the title takes a full row, and under it
   the narration chips (left) share a row with the save controls (right).
   Below 1100px the chips take a full row too, so the controls always sit on
   their own line there: the bar is then the same height saved or unsaved,
   and the text below does not jump when the first key is pressed and
   "Discard changes" appears. */
.le-bar-main { display: flex; align-items: center; gap: var(--space-2) var(--space-5); flex-wrap: wrap; }
.le-heading { display: contents; }
.le-kicker { font-size: var(--fs-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-dim);
             font-weight: var(--fw-semibold); }
.le-title { display: flex; align-items: center; gap: var(--space-2); margin: 2px 0 0; flex: 1 1 100%; min-width: 0; }
.le-prefix { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: .95rem;
             color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
             border-radius: var(--radius); padding: .2rem .5rem; }
/* THE TITLE WRAPS (audit L3, 2026-10-16). It is a one-row <textarea> that grows with its words: .le-title-box holds the
   textarea and a hidden copy of its text (data-value, set by editor.js) in one grid cell, and the copy, which wraps, sets
   the height of the cell the textarea fills. At 390px a long title takes two or three lines instead of being cut off. */
.le-title-box { display: grid; flex: 1 1 auto; min-width: 0; }
.le-title-box::after, .le-title-in {
  grid-area: 1 / 1; min-width: 0; width: 100%;
  font: inherit; font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.25;
  word-spacing: inherit;   /* a <textarea> starts at `normal`: Easy reading's .08em on the copy alone made it wrap before the field did */
  padding: .15rem .5rem; border: 1px solid transparent; border-radius: var(--radius);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.le-title-box::after { content: attr(data-value) " "; visibility: hidden; pointer-events: none; }
/* The field itself: the console's field (surface, strong edge, drawn always; audit C5), on top of the sizing it shares with its copy. */
.le-title-in {
  color: var(--text); background: var(--surface-1); border-color: var(--border-strong); box-shadow: none;
  resize: none; overflow: hidden; height: auto; min-height: 0;
}
/* ONE FIELD (2026-10-16, the console's theme; audit C5): the title is a field as every field of the console is, its edge
   always drawn (it showed only under the pointer), round as the console's. */
.le-title-in:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--border-strong)); }
.le-title-in:focus { border-color: var(--brand-fill); background: var(--surface-1); }
.le-title-in[readonly] { pointer-events: none; }
.le-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.le-chips:empty { display: none; }
.le-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end;
              flex: 0 1 auto; margin-left: auto; }
.le-save { min-width: 7.5rem; }
.le-kbd { font: inherit; font-size: .7rem; font-weight: var(--fw-semibold); opacity: .75; padding: .05rem .35rem;
          border-radius: 5px; background: color-mix(in srgb, currentColor 14%, transparent); }

/* The save state, in words. */
.le-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: .25rem .7rem;
           border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-medium);
           color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.le-pill[data-state="dirty"] { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.le-pill[data-state="saving"] { color: var(--info); background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.le-pill[data-state="saved"] { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.le-pill[data-state="error"] { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent);
                               white-space: normal; }
.le-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.le-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
           animation: le-spin .8s linear infinite; }
@keyframes le-spin { to { transform: rotate(360deg); } }
.le-pill-undo { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: .1rem .5rem; border: 0; cursor: pointer;
                border-radius: var(--radius-pill); font: inherit; font-weight: var(--fw-semibold);
                color: inherit; background: color-mix(in srgb, currentColor 13%, transparent); }
.le-pill-undo:hover { background: color-mix(in srgb, currentColor 22%, transparent); }

/* --- tabs inside the lesson --------------------------------------------------- */
/* ONE TAB SYSTEM (2026-10-16, the console's theme; audit C1): the lesson's parts are tabs as the console's own are: words
   on a hairline, the one in force with the console's 3px bar in the accent. It was a segmented box. */
.le-tabs { display: flex; gap: 0 .45rem; margin: 0 0 var(--space-4); padding: 0; overflow-x: auto; scrollbar-width: none;
           background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; width: auto; max-width: 100%; }
.le-tabs::-webkit-scrollbar { display: none; }
.le-tab { appearance: none; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font: inherit; font-size: var(--fs-small);
          font-weight: var(--fw-semibold); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px;
          padding: .55rem .4rem .5rem; margin-bottom: -1px; border-radius: 0; white-space: nowrap;
          transition: color var(--dur-fast) var(--ease); }
.le-tab:hover { color: var(--text); }
.le-tab.is-on { color: var(--text); background: none; box-shadow: none; border-bottom-color: var(--brand-ink); }
.le-tab.is-on .icon { color: var(--brand-ink); }
/* (Re-review R3: the ring is drawn inside the tab, which the row's sideways scroll would clip outside it; the tab keeps
   .4rem at each side so the ring stands clear of its icon and its count. The words keep their spacing: the gap between
   tabs is the old 1.25rem less that room.) */
.le-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The tab row fades at an edge that is cut, like the console's main tabs (console.css .tabs[data-more]); editor.js sets
   data-more from the row's scroll position, and sets nothing when every tab fits. */
.le-tabs[data-more="right"] { --le-fade: 2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--le-fade)), transparent);
                              mask-image: linear-gradient(to right, #000 calc(100% - var(--le-fade)), transparent); }
.le-tabs[data-more="left"] { --le-fade: 2rem; -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--le-fade)), transparent);
                             mask-image: linear-gradient(to left, #000 calc(100% - var(--le-fade)), transparent); }
.le-tabs[data-more="both"] { --le-fade: 2rem; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--le-fade), #000 calc(100% - var(--le-fade)), transparent);
                             mask-image: linear-gradient(to right, transparent, #000 var(--le-fade), #000 calc(100% - var(--le-fade)), transparent); }
.le-count { font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--text-dim); }
.le-count:empty { display: none; }
.le-count::before { content: "\00b7"; margin-right: 4px; }
.le-pane[hidden] { display: none; }
.le-col { max-width: 940px; }
.le-col > .card + .card { margin-top: var(--space-5); }
.le-tab-intro { margin-bottom: var(--space-4); }
.le-tab-intro h3 { margin: 0 0 .2rem; }
.le-sub { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.le-sub h4 { margin: 0 0 var(--space-3); }
.le-readonly { display: flex; align-items: center; gap: var(--space-2); color: var(--text-dim); margin-bottom: var(--space-4); }

/* --- lesson text: writing on the left, the recording on the right -------------- */
.le-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: var(--le-gap); align-items: start; }
.le-write-card { padding: var(--space-5) var(--space-6); }
.le-write-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.le-write-head h3 { margin: 0 0 .15rem; }
textarea.le-body {
  display: block; width: 100%; min-height: 22rem; resize: vertical;
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.78; letter-spacing: .002em;   /* the console's field size (audit C5) */
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text); caret-color: var(--brand-ink);
}
textarea.le-rem { min-height: 14rem; margin-top: var(--space-2); }
.le-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: var(--space-3); font-size: var(--fs-small);
            color: var(--text-dim); font-variant-numeric: tabular-nums; }
.le-stat-dirty { color: var(--warn); font-weight: var(--fw-semibold); }

/* What a save will do — shown while there is something to save. */
.le-impact { margin-top: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border-radius: var(--radius-lg);
             background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--brand-fill) 30%, var(--border));
             box-shadow: inset 4px 0 0 var(--brand-fill), var(--shadow-sm); }
.le-impact[hidden] { display: none; }
.le-impact-h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.le-impact-h .icon { color: var(--brand-ink); }
.le-impact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.le-impact-i { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; line-height: 1.45;
                font-size: var(--fs-small); }
.le-impact-i > .icon { margin-top: 3px; color: var(--info); }
.le-impact-i.tone-warn > .icon { color: var(--warn); }
.le-impact-i.tone-ok > .icon { color: var(--ok); }
.le-impact-i.tone-quiet > .icon { color: var(--text-dim); }
.le-link { color: var(--brand-ink); font-weight: var(--fw-semibold); white-space: nowrap; }

.le-restore { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
              padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--info-soft); color: var(--text);
              border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
.le-restore > .icon { color: var(--info); }

/* --- the preview ------------------------------------------------------------------ */
.le-aside { position: sticky; top: calc(var(--tabs-h, 49px) + var(--le-bar-h, 150px) + 12px);
            max-height: calc(100vh - var(--tabs-h, 49px) - var(--le-bar-h, 150px) - 28px);
            display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.le-aside > .le-impact { margin-top: 0; flex: 0 0 auto; max-height: 48%; overflow-y: auto; }
.le-preview { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); min-height: 14rem; flex: 1 1 auto;
               overflow: hidden; }
.le-aside > * + .card { margin-top: 0; }
.le-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.le-preview-head h3 { margin: 0 0 .1rem; }
.le-player { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-2); }
.le-play { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
           display: inline-flex; align-items: center; justify-content: center;
           background: var(--brand-fill); color: var(--brand-fill-ink); }
.le-play .icon { fill: currentColor; stroke-width: 0; }
.le-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.le-track { flex: 1 1 auto; min-width: 0; }
.le-track .pl-wave { height: 42px; }
.le-seek { width: 100%; }
.le-seek[hidden] { display: none; }
.le-times { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--text-dim);
            font-variant-numeric: tabular-nums; margin-top: 2px; }
.le-note { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--text-dim); }
.le-noaudio { margin: var(--space-3) 0; }
.le-foot { margin: var(--space-2) 0 0; }

/* ONE SEGMENTED CONTROL (2026-10-16, the console's theme; audit C2): a choice of recording or of difficulty is the toggle
   Timeline | Details is (console.css, span.face-switch): one frame in the field's edge, the buttons plain, the one in
   force in the accent on its tint. */
.le-seg { display: inline-flex; gap: 0; padding: 0; border-radius: 7px; background: none; overflow: hidden;
          border: 1px solid var(--border-strong); flex-wrap: wrap; }
.le-seg-btn { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--fs-small);
              font-weight: var(--fw-semibold); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px;
              padding: .3rem .7rem .3rem .4rem; border-radius: 0; min-height: 2rem; }
.le-seg-btn:hover { color: var(--text); background: var(--accent-soft); }
.le-seg-btn.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.le-seg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.le-seg-flag { color: var(--warn); font-weight: var(--fw-bold); }
.q-diff .le-seg-btn { padding-inline: .75rem; }

.le-legend { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-dim);
             padding: var(--space-2) 0; border-top: 1px solid var(--border); margin-top: var(--space-1); }
.le-legend[data-dirty="1"] { color: var(--warn); font-weight: var(--fw-semibold); }
.le-ra { list-style: none; margin: 0 -8px; padding: 0 8px 4px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
         font-size: .92rem; line-height: 1.62; }
.le-ra-p { position: relative; padding: .45rem .7rem; border-radius: var(--radius-sm); margin: 2px 0; color: var(--text);
           border-left: 3px solid transparent; transition: background var(--dur-fast) var(--ease); }
.le-ra-p[role="button"] { cursor: pointer; }
.le-ra-p[role="button"]:hover { background: var(--surface-2); }
.le-ra-p:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.le-ra-p.is-speaking { background: var(--brand-soft); border-left-color: var(--brand-fill); }
.le-ra-p.is-changed { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.le-ra-p.is-added { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 70%, transparent); }
.le-ra-p.is-removed { border-left-color: var(--danger); color: var(--text-dim); }
.le-ra-p.is-removed del { text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.le-ra-p.is-speaking.is-changed { box-shadow: inset 0 0 0 1px var(--brand-fill); }
.le-ra-tag { display: inline-block; margin-right: 6px; padding: 0 .4rem; border-radius: var(--radius-pill);
             font-size: .68rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.is-changed > .le-ra-tag { color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.is-added > .le-ra-tag { color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.is-removed > .le-ra-tag { color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* --- question cards ----------------------------------------------------------------- */
.q-list { display: grid; gap: var(--space-4); }
.qcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
         padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
         transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.qcard.needs-look { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.qcard.is-editing { border-color: color-mix(in srgb, var(--brand-fill) 55%, var(--border)); box-shadow: var(--shadow-md); }
.qcard.is-gone { background: transparent; border-style: dashed; box-shadow: none; padding-block: var(--space-3); }
.q-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.q-num { flex: 0 0 auto; min-width: 2.1rem; text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-bold);
         font-variant-numeric: tabular-nums; color: var(--text-dim); background: var(--surface-2); border-radius: var(--radius-sm); padding: .2rem .4rem;
         margin-top: 1px; }
.q-prompt { flex: 1 1 auto; margin: 0; font-weight: var(--fw-semibold); font-size: 1rem; line-height: 1.45; min-width: 0; }
.q-edit-k { font-weight: var(--fw-semibold); color: var(--brand-ink); }
.q-actions { display: flex; gap: 2px; flex: 0 0 auto; margin: -4px -8px 0 0; }
.q-actions .btn { color: var(--text-dim); }
.q-actions .btn:hover { color: var(--text); }
.q-opts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; }
.q-opt { display: flex; align-items: center; gap: var(--space-3); padding: .45rem .7rem; border-radius: var(--radius);
         background: var(--surface-2); border: 1px solid transparent; line-height: 1.4; }
.q-opt.is-right { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.q-letter { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            font-size: var(--fs-caption); font-weight: var(--fw-bold); background: var(--surface-1); color: var(--text-dim);
            border: 1px solid var(--border); }
.q-opt.is-right .q-letter, .q-edit-opt.is-right .q-letter { background: var(--ok); color: var(--surface-1); border-color: var(--ok); }
.q-opt-text { flex: 1 1 auto; min-width: 0; }
.q-right { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption);
           font-weight: var(--fw-semibold); color: var(--ok); }
.q-explain { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius);
             border-left: 3px solid var(--border-strong); background: var(--surface-2); }
.q-explain p { margin: .1rem 0 0; line-height: 1.5; }
.q-explain-k, .q-verdict-k { font-size: var(--fs-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase;
                             font-weight: var(--fw-semibold); color: var(--text-dim); }
.q-ground { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--space-3); font-size: var(--fs-small);
            color: var(--text-dim); line-height: 1.5; }
.q-ground > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brand-ink); }
.q-ground q { color: var(--text); }
.q-ground-k { font-weight: var(--fw-semibold); }
.q-ground.is-weak > .icon { color: var(--text-dim); }
.q-ground.is-changed, .q-ground.is-missing { color: var(--warn); }
.q-ground.is-changed > .icon, .q-ground.is-missing > .icon { color: var(--warn); }
.q-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: var(--space-3); }
.q-gone { display: flex; align-items: center; gap: var(--space-2); color: var(--text-dim); font-size: var(--fs-small); }
.q-gone > span { flex: 1 1 auto; min-width: 0; }
.q-add-row { margin-top: var(--space-4); }
.le-add { border-style: dashed; width: 100%; justify-content: center; padding-block: .7rem; color: var(--brand-ink);
          background: transparent; }
.le-add:hover { background: var(--brand-soft); border-color: var(--brand-fill); }

/* Editing a question in place. */
.qcard.is-editing .field { margin: var(--space-3) 0 0; }
.qcard.is-editing .field > span { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-small); margin-bottom: .35rem; }
textarea.q-in { min-height: 3.2rem; font-family: var(--font-sans); font-size: .95rem; line-height: 1.5; }
input.q-in { width: 100%; }
.q-edit-opts { display: grid; gap: 6px; }
.q-edit-opt { display: grid; grid-template-columns: 32px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
              padding: 4px 4px 4px 6px; border-radius: var(--radius); border: 1px solid transparent; }
.q-edit-opt.is-right { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.q-mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-1);
          display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; padding: 0; }
.q-mark:hover { border-color: var(--ok); }
.q-mark[aria-checked="true"] { background: var(--ok); border-color: var(--ok); color: var(--surface-1); }
.q-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.q-edit-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-start; }
.q-verdict { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
             background: var(--surface-2); display: grid; gap: 6px; }
.q-verdict-row { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; }
.q-verdict-row > .icon { flex: 0 0 auto; margin-top: 2px; }
.q-verdict-row.is-right > .icon { color: var(--ok); }
.q-verdict-row.is-wrong > .icon { color: var(--info); }
.q-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4);
          padding-top: var(--space-3); border-top: 1px solid var(--border); }
.q-keys { margin-left: auto; }
.q-empty .empty-state { padding-block: var(--space-5); }

/* --- the course page: lesson rows ------------------------------------------------------- */
.lesson-row:has(.lr-grip) { grid-template-columns: 28px 44px minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); }
.lr-grip { width: 28px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0;
           background: none; color: var(--text-dim); border-radius: var(--radius-sm); cursor: grab; touch-action: none; opacity: .7; }
.lr-grip:hover { opacity: 1; background: var(--surface-3); color: var(--text); }
.lr-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; opacity: 1; }
.lr-grip[aria-pressed="true"] { opacity: 1; color: var(--brand-fill-ink); background: var(--brand-fill); cursor: grabbing; }
.lesson-row.is-grabbed, .lesson-row.is-dragging {
  background: var(--surface-1); box-shadow: var(--shadow-lg); position: relative; z-index: 2;
  outline: 2px solid var(--brand-fill); outline-offset: -2px; }
.lesson-row.is-dragging .lr-grip { cursor: grabbing; }
.lr-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lr-rename { opacity: .55; padding: .2rem .35rem; }
.lesson-row:hover .lr-rename, .lr-rename:focus-visible { opacity: 1; }
.lr-rename-in { font: inherit; font-weight: var(--fw-semibold); flex: 1 1 16rem; min-width: 0; padding: .3rem .5rem; }
.lr-prefix { font-variant-numeric: tabular-nums; color: var(--text-dim); background: var(--surface-2); border-radius: var(--radius-sm);
             padding: .1rem .4rem; font-size: var(--fs-small); }
.lr-edit { font-weight: var(--fw-semibold); }
.chip-btn { cursor: pointer; font: inherit; font-size: var(--fs-caption); }
.chip-btn:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px currentColor inset; }
.chip-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* --- the course page: details ---------------------------------------------------------- */
.hero-titlerow { display: flex; align-items: flex-start; gap: var(--space-3); justify-content: space-between; }
.hero-titlerow .hero-title { flex: 1 1 auto; min-width: 0; }
.hero-edit { flex: 0 0 auto; margin-top: 4px; }
.hero-desc { margin: 0 0 4px; color: var(--text); line-height: 1.5; max-width: 70ch; }
.details-card[hidden] { display: none; }
textarea.le-desc { font-family: var(--font-sans); font-size: var(--fs-body); min-height: 5rem; }
.details-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: .55rem var(--space-5); margin: 0; }
.details-dl dt { color: var(--text-dim); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.details-dl dd { margin: 0; line-height: 1.5; }
.details-dirty { color: var(--warn); font-weight: var(--fw-semibold); }
.details-foot { margin-top: var(--space-2); }

/* --- Studio: review mode ------------------------------------------------------------------ */
.rv { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.rv > *, .rv-lesson > *, .le-split > *, .le-panes, .le-pane { min-width: 0; }
.rv-bar { position: sticky; top: var(--tabs-h, 49px); z-index: 15; padding: var(--space-3) var(--space-5);
          background: var(--surface-1);   /* solid: text scrolling under a pinned bar must not show through */
          -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
          border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.rv-bar-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rv-progress { flex: 1 1 14rem; min-width: 10rem; }
.rv-progress-text { font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.rv-meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.rv-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ok);
                   transition: width var(--dur-slow) var(--ease-out); }
.rv-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); list-style: none; padding: 0; }
.rv-note-field { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.rv-note-field input { width: 100%; }
.rv-step { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
           padding: .3rem .65rem; border-radius: var(--radius); border: 1px solid var(--border);
           background: var(--surface-1); color: var(--text-dim); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.rv-step:hover { color: var(--text); border-color: var(--border-strong); }
.rv-step.is-approved { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.rv-step.is-rejected { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.rv-step.is-current { color: var(--brand-fill-ink); background: var(--brand-fill); border-color: var(--brand-fill); }
.rv-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-keys { font-size: var(--fs-caption); color: var(--text-dim); }
.rv-keys kbd { font: inherit; font-weight: var(--fw-bold); padding: 0 .35rem; border-radius: 4px; border: 1px solid var(--border);
               background: var(--surface-2); margin: 0 1px; }
.rv-lesson { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.rv-read { padding: var(--space-6) var(--space-7); }
.rv-read h2 { margin: 0 0 .25rem; font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); }
.rv-source { font-size: var(--fs-small); color: var(--text-dim); margin: 0 0 var(--space-4); }
.rv-prose { font-size: 1.0625rem; line-height: 1.8; max-width: 70ch; }
.rv-prose p { margin: 0 0 1em; }
.rv-side { display: grid; gap: var(--space-4); }
.rv-side .card + .card { margin-top: 0; }
.rv-side h3 { margin: 0 0 var(--space-3); }
.rv-turns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 26rem; overflow-y: auto; }
.rv-turn { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: var(--fs-small); line-height: 1.5; }
.rv-actions { position: sticky; bottom: var(--space-3); z-index: 14; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
              padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border);
              background: var(--surface-1); box-shadow: var(--shadow-lg); }
.rv-actions .grow { flex: 1 1 auto; }
.rv-note { flex: 1 1 16rem; min-width: 0; }
.rv-fold { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
.rv-fold:first-of-type { border-top: 0; }
.rv-fold > summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-small); padding: 2px 0; }
.rv-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.rv-fold .rv-prose { font-size: .95rem; line-height: 1.65; margin-top: var(--space-2); }
.rv-qs { list-style: none; margin: 0; padding: 0; gap: var(--space-3); }
.rv-qs .qcard { padding: var(--space-3) var(--space-4); box-shadow: none; }
.rv-qs .q-prompt { font-size: .95rem; }
.rv-qs .q-opt { padding: .3rem .55rem; font-size: var(--fs-small); }
.rv-qs .q-letter { width: 22px; height: 22px; }
.rv-read .hero-titlerow h2 { flex: 1 1 auto; min-width: 0; }
.rv-done { text-align: center; padding: var(--space-7) var(--space-5); }
.rv-done h2 { margin: var(--space-3) 0 var(--space-2); }

/* --- Studio: "Make available to class" and "What students should leave with" (2026-10-16) ------------------ */
.act-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: .4rem 0 .2rem; padding: var(--space-2) var(--space-3);
            border-radius: var(--radius); background: var(--ok-soft); color: var(--text); font-size: var(--fs-small); line-height: 1.5; }
.act-note > svg { flex: 0 0 auto; margin-top: 2px; color: var(--ok); }
.act-note.is-stale { background: var(--warn-soft); }
.act-note.is-stale > svg { color: var(--warn); }
.act-note.is-draft { background: var(--info-soft); }
.act-note.is-draft > svg { color: var(--info); }
.leave-with { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
              background: var(--surface-2); border: 1px solid var(--border); }
.leave-with-h { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.leave-with p { margin: 0 0 var(--space-2); line-height: 1.55; }
.leave-with-list { margin: 0; padding-left: 1.1rem; line-height: 1.55; }
.leave-with-list li + li { margin-top: 2px; }
.leave-with-edit textarea { width: 100%; min-height: 4.5rem; font-family: var(--font-sans); font-size: var(--fs-body); }

/* --- Easy reading: more room to read and write ------------------------------------------------ */
[data-theme="reading"] textarea.le-body { font-size: 1.15rem; line-height: 1.85; }
[data-theme="reading"] .le-ra { font-size: 1rem; line-height: 1.75; }
[data-theme="reading"] .rv-prose { font-size: 1.15rem; line-height: 1.85; }
[data-theme="reading"] .le-tab, [data-theme="reading"] .le-seg-btn { min-height: 2.75rem; }

/* --- motion --------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .le-spin { animation-duration: 3s; }
  .rv-meter > span, .qcard, .le-ra-p { transition: none; }
}

/* --- tablet and phone ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  /* The save controls on a line of their own, always (see .le-bar-main). */
  .le-chips { flex-basis: 100%; }
  .le-actions { margin: var(--space-1) 0 0; justify-content: flex-start; }
  .le-split, .rv-lesson { grid-template-columns: minmax(0, 1fr); }
  .le-aside { position: static; max-height: none; }
  .le-aside > .le-impact { max-height: none; }
  .le-preview { min-height: 0; }
  .le-ra { max-height: 24rem; }
}
@media (max-width: 700px) {
  .le-bar { position: sticky; top: 0; padding: var(--space-2) var(--space-3) var(--space-3); margin-inline: 0; border-radius: var(--radius); }
  .le-title-box::after, .le-title-in { font-size: var(--fs-h2); }   /* the hidden copy and the field must be set alike */
  .le-bar-main { align-items: stretch; }
  .le-actions { width: 100%; justify-content: space-between; }
  .le-save { flex: 1 1 auto; }
  .le-kbd { display: none; }
  .le-tabs { width: 100%; }
  .le-write-card, .le-preview { padding: var(--space-4); }
  textarea.le-body { padding: var(--space-3); font-size: 1rem; min-height: 16rem; }
  .qcard { padding: var(--space-3) var(--space-4); }
  .q-head { flex-wrap: wrap; }
  .q-actions { order: 3; width: 100%; margin: var(--space-2) 0 0; }
  .q-edit-opt { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .q-edit-opt .q-letter { display: none; }
  .q-keys { display: none; }
  .lesson-row:has(.lr-grip) { grid-template-columns: 24px 36px minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .lesson-row:has(.lr-grip) .lr-actions { grid-column: 3; }
  .lr-grip { width: 24px; }
  .details-dl { grid-template-columns: 1fr; gap: .15rem; }
  .details-dl dd { margin-bottom: .5rem; }
  .rv-read { padding: var(--space-4); }
  .rv-bar { position: static; padding: var(--space-3); }
  .rv-progress { flex-basis: 100%; order: 3; }
  .rv-read h2 { font-size: var(--fs-h2); }
  .rv-read .hero-titlerow { flex-wrap: wrap; }
  .rv-keys { display: none; }
  .rv-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rv-steps li { flex: 0 0 auto; }
  .rv-actions { bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-2); gap: var(--space-1); flex-wrap: nowrap; }
  .rv-actions .rv-nav span { display: none; }
  .rv-actions .btn { padding-inline: .6rem; min-width: 0; }
  .rv-actions .rv-nav { flex: 0 0 auto; }
  .rv-actions .grow { display: none; }
  .rv-actions .btn-primary { flex: 1 1 auto; }
  .le-bar-top .le-kicker { display: none; }
  .le-navtext { display: none; }
  .le-chips .chip { font-size: .7rem; }
}

/* The lesson's tabs in forced colours: an edge that is transparent is drawn in full there, so every tab would carry the bar. */
@media (forced-colors: active) {
  .le-tab { border-bottom-color: Canvas; }
  .le-tab.is-on { border-bottom-color: Highlight; }
  /* The choice in force is an edge in the highlight colour, never an outline: the keyboard's ring is the outline, and
     on the chosen segment it could not be seen (re-review R3). Every segment has the edge's room, so none moves. */
  .le-seg-btn { border: 2px solid Canvas; }
  .le-seg-btn.is-on { border-color: Highlight; }
}

/* THE EDITOR IN THE COURSE PAGE'S MAIN AREA (2026-10-16, QA C4): its box stands inside the timeline's block, whose first rule
   (timeline.css) puts back a bare page's content-box sizing for the room. The editor was drawn for the console's border-box
   (console.css), and its full-width fields grew past their cards by their padding: the console's sizing again, for it. */
.tl .tl-editor, .tl .tl-editor *, .tl .tl-editor *::before, .tl .tl-editor *::after { box-sizing: border-box; }