/* Benerra Academy: lesson builder, lesson list, file import and preview (Lesson editor agent).
   Working tokens only (colours live in tokens.css). Frames are box-shadow insets, radius <= 14 px, no shadows,
   no gradients, logical properties. The canvas draws text with the same classes as the learner view
   (.w-500 .w-600 .w-700 .f-mono .f-serif .c-muted .c-brand .c-accent .m-brand .m-accent .m-neutral). */

/* =================================================================== frame of the builder */
.ed { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ed-top {
  position: sticky; inset-block-start: var(--topbar-h); z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-block: var(--space-3); background: var(--bg); box-shadow: inset 0 -1px 0 0 var(--line);
}
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; min-block-size: var(--control-h-sm); }
.ed-bar__back { flex: none; }
/* The title keeps at least 16ch (about 20 characters; less only when the title itself is shorter) and grows to its
   full length when there is room; its status stays right after it. When the line is too short for that, the action
   group wraps to a line of its own as one unit, so the title never shrinks to a letter (C3.4.1, C4.8.2 at 1280). */
.ed-bar__head { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.ed-bar__title {
  flex: 1 1 auto; inline-size: 16ch; min-inline-size: 0; max-inline-size: max-content; margin: 0;
  font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: var(--lh-snug);
}
.ed-bar__state { flex: none; display: inline-flex; }
.ed-bar__end { display: flex; align-items: center; gap: var(--space-3); flex: none; margin-inline-start: auto; min-width: 0; }
.ed-bar__history { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ed-bar__action { flex: none; display: inline-flex; }
.ed-bar .btn--icon { flex: none; }
.ed-saved { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 30ch; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-saved span { overflow: hidden; text-overflow: ellipsis; }
.ed-saved[data-state="saving"] svg { animation: spin 900ms linear infinite; }
.ed-saved[data-state="error"], .ed-saved[data-state="conflict"] { color: var(--danger-text); }
.ed-saved[data-state="dirty"] { color: var(--text-2); }

.ed-variants { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ed-variants__label { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ed-variants .tabs { flex: 1 1 auto; min-width: 0; gap: var(--space-5); box-shadow: none; }
.ed-variants .tab { min-block-size: 36px; }

/* =================================================================== the formatting shelf */
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.ed-group { display: inline-flex; align-items: center; gap: 2px; padding-inline: var(--space-1); }
.ed-group + .ed-group { box-shadow: inset 1px 0 0 0 var(--line); }
.ed-cell {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); padding: 0; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.ed-cell:hover:not(:disabled) { background: var(--surface-hover); }
.ed-cell:disabled { color: var(--text-faint); background: transparent; }
.ed-cell--wide { inline-size: auto; padding-inline: var(--space-3); }
.ed-cell--style { min-inline-size: 140px; justify-content: space-between; }
.ed-cell--weight { min-inline-size: 96px; justify-content: space-between; }
.ed-cell__text { min-width: 0; max-inline-size: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-cell__caret { flex: none; color: var(--text-muted); }
.ed-cell.is-on { background: var(--brand-soft); box-shadow: inset 0 -3px 0 0 var(--accent); }
.ed-cell[aria-expanded="true"] { background: var(--surface-hover); }
.ed-swatch { display: inline-block; flex: none; inline-size: 14px; block-size: 14px; border-radius: 5px; box-shadow: var(--frame-strong); }
.ed-swatch--color-muted { background: var(--text-muted); }
.ed-swatch--color-brand { background: var(--brand-text); }
.ed-swatch--color-accent { background: var(--accent-text); }
.ed-swatch--mark-brand { background: var(--mark-brand); }
.ed-swatch--mark-accent { background: var(--mark-accent); }
.ed-swatch--mark-neutral { background: var(--mark-neutral); }

/* =================================================================== notices */
.ed-notices { display: flex; flex-direction: column; gap: var(--space-3); }
.ed-notices:empty { display: none; }
.ed-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control); background: var(--brand-soft); color: var(--text); font-size: var(--fs-sm);
}
.ed-hint .i { flex: none; color: var(--text-2); }
.ed-hint .btn { margin-inline-start: auto; }
.ed-hint__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 280px; }
.ed-hint--error { background: var(--danger-soft); box-shadow: var(--frame-danger); }
.ed-hint--error .i { color: var(--danger-text); }
.ed-conflict {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card); background: var(--danger-soft); box-shadow: var(--frame-danger); color: var(--text);
}
.ed-conflict > .i { color: var(--danger-text); flex: none; }
.ed-conflict__text { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.ed-conflict__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* =================================================================== body: canvas and properties */
.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--props); gap: var(--gutter); align-items: start; min-width: 0; }
@media (max-width: 1099px) { .ed-body { grid-template-columns: minmax(0, 1fr); } }
.ed-stage { min-width: 0; }
.ed-props {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-4);
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame);
  position: sticky; inset-block-start: calc(var(--topbar-h) + 180px); max-block-size: calc(100vh - var(--topbar-h) - 200px); overflow-y: auto;
}
@media (max-width: 1099px) { .ed-props { position: static; max-block-size: none; overflow: visible; } }
.ed-props .tabs { gap: var(--space-5); }
.ed-pane { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ed-empty { padding-block: var(--space-4); }
.ed-chipfield .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ed-seg .seg { max-inline-size: 100%; }
.ed-roles { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-3); }
.ed-audience { display: flex; flex-direction: column; }
.ed-lang { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); }
.ed-lang .i { flex: none; margin-block-start: 2px; }
.ed-test { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); }
.ed-test__title { max-inline-size: 100%; font-weight: var(--fw-medium); }
.ed-info { display: flex; flex-direction: column; margin: 0; }
.ed-info__row { display: flex; justify-content: space-between; gap: var(--space-3); min-block-size: var(--row-nav); align-items: center; font-size: var(--fs-sm); box-shadow: inset 0 -1px 0 0 var(--line-soft); }
.ed-info__row dt { color: var(--text-muted); flex: none; }
.ed-info__row dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.ed-blockhead { display: flex; }
.ed-filerow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--field-h); padding-inline: var(--space-3) var(--space-2); border-radius: var(--radius-control); background: var(--surface-2); }
.ed-filerow__text { display: flex; flex-direction: column; min-width: 0; }
.ed-filerow__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; }
.ed-filerow__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.ed-filerow__btns { display: flex; gap: var(--space-1); flex: none; }

/* =================================================================== the canvas */
.ed-canvas {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  max-inline-size: calc(var(--lesson-col) + 96px); margin-inline: auto; min-width: 0; padding-block: var(--space-4) var(--space-10);
  font-size: var(--fs-read); line-height: var(--lh-read); hyphens: auto; -webkit-hyphens: auto;
}
.ed-blocks { display: flex; flex-direction: column; min-width: 0; }
.ed-block, .ed-text, .ed-main { scroll-margin-block: calc(var(--topbar-h) + 200px) 80px; }
.ed-canvas .w-500 { font-weight: var(--fw-medium); }
.ed-canvas .w-600, .ed-canvas .w-700 { font-weight: var(--fw-semibold); }
.ed-canvas .f-mono { font-family: var(--font-mono); font-size: .92em; }
.ed-canvas .f-serif { font-family: var(--font-serif); }
.ed-canvas .c-muted { color: var(--text-muted); }
.ed-canvas .c-brand { color: var(--brand-text); }
.ed-canvas .c-accent { color: var(--accent-text); }
.ed-canvas .m-brand, .ed-canvas .m-accent, .ed-canvas .m-neutral { padding-inline: .2em; border-radius: 4px; color: var(--text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ed-canvas .m-brand { background: var(--mark-brand); }
.ed-canvas .m-accent { background: var(--mark-accent); }
.ed-canvas .m-neutral { background: var(--mark-neutral); }
.ed-canvas u { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ed-canvas a { color: var(--brand-text); text-decoration: underline; cursor: text; }

.ed-block {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: start; column-gap: var(--space-2);
  padding-block: var(--space-1); border-radius: var(--radius-control); min-width: 0;
}
.ed-block__body { grid-column: 2; min-width: 0; }
.ed-block > .ed-handle { grid-column: 1; }
.ed-block > .ed-more { grid-column: 3; }
.ed-block:hover { box-shadow: var(--frame-soft); }
.ed-block.is-selected { box-shadow: var(--frame-brand-2); background: var(--surface); }
.ed-block.is-invalid { box-shadow: var(--frame-danger); }
.ed-block.is-dragging { opacity: .5; }
.ed-block:focus-visible { outline: none; box-shadow: var(--frame-brand-2); }
.ed-handle, .ed-more { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.ed-block:hover .ed-handle, .ed-block:hover .ed-more, .ed-block:focus-within .ed-handle, .ed-block:focus-within .ed-more, .ed-block.is-selected .ed-handle, .ed-block.is-selected .ed-more { opacity: 1; }
@media (hover: none) { .ed-handle, .ed-more { opacity: 1; } }
.ed-handle {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; padding: 0; margin-block-start: var(--space-1);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: grab;
}
.ed-handle:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.ed-handle:active:not(:disabled) { cursor: grabbing; }
.ed-handle:disabled { color: var(--text-faint); cursor: not-allowed; }
.ed-more.btn--icon { inline-size: 28px; min-block-size: 28px; margin-block-start: var(--space-1); }
.ed-block__error { grid-column: 2; display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); font-size: var(--fs-sm); color: var(--danger-text); }

.ed-gap { position: relative; block-size: 12px; display: flex; align-items: center; justify-content: center; }
.ed-add {
  position: absolute; z-index: 1; inset-block-start: 50%; translate: 0 -50%; inline-size: 24px; block-size: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2); box-shadow: var(--frame-strong); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.ed-gap:hover .ed-add, .ed-add:focus-visible, .ed-canvas.is-empty .ed-add { opacity: 1; }
@media (hover: none) { .ed-add { opacity: 1; } }
.ed-gap.is-drop::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 3px; translate: 0 -50%; border-radius: 2px; background: var(--accent); }

/* ----------------------------------------------------------------- text hosts */
.ed-text { min-width: 0; min-block-size: 1.65em; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; caret-color: var(--text); }
.ed-text:empty::before { content: attr(data-ph); color: var(--text-faint); pointer-events: none; }
.ed-text:focus-visible { outline: none; }
.ed-text--paragraph { font-size: var(--fs-read); line-height: var(--lh-read); }
.ed-text--heading { font-family: var(--font-serif); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: var(--lh-snug); margin: 0; }
.ed-text--h2 { font-size: var(--fs-h2); margin-block-start: var(--space-3); }
.ed-text--h3 { font-size: var(--fs-h3); margin-block-start: var(--space-2); }
.ed-quote { position: relative; margin: 0; padding-inline-start: var(--space-6); }
.ed-quote::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--accent); }
.ed-quote .ed-text--quote { font-family: var(--font-serif); font-size: 21px; line-height: 1.45; letter-spacing: var(--ls-display); }
.ed-cite { margin-block-start: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted); }
.ed-callout { margin: 0; }
.ed-callout .ed-text { font-size: var(--fs-body); line-height: var(--lh-body); }
.ed-callout .callout__head { user-select: none; -webkit-user-select: none; }
.ed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); counter-reset: ed-n; }
.ed-item { position: relative; padding-inline-start: 1.4em; counter-increment: ed-n; }
.ed-item::before { position: absolute; inset-inline-start: 0; inset-block-start: 0; color: var(--text-muted); user-select: none; -webkit-user-select: none; }
.ed-list--bullet .ed-item::before { content: "\2022"; color: var(--text-muted); }
.ed-list--number .ed-item::before { content: counter(ed-n) "."; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.ed-list--steps .ed-item { padding-inline-start: 52px; min-block-size: 36px; }
.ed-list--steps .ed-item::before {
  content: counter(ed-n); inset-block-start: 0; inline-size: 36px; block-size: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control); background: var(--brand); color: var(--on-brand); font-family: var(--font-serif); font-weight: var(--fw-display); font-size: 17px; text-align: center;
}
.ed-divider { margin: var(--space-4) 0; border: 0; block-size: 1px; background: var(--line-strong); }

/* ----------------------------------------------------------------- objects */
.ed-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ed-img { display: block; max-inline-size: 100%; max-block-size: 560px; inline-size: 100%; block-size: auto; object-fit: contain; border-radius: var(--radius-card); box-shadow: var(--frame); }
.ed-caption { font-size: var(--fs-sm); color: var(--text-muted); }
.ed-choose {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); inline-size: 100%; min-block-size: 140px; padding: var(--space-5);
  border: 0; border-radius: var(--radius-card); background: var(--surface-2); color: var(--text-2); box-shadow: var(--frame-strong); font-size: var(--fs-body);
}
.ed-choose:hover { background: var(--surface-hover); }
.ed-videobox { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 180px; border-radius: var(--radius-card); background: var(--surface-inverse); color: var(--on-inverse); overflow: hidden; }
.ed-img--poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .5; border-radius: 0; box-shadow: none; }
.ed-videobox__label { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); max-inline-size: 90%; font-weight: var(--fw-medium); }
.ed-file { display: flex; align-items: center; gap: var(--space-4); min-block-size: 72px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.ed-file__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-control); background: var(--surface-2); }
.ed-file__text { display: flex; flex-direction: column; min-width: 0; }
.ed-file__title { font-weight: var(--fw-semibold); }
.ed-file__note, .ed-file__meta { font-size: var(--fs-sm); color: var(--text-muted); }

/* ----------------------------------------------------------------- main media */
.ed-main { margin-block-end: var(--space-4); padding: var(--space-3); border-radius: var(--radius-card); min-width: 0; }
.ed-main.has-media { box-shadow: var(--frame); }
.ed-main.is-selected { box-shadow: var(--frame-brand-2); }
.ed-main.is-invalid { box-shadow: var(--frame-danger); }
.ed-main:empty { display: none; }
.ed-main__empty { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); }
.ed-main__hint { flex: 1 1 240px; }
.ed-main__buttons { display: flex; gap: var(--space-2); }
.ed-main__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-2); }
.ed-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 36px; padding-inline: var(--space-3); border: 0; border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); box-shadow: var(--frame-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.ed-chip:hover { background: var(--surface-hover); }

/* ----------------------------------------------------------------- uploads in progress */
.ed-uploads { display: flex; flex-direction: column; gap: var(--space-2); }
.ed-uploads:empty { display: none; }
.ed-upload { display: flex; align-items: center; gap: var(--space-3); min-block-size: 56px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--frame); }
.ed-upload__main { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.ed-upload__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ed-upload__track { position: relative; display: block; block-size: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.ed-upload__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--p, 0%); background: var(--brand); transition: inline-size var(--dur-base) var(--ease-out); }
.ed-upload__status { font-size: var(--fs-xs); color: var(--text-muted); }
.ed-upload.is-failed .ed-upload__status { color: var(--danger-text); }
.ed-upload.is-failed .ed-upload__fill { background: var(--danger); }

/* read-only view */
.ed-readonly-view { max-inline-size: var(--lesson-col); margin-inline: auto; padding-block: var(--space-4); }

/* =================================================================== lesson list */
.ed-listbar { margin-block-end: var(--space-4); }
.ed-listcount { margin-block-end: var(--space-2); font-size: var(--fs-sm); }
.ed-langs { display: inline-flex; gap: var(--space-1); flex: none; }
.ed-langchip { display: inline-block; flex: none; padding-inline: 6px; min-inline-size: 28px; block-size: 22px; line-height: 22px; text-align: center; border-radius: var(--radius-sm); box-shadow: var(--frame-strong); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--text-2); }
.ed-langchip.is-original { background: var(--brand); color: var(--on-brand); box-shadow: none; }

/* =================================================================== import */
.ed-importpage { display: flex; flex-direction: column; gap: var(--space-5); max-inline-size: var(--narrow-wide); }
.ed-importpage > .btn { align-self: flex-start; }
.ed-import { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ed-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-block-size: 220px; padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame-strong); text-align: center; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ed-drop:hover, .ed-drop.is-over { background: var(--brand-soft); box-shadow: var(--frame-brand-2); }
.ed-drop__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.ed-import__how { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); }
.ed-import__how .i { margin-block-start: 2px; }
.ed-import__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ed-import__linkhint { flex: 1 1 260px; font-size: var(--fs-sm); }
.ed-filecard { display: flex; align-items: center; gap: var(--space-4); min-block-size: 64px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.ed-filecard__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ed-filecard__name { font-weight: var(--fw-semibold); }
.ed-import__parsing { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; color: var(--text-2); }
.ed-import__leave { font-size: var(--fs-sm); }
.ed-import__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ed-sum { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.ed-sum__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); }
.ed-sum__list--warn { flex-direction: column; flex-wrap: nowrap; gap: var(--space-1); font-size: var(--fs-sm); color: var(--warn-text); }

/* =================================================================== preview */
.pv { display: flex; flex-direction: column; gap: var(--space-4); }
.pv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pv-stage { display: flex; justify-content: center; padding-block: var(--space-4); min-width: 0; }
.pv-frame { min-width: 0; inline-size: 100%; border-radius: var(--radius-card); background: var(--bg); box-shadow: var(--frame); }
.pv-frame--desktop { max-inline-size: calc(var(--rail) + var(--space-10) + var(--lesson-col) + 2 * var(--space-6)); padding: var(--space-8) var(--space-6); }
.pv-frame--phone { max-inline-size: 375px; padding: var(--space-5) var(--space-4); box-shadow: var(--frame-strong); }
/* The frame holds the learner's own lesson page (screens/lesson.js, lesson.css). lesson.css switches to the phone layout by
   the window width; the phone frame is 375 px inside a wide window, so it takes the same narrow rules here
   (lesson.css: below 1024, 640, 560 and 460 px). Keep the two in step. */
.pv-frame--phone .lesson { display: block; max-inline-size: var(--lesson-col); margin-inline: auto; }
.pv-frame--phone .lesson__rail { display: none; }
.pv-frame--phone .lesson-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-h-sm); }
.pv-frame--phone .ltest { grid-template-columns: minmax(0, 1fr); }
.pv-frame--phone .lc-card { grid-template-columns: auto minmax(0, 1fr); }
.pv-frame--phone .lc-card__action { grid-column: 1 / -1; inline-size: 100%; }
.pv-frame--phone .lstep { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5); }
.pv-frame--phone .lstep__actions .btn { inline-size: 100%; }
.pv-frame--phone .vp__skip, .pv-frame--phone .vp__vol { display: none; }
.pv-frame--phone .vp__panel { inset-inline: var(--space-2); inset-block-end: var(--space-2); }

/* =================================================================== small screens */
@media (max-width: 719px) {
  .ed-top { position: static; box-shadow: none; }
  .ed-block { grid-template-columns: 20px minmax(0, 1fr) 20px; column-gap: var(--space-1); }
  .ed-handle { inline-size: 20px; }
  .ed-more.btn--icon { inline-size: 20px; min-inline-size: 20px; }
  .ed-saved { max-inline-size: 100%; }
  .ed-bar__end { flex: 1 1 100%; flex-wrap: wrap; margin-inline-start: 0; }
  .ed-variants { flex-wrap: wrap; }
  .ed-cell--style { min-inline-size: 120px; }
}