/* LORE console — editing where the words are read: step 5 of the faculty workspace (2026-10-14).
 *
 * The lesson page's editor of "What is said" (timeline-lesson.js) and the Outline's tools of a lesson (workspace-edit.js:
 * Rename, Move up, Move down). Nothing carries these classes unless someone who may edit the course has the workspace on,
 * and then only where she is: every rule stands under the lesson page (.tl .tl-lp) or the Outline
 * (.tl .tl-face[data-face="outline"]), but one: the block's, while she edits its lesson page's words (below). Colours are the look's own properties (--tl-…) only, type is the timeline's; the
 * buttons are the timeline's own (.tl-btn, .tl-quiet, .tl-link: 44 px under a finger already, in timeline.css). Linked
 * after timeline-lesson.css. Nothing here moves, so there is nothing to switch off for less motion.
 */

/* THE LESSON PAGE, while its words are edited: the side gives the text area room, wider (the frame keeps 16:9, smaller)
   and taller, beside the row of parts as well (seen in Chrome: at 1100 and 980 by 800 the side was 309 px tall, the editor
   taller, and the row of Save and Cancel stuck to its foot stood over the text area's last lines). Under 980 px the page is
   one column and this does nothing. */
.tl .tl-lp[data-editing="true"] { grid-template-columns: minmax(0, 1fr) clamp(340px, 44%, 640px);
  grid-template-areas: "bar bar" "stage side" "about side" "parts side"; }

/* "Edit the words" and what came of the last save, under the heading of What is said; then, editing, what saving costs, the
   text area and the state. */
.tl .tl-lp .tl-ed { margin: 0 0 12px; }
.tl .tl-lp .tl-ed-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Editing, Save and Cancel stick to the foot of what scrolls (the side; on a short screen or a phone, the console), on a
   ground of their own: the text area, however tall she makes it, never pushes them out of the window. */
.tl .tl-lp .tl-ed-on .tl-ed-acts { position: sticky; bottom: 0; z-index: 1; margin: 8px 0 0; padding: 6px 0; background: var(--tl-bg2); }
/* The state heads that row, the whole of its width. */
.tl .tl-lp .tl-ed-on .tl-ed-state { flex: 0 0 100%; margin: 0 0 4px; }
.tl .tl-lp .tl-ed-acts .tl-btn { padding: 5px 11px; font-size: 13px; }
.tl .tl-lp .tl-ed-cost { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--tl-ink2); }
/* What saving does (fix round 1): the lesson editor's own lines, one under another; a warning heavier, with a bar beside it,
   never a colour alone. Before any change, one quiet line says where they will be. */
.tl .tl-lp .tl-ed-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tl .tl-lp .tl-ed-line { margin: 0; }
.tl .tl-lp .tl-ed-line[data-tone="warn"] { padding-left: 8px; border-left: 3px solid var(--tl-warn); font-weight: 700; color: var(--tl-ink); }
.tl .tl-lp .tl-ed-note { margin: 0; }
.tl .tl-lp .tl-ed-label { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--tl-ink); }
/* The text area takes its column's width; its height is capped so that, on a short screen, Save stays in the window (it
   sticks to the foot of what scrolls, above), and she can drag it taller. */
.tl .tl-lp .tl-ed-text { display: block; box-sizing: border-box; width: 100%; height: 15em; max-height: min(52vh, 520px); resize: vertical; margin: 0; padding: 8px 10px;
  border: 1px solid; border-color: var(--tl-field-line); border-radius: 4px; background: var(--tl-bg); color: var(--tl-ink);
  font-family: var(--tl-sans); font-size: 14.5px; line-height: 1.5; }
.tl .tl-lp .tl-ed-count { margin: 4px 0 0; font-size: 12.5px; color: var(--tl-ink2); }
.tl .tl-lp .tl-ed-state { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tl-ink2); }
.tl .tl-lp .tl-ed-state:empty { display: none; }
/* A failure, or a lesson changed somewhere else: heavier words with a bar beside them, never a colour alone. */
.tl .tl-lp .tl-ed-state.tl-ed-bad { padding-left: 8px; border-left: 3px solid var(--tl-warn); font-weight: 700; color: var(--tl-ink); }
.tl .tl-lp .tl-ed-why { font-weight: 400; }
.tl .tl-lp .tl-ed-state .tl-btn { margin: 2px 0; padding: 3px 9px; font-size: 12.5px; }
/* The other version, read only: its own words as they stand, line for line. */
.tl .tl-lp .tl-ed-other { margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--tl-holo-line); border-radius: 4px; color: var(--tl-ink2); font-size: 13.5px; }
.tl .tl-lp .tl-ed-otherhead { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--tl-ink); }
.tl .tl-lp .tl-ed-othertitle { margin: 0 0 6px; }
.tl .tl-lp .tl-ed-theirs { white-space: pre-wrap; overflow-wrap: anywhere; max-height: min(40vh, 360px); overflow-y: auto; }

/* THE OUTLINE: a lesson's tools, under its row, while it is selected. */
.tl .tl-face[data-face="outline"] .tl-ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px 40px; }
.tl .tl-face[data-face="outline"] .tl-ed-tools .tl-btn { padding: 4px 10px; font-size: 13px; }
/* A move that cannot be made (the first lesson up, the last down): quiet by its colour and a dashed edge, never faded. */
.tl .tl-face[data-face="outline"] .tl-ed-tools .tl-btn:disabled { background: transparent; border-style: dashed; border-color: var(--tl-holo-line); color: var(--tl-muted); cursor: default; }
.tl .tl-face[data-face="outline"] .tl-ed-renaming { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tl .tl-face[data-face="outline"] .tl-ed-label { flex: 1 1 100%; font-size: 12.5px; font-weight: 700; color: var(--tl-ink); }
/* The lesson's number, beside the field (as on the course page): it is kept, and is not hers to type. */
.tl .tl-face[data-face="outline"] .tl-ed-prefix { flex: none; font-size: 14.5px; font-weight: 700; color: var(--tl-ink); }
/* (Fix round 1.) As narrow as 180 px, so that on a phone the number stands beside it (seen in Chrome at 390 by 844: it stood
   alone above the field, and Save under the window's foot). */
.tl .tl-face[data-face="outline"] .tl-ed-title { box-sizing: border-box; flex: 1 1 180px; min-width: 0; max-width: 560px; margin: 0; padding: 6px 9px;
  border: 1px solid; border-color: var(--tl-field-line); border-radius: 4px; background: var(--tl-bg); color: var(--tl-ink);
  font-family: var(--tl-sans); font-size: 14.5px; }
.tl .tl-face[data-face="outline"] .tl-ed-cost { flex: 0 0 100%; max-width: none; margin: 0; font-size: 13px; color: var(--tl-ink2); }
.tl .tl-face[data-face="outline"] .tl-ed-acts { display: flex; gap: 6px; }
.tl .tl-face[data-face="outline"] .tl-ed-state { flex: 0 0 100%; max-width: none; margin: 0; font-size: 13px; line-height: 1.45; color: var(--tl-ink2); }
.tl .tl-face[data-face="outline"] .tl-ed-state:empty { display: none; }
.tl .tl-face[data-face="outline"] .tl-ed-state.tl-ed-bad { padding-left: 8px; border-left: 3px solid var(--tl-warn); font-weight: 700; color: var(--tl-ink); }
.tl .tl-face[data-face="outline"] .tl-ed-why { font-weight: 400; }

/* WHERE THE CONSOLE SCROLLS (a phone; a short screen, timeline-lesson.css), while she edits the words: the block and its stage
   clip what spills out of them as they always do, without being what scrolls (overflow: clip, not hidden). Hidden made the
   stage the scroller Save and Cancel stuck to, and it never scrolls: seen in Chrome at 1366 by 650, a long lesson with its
   text area dragged tall put Save 19 px under the window's foot. The lesson page marks the block (data-editing) only while
   she edits; data-lesson-page, the page's own, only while the Carousel shows the lesson page. A browser that does not know
   clip keeps hidden, and Save stands under the text area, as it does on any page. */
@media (max-width: 979px), (max-height: 799px) {
  .tl[data-lesson-page][data-editing="true"], .tl[data-lesson-page][data-editing="true"] .tl-stage { overflow: clip; }
}
/* A wide screen: the other version stands beside hers, once she asks to see it. */
@media (min-width: 1280px) {
  .tl .tl-lp .tl-ed-pair.tl-ed-both { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .tl .tl-lp .tl-ed-pair.tl-ed-both .tl-ed-other { margin: 0; }
}
/* A finger: the text area and the title field are 44 px high at least (the buttons are the timeline's, 44 px here already). */
@media (pointer: coarse), (max-width: 979px) {
  .tl .tl-lp .tl-ed-text { min-height: 44px; }
  .tl .tl-face[data-face="outline"] .tl-ed-title { min-height: 44px; }
  .tl .tl-face[data-face="outline"] .tl-ed-tools { margin-left: 0; }
}
/* Forced colours take away the look's edges: the fields keep one of the system's own, a failure's bar the system's text. */
@media (forced-colors: active) {
  .tl .tl-lp .tl-ed-text, .tl .tl-face[data-face="outline"] .tl-ed-title { border-color: CanvasText; }
  .tl .tl-lp .tl-ed-state.tl-ed-bad, .tl .tl-face[data-face="outline"] .tl-ed-state.tl-ed-bad, .tl .tl-lp .tl-ed-line[data-tone="warn"] { border-left-color: CanvasText; }
}