/* LORE console — the Materials view of the faculty workspace (console/js/workspace-materials.js, 2026-10-13).
   What a course was built from, to read: for each build, a table of its files.

   Every rule begins .tl .tl-face[data-face="materials"], and every class is tl-materials-...: 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 the three looks (hologram, scholastic, dusk) dress the view with no rule
   per look; type is the block's own, so the Easy reading theme reaches every text. Every text of its own is one of
   the look's inks (--tl-ink, --tl-ink2); the table is the console's (below). Nothing is animated. There is no media
   block: "Try again" is a .tl-btn, which timeline.css already makes 44px under a finger.

   A NARROW SCREEN. A table of seven columns does not fit a phone. It stands in a box that scrolls sideways INSIDE
   itself (the page never does); the box can take the keyboard, so it can be scrolled without a pointer, and its
   scrollbar is not hidden. */

.tl .tl-face[data-face="materials"] .tl-materials-body { max-width: 1100px; }
.tl .tl-face[data-face="materials"] .tl-materials-what { color: var(--tl-ink2); }
/* A sentence that stands in place of the list (it is being read; it could not be read; there is none to show):
   in the block's own ink, with a bar beside it. A shape, not a colour alone. */
.tl .tl-face[data-face="materials"] .tl-materials-note { margin: 0 0 12px; border-left: 3px solid var(--tl-holo); padding: 4px 10px; color: var(--tl-ink); }
.tl .tl-face[data-face="materials"] .tl-materials-again { margin: 0 0 12px; }
.tl .tl-face[data-face="materials"] .tl-materials-build { margin: 18px 0 8px; font-size: max(var(--tl-fs-min, 0px), calc(15px * var(--tl-fs, 1))); color: var(--tl-ink); overflow-wrap: anywhere; }
.tl .tl-face[data-face="materials"] .tl-materials-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--tl-holo-line); border-radius: 4px;
  scrollbar-width: thin; scrollbar-color: var(--tl-holo-line) transparent; }
.tl .tl-face[data-face="materials"] .tl-materials-table { width: 100%; min-width: 780px; }
/* THE CONSOLE'S TABLE (2026-10-16, the console's theme; audit C4). Every theme is the whole console's, and the block
   wears the theme's own colours, so the console's rules for a table (console.css, by element: the column headings in
   small capitals on the card's ground, a hairline under each row, a ground under the pointer) dress this one as they
   dress every other table of the console. It had a dress of its own, because the console's ground was not the look's
   and under the scholastic look a heading stood dark on dark: that cannot happen now.
   ONE PART IS NOT A COLUMN'S HEADING: a file's name is the heading of its row (a th in the body), and the console's
   capitals, widened letters and one line would write "SYLLABUS.PDF" unwrapped. So the row's heading is written as it
   is, on the row's own ground, and wraps inside its own cell. And no heading sticks: the table stands in a box of its
   own, which is no place for one (the suite reads console.css and fails when it sets on a th, by element, a property
   that would change how a file's name is written and this file does not set again). */
.tl .tl-face[data-face="materials"] .tl-materials-table th { position: static; top: auto; z-index: auto; box-shadow: none; }
.tl .tl-face[data-face="materials"] .tl-materials-table tbody th { text-transform: none; letter-spacing: normal; white-space: normal; font-size: inherit;
  font-family: inherit; background: transparent; }
/* (2026-10-16, QA T11) The column headings stand on the box's own ground, not on a band of the card's colour (the last
   row's heading has no line under it, as every table's in console.css). A look writes the console's column headings in
   its monospace face (looks.css); a file's name, the row's heading, stays in the block's face. */
.tl .tl-face[data-face="materials"] .tl-materials-table thead th { background: transparent; }
/* A file's name: heavier, in the block's first ink, and a long name wraps inside its own cell. */
.tl .tl-face[data-face="materials"] .tl-materials-table .tl-materials-file { min-width: 200px; font-weight: 700; color: var(--tl-ink); overflow-wrap: anywhere; }
/* A lesson chosen in Your outline (QA C21, 2026-10-16): what the list knows of it, in a line with "Open lesson", and the
   rows of the files it may have come from marked by a bar on their name (a shape, not a colour alone). */
.tl .tl-face[data-face="materials"] .tl-materials-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.tl .tl-face[data-face="materials"] .tl-materials-lesson .tl-materials-note { margin: 0; }
.tl .tl-face[data-face="materials"] .tl-materials-table tr[aria-current="true"] > th { box-shadow: inset 4px 0 0 var(--tl-holo); }