/* LORE console — Cover Flow: the faculty workspace's Carousel at the Course and Stack zooms (2026-10-13).
 *
 * timeline-coverflow.js draws it, and only where the course's page was opened with the workspace on: then the room
 * the page builds holds Cover Flow's own space (.tl-space.tl-cf) at the Course and Stack zooms, and the room as built
 * at the Lesson zoom. No node carries any of these classes otherwise, and none of these rules then applies.
 *
 * Its covers are the room's own cards (.tl-card), so every look dresses them as it dresses a lesson's card: their
 * grounds, their edges, the colours of their words and tags, their sharp text (--tl-u). What is here is only what
 * Cover Flow adds: a frame that does not move, clean covers, a stack's two thin edges, the caption and the three
 * buttons under the cover. Colours are the look's own properties (--tl-...) only; type is the timeline's. Linked after
 * timeline.css: a rule here outweighs the room's at equal weight by coming later.
 */

/* The room stands in a frame that does not move: no drift, and nothing leans toward the pointer (the room as built
   stands in .tl-drift, which sways for as long as the page is open in two of the looks). */
.tl .tl-cf-frame { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* The floor is faint under the covers (it runs back to the eye's height, behind the cover in the middle). */
.tl .tl-cf .tl-floor { opacity: .18; }
/* EVERY COVER IS SOLID. A neighbour waits partly behind the cover in the middle, and the hologram look's card is glass
   (its gradient is 92 to 94 per cent opaque): the neighbour's words showed through its edge. Here a card stands on the
   look's own solid ground, under its gradient. Only the colour is set (never the picture), and with the weight of one
   class (:where): a look whose card has a solid colour of its own, scholastic's paper and dusk's charcoal, keeps it. */
.tl .tl-cf :where(.tl-card) { background-color: var(--tl-bg); }
/* CLEAN COVERS. The one in the middle is known by being there, square to her, and by its edge in the look's ink
   (the room's own rule for the selected one); the corner marks the room as built draws on a lesson in front go. */
.tl .tl-cf .tl-card.tl-pop::before { display: none; }
/* THE KEYBOARD ON A COVER CAN BE SEEN (fix round 1). A cover is no tab stop (tabindex -1), but the page puts the
   keyboard on the one in the middle after Esc from a lesson, after an arrow pressed on a cover and after "Got it";
   console.css takes the ring from every [tabindex="-1"] (a heading focused by code), and outweighed the room's ring.
   Here a cover's ring is the room's own: the look's ring colour, two of the cover's pixels wide, three outside it. */
.tl .tl-cf .tl-card:focus-visible { outline: calc(2 * var(--tl-u)) solid var(--tl-holo); outline-offset: calc(3 * var(--tl-u)); }
/* A cover further off is a shape: its words are not drawn, so no faded word stands anywhere in the room (and it carries
   no edge either: an edge says something only where words say it too). */
.tl .tl-cf .tl-cf-blank > * { visibility: hidden; }
/* THE RAIL'S TIMES STAY IN THE ROOM (fix round 1: on a phone the last ran past its edge). The first stands from its tick
   to the right, the last from its tick to the left; the middle one, as in the room as built, about its own. */
.tl .tl-cf .tl-lbl.tl-cf-from { transform: translate3d(var(--tl-x, 0px), var(--tl-y, 0px), var(--tl-z, 0px)); }
.tl .tl-cf .tl-lbl.tl-cf-to { transform: translate3d(var(--tl-x, 0px), var(--tl-y, 0px), var(--tl-z, 0px)) translateX(-100%); }
/* A STACK'S COVER: one readable cover, in place of a pane for each of its lessons. Two thin edges behind it, in the
   look's line colour with its ground between, say that it is a stack; its count says how many, in words. */
.tl .tl-cf .tl-card.tl-cf-stack { box-shadow: calc(3 * var(--tl-u)) calc(3 * var(--tl-u)) 0 var(--tl-bg), calc(4 * var(--tl-u)) calc(4 * var(--tl-u)) 0 var(--tl-holo-line),
  calc(7 * var(--tl-u)) calc(7 * var(--tl-u)) 0 var(--tl-bg), calc(8 * var(--tl-u)) calc(8 * var(--tl-u)) 0 var(--tl-holo-line); }
.tl .tl-cf .tl-cf-stack .tl-sl { font-size: calc(17 * var(--tl-u)); line-height: 1.2; }
/* Its tags may take a second line: on a stack they are counts ("2 narrations out of date"), and none is cut. */
.tl .tl-cf .tl-cf-stack .tl-cs { flex-wrap: wrap; row-gap: calc(3 * var(--tl-u)); }

/* UNDER THE COVER: where she is, then Previous, Open and Next. timeline-coverflow.js sets how far down it starts (under
   the cover, or under the Stack zoom's short rail). It stands over the room's vignette, on the room's own ground. */
.tl .tl-cf-foot { position: absolute; left: 12px; right: 12px; top: 66%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; pointer-events: none; }
.tl .tl-cf-foot > * { pointer-events: auto; }
.tl .tl-cf-cap { margin: 0; max-width: min(640px, 100%); font-size: 13.5px; line-height: 1.4; color: var(--tl-ink2); }
/* The first line is the place and the name. A long title takes two lines at most (the whole of it is in the cover's
   name, and in the tooltip here), and a long word breaks: the buttons under it are never pushed off the room. */
.tl .tl-cf-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tl-ink); }
.tl .tl-cf-detail { display: block; margin-top: 2px; }
.tl .tl-cf-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tl .tl-cf-nav .tl-btn { min-width: 104px; }
/* A button that cannot be pressed (Previous at the first, Next at the last) is never hidden. It is quiet by its colour
   and a dashed edge, not by fading: its word is there to be read. */
.tl .tl-cf-nav .tl-btn:disabled { background: transparent; border-style: dashed; border-color: var(--tl-holo-line); color: var(--tl-muted); cursor: default; }
/* On a phone the caption is a little smaller, and the buttons stand closer. */
.tl .tl-space.tl-cf.tl-tall .tl-cf-foot { gap: 8px; }
.tl .tl-space.tl-cf.tl-tall .tl-cf-cap { font-size: 12.5px; }
.tl .tl-space.tl-cf.tl-tall .tl-cf-lead { font-size: 15px; }
.tl .tl-space.tl-cf.tl-tall .tl-cf-nav { gap: 8px; }
/* THE FIRST-VISIT LINE GIVES WAY FIRST (fix round 2). On a short screen, where Cover Flow shows, the page folds the
   line (it is in the bar, over the room) to one line: its words cut where the line ends, "More", which opens it, and
   "Got it". A screen reader still reads the words whole: this is only how they are drawn. */
.tl .tl-cf-fold { min-width: 0; align-items: center; padding-top: 4px; padding-bottom: 4px; }
.tl .tl-cf-fold p { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .tl-cf-fold .tl-btn { padding-top: 3px; padding-bottom: 3px; }
/* A LOW ROOM (under 300 px tall: timeline-coverflow.js marks it): the caption says where she is and where that is on
   the course on one line where they fit, two lines at most, and the buttons stand closer, so the covers keep more of
   their size. Every word is still there (and in the cover's name, and in the live line). */
.tl .tl-cf-low .tl-cf-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tl .tl-cf-low .tl-cf-lead { display: inline; }
.tl .tl-cf-low .tl-cf-detail { display: inline; margin: 0 0 0 10px; }
.tl .tl-cf-low .tl-cf-foot { gap: 6px; }

/* A finger: each of the three buttons is 44px tall at least (the room's .tl-btn already is, here), and wide enough. */
@media (pointer: coarse), (max-width: 979px) {
  .tl .tl-cf-nav .tl-btn { min-height: 44px; min-width: 88px; }
}
/* Less motion: no slide between covers; the change is immediate. (timeline.css says so for the room's every moving
   part; it is said here again for Cover Flow's, so that this file holds to it on its own.) */
@media (prefers-reduced-motion: reduce) {
  .tl .tl-cf .tl-world, .tl .tl-cf .tl-at { transition: none; }
}
/* Forced colours take away the glow and the look's edge colour: the cover in the middle keeps an edge in the system's
   highlight, and a button that cannot be pressed is drawn in the system's grey. */
@media (forced-colors: active) {
  .tl .tl-cf .tl-card.tl-sel, .tl .tl-cf .tl-card.tl-pop { border: 2px solid Highlight; }
  .tl .tl-cf-nav .tl-btn:disabled { border-color: GrayText; color: GrayText; }
}