/* LORE console — the Asset plan view of the faculty workspace (console/js/workspace-assets.js, 2026-10-16).
   Shawn's "Make only what the course needs": his count line, then one row for each teaching purpose in his three
   columns (Teaching purpose, Material and reasoning, Your choice).

   Every rule begins .tl .tl-face[data-face="assets"], and every class is tl-assets-...: 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, so every look dresses the view with no rule per look; type is the block's own, so the
   Easy reading theme reaches every text. Nothing is animated. There is no media block: the three columns sit side by
   side where there is room and stack where there is not (a grid that fits as many as it can), so a phone reads them
   one under another and the page never scrolls sideways.

   THE CONSOLE'S OWN STYLESHEET DRESSES EVERY input, select AND textarea ON THE PAGE, by element: a ground, a border and
   a focus ring of the console's theme, not the look's (the scholastic look's fields would stand white on cream with a
   blue ring). 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="assets"] .tl-assets-body { max-width: 1100px; container-type: inline-size; }
.tl .tl-face[data-face="assets"] .tl-assets-what { color: var(--tl-ink2); }
/* A sentence that stands for the plan, or says what the page can and cannot do: in the block's own ink, with a bar. */
.tl .tl-face[data-face="assets"] .tl-assets-note { margin: 0 0 12px; border-left: 3px solid var(--tl-holo); padding: 4px 10px; color: var(--tl-ink); }
.tl .tl-face[data-face="assets"] .tl-assets-again { margin: 0 0 12px; }

/* His count line: a number heavier and larger than its words. The gaps carry a bar beneath, a shape and not a colour. */
.tl .tl-face[data-face="assets"] .tl-assets-counts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--tl-holo-line); color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(14px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="assets"] .tl-assets-count b { font-size: max(var(--tl-fs-min, 0px), calc(20px * var(--tl-fs, 1))); font-weight: 700; margin-right: 4px; color: var(--tl-ink); }
.tl .tl-face[data-face="assets"] .tl-assets-gaps { border-bottom: 2px solid var(--tl-warn); }

/* The column headings: shown over the rows where the columns stand side by side (they are not read: each cell says
   its column to a screen reader itself). */
.tl .tl-face[data-face="assets"] .tl-assets-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; padding: 8px 14px;
  border-bottom: 1px solid var(--tl-holo-line); color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); font-weight: 700; }
/* A column's name over each cell, put by while the headings above stand. */
.tl .tl-face[data-face="assets"] .tl-assets-colname { display: none; }
/* Where the three columns do not stand side by side (the plan's own width, not the window's: the outline column takes
   part of a wide window), the headings above would be a list that names nothing below it: they are put by and each
   cell shows its column's name. 847 px is where three 260 px columns, their gaps and a row's padding stop fitting. */
@container (max-width: 847px) {
  .tl .tl-face[data-face="assets"] .tl-assets-head { display: none; }
  .tl .tl-face[data-face="assets"] .tl-assets-colname { display: block; margin: 0 0 4px; color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(12px * var(--tl-fs, 1))); font-weight: 700; }
}
.tl .tl-face[data-face="assets"] .tl-assets-list { list-style: none; margin: 0 0 16px; padding: 0; }
.tl .tl-face[data-face="assets"] .tl-assets-item { border-bottom: 1px solid var(--tl-holo-line); padding: 14px; }
.tl .tl-face[data-face="assets"] .tl-assets-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; align-items: start; }
.tl .tl-face[data-face="assets"] .tl-assets-cell { min-width: 0; overflow-wrap: anywhere; }
.tl .tl-face[data-face="assets"] .tl-assets-purpose { display: block; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(15px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="assets"] .tl-assets-none { display: block; color: var(--tl-ink2); font-style: italic; }
.tl .tl-face[data-face="assets"] .tl-assets-lessons,
.tl .tl-face[data-face="assets"] .tl-assets-reason,
.tl .tl-face[data-face="assets"] .tl-assets-fact { margin: 4px 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="assets"] .tl-assets-material { margin: 0 0 4px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(14px * var(--tl-fs, 1))); font-weight: 700; }
.tl .tl-face[data-face="assets"] .tl-assets-choice { margin: 0 0 4px; color: var(--tl-ink); font-weight: 700; }
.tl .tl-face[data-face="assets"] .tl-assets-exception { margin: 4px 0; padding-left: 8px; border-left: 3px solid var(--tl-holo-line); color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); }
/* His guard, and anything that refused: heavier words with a bar beside them, never a colour alone. */
.tl .tl-face[data-face="assets"] .tl-assets-guard,
.tl .tl-face[data-face="assets"] .tl-assets-stale { margin: 6px 0; padding-left: 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))); font-weight: 700; }
.tl .tl-face[data-face="assets"] .tl-assets-guard:empty,
.tl .tl-face[data-face="assets"] .tl-assets-stale:empty { display: none; }
.tl .tl-face[data-face="assets"] .tl-assets-status { margin: 4px 0 0; color: var(--tl-ink2); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); }
.tl .tl-face[data-face="assets"] .tl-assets-status:empty { display: none; }
.tl .tl-face[data-face="assets"] .tl-assets-bad { padding-left: 8px; border-left: 3px solid var(--tl-warn); color: var(--tl-ink); font-weight: 700; }
.tl .tl-face[data-face="assets"] .tl-assets-brief-state { margin: 6px 0 4px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); font-weight: 700; }

/* A figure: its picture in a box of the view's own (the shell's img fills it), then its words. */
.tl .tl-face[data-face="assets"] .tl-assets-figure { display: flex; gap: 10px; align-items: flex-start; }
.tl .tl-face[data-face="assets"] .tl-assets-thumb { flex: none; width: 88px; border: 1px solid var(--tl-holo-line); border-radius: 4px; overflow: hidden; }
.tl .tl-face[data-face="assets"] .tl-assets-approval { margin: 2px 0 0; }

/* 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="assets"] .tl-assets-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="assets"] .tl-assets-field:hover { border-color: var(--tl-holo); }
.tl .tl-face[data-face="assets"] .tl-assets-field:focus,
.tl .tl-face[data-face="assets"] .tl-assets-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="assets"] .tl-assets-field::placeholder { color: var(--tl-ink2); }
.tl .tl-face[data-face="assets"] .tl-assets-area { min-height: 4.5em; resize: vertical; }
/* Her teaching purpose, the row's name, in bold as his study has it; her reason, two lines. */
.tl .tl-face[data-face="assets"] .tl-assets-line > .tl-assets-cell:first-child > .tl-assets-field { font-weight: 700; }
.tl .tl-face[data-face="assets"] .tl-assets-line > .tl-assets-cell:first-child > .tl-assets-field::placeholder { font-weight: 400; }
.tl .tl-face[data-face="assets"] .tl-assets-why { min-height: 3.4em; margin: 6px 0; }
/* A visual need's lessons, to change. */
.tl .tl-face[data-face="assets"] .tl-assets-lessonpick { margin: 4px 0 6px; }
.tl .tl-face[data-face="assets"] .tl-assets-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="assets"] .tl-assets-row { margin: 0 0 10px; }
.tl .tl-face[data-face="assets"] .tl-assets-act { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tl .tl-face[data-face="assets"] .tl-assets-act .tl-assets-field { width: auto; flex: 1 1 180px; margin: 0; }
.tl .tl-face[data-face="assets"] .tl-assets-save { margin: 4px 0 0; }
/* A Save that cannot be pressed (the guard, or a set aside with no reason) must not look like one that can: the shell's
   button has no state for it. */
.tl .tl-face[data-face="assets"] .tl-assets-save:disabled { background: transparent; color: var(--tl-ink2); border-color: var(--tl-ink2); border-style: dashed; cursor: not-allowed; }
.tl .tl-face[data-face="assets"] .tl-assets-add,
.tl .tl-face[data-face="assets"] .tl-assets-aside { margin: 4px 0 14px; }
.tl .tl-face[data-face="assets"] .tl-assets-asidehead { margin: 18px 0 4px; color: var(--tl-ink); font-size: max(var(--tl-fs-min, 0px), calc(15px * var(--tl-fs, 1))); }

/* The brief and a new visual need: a panel under its row, with a border of the look's line. */
.tl .tl-face[data-face="assets"] .tl-assets-brief { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--tl-holo-line); border-radius: 4px; }
.tl .tl-face[data-face="assets"] .tl-assets-brief 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="assets"] .tl-assets-refs { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--tl-holo-line); border-radius: 4px; max-height: 220px; overflow-y: auto; }
.tl .tl-face[data-face="assets"] .tl-assets-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="assets"] .tl-assets-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))); }
/* A tick box: the look's own colour for its tick, none of the console's field dress (a checkbox is an input to it). */
.tl .tl-face[data-face="assets"] .tl-assets-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="assets"] .tl-assets-tick:focus,
.tl .tl-face[data-face="assets"] .tl-assets-tick:focus-visible { outline: 2px solid var(--tl-holo); outline-offset: 2px; box-shadow: none; }
/* Where a purpose's brief is said, and "Write brief" or "Edit brief". */
.tl .tl-face[data-face="assets"] .tl-assets-briefline { margin: 6px 0 0; }
.tl .tl-face[data-face="assets"] .tl-assets-brief-open { margin: 2px 0 0; }
/* A lesson chosen in Your outline (QA C21, 2026-10-16): a line saying the plan's part of it, with "Open lesson", and its
   purposes marked by a bar at their side (a shape, not a colour alone). */
.tl .tl-face[data-face="assets"] .tl-assets-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.tl .tl-face[data-face="assets"] .tl-assets-lesson .tl-assets-note { margin: 0; }
.tl .tl-face[data-face="assets"] .tl-assets-item[aria-current="true"] { box-shadow: inset 4px 0 0 var(--tl-holo); }