/* LORE console — the faculty course page in the console's own theme, laid out as Shawn's study (2026-10-16).
 *
 * EVERY THEME IS THE WHOLE CONSOLE'S (console.css). On the faculty course page (the course timeline with the faculty
 * workspace, timeline-page.js) the block wears the look of the theme in force and has no look picker of its own:
 * under Hologram, Scholastic and Dusk it is that look of the timeline (timeline.css), whose colours those themes
 * share; under LORE Blue, Dark, Light and Easy reading it is the "console" look, defined here: the timeline's
 * properties (--tl-...) read from the console's own tokens, so the block and the console around it are one palette,
 * and the room is drawn flat (no glow, no scan lines, no drift), as Shawn's study is.
 *
 * Then the TOP OF THE BLOCK, in every look, as the top of his study (course-map-assets.html, .top / .coursebar /
 * .tabs): the course's title and its one line, the search and Timeline | Details beside them, quieter; the row of
 * views under them as text tabs, the one showing underlined, on a hairline across the block; then, under that line,
 * the tools of the views that have them (the carousel's highlights, its out-of-date count and its zoom; the
 * Outline's highlights and count). All of it is under .tl[data-view], which only a page with the workspace has.
 *
 * Linked after every other stylesheet of the timeline and the workspace: a rule here that ties one of theirs wins by
 * coming later. Nothing here names a class that is not the timeline's (tl-...).
 */

/* ==== The console look: the timeline's properties, from the console's tokens ==== */
.tl[data-look="console"] { color-scheme: dark;
  --tl-bg: var(--bg); --tl-bg2: var(--surface-1); --tl-ink: var(--text); --tl-ink2: var(--text-dim); --tl-muted: var(--text-dim);
  --tl-holo: var(--accent); --tl-holo-line: var(--border); --tl-holo-soft: var(--accent-soft);
  --tl-glass: var(--surface-1); --tl-on-holo: var(--on-accent);
  --tl-warn: var(--warn); --tl-warn-soft: var(--warn-soft); --tl-ok: var(--ok);
  --tl-hit: var(--ok); --tl-struggle: var(--info); --tl-struggle-soft: var(--info-soft); --tl-ghost: var(--border-strong);
  --tl-sans: var(--font-sans); --tl-mono: var(--font-sans); --tl-field-line: var(--border-strong);
  /* His page's own ground, framed by his hairline, at the console's card's own radius; figures in tabular numerals,
     never a monospace. */
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius-lg); font-variant-numeric: tabular-nums; }
[data-scheme="light"] .tl[data-look="console"] { color-scheme: light; }
/* The room, flat, as every page of the console is under these themes (2026-10-16, QA T9): no floor grid, no pool of
   shadow, no shadow under a card; a card is told apart by its edge and its ground, as the console's cards are. */
.tl[data-look="console"] .tl-space::after { background: none; }
.tl[data-look="console"] .tl-drift { animation: none; }
.tl[data-look="console"] .tl-floor { background: none; }
.tl[data-look="console"] .tl-card { background: var(--surface-2); border-color: var(--border-strong); box-shadow: none; }
.tl[data-look="console"] .tl-card::after { display: none; }
.tl[data-look="console"] .tl-card.tl-sel { border-color: var(--accent); box-shadow: none; }
.tl[data-look="console"] .tl-card.tl-pop, .tl[data-look="console"] .tl-card.tl-held { border-color: var(--accent); background: var(--surface-3); box-shadow: none; }
.tl[data-look="console"] .tl-card.tl-todo { border-color: var(--warn); }
.tl[data-look="console"] .tl-card.tl-miss { border-color: var(--info); background: var(--info-soft); box-shadow: none; }
.tl[data-look="console"] .tl-card.tl-hit { border-color: var(--ok); background: var(--ok-soft); box-shadow: none; }
.tl[data-look="console"] .tl-shade { background: var(--surface-1); }
.tl[data-look="console"] .tl-pool { background: none; }
.tl[data-look="console"] .tl-rail, .tl[data-look="console"] .tl-span, .tl[data-look="console"] .tl-prog { box-shadow: none; }
.tl[data-look="console"] .tl-num { -webkit-text-stroke: 0; color: var(--border); }
.tl[data-look="console"] .tl-playhead { background: linear-gradient(to bottom, transparent, var(--warn) 35%, var(--warn)); box-shadow: none; }
.tl[data-look="console"] .tl-glyph, .tl[data-look="console"] .tl-find, .tl[data-look="console"] .tl-hud .tl-nav { background: var(--surface-1); }
.tl[data-look="console"] .tl-find:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.tl[data-look="console"] .tl-results { background: var(--surface-1); box-shadow: var(--shadow-lg); }
.tl[data-look="console"] .tl-tag.tl-hit { background: var(--ok-soft); }
.tl[data-look="console"] .tl-plate .tl-tag.tl-hit { --tl-tint: var(--ok-soft); }
.tl[data-look="console"] .tl-strip button[aria-current="true"] i, .tl[data-look="console"] .tl-strip button i .tl-hm { box-shadow: none; }
.tl[data-look="console"] .tl-reader { background: var(--surface-1); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tl[data-look="console"] .tl-drawer { background: var(--surface-1); border-left-color: var(--border); box-shadow: var(--shadow-lg); }
.tl[data-look="console"] .tl-flow .tl-flowrow { background: var(--surface-1); border-color: var(--border-strong); box-shadow: none; }
/* A chip is his bordered button on the page's ground; one that is on is his pressed filter: his blue, on its tint,
   with its edge in his blue (not a solid fill). Its words hold 8.4:1 (LORE Blue) and 5.3:1 (Light) on the tint. */
.tl[data-look="console"] .tl-chip { background: transparent; }
.tl[data-look="console"] .tl-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tl[data-look="console"] .tl-chip[aria-pressed="true"] .tl-sw { border-color: var(--accent); }

/* ==== ONE SCALE FOR THE BLOCK'S TYPE (fix round 1, M3 and L5). Every size of type on the faculty course page is a size
   times --tl-fs: 1, and under the console's Easy reading theme 1.2 (its 18px body over the console's 15px). So Easy
   reading reaches every text of every view by one property, with no list of what to enlarge.
   And no text is then smaller than the console's own smallest under Easy reading (--tl-fs-min: its --fs-caption, 15px;
   0px under every other theme), as the console's captions are not: each size is max(var(--tl-fs-min), <size>).
   A VIEW sizes its type as max(var(--tl-fs-min), calc(<px> * var(--tl-fs))), or from the console's var(--fs-*) (which
   Easy reading enlarges too), never in bare pixels: the theme suite fails on a size of type in a view's stylesheet that
   is neither (the contract, 7).
   THE SHELL'S OWN SIZES (timeline.css and the workspace's stylesheets, which the timeline's suites hold in pixels) are
   answered below, one twin each, in a block made from those stylesheets: each twin weighs exactly what its original
   weighs (:where() counts nothing) and stands in the stylesheet linked last, so it wins exactly where its original did.
   The suite fails when a px size of type is added to them without its twin (it makes the block again and compares).
   A card of the room keeps the scale it is drawn at (--tl-u) and is enlarged with the rest; the lesson page's slide,
   sized by its frame's height (clamp() of cqh), is held to the floor only. ==== */
.tl[data-view] { --tl-fs: 1; --tl-fs-min: 0px; }
[data-theme="reading"] .tl[data-view] { --tl-fs: 1.2; --tl-fs-min: var(--fs-caption); line-height: var(--lh); }
/* ---- the shell's sizes, scaled (made from timeline.css, timeline-coverflow.css, timeline-lesson.css, workspace-edit.css) ---- */
:where(.tl[data-view]) .tl-bar h1 { font-size: max(var(--tl-fs-min), calc(19px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-term { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-chip { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-zoom button { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-tc { font-size: max(var(--tl-fs-min), calc(11px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-sl { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-tt { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-tag { font-size: max(var(--tl-fs-min), calc(10.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-shade { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-shade b { font-size: max(var(--tl-fs-min), calc(10.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-plate .tl-h { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-plate .tl-n { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-plate .tl-d { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-lbl { font-size: max(var(--tl-fs-min), calc(11.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-lbl.tl-lesson { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-num { font-size: max(var(--tl-fs-min), calc(112px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-cap { font-size: max(var(--tl-fs-min), calc(11.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-glyph { font-size: max(var(--tl-fs-min), calc(11px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-note { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-find input { font-size: max(var(--tl-fs-min), calc(14.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-fbtn { font-size: max(var(--tl-fs-min), calc(17px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-results .tl-rt { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-results .tl-rn { font-size: max(var(--tl-fs-min), calc(14px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-results .tl-rs { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-results .tl-rw { font-size: max(var(--tl-fs-min), calc(10px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-results .tl-foot { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-hud { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-hud h2 { font-size: max(var(--tl-fs-min), calc(17px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-hint { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-hint.tl-read { font-size: max(var(--tl-fs-min), calc(14.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-reader h3 { font-size: max(var(--tl-fs-min), calc(11px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-statusline { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-btn { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-link { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-qa ul { font-size: max(var(--tl-fs-min), calc(14px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-qa li span:first-child { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-evidence { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-strip button span { font-size: max(var(--tl-fs-min), calc(10.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-strip .tl-note { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-drawer h2 { font-size: max(var(--tl-fs-min), calc(17px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-drawer h3 { font-size: max(var(--tl-fs-min), calc(11px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-drawer p { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-todo-list li span { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-done { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-tc { font-size: max(var(--tl-fs-min), calc(11 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-sl { font-size: max(var(--tl-fs-min), calc(13.5 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-tt { font-size: max(var(--tl-fs-min), calc(12 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-tag { font-size: max(var(--tl-fs-min), calc(10.5 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-cap { font-size: max(var(--tl-fs-min), calc(11.5 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-card .tl-glyph { font-size: max(var(--tl-fs-min), calc(11 * var(--tl-u) * var(--tl-fs))); }
:where(.tl[data-view]) .tl-space.tl-tall .tl-hint.tl-read { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-space.tl-tall .tl-hud h2 { font-size: max(var(--tl-fs-min), calc(16px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-space.tl-tall .tl-hud > span:not(.tl-grow) { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-space.tl-tall .tl-num { font-size: max(var(--tl-fs-min), calc(96px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-flow .tl-flowrow .tl-tc { font-size: max(var(--tl-fs-min), calc(11px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-flow .tl-flowrow .tl-d { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-looks { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-bar .tl-up { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-first { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-first .tl-btn { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-status { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-status .tl-link { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-head .tl-btn { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-what { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-reader .tl-warn { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-para { font-size: max(var(--tl-fs-min), calc(16px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-para .tl-pt { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
:where(.tl[data-view]) .tl-none h2 { font-size: max(var(--tl-fs-min), calc(19px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-head { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-choose label { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-choose select { font-size: max(var(--tl-fs-min), calc(16px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-toggle { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-num { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-title { font-size: max(var(--tl-fs-min), calc(14px * var(--tl-fs))); }
.tl:where([data-view]) .tl-col-len { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-to-paper { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face h2 { font-size: max(var(--tl-fs-min), calc(19px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face .tl-tag { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-stack h3 { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-meta { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-num { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-title { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-open { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-parts { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-outline-parts .tl-stamp { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-cf .tl-cf-stack .tl-sl { font-size: max(var(--tl-fs-min), calc(17 * var(--tl-u) * var(--tl-fs))); }
.tl:where([data-view]) .tl-cf-cap { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-cf-lead { font-size: max(var(--tl-fs-min), calc(16px * var(--tl-fs))); }
.tl:where([data-view]) .tl-space.tl-cf.tl-tall .tl-cf-cap { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-space.tl-cf.tl-tall .tl-cf-lead { font-size: max(var(--tl-fs-min), calc(15px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-num { font-size: max(var(--tl-fs-min), clamp(11px, 4.4cqh, 14px)); }
.tl:where([data-view]) .tl-lp-name { font-size: max(var(--tl-fs-min), clamp(15px, 8cqh, 34px)); }
.tl:where([data-view]) .tl-lp-says { font-size: max(var(--tl-fs-min), clamp(12px, 5.4cqh, 15px)); }
.tl:where([data-view]) .tl-lp-title { font-size: max(var(--tl-fs-min), calc(19px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-where { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-bar .tl-btn { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-about { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-about .tl-warn { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-note { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-para .tl-stamp { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-lp-from { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-pn { font-size: max(var(--tl-fs-min), calc(11.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-pw { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-pl { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp-pl .tl-stamp { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-acts .tl-btn { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-cost { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-label { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-text { font-size: max(var(--tl-fs-min), calc(14.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-count { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-state { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-state .tl-btn { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-other { font-size: max(var(--tl-fs-min), calc(13.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-lp .tl-ed-otherhead { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-tools .tl-btn { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-label { font-size: max(var(--tl-fs-min), calc(12.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-prefix { font-size: max(var(--tl-fs-min), calc(14.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-title { font-size: max(var(--tl-fs-min), calc(14.5px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-cost { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
.tl:where([data-view]) .tl-face[data-face="outline"] .tl-ed-state { font-size: max(var(--tl-fs-min), calc(13px * var(--tl-fs))); }
/* ---- end of the shell's sizes, scaled ---- */

/* ==== The top of the block, as the top of his study (every look; the workspace only) ==== */
.tl[data-view] > .tl-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 340px) auto;
  grid-template-areas: "id find faces" "views views views" "tools tools tools" "first first first";
  align-items: center; column-gap: 14px; row-gap: 0; padding: 16px 26px 0; border-bottom: 0; }
/* A row for the course's actions only where it has some (the page sets tl-has-actions; re-review R1): with a row for
   them always, Timeline | Details stood in its first row and the search was centred across two. */
.tl[data-view] > .tl-bar.tl-has-actions { grid-template-areas: "id find faces" "id find acts" "views views views" "tools tools tools" "first first first"; }
.tl[data-view] > .tl-bar > .tl-id { grid-area: id; gap: 3px; }
.tl[data-view] > .tl-bar > .tl-find { grid-area: find; }
.tl[data-view] > .tl-bar > .tl-faces { grid-area: faces; }
/* An action of the course (its cover; fix round 1, L9): a group of its own under the toggle, at the bar's right edge. */
.tl[data-view] > .tl-bar > .tl-actions { grid-area: acts; justify-self: end; display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tl[data-view] > .tl-bar > .tl-views { grid-area: views; }
.tl[data-view] > .tl-bar > .tl-tools { grid-area: tools; }
.tl[data-view] > .tl-bar > .tl-first { grid-area: first; margin: 10px 0 12px; }
/* The course's title, at his size; its one line under it. */
.tl[data-view][data-look] > .tl-bar .tl-id h1 { font-size: calc(24px * var(--tl-fs)); letter-spacing: -.01em; line-height: 1.25; max-width: 100%;
  white-space: normal; overflow: visible; text-overflow: clip; display: block; overflow-wrap: anywhere; }   /* wraps: never cut (L7) */
.tl[data-view] > .tl-bar .tl-term { font-size: calc(13.5px * var(--tl-fs)); }
/* The search, quieter, where his "Course brief" stands: as wide as its column, no wider; its results open leftward
   from its right edge, which is near the block's. */
.tl[data-view] > .tl-bar > .tl-find { flex: none; max-width: none; margin: 0; }
.tl[data-view] > .tl-bar > .tl-find input { font-size: calc(14px * var(--tl-fs)); }
.tl[data-view] > .tl-bar > .tl-find .tl-results { left: auto; right: -1px; }
/* Timeline | Details, his toggle ("By lesson / By figure"): one frame, the buttons plain, the one in force on a tint
   in the look's own colour. Its keyboard ring, drawn inside the frame, is in that colour on that tint. */
.tl[data-view] > .tl-bar > .tl-faces { border-radius: 7px; }
.tl[data-view] .tl-faces .tl-chip { background: transparent; color: var(--tl-ink2); font-weight: 400; padding: 7px 12px; font-size: var(--fs-small); }
.tl[data-view] .tl-faces .tl-chip:hover { background: var(--tl-holo-soft); color: var(--tl-ink); }
.tl[data-view] .tl-faces .tl-chip[aria-pressed="true"] { background: var(--tl-holo-soft); border-color: transparent; color: var(--tl-holo); font-weight: 700; }
.tl[data-view] .tl-faces .tl-chip[aria-pressed="true"]:focus-visible { outline-color: var(--tl-holo); }
/* THE ROW OF VIEWS, AS HIS TABS: words, the one showing in the look's ink with a bar under it in the look's colour,
   the others in its second ink; a hairline under the row across the whole block. It still scrolls sideways inside
   itself where it does not fit (a phone), and keeps room inside itself for the keyboard's ring (5px outside a
   button): 6px above and below. The bar under the one showing is drawn in that room, against the hairline. */
.tl[data-view] > .tl-bar > .tl-views { margin: 12px -26px 0; padding: 6px 26px; max-width: none; scroll-padding: 0 26px; gap: 24px;
  border-bottom: 1px solid var(--tl-holo-line); }
.tl[data-view] .tl-views .tl-view { position: relative; border: 0; border-radius: 0; background: transparent; padding: 8px 0;
  font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--tl-ink2); }   /* the console's own tabs' words (L1) */
.tl[data-view] .tl-views .tl-view:hover { background: transparent; color: var(--tl-ink); }
.tl[data-view] .tl-views .tl-view[aria-pressed="true"] { background: transparent; border-color: transparent; color: var(--tl-ink); font-weight: var(--fw-semibold); }
[data-theme="reading"] .tl[data-view] .tl-views .tl-view { font-size: var(--fs-body); }   /* as the console's tabs are under Easy reading */
.tl[data-view] .tl-views .tl-view::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; }
.tl[data-view] .tl-views .tl-view[aria-pressed="true"]::after { background: var(--tl-holo); }
/* The tools of the view that has them, under the line: the carousel's and the Outline's. */
.tl[data-view] > .tl-bar > .tl-tools { padding: 10px 0 8px; }
/* The view itself, at his margins. */
.tl[data-view] > .tl-face { padding: 22px 26px 28px; }
/* "Your outline", his aside: its heading at his size, with room above it. */
.tl[data-view] .tl-col-head { padding: 20px 16px 10px 18px; font-size: calc(16px * var(--tl-fs)); }

/* ==== One button, one chip, one tag, one field: the console's (every look; the workspace only; audit C2, C3, C5,
   C6, K5). The block's controls are shaped as the console's own (.btn, .chip, a field: console.css), in the look's
   colours: a button 6px round; a chip of a filter the same, its edge the field's (3:1 in every look); a tag a pill;
   a field 6px round with the field's edge. The toolbar is one segmented control (the zoom, as Timeline | Details is
   one) and filter chips; the out-of-date count is a filter chip like the others, in the warning's colour only while
   something is out of date. ==== */
.tl[data-view] .tl-btn { border-radius: var(--radius); }
.tl[data-view] .tl-chip { border-radius: var(--radius); border-color: var(--tl-field-line); padding: 7px 12px; }
.tl[data-view] > .tl-bar > .tl-faces { border-color: var(--tl-field-line); }
.tl[data-view] .tl-faces .tl-chip, .tl[data-view] .tl-views .tl-view { border-radius: 0; }
.tl[data-view] .tl-tools .tl-chip.tl-todo.tl-clear { color: var(--tl-ink2); font-weight: 400; border-color: var(--tl-field-line); }
.tl[data-view] .tl-zoom { border-color: var(--tl-field-line); border-radius: 7px; }
.tl[data-view] .tl-zoom button { padding: 7px 12px; color: var(--tl-ink2); }
.tl[data-view] .tl-zoom button[aria-current="true"] { color: var(--tl-holo); }
.tl[data-view] .tl-tag { border-radius: 999px; padding: 0 8px; }
.tl[data-view] .tl-card .tl-tag { border-radius: calc(9 * var(--tl-u)); padding: 0 calc(7 * var(--tl-u)); }
.tl[data-view] .tl-find { border-radius: var(--radius); }
.tl[data-view] .tl-col-choose select, .tl[data-view] .tl-lp .tl-ed-text, .tl[data-view] .tl-face .tl-ed-title { border-radius: var(--radius); }
.tl[data-view] .tl-lp-part { border-radius: var(--radius); }
/* (Not the part being spoken: its edge is the look's own colour, timeline-lesson.css, and in forced colours the highlight.) */
.tl[data-view] .tl-lp-part:not(.tl-lp-on) { border-color: var(--tl-field-line); }
/* K5 (fix round 1): a card of the room stands out from the room by its edge, 3:1 in every look: the field's. A card with
   a state of its own (chosen, in hand, out of date, struggled with, found, changed) keeps that state's edge. Under the
   pointer a card's edge is the look's own colour, as a deck's is (timeline.css): a Cover Flow stack is no deck, and fell
   back to the look's faint line there, 1.5 to 2.5 to 1 (re-review R2). */
.tl[data-view] .tl-card:not(.tl-sel):not(.tl-pop):not(.tl-held):not(.tl-todo):not(.tl-miss):not(.tl-hit):not(.tl-changed):not(:hover) { border-color: var(--tl-field-line); }
.tl[data-view] .tl-card:not(.tl-sel):not(.tl-pop):not(.tl-held):not(.tl-todo):not(.tl-miss):not(.tl-hit):hover { border-color: var(--tl-holo); }
/* The console look's quiet button is the console's plain .btn: its own ground, the text's colour, the field's edge. */
.tl[data-look="console"] .tl-btn.tl-quiet { background: var(--surface-1); color: var(--text); border-color: var(--border-strong); }
.tl[data-look="console"] .tl-btn.tl-quiet:hover { background: var(--surface-2); }

/* ==== One course header between the Timeline and Details (audit C7): the way back to the list is the quiet button
   the Details view has (All courses, in the second ink, no underline), over the title, which is the Details view's
   size (24px). ==== */
.tl[data-view] > .tl-bar .tl-up { justify-self: start; font-size: var(--fs-small); font-weight: 700; color: var(--tl-ink2); text-decoration: none;
  padding: 4px 8px; margin: 0 0 0 -8px; border-radius: var(--radius); }
.tl[data-view] > .tl-bar .tl-up:hover { background: var(--tl-holo-soft); color: var(--tl-ink); }

/* ==== The lesson page (audit L6). What is said, and the row of parts, both scroll inside themselves; each now says
   that there is more: what is said fades at its foot (with room under its last line, so that the end is read clear
   of the fade), and the row of parts at its right end (with room after its last part). ==== */
@media (min-width: 980px) {
  /* C7: a larger bar or Easy reading must not take height from the Carousel's room. Keep the viewport as a
     minimum, let the page grow, and give the Course/Stack room its narrow-screen minimum on the type scale.
     Lesson zoom and the other workspace views retain their own height and scrolling rules. */
  .tl[data-view="carousel"]:not([data-level="lesson"]) { height: auto;
    min-height: max(560px, calc(100vh - var(--tl-top, 49px) - 16px)); min-height: max(560px, calc(100dvh - var(--tl-top, 49px) - 16px));
    grid-template-rows: auto minmax(calc(460px * var(--tl-fs)), 1fr) auto; }
  /* Expanded outline groups must not set the auto-height grid's room size. The column fills that row;
     its existing flex list keeps its own scroll instead of contributing every lesson's height. */
  .tl[data-view="carousel"]:not([data-level="lesson"]) .tl-col { contain: size; }
  .tl[data-view] .tl-lp .tl-reader { padding-bottom: 36px; scroll-padding-bottom: 36px; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
}
/* (Fix round 1, L2: a part or a "Play from" that the keyboard brings into view stops clear of the fade, scroll-padding;
   and the reader on the lesson page has no shadow, as timeline-lesson.css says, which the mask would cut.) */
.tl[data-view] .tl-lp-partlist { padding-right: 56px; scroll-padding: 0 56px 0 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }


@media (max-width: 979px) {
  /* (The shell's sizes on a narrow screen, scaled: see the scale, above.) */
  :where(.tl[data-view]) .tl-bar h1 { font-size: max(var(--tl-fs-min), calc(17px * var(--tl-fs))); }
  :where(.tl[data-view]) .tl-term { font-size: max(var(--tl-fs-min), calc(12px * var(--tl-fs))); }
  /* On a narrow screen: the title (and its way back) over the search, Timeline | Details beside the search, then the
     row of views across the screen (it scrolls sideways), then the tools (which scroll as the timeline's do). */
  .tl[data-view] > .tl-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id id" "find faces" "views views" "tools tools" "first first";
    row-gap: 8px; padding: 8px 12px 0; }
  .tl[data-view] > .tl-bar.tl-has-actions { grid-template-areas: "id id" "find faces" "acts acts" "views views" "tools tools" "first first"; }
  .tl[data-view] > .tl-bar > .tl-actions { justify-self: start; margin-top: 0; }
  .tl[data-view] > .tl-bar > .tl-views { margin: 4px -12px 0; padding: 6px 44px 6px 12px; scroll-padding: 0 44px 0 12px; gap: 20px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  /* (audit L2; fix round 1, M2) The row of views says there is more at its right end, as the console's own row of tabs
     does; and so does the row of tools, which is ONE row that scrolls inside itself, as the timeline's is on a narrow
     screen: wrapped, its 44px chips took 218px and put the room off the first screen of a phone. Each keeps room at its
     end (scroll-padding) for the keyboard to stop a control clear of the fade. */
  .tl[data-view] > .tl-bar > .tl-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0 -12px; padding: 8px 44px 8px 12px;
    scroll-padding: 0 44px 0 12px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .tl[data-view][data-look] > .tl-bar .tl-id h1 { font-size: calc(19px * var(--tl-fs)); }
  .tl[data-view] > .tl-face { padding: 16px 14px 24px; }
}

@media (forced-colors: active) {
  /* The bar under the view that is showing is a ground, which the system takes away: there it is drawn in the
     system's highlight colour as it is. The hairline under the row is an edge, and stays. */
  .tl[data-view] .tl-views .tl-view[aria-pressed="true"]::after { background: Highlight; forced-color-adjust: none; }
  /* A STATE SHOWN BY AN EDGE KEEPS THE HIGHLIGHT COLOUR (fix round 1, H1). This file is linked last, and its rules for
     the console look's states (a pressed chip's edge in the accent, Timeline | Details in force with no edge, a card's
     edge, the edge of a lesson's parts) weighed what the forced-colours rules of the earlier files weigh, and won: the
     system drew them all in its plain text colour, as every other control. Each is answered here, at least as heavy. */
  .tl[data-look] .tl-chip[aria-pressed="true"], .tl[data-view] .tl-faces .tl-chip[aria-pressed="true"] { border-color: Highlight; }
  .tl[data-look] .tl-cf .tl-card.tl-sel, .tl[data-look] .tl-cf .tl-card.tl-pop { border-color: Highlight; }
  .tl[data-view] .tl-lp-part.tl-lp-on { border-color: Highlight; }
}

@media (max-width: 599px) {
  /* C3: the title, search, Timeline | Details and views each have their full row. Sharing the last two left
     Carousel half under the fade. The views keep the narrow layout's horizontal scroll, insets and 44px targets. */
  .tl[data-view] > .tl-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id id" "find find" "faces faces" "views views" "tools tools" "first first"; }
  .tl[data-view] > .tl-bar.tl-has-actions { grid-template-areas: "id id" "find find" "acts acts" "faces faces" "views views" "tools tools" "first first"; }
  .tl[data-view] > .tl-bar > .tl-faces { justify-self: start; margin-top: 4px; }
}