/* Benerra Academy: lesson screen, content blocks, video player, image zoom (Lesson agent).
   Working tokens only (tokens.css), frames not shadows, radius <= 14 px, logical properties, no gradients.
   Files: screens/lesson.js (.lesson*, .lrail*, .lhead*, .lmeta*, .lbanner*, .ltest*, .lfinish*, .lstep*, .lnext*),
   core/content.js (.lc*, .w-* .f-* .c-* .m-*), core/player.js (.vp*), core/zoom.js (.zoom*). */

html.has-zoom, html.has-lesson-panel { overflow: hidden; }

/* =================================================================== page frame (FT-070, FT-072, C4.5)
   Left column (sticky) + one lesson column. The column is --lesson-col wide; the video, text, lists, quotes,
   callouts, steps, pictures, files, test cards, rating block and next-lesson card all fill it (same edges). */
.lesson { display: grid; grid-template-columns: var(--rail) minmax(0, var(--lesson-col)); column-gap: var(--space-10); align-items: start; }
.lesson__col { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; }
.lesson__rail { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-6)); align-self: start; min-inline-size: 0; }
.lesson--viewas .lesson__rail { inset-block-start: calc(var(--topbar-h) + var(--viewas-h) + var(--space-6)); }
.lesson-top { display: none; }
.lesson-wait { display: flex; flex-direction: column; gap: var(--space-6); max-inline-size: var(--lesson-col); }
.lhead-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.lesson .page-head { margin-block-end: 0; }
.lesson .page-title { max-inline-size: none; }
.lesson .page-lead { max-inline-size: none; font-size: var(--fs-read); line-height: var(--lh-body); }
.lmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); min-block-size: 24px; }
.lmeta:empty { display: none; }
.lmeta__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.lfinish, .lnext-slot, .lc [id], .lesson-wait { scroll-margin-block-start: calc(var(--topbar-h) + var(--space-6)); }
.lesson--viewas .lfinish, .lesson--viewas .lc [id] { scroll-margin-block-start: calc(var(--topbar-h) + var(--viewas-h) + var(--space-6)); }
.lfinish:focus, .lc [id]:focus { outline: none; }

@media (max-width: 1279px) { .lesson { column-gap: var(--space-8); } }
/* The narrow rules below (1024, 640, 560, 460 px) are repeated for the admin preview's 375 px phone frame in editor.css. */
@media (max-width: 1023px) {
  .lesson { display: block; max-inline-size: var(--lesson-col); margin-inline: auto; }
  .lesson__rail { display: none; }
  .lesson-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-h-sm); }
}

/* =================================================================== left column and slide-out panel (FT-071) */
.lrail { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
.lrail--side { max-block-size: calc(100dvh - var(--topbar-h) - var(--space-12)); }
.lrail__back {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; min-block-size: var(--row-nav); max-inline-size: 100%;
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
}
.lrail__back:hover { color: var(--text); }
.lrail__back span { min-inline-size: 0; }
.lrail__block { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 0; }
.lrail__title { padding-inline: var(--space-3); }
.lrail__toc { display: flex; flex-direction: column; gap: 2px; min-block-size: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lrail__item {
  position: relative; display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; block-size: var(--row-nav); flex: none;
  padding-inline: var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: start; text-decoration: none;
}
.lrail__item .ell { flex: 1 1 auto; }
.lrail__item:hover { background: var(--surface-hover); color: var(--text); }
.lrail__item.is-active { background: var(--surface-2); color: var(--text); }
/* the list scrolls (overflow), so the focus ring is drawn inside the item, never cut by the list's edges (C4.7.6) */
.lrail__item:focus-visible { outline-offset: -2px; }
.lrail__item.is-active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--brand); }
.lrail__actions { display: flex; flex-direction: column; gap: 2px; padding-block-start: var(--space-3); box-shadow: inset 0 1px 0 var(--line-soft); }
.lrail__item--action .i { color: var(--text-muted); }
.lrail--panel { padding-block-start: var(--space-2); }
.lesson-drawer { z-index: var(--z-drawer); }

/* =================================================================== fallback banner (C5.7.2) */
.lbanner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); box-shadow: var(--frame); color: var(--text-2); font-size: var(--fs-sm); }
.lbanner .i { margin-block-start: 1px; color: var(--text-muted); }
.lbanner__text { min-inline-size: 0; }

/* =================================================================== test cards (FT-070) */
.ltest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ltest__card { padding: var(--space-5) var(--space-6); gap: var(--space-2); }
.ltest__list { display: flex; flex-direction: column; margin: 0; }
.ltest__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); block-size: var(--row-list); box-shadow: inset 0 -1px 0 var(--line-soft); }
.ltest__row:last-child { box-shadow: none; }
.ltest__k { min-inline-size: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.ltest__v { flex: none; max-inline-size: 60%; margin: 0; font-weight: var(--fw-semibold); text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .ltest { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================== content blocks (C3.2.5) */
.lc { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--text); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; min-inline-size: 0; }
.lc > * + * { margin-block-start: var(--space-4); }
.lc > .lc-h2 { margin-block-start: var(--space-12); }
.lc > .lc-h3 { margin-block-start: var(--space-8); }
.lc > .lc-h + * { margin-block-start: var(--space-3); }
.lc > :first-child { margin-block-start: 0; }
.lc-h { font-family: var(--font-serif); font-weight: var(--fw-display); letter-spacing: var(--ls-display); color: var(--text); text-wrap: balance; }
.lc-h2 { font-size: var(--fs-h2); line-height: 1.2; }
.lc-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.lc-p { margin-block-end: 0; }

.w-500 { font-weight: var(--fw-medium); }
.w-600, .w-700 { font-weight: var(--fw-semibold); }
.f-mono { font-family: var(--font-mono); font-size: .92em; }
.f-serif { font-family: var(--font-serif); }
.c-muted { color: var(--text-muted); }
.c-brand { color: var(--brand-text); }
.c-accent { color: var(--accent-text); }
.m-brand, .m-accent, .m-neutral { padding-inline: .2em; border-radius: 4px; color: var(--text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.m-brand { background: var(--mark-brand); }
.m-accent { background: var(--mark-accent); }
.m-neutral { background: var(--mark-neutral); }
.lc-link { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lc-link:hover { text-decoration-thickness: 2px; }

.lc-list { padding-inline-start: 1.4em; }
.lc-list--bullet { list-style: disc; }
.lc-list--number { list-style: decimal; }
.lc-li + .lc-li { margin-block-start: var(--space-2); }
.lc-li::marker { color: var(--text-muted); }
.lc-steps { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.lc-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.lc-step__n {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--radius-control); background: var(--brand); color: var(--on-brand);
  font-family: var(--font-serif); font-size: 17px; font-weight: var(--fw-display); font-variant-numeric: tabular-nums; line-height: 1;
}
.lc-step__body { min-inline-size: 0; padding-block-start: 4px; }

.lc-quote { position: relative; padding-inline-start: var(--space-6); }
.lc-quote::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--accent); }
.lc-quote__text { margin: 0; font-family: var(--font-serif); font-size: 21px; line-height: 1.45; letter-spacing: var(--ls-display); }
.lc-quote__cite { margin-block-start: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

.lc .callout { font-size: var(--fs-h4); line-height: 1.6; }
.lc-callout__text { min-inline-size: 0; overflow-wrap: break-word; }
.lc-divider { block-size: 1px; margin-inline: 0; border: 0; background: var(--line); }
.lc > .lc-divider { margin-block-start: var(--space-8); }
.lc > .lc-divider + * { margin-block-start: var(--space-8); }

/* ---- pictures (C3.12) */
.lc-figure { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.lc-img-frame { position: relative; inline-size: 100%; border-radius: var(--radius-card); background: var(--surface-2); aspect-ratio: 16 / 10; overflow: hidden; }
.lc-img-frame.is-loaded { aspect-ratio: auto; }
.lc-img-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--frame); pointer-events: none; }
.lc-zoom { display: block; position: relative; inline-size: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; cursor: zoom-in; }
.lc-zoom:focus-visible { outline-offset: -2px; }
.lc-img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; }
.lc-zoom__badge {
  position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); display: grid; place-items: center; inline-size: 32px; block-size: 32px;
  border-radius: var(--radius-control); background: var(--zoom-btn); color: var(--zoom-text); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.lc-zoom:hover .lc-zoom__badge, .lc-zoom:focus-visible .lc-zoom__badge { opacity: 1; }
@media (hover: none) { .lc-zoom__badge { opacity: 1; } }
.lc-caption { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }

/* ---- file and external-video cards */
.lc-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-inline-size: 0;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame);
}
.lc-card__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); }
.lc-card__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.lc-card__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.lc-card__meta, .lc-card__note { margin: 0; font-size: var(--fs-sm); line-height: 1.4; }
.lc-card__meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lc-card__action { flex: none; }
@media (max-width: 559px) {
  .lc-card { grid-template-columns: auto minmax(0, 1fr); }
  .lc-card__action { grid-column: 1 / -1; inline-size: 100%; }
}

/* =================================================================== video player (C3.10, FT-073)
   A dark block in both themes (data-theme="dark" on .vp recomputes the tokens). Width = the lesson column. */
.vp { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--bg); color: var(--text); }
.vp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--frame); pointer-events: none; }
.vp:focus-visible { outline-offset: 3px; }
.vp__video { display: block; inline-size: 100%; max-inline-size: 100%; block-size: 100%; object-fit: contain; background: var(--bg); }
.vp .i-play, .vp .i-pause { fill: currentColor; }
.vp__big {
  position: absolute; inset: 0; display: grid; place-items: center; inline-size: 72px; block-size: 72px; margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-card); background: var(--brand); color: var(--on-brand); transition: background-color var(--dur-fast) var(--ease-out);
}
.vp__big:hover { background: var(--brand-hover); }
.vp__wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); pointer-events: none; }
.vp__error { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg); text-align: center; }
.vp__error .i { color: var(--danger); }
.vp__error-text { margin: 0; color: var(--text-2); }

.vp__panel {
  position: absolute; inset-inline: var(--space-3); inset-block-end: var(--space-3); z-index: 2; padding: var(--space-2) var(--space-3) var(--space-1);
  border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--frame); transition: opacity var(--dur-base) var(--ease-out);
}
.vp.is-started.is-playing:not(.is-awake) .vp__panel { opacity: 0; pointer-events: none; }
.vp.is-started.is-playing:not(.is-awake) { cursor: none; }
.vp__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.vp__group { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
.vp__btn {
  display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text); transition: background-color var(--dur-fast) var(--ease-out);
}
.vp__btn:hover { background: var(--surface-hover); }
.vp__time { margin-inline-start: var(--space-2); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }

.vp__seek { position: relative; block-size: 20px; }
.vp__vol { position: relative; flex: none; inline-size: 96px; block-size: 20px; margin-inline-end: var(--space-1); }
.vp__track { position: absolute; inset-block-start: 7px; inset-inline: 7px; block-size: 6px; border-radius: 3px; background: var(--track); overflow: hidden; pointer-events: none; }
.vp__buffered, .vp__played { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }
.vp__buffered { inline-size: calc(var(--bn, 0) * 100%); background: var(--line-strong); opacity: .5; }
.vp__played { inline-size: calc(var(--pn, 0) * 100%); background: var(--brand); }
.vp__range { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; inline-size: 100%; block-size: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.vp__range::-webkit-slider-runnable-track { block-size: 20px; border: 0; background: transparent; }
.vp__range::-moz-range-track { block-size: 20px; border: 0; background: transparent; }
.vp__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 14px; block-size: 14px; margin-top: 3px; border: 0; border-radius: var(--radius-sm); background: var(--brand); }
.vp__range::-moz-range-thumb { inline-size: 14px; block-size: 14px; border: 0; border-radius: var(--radius-sm); background: var(--brand); }
.vp__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.vp__range:disabled { cursor: default; }
.vp__range:disabled::-webkit-slider-thumb { visibility: hidden; }
.vp__range:disabled::-moz-range-thumb { visibility: hidden; }

.vp__speed { position: relative; flex: none; }
.vp__speed-btn {
  min-inline-size: 48px; block-size: 36px; padding-inline: var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text);
  box-shadow: var(--frame); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.vp__speed-btn:hover { background: var(--surface-hover); }
.vp__menu {
  position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--space-2)); z-index: 4; display: flex; flex-direction: column; min-inline-size: 120px; padding: 4px;
  border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--frame-strong);
}
.vp__menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); block-size: 36px; padding-inline: 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: start;
}
.vp__menu-item:hover, .vp__menu-item:focus-visible { background: var(--surface-hover); }
.vp__menu-check { visibility: hidden; }
.vp__menu-item[aria-checked="true"] .vp__menu-check { visibility: visible; }

.vp:fullscreen { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; }
.vp:-webkit-full-screen { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; }
.vp:fullscreen::after { display: none; }
.vp:-webkit-full-screen::after { display: none; }
@media (max-width: 459px) { .vp__skip, .vp__vol { display: none; } .vp__panel { inset-inline: var(--space-2); inset-block-end: var(--space-2); } }

/* =================================================================== finish: rating and test (FT-076, FT-077) */
.lfinish { display: flex; flex-direction: column; gap: var(--space-4); }
.lfinish__steps { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.lstep { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.lstep__n {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--text);
  font-family: var(--font-serif); font-size: 20px; font-weight: var(--fw-display); font-variant-numeric: tabular-nums; line-height: 1;
}
.lstep.is-current .lstep__n { background: var(--brand); color: var(--on-brand); }
.lstep.is-done .lstep__n { background: var(--brand-soft); color: var(--brand-text); }
.lstep__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-inline-size: 0; }
.lstep__body > .field { align-self: stretch; }
.lstep__title { margin: 0; }
.lstep__lead { margin: 0; }
.lstep__msg { align-self: stretch; }
.lstep__msg:empty { display: none; }
.lstep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lstep--rating .field__optional { text-transform: none; }
@media (max-width: 559px) {
  .lstep { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5); }
  .lstep__actions .btn { inline-size: 100%; }
}

/* =================================================================== next-lesson card (FT-081) */
.lnext { gap: var(--space-3); }
.lnext--locked .card__title, .lnext--inactive .card__text { color: var(--text-muted); }
.lnext--ready { box-shadow: var(--frame-brand); }
.lnext .card__foot { padding-block-start: var(--space-3); }

/* =================================================================== closed and missing lesson (FT-079) */
.lesson-closed { display: flex; flex-direction: column; gap: var(--space-4); inline-size: 100%; max-inline-size: 640px; margin-inline: auto; }
.lesson-closed__back { align-self: flex-start; }
.lesson-closed__name { display: block; margin-block-end: var(--space-1); color: var(--text); font-weight: var(--fw-semibold); }

/* =================================================================== image zoom (C3.12, FT-075) */
.zoom { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--zoom-bg); color: var(--zoom-text); animation: fade-in var(--dur-base) var(--ease-out); }
.zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.zoom__caption { flex: 1 1 auto; min-inline-size: 0; margin: 0; color: var(--zoom-muted); font-size: var(--fs-sm); }
.zoom__btn {
  display: inline-flex; align-items: center; flex: none; gap: var(--space-2); block-size: 40px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-control);
  background: var(--zoom-btn); color: var(--zoom-text); font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.zoom__btn:hover { background: var(--zoom-btn-hover); }
.zoom__stage { display: flex; min-block-size: 0; padding-inline: var(--space-4); overflow: auto; overscroll-behavior: contain; }
.zoom__stage:focus { outline: none; }
.zoom__stage:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.zoom__img { display: block; flex: none; max-inline-size: none; margin: auto; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.zoom.is-ready .zoom__img { opacity: 1; }
.zoom__img.is-clickable { cursor: zoom-in; }
.zoom[data-mode="wide"] .zoom__img.is-clickable, .zoom[data-mode="full"] .zoom__img.is-clickable { cursor: zoom-out; }
.zoom__foot { display: flex; justify-content: center; padding: var(--space-2) var(--space-4) var(--space-4); }
.zoom__hint { min-block-size: 40px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--zoom-muted); font-size: var(--fs-sm); }
.zoom__hint:hover { color: var(--zoom-text); background: var(--zoom-btn); }
@media (max-width: 519px) { .zoom__btn-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .zoom__btn { inline-size: 40px; padding-inline: 0; justify-content: center; } }