/* LORE console — the Style guide view of the faculty workspace (console/js/workspace-style.js, 2026-10-16).
   Shawn's "One visual language for the course": the course's design bible, part by part, in two columns where there
   is room and one where there is not.

   Every rule begins .tl .tl-face[data-face="style"], and every class is tl-style-...: nothing here reaches another
   view, the timeline or the console (docs/faculty-workspace-contract.md, section 7). Colours are the timeline's
   --tl-... properties only, but for one thing: a swatch shows the colour she chose, which the page puts on it (a value
   the server checked, "#" and six hexadecimal digits). It keeps that colour in forced-colours mode, and its name
   stands beside it in words. Type is the block's own, so the Easy reading theme reaches every text. Nothing is
   animated. There is no media block: the parts fill as many columns as fit.

   THE CONSOLE'S OWN STYLESHEET DRESSES EVERY input, select AND textarea ON THE PAGE, by element (a ground, a border and
   a ring of its own theme, and a monospace face in a text area): every one of those properties is set again here, for
   this view's own fields (the suite reads console.css and fails when it sets one this file does not). */

.tl .tl-face[data-face="style"] .tl-style-body { max-width: 1100px; }
.tl .tl-face[data-face="style"] .tl-style-what { color: var(--tl-ink2); }
.tl .tl-face[data-face="style"] .tl-style-note { margin: 0 0 12px; border-left: 3px solid var(--tl-holo); padding: 4px 10px; color: var(--tl-ink); }
.tl .tl-face[data-face="style"] .tl-style-again { margin: 0 0 12px; }
.tl .tl-face[data-face="style"] .tl-style-revision { margin: 0 0 8px; color: var(--tl-ink); font-weight: 700; }
.tl .tl-face[data-face="style"] .tl-style-review { margin: 0 0 12px; color: var(--tl-ink); }
/* A revision saved after she began, and the newer value of a field both changed, beside hers. */
.tl .tl-face[data-face="style"] .tl-style-newer { margin: 0 0 12px; padding-left: 8px; border-left: 3px solid var(--tl-warn); color: var(--tl-ink); }
.tl .tl-face[data-face="style"] .tl-style-theirs { margin: 6px 0 0; padding: 6px 8px; border-left: 3px solid var(--tl-warn); color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); overflow-wrap: anywhere; }
.tl .tl-face[data-face="style"] .tl-style-theirs p { margin: 0 0 4px; }
.tl .tl-face[data-face="style"] .tl-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 32px; align-items: start; }
.tl .tl-face[data-face="style"] .tl-style-part { min-width: 0; margin: 0 0 16px; overflow-wrap: anywhere; }
.tl .tl-face[data-face="style"] .tl-style-part h3 { margin: 0 0 6px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(15px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="style"] .tl-style-part p { margin: 0 0 6px; color: var(--tl-ink2); }
.tl .tl-face[data-face="style"] .tl-style-none { color: var(--tl-ink2); font-style: italic; }
.tl .tl-face[data-face="style"] .tl-style-fact { margin: 0 0 6px; color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="style"] .tl-style-text p { margin: 0 0 4px; color: var(--tl-ink); }

/* The palette: each colour on a swatch with its name and its value in words. */
.tl .tl-face[data-face="style"] .tl-style-swatches { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.tl .tl-face[data-face="style"] .tl-style-colour { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--tl-ink); }
.tl .tl-face[data-face="style"] .tl-style-swatch { display: inline-block; flex: none; width: 46px; height: 30px; border: 1px solid var(--tl-ink2); border-radius: 4px; forced-color-adjust: none; }
.tl .tl-face[data-face="style"] .tl-style-colour-name { font-weight: 700; }
.tl .tl-face[data-face="style"] .tl-style-colour .tl-style-field { width: auto; min-width: 0; flex: 1 1 96px; margin: 0; }
.tl .tl-face[data-face="style"] .tl-style-colour .tl-style-pick { flex: none; width: 52px; padding: 2px; }
.tl .tl-face[data-face="style"] .tl-style-keep,
.tl .tl-face[data-face="style"] .tl-style-refs,
.tl .tl-face[data-face="style"] .tl-style-exceptions { margin: 0 0 8px; padding-left: 18px; color: var(--tl-ink); }
.tl .tl-face[data-face="style"] .tl-style-keep li,
.tl .tl-face[data-face="style"] .tl-style-refs li,
.tl .tl-face[data-face="style"] .tl-style-exceptions li { margin: 0 0 4px; }
.tl .tl-face[data-face="style"] fieldset.tl-style-refs { padding: 8px 10px; border: 1px solid var(--tl-holo-line); border-radius: 4px; }
.tl .tl-face[data-face="style"] .tl-style-refs legend { padding: 0 4px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); font-weight: 700; }
.tl .tl-face[data-face="style"] .tl-style-ref { margin: 0 0 8px; }
.tl .tl-face[data-face="style"] .tl-style-check { display: flex; gap: 6px; align-items: flex-start; min-height: 28px; padding: 3px 0; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(13.5px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="style"] .tl-style-remove { margin: 0 0 0 4px; padding: 2px 8px; font-size: max(var(--tl-fs-min, 0px), calc(12.5px * var(--tl-fs, 1))); }

/* The fields: the look's own ground, edge, ink and ring, whatever the console's theme gives a field by element. */
.tl .tl-face[data-face="style"] .tl-style-field { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 36px; margin: 0 0 6px; padding: 6px 9px;
  border: 1px solid; border-color: var(--tl-field-line); border-radius: 4px; background: var(--tl-bg); color: var(--tl-ink); box-shadow: none;
  font: inherit; font-family: var(--tl-sans); font-size: max(var(--tl-fs-min, 0px), calc(14px * var(--tl-fs, 1))); line-height: 1.4; transition: none; }
.tl .tl-face[data-face="style"] .tl-style-field:hover { border-color: var(--tl-holo); }
.tl .tl-face[data-face="style"] .tl-style-field:focus,
.tl .tl-face[data-face="style"] .tl-style-field:focus-visible { outline: 2px solid var(--tl-holo); outline-offset: 2px; border-color: var(--tl-holo); box-shadow: none; }
.tl .tl-face[data-face="style"] .tl-style-field::placeholder { color: var(--tl-ink2); }
.tl .tl-face[data-face="style"] .tl-style-area { min-height: 4.5em; resize: vertical; }
.tl .tl-face[data-face="style"] .tl-style-tick { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; border: 1px solid var(--tl-field-line); border-radius: 2px;
  background: var(--tl-bg); box-shadow: none; transition: none; accent-color: var(--tl-holo); }
.tl .tl-face[data-face="style"] .tl-style-tick:focus,
.tl .tl-face[data-face="style"] .tl-style-tick:focus-visible { outline: 2px solid var(--tl-holo); outline-offset: 2px; box-shadow: none; }
.tl .tl-face[data-face="style"] .tl-style-label { display: block; margin: 0 0 4px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); font-weight: 700; }
.tl .tl-face[data-face="style"] .tl-style-row { margin: 0 0 10px; }
.tl .tl-face[data-face="style"] .tl-style-save { margin: 0; }
/* Nothing to save or to discard: the two buttons say so (the shell's button has no disabled state). */
.tl .tl-face[data-face="style"] .tl-style-save:disabled,
.tl .tl-face[data-face="style"] .tl-style-discard:disabled { background: transparent; color: var(--tl-ink2); border-color: var(--tl-ink2); border-style: dashed; cursor: not-allowed; }
.tl .tl-face[data-face="style"] .tl-style-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 16px;
  padding: 12px 0 0; border-top: 1px solid var(--tl-holo-line); }
.tl .tl-face[data-face="style"] .tl-style-status { margin: 0; color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="style"] .tl-style-status:empty { display: none; }
.tl .tl-face[data-face="style"] .tl-style-bad { padding-left: 8px; border-left: 3px solid var(--tl-warn); color: var(--tl-ink); font-weight: 700; }
/* A lesson chosen in Your outline (QA C21, 2026-10-16): a line saying whether it may differ from the guide, with "Open
   lesson", and its exception marked by a bar at its side (a shape, not a colour alone). */
.tl .tl-face[data-face="style"] .tl-style-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.tl .tl-face[data-face="style"] .tl-style-lesson .tl-style-note { margin: 0; }
.tl .tl-face[data-face="style"] .tl-style-exceptions li[aria-current="true"] { padding-left: 10px; box-shadow: inset 4px 0 0 var(--tl-holo); }