/* LORE console — the Course map view of the faculty workspace (console/js/workspace-map.js, 2026-10-15).
   Two columns: the lessons on the left, the figures each lesson holds on the right ("Assets & needs"), a line from a
   lesson to each of its figures; a line of counts above; a panel beside.

   Every rule begins .tl .tl-face[data-face="map"], and every class is tl-map-...: 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 dress the view with no rule per look; type is the block's own, and every size is written on the
   workspace's scale, max(var(--tl-fs-min, 0px), calc(<px> * var(--tl-fs, 1))): on main the two properties are not
   set and the size is the pixels; where the theme sets them, Easy reading scales every text of the view. Nothing is animated. There is no @media block, and no rule of the map stands in
   another stylesheet: a button is a .tl-btn, which timeline.css makes 44 px under a finger, and a node is at least
   56 px high already.

   A STATE IS A SHAPE. The selected lesson and the figure the panel shows (aria-current) have a 3 px edge where the
   others have 1 px, and the selected lesson a 7 px bar down its left side, each taken from the node's own padding so
   nothing moves. Forced colours repaint every edge in the system's colour and keep its width: the state is still
   there. A node's edge widths are written side by side (border-top-width and so on), so the cascade can be read for each.

   THE GEOMETRY IS THE SCRIPT'S (workspace-map.js says the same numbers; the suite holds them together): a row is two
   columns, 42 and 46 parts of its width with a gap of 12 between, so the lesson ends at 42 and the figures start at 54.
   The lesson's cell is a grid of three tracks, 1fr / auto / 1fr, stretched to the row: the box in the middle one, so
   it always stands in the row's middle and fills the column to 42, and "Open" (the selected lesson's) at the top of
   the third, just under the box; the first track is as tall as the third, so the box stays in the middle. Down, a
   row's figures are a grid of EQUAL rows stretched to the row (1fr each, no gap, no margin, even padding): the line
   to figure j of k ends at (j + 0.5) / k of the row, whatever the words make it. No node has a fixed height; words
   wrap.

   A NARROW MAP. The view's root is narrower where "Your outline" stands, so the layout asks the map's own box (a
   container query, not the window's width): under 1000 px the panel goes under the map; under 560 px each lesson's
   figures stand under it, indented on a rule of their own, the lines and their legend give way to that, and the head
   "Assets & needs" stands indented on the same rule, under "Lessons". */

.tl .tl-face[data-face="map"] .tl-map-body { container-type: inline-size; max-width: 1280px; }
.tl .tl-face[data-face="map"] .tl-map-what { color: var(--tl-ink2); }
/* A sentence that stands where something is not drawn: the block's own ink, a bar beside it (a shape, not a colour). */
.tl .tl-face[data-face="map"] .tl-map-note { margin: 0 0 12px; border-left-style: solid; border-left-width: 3px; border-left-color: var(--tl-holo); padding: 4px 10px; color: var(--tl-ink); }

/* The two ways, and By figure's scope. A pressed one is filled, and underlined: not a colour alone.
   Its hover state outweighs the console look's later quiet-button hover, so the filled state's ink keeps its ground. */
.tl .tl-face[data-face="map"] .tl-map-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; }
.tl .tl-face[data-face="map"] .tl-map-modes,
.tl .tl-face[data-face="map"] .tl-map-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.tl .tl-face[data-face="map"] .tl-map-mode[aria-pressed="true"],
.tl .tl-face[data-face="map"] .tl-map-scope-btn[aria-pressed="true"],
.tl .tl-face[data-face="map"] .tl-map-mode[aria-pressed="true"]:hover,
.tl .tl-face[data-face="map"] .tl-map-scope-btn[aria-pressed="true"]:hover { background: var(--tl-holo); color: var(--tl-on-holo); text-decoration: underline; }

/* The counts: one sentence of true numbers. */
.tl .tl-face[data-face="map"] .tl-map-counts { margin: 0 0 14px; padding: 8px 0 12px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--tl-holo-line);
  font-size: max(var(--tl-fs-min, 0px), calc(15px * var(--tl-fs, 1))); font-weight: 600; color: var(--tl-ink); max-width: none; }

/* The map and the panel beside it. */
.tl .tl-face[data-face="map"] .tl-map-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.tl .tl-face[data-face="map"] .tl-map-left { min-width: 0; }
.tl .tl-face[data-face="map"] .tl-map-legend { margin: 12px 0 0; font-size: max(var(--tl-fs-min, 0px), calc(12px * var(--tl-fs, 1))); color: var(--tl-ink2); }

/* The heads of the two columns, in the rows' own grid. */
.tl .tl-face[data-face="map"] .tl-map-chart { min-width: 0; }
.tl .tl-face[data-face="map"] .tl-map-heads { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 46fr); column-gap: 12%; align-items: start; margin: 0 0 12px; }
.tl .tl-face[data-face="map"] .tl-map-colhead { margin: 0; font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); font-weight: 700; color: var(--tl-ink); }
.tl .tl-face[data-face="map"] .tl-map-col-note { margin: 4px 0 0; font-size: max(var(--tl-fs-min, 0px), calc(12px * var(--tl-fs, 1))); color: var(--tl-ink); }
.tl .tl-face[data-face="map"] .tl-map-again { margin-top: 6px; }

/* A stack: its name and where it stands, then its lessons. */
.tl .tl-face[data-face="map"] .tl-map-stack { margin: 0 0 20px; }
.tl .tl-face[data-face="map"] .tl-map-stack-head { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: max(var(--tl-fs-min, 0px), calc(14px * var(--tl-fs, 1))); color: var(--tl-ink); }
.tl .tl-face[data-face="map"] .tl-map-stack-name { font-weight: 700; }

/* A row: the lesson, the figures; the lines behind, over the whole row. */
.tl .tl-face[data-face="map"] .tl-map-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl .tl-face[data-face="map"] .tl-map-row { position: relative; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 46fr); column-gap: 12%; align-items: center; }
.tl .tl-face[data-face="map"] .tl-map-row > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--tl-holo); }
.tl .tl-face[data-face="map"] .tl-map-row > svg path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* The lesson's cell: the box in the middle track, "Open" just under it; the empty first track as tall as the third. */
.tl .tl-face[data-face="map"] .tl-map-lcell { grid-column: 1; align-self: stretch; min-width: 0; position: relative; display: grid;
  grid-template-rows: 1fr auto 1fr; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.tl .tl-face[data-face="map"] .tl-map-lesson { grid-row: 2; }
.tl .tl-face[data-face="map"] .tl-map-open { grid-row: 3; justify-self: start; align-self: start; margin-top: 6px; }
/* A lesson's figures: equal rows, stretched to the row's height, each figure in its row's middle. */
.tl .tl-face[data-face="map"] .tl-map-figs { grid-column: 2; align-self: stretch; min-width: 0; position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-rows: 1fr; row-gap: 0; }
.tl .tl-face[data-face="map"] .tl-map-fig { display: flex; align-items: center; min-width: 0; margin: 0; padding: 6px 0; }

/* A node: at least 56 px high, as tall as its words; filled with the look's opaque panel ground, so it stands
   apart from the map and a line cannot run through it. Its edge is the look's second ink (a figure's the look's
   colour): 3 to 1 against the fill and the block in every look. */
.tl .tl-face[data-face="map"] .tl-map-node { box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
  border-color: var(--tl-ink2); border-radius: 6px; background: var(--tl-bg2); color: var(--tl-ink);
  text-align: left; font-family: var(--tl-sans); font-size: max(var(--tl-fs-min, 0px), calc(14px * var(--tl-fs, 1))); font-weight: 400; line-height: 1.3; cursor: pointer; }
.tl .tl-face[data-face="map"] .tl-map-figure { border-color: var(--tl-holo); }
/* The selected lesson, and the figure the panel shows: a 3 px edge (from 1), taken from the padding (9 + 1 = 7 + 3). */
.tl .tl-face[data-face="map"] .tl-map-node[aria-current="true"] { border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;
  border-color: var(--tl-holo); padding: 7px 10px; }
/* ...and the selected lesson a 7 px bar down its left side (12 + 1 = 6 + 7), and its title underlined. */
.tl .tl-face[data-face="map"] .tl-map-lesson[aria-current="true"] { border-left-width: 7px; padding-left: 6px; }
.tl .tl-face[data-face="map"] .tl-map-lesson[aria-current="true"] .tl-map-title { text-decoration: underline; font-weight: 700; }
.tl .tl-face[data-face="map"] .tl-map-num { flex: none; min-width: 22px; font-weight: 700; color: var(--tl-ink2); }
.tl .tl-face[data-face="map"] .tl-map-words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl .tl-face[data-face="map"] .tl-map-title { font-weight: 600; color: var(--tl-ink); overflow-wrap: anywhere; }
.tl .tl-face[data-face="map"] .tl-map-meta { font-size: max(var(--tl-fs-min, 0px), calc(12px * var(--tl-fs, 1))); color: var(--tl-ink2); overflow-wrap: anywhere; }
/* A lesson's figure count: never broken across lines, never cut. */
.tl .tl-face[data-face="map"] .tl-map-figtag { white-space: nowrap; font-weight: 700; color: var(--tl-ink); }
/* ...and "no figures" in the quiet ink, not bold: absence is never the loudest word in the column. */
.tl .tl-face[data-face="map"] .tl-map-figtag.tl-map-none { font-weight: 400; color: var(--tl-ink2); }
/* By figure, a figure's node holds its picture: sized here, by the box it stands in (never by the picture itself). */
.tl .tl-face[data-face="map"] .tl-map-thumb { flex: none; width: 112px; height: 78px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--tl-holo-soft); }
.tl .tl-face[data-face="map"] .tl-map-thumb-words { padding: 4px; font-size: max(var(--tl-fs-min, 0px), calc(11px * var(--tl-fs, 1))); text-align: center; color: var(--tl-ink); }

/* The panel: the selected lesson, or the figure of it she pressed. It stays in view while the map scrolls. */
.tl .tl-face[data-face="map"] .tl-map-detail { position: sticky; top: 0; min-width: 0; border-style: solid; border-width: 1px; border-color: var(--tl-holo-line); border-radius: 8px;
  padding: 14px 16px; background: var(--tl-bg); }
.tl .tl-face[data-face="map"] .tl-map-kind { margin: 0 0 4px; font-size: max(var(--tl-fs-min, 0px), calc(12px * var(--tl-fs, 1))); color: var(--tl-ink2); }
.tl .tl-face[data-face="map"] .tl-map-detail-head { margin: 0 0 6px; font-size: max(var(--tl-fs-min, 0px), calc(16px * var(--tl-fs, 1))); color: var(--tl-ink); overflow-wrap: anywhere; }
.tl .tl-face[data-face="map"] .tl-map-facts { margin: 0 0 10px; font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); color: var(--tl-ink2); overflow-wrap: anywhere; }
.tl .tl-face[data-face="map"] .tl-map-subhead { margin: 14px 0 6px; font-size: max(var(--tl-fs-min, 0px), calc(13px * var(--tl-fs, 1))); color: var(--tl-ink); }
.tl .tl-face[data-face="map"] .tl-map-facts-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.tl .tl-face[data-face="map"] .tl-map-go { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.tl .tl-face[data-face="map"] .tl-map-preview { margin: 0 0 10px; }
.tl .tl-face[data-face="map"] .tl-map-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* The map's own box under 1000 px: the panel goes under the map. */
@container (max-width: 1000px) {
  .tl .tl-face[data-face="map"] .tl-map-main { grid-template-columns: minmax(0, 1fr); }
  .tl .tl-face[data-face="map"] .tl-map-detail { position: static; }
}
/* Under 560 px (a phone): each lesson's figures under it, indented on a rule of their own; the lines and their legend
   give way; "Assets & needs" stands under "Lessons", indented on the same rule as the figures it heads. */
@container (max-width: 560px) {
  .tl .tl-face[data-face="map"] .tl-map-heads { display: block; }
  .tl .tl-face[data-face="map"] .tl-map-assets-head { margin: 6px 0 0 16px; padding-left: 12px; border-left-style: solid; border-left-width: 2px; border-left-color: var(--tl-holo); }
  .tl .tl-face[data-face="map"] .tl-map-row { display: block; }
  .tl .tl-face[data-face="map"] .tl-map-lcell { display: block; }
  .tl .tl-face[data-face="map"] .tl-map-row > svg { display: none; }
  .tl .tl-face[data-face="map"] .tl-map-legend { display: none; }
  .tl .tl-face[data-face="map"] .tl-map-figs { display: block; margin: 6px 0 0 16px; padding-left: 12px; border-left-style: solid; border-left-width: 2px; border-left-color: var(--tl-holo); }
}