/* LORE console — the lesson page: the Carousel's Lesson zoom in the faculty workspace (2026-10-14).
 *
 * timeline-lesson.js draws it, and only where the course's page was opened with the workspace on: then Cover Flow holds
 * it at the Lesson zoom (.tl-lp), in place of the room as built. No node carries any of these classes otherwise, and
 * none of these rules then applies. The reader's panel (.tl-reader) is its side, so the reader's own rules dress what
 * is said, the questions and the figures as they dress the room as built's panel; what is here is only where the lesson
 * page stands each of them, its bar, its frame and its parts. Colours are the look's own properties (--tl-...) only;
 * type is the timeline's. Linked after timeline-coverflow.css: a rule here outweighs the panel's at equal weight by
 * coming later.
 *
 * THE FRAME KEEPS 16:9 at every size. On a wide screen 800 px tall or more the page fills the stage, and the frame is as
 * wide as the stage lets it be and never taller than the stage (the stage is a size container: 100cqh is its height),
 * so "What is said", beside it in a column of its own, is never pushed off. On a SHORT screen (980 px wide or more,
 * under 800 px tall) the console's scroll is the only one: see that block, below. Under 980 px the page is one column
 * that the page scrolls: the frame the whole width, still 16:9, then what is said, the questions, and the parts.
 */

/* The page, on a wide screen: the bar across the top; the frame, with what plays under it; the side beside them; the
   parts along the bottom. It stands in the stage as the room as built does (absolutely, filling it). The frame's row
   keeps 220 px, so the frame is never under 356 by 200, the least the plate's words are measured to fit in (seen in a
   browser, 2026-10-14: without a floor it was 79 by 44 at 1024 by 500; fix round 2: at 200 the frame was 320 by 180). The
   page scrolls inside itself only where its own parts cannot fit the stage any other way: a long title cannot cause it,
   since the bar's title is two lines at most (below). */
.tl .tl-lp { position: absolute; inset: 0; box-sizing: border-box; display: grid; gap: 10px 20px; padding: 12px 20px 10px;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 440px); grid-template-rows: auto minmax(220px, 1fr) auto auto;
  grid-template-areas: "bar bar" "stage side" "about side" "parts parts"; overflow-y: auto; scrollbar-width: thin; color: var(--tl-ink2); }

/* THE BAR: the way back, the lesson's heading and where it is, then Previous lesson, Next lesson, Full-screen preview
   and Edit this lesson. It wraps on a narrow window; nothing in it is cut. */
.tl .tl-lp-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.tl .tl-lp-head { flex: 1 1 200px; min-width: 0; }
/* The lesson's title: two lines at most, cut with an ellipsis (fix round 2: at 980 by 800 a 140-character title made the page
   scroll inside itself, 569 in 476). The whole of it is the heading's own text, which a screen reader reads, and its
   tooltip; under 980 px, where the page scrolls as part of the console, it is whole (the narrow block). */
.tl .tl-lp-title { margin: 0; font-size: 19px; line-height: 1.25; color: var(--tl-ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tl .tl-lp-where { margin: 2px 0 0; font-size: 13px; color: var(--tl-ink2); }
.tl .tl-lp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Its buttons a little smaller than the panel's own, so the bar is one row on a laptop's screen. */
.tl .tl-lp-bar .tl-btn { padding: 5px 11px; font-size: 13px; }
.tl .tl-lp-edit:empty { display: none; }
/* A button that cannot be pressed (Previous at the first lesson, Next at the last) is never hidden. It is quiet by its
   colour and a dashed edge, never faded: its words are there to be read. */
.tl .tl-lp-bar .tl-btn:disabled { background: transparent; border-style: dashed; border-color: var(--tl-holo-line); color: var(--tl-muted); cursor: default; }

/* THE FRAME, in its stage: a ground of its own under it, as the professor's slide stands on its stage, so the frame is
   at the middle of something. */
.tl .tl-lp-stage { grid-area: stage; box-sizing: border-box; min-height: 0; min-width: 0; container-type: size; display: flex; align-items: center; justify-content: center;
  padding: 10px; border-radius: 6px; background: var(--tl-holo-soft); }
/* The frame is a COLUMN (fix round 1): the plate, then the narration's player under it, so the plate's words can never
   stand under the player; and a size container, so the plate's words are sized by the frame (cqh: a hundredth of its
   height). With a 140-character title the plate's sentence stood 79 px under the player at 1100 by 800, and its number
   was cut 71 px at the top: the words were centred in a box laid over the player. */
.tl .tl-lp-frame { position: relative; box-sizing: border-box; flex: none; width: min(100%, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden;
  container-type: size; display: flex; flex-direction: column; border: 1px solid var(--tl-holo-line); border-radius: 6px; background: var(--tl-bg2); }
/* A ready video is the frame: it fills it, and is never cut. */
.tl .tl-lp-frame .tl-video { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; object-fit: contain; background: var(--tl-bg); }
/* The title plate: the lesson's number and title, and in small words what the frame would show once a video exists. It
   fills what the player leaves and lays its words out FROM THE TOP, so its number is never cut; the title is three lines
   at most, cut with an ellipsis (the whole of it is the lesson's heading, the frame's name and the title's tooltip); the
   plate's own words fit, in every frame the seven widths and a short screen give (the timeline suite's 9d works it out). */
.tl .tl-lp-plate { flex: 1 1 auto; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: max(3px, 1.6cqh); padding: 4cqh 6cqw 3cqh; overflow: hidden; text-align: center; background: var(--tl-bg2); }
.tl .tl-lp-num { margin: 0; flex: none; font-family: var(--tl-mono); font-weight: 600; font-size: clamp(11px, 4.4cqh, 14px); line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--tl-holo); }
.tl .tl-lp-name { margin: 0; flex: none; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: clamp(15px, 8cqh, 34px); font-weight: 700; line-height: 1.2; color: var(--tl-ink); overflow-wrap: anywhere; }
.tl .tl-lp-says { margin-top: max(2px, 1cqh); margin-right: 0; margin-bottom: 0; margin-left: 0; flex: none; font-size: clamp(12px, 5.4cqh, 15px); line-height: 1.35; color: var(--tl-ink2); }
/* The narration's own player, under the plate, at the frame's foot. */
.tl .tl-lp-sound { flex: none; padding: 0 5cqw 4cqh; }
.tl .tl-lp-sound .tl-audio { display: block; width: 100%; }
/* Full screen: the frame alone, on the look's darkest ground; at its top corner the ways along the course and its own way
   out (Previous lesson, Next lesson, Exit full screen: 2026-10-16, QA C10). */
.tl .tl-lp-frame.tl-lp-full-on { width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--tl-bg); }
.tl .tl-lp-fs-nav { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* What plays, under the frame: what it is and how long, a guess named as one, a failure or a pause, what is out of date. */
.tl .tl-lp-about { grid-area: about; min-width: 0; font-size: 13.5px; }
.tl .tl-lp-about .tl-what { margin: 0; }
.tl .tl-lp-about .tl-what + .tl-what, .tl .tl-lp-about .tl-warn { margin-top: 4px; }
.tl .tl-lp-about .tl-note { margin: 4px 0 0; }
.tl .tl-lp-about .tl-warn { font-size: 13.5px; font-weight: 700; color: var(--tl-warn); }
.tl .tl-lp-note { margin: 4px 0 0; font-size: 13px; color: var(--tl-ink2); }
.tl .tl-lp-note:empty { display: none; }

/* THE SIDE: the reader's panel, "What is said", the questions and how the group is doing. It scrolls inside itself, so
   the frame never pushes it off; it does not slide in as the room as built's panel does. */
.tl .tl-lp .tl-reader { grid-area: side; position: static; inset: auto; width: auto; max-height: none; min-height: 0; min-width: 0; overflow-y: auto;
  transform: none; animation: none; box-shadow: none; }
/* A part: its time and "Play from" on one line, its words under them, the mark of a search or of a view above its words. */
.tl .tl-lp .tl-para { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tl .tl-lp .tl-para .tl-px { flex: 1 0 100%; }
.tl .tl-lp .tl-para .tl-stamp { font-size: 12px; font-weight: 600; color: var(--tl-holo); }
.tl .tl-lp .tl-lp-from { padding: 2px 9px; font-size: 12.5px; }
.tl .tl-lp-group .tl-evidence { margin-top: 0; }

/* THE PARTS, along the bottom: one small block each, in one row that scrolls inside itself. */
.tl .tl-lp-parts { grid-area: parts; min-width: 0; }
.tl .tl-lp-partlist { list-style: none; margin: 0; padding: 4px 4px 6px; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.tl .tl-lp-partlist li { flex: 0 0 auto; }
.tl .tl-lp-part { box-sizing: border-box; width: 150px; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px;
  text-align: left; border: 1px solid var(--tl-holo-line); border-radius: 4px; background: transparent; }
.tl .tl-lp-part:hover { background: var(--tl-holo-soft); }
.tl .tl-lp-pn { font: 600 11.5px var(--tl-mono); letter-spacing: .06em; color: var(--tl-holo); }
.tl .tl-lp-pw { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--tl-ink2); }
.tl .tl-lp-pl { font-size: 12px; color: var(--tl-ink2); }
/* Its own range on the narration's clock, "0:00 to 1:52": two narration stamps (fix round 1). */
.tl .tl-lp-pl .tl-stamp { font-size: 12px; color: var(--tl-ink2); }
/* The part being spoken: a heavier edge and heavier words, never a colour alone. */
.tl .tl-lp-part.tl-lp-on { border-width: 2px; padding: 5px 8px; border-color: var(--tl-holo); background: var(--tl-holo-soft); }
.tl .tl-lp-part.tl-lp-on .tl-lp-pn { font-weight: 700; color: var(--tl-ink); }

/* A narrow screen: one column, the page scrolls it. The frame takes the whole width (16:9 still); the side is part of the
   page, not a box that scrolls. */
@media (max-width: 979px) {
  .tl .tl-lp { position: relative; inset: auto; display: block; padding: 10px 12px 12px; overflow-y: visible; }
  .tl .tl-lp > * + * { margin-top: 12px; }
  .tl .tl-lp-stage { container-type: normal; display: block; padding: 0; background: none; }
  .tl .tl-lp-frame { width: 100%; }
  .tl .tl-lp .tl-reader { overflow-y: visible; }
  .tl .tl-lp-title { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
}
/* A SHORT SCREEN (fix round 1, 2026-10-14): 980 px wide or more, and under 800 px tall. At 800 px and taller the page fills
   the stage and everything of it is in the window at once. Below that it did not fit: the page scrolled inside itself,
   its side inside that, and the console's own scroll outside both (three scrolls at 1024 by 500, and the player under
   the window's foot). Here THE CONSOLE'S SCROLL IS THE ONLY ONE: the block grows with the lesson page (this file's one
   rule outside the page, which holds only while the Carousel shows the page), the page and its side are part of the
   console's page, and the frame keeps 16:9 at the width its column gives it, capped so that its foot, where the player
   is, can stand in the window under the lesson page's bar: the window's height less the console's tab bar and the
   block's edge, what stands above the frame on the page (its padding, its bar, the gaps), and the edge below. Opening a lesson
   brings that foot into the window (timeline-lesson.js, fit(), whose query is this one, word for word). */
@media (min-width: 980px) and (max-height: 799px) {
  /* data-lesson-page: the page sets it on the block while the Carousel SHOWS the lesson page, and only then (after the way
     back to a view the hidden Carousel still holds the page: a rule for any block holding it kept the block grown on the
     Outline, seen in Chrome). It was `:has()`, which Firefox ESR 115 has not: there the block stayed 726 px with its
     overflow hidden, and the player stood under the strip (fix round 2). */
  .tl[data-lesson-page] { height: auto; min-height: max(560px, calc(100vh - var(--tl-top, 49px) - 16px)); min-height: max(560px, calc(100dvh - var(--tl-top, 49px) - 16px)); }
  /* The frame's row is as tall as the frame: the side, beside it and taller, gives its extra height to the row under it
     (seen in Chrome: it stretched the frame's row, and the frame stood in the middle of it, its player under the window). */
  .tl .tl-lp { position: relative; inset: auto; grid-template-rows: auto auto 1fr auto; overflow-y: visible; }
  .tl .tl-lp-stage { container-type: normal; }
  /* --tl-lp-room: the room the frame leaves the window, as fit() MEASURES it from what stands above the frame (seen in
     Chrome: a title of five lines makes the bar 158 px tall, and a cap that took the bar for one row left the player under
     the window); 160 px, a bar of one row, until it has measured. Never under 356 by 200, the wide screen's least. */
  .tl .tl-lp-frame { width: min(100%, max(356px, calc((100vh - var(--tl-lp-room, 160px)) * 16 / 9))); width: min(100%, max(356px, calc((100dvh - var(--tl-lp-room, 160px)) * 16 / 9))); }
  .tl .tl-lp .tl-reader { overflow-y: visible; }
}
/* A finger: every button of the bar, every part and "Exit full screen" are 44 px high at least. */
@media (pointer: coarse), (max-width: 979px) {
  .tl .tl-lp-bar .tl-btn { min-height: 44px; }
  .tl .tl-lp-part { min-height: 44px; }
  .tl .tl-lp .tl-lp-from { min-height: 44px; }
  .tl .tl-lp-exit { min-height: 44px; }
}
/* Less motion: nothing of the lesson page moves of its own (it has nothing that does; said here so that this file holds
   to it on its own). */
@media (prefers-reduced-motion: reduce) {
  .tl .tl-lp * { transition: none; animation: none; }
}
/* Forced colours take away the look's edges: the frame keeps one of the system's own, and the part being spoken an edge
   in the system's highlight. */
@media (forced-colors: active) {
  .tl .tl-lp-frame { border: 1px solid CanvasText; }
  .tl .tl-lp-part.tl-lp-on { border-color: Highlight; }
  .tl .tl-lp-bar .tl-btn:disabled { border-color: GrayText; color: GrayText; }
}