/* ══════════════════════════════════════════════════════════════════════════════════════════════
   303 TECH·LIBRARY — "Try together". The surface behind Home's See-all.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   EXTRACTED 2026-08-16 at the port (D-478: a `designed` card is the settled full-states experience
   with the app build and the shared-CSS extraction still pending; this is that step). These rules
   were provisional on workbench/technique/library.html and are now the ONE definition, linked by
   both index.html and the WB page — so the two cannot drift (D-470).

   The shape is C2, which won the bake-off ON THE RECORD rather than on taste: MANIFEST.md rules
   "contain, never crop — the stage never crops", and the three rival options all cropped 16:9
   clips into a square. See workbench/technique/_bakeoffs/library.html for what was rejected.

   CHROME it inherits and does not redraw: the 401 masthead + the W2 close · the settled
   find-and-filter bar (raised search pill, plain teal text filters, selected value lowercase) ·
   the app chevron · 1B, the kind word in the meta line with colour only on the chip.
   SHAPE it owns: the media slot is a 16:9 block when the item HAS a still and a kind glyph when
   it does not — never a borrowed image.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 401 masthead — wordmark left, the W2 close right. Copied from the canonical .tqp-mast. */
.tl-mast { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-12) var(--rhythm-inset) var(--space-4); }
.tl-word { font-family: var(--font-display); font-weight: var(--weight-wordmark); font-size: var(--size-20); /* token-exception: canonical wordmark size (D-411) */
  letter-spacing: var(--tracking-neg-01); color: var(--text-primary); }
.tl-word b { color: var(--accent); font-weight: inherit; }
.tl-close { width: var(--dim-40); height: var(--dim-40); flex: none; border: 0; border-radius: var(--radius-round);
  background: var(--surface-well); color: var(--text-secondary); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tl-close svg { width: var(--size-18); height: var(--size-18); display: block; flex: none; }
.tl-close:active { opacity: 0.72; }
.tl-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* head — NO eyebrow (D-458's locked title is the whole label; the eyebrow was dropped when
   Andrew ruled the name: "these are activities, exercises and techniques. too long"). */
.tl-head { padding: 0 var(--rhythm-inset) var(--space-4); }
.tl-h1 { font-family: var(--font-display); font-size: var(--size-28); font-weight: var(--weight-600);
  line-height: var(--leading-115); color: var(--text-primary); margin: 0; }
.tl-stand { font-size: var(--size-14); color: var(--text-secondary); line-height: var(--leading-145);
  margin: var(--space-4) 0 var(--space-16); }

/* the settled find-and-filter bar (A search + B filters) */
.tl-bar { padding: 0 var(--rhythm-inset); }
.tl-search { display: flex; align-items: center; gap: var(--space-8); width: 100%;
  min-height: var(--dim-44); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-pill);
  background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--text-tertiary);
  font-family: var(--font-body); font-size: var(--size-15); text-align: left; cursor: pointer; }
.tl-search.is-typed { color: var(--text-primary); }
.tl-search svg { width: var(--size-18); height: var(--size-18); flex: none; }
.tl-search span { flex: 1; min-width: 0; }
.tl-search:active { background: var(--surface-card-hover); }
.tl-search:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tl-filters { display: flex; gap: var(--space-20); margin: var(--space-12) 0 var(--space-16); padding: 0 var(--space-4); }
.tl-sel { display: flex; align-items: center; gap: var(--space-4); border: 0; background: 0; padding: 0;
  font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600);
  color: var(--accent); cursor: pointer; }
.tl-sel svg { width: var(--size-14); height: var(--size-14); flex: none; transition: transform var(--duration-200) ease; }
.tl-sel[aria-expanded="true"] svg { transform: rotate(90deg); }
.tl-sel:active { opacity: 0.7; }
.tl-sel:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* THE SELECTED VALUE IS LOWERCASE. Ruled 2026-08-16 (Andrew: "make the selected option lower
   case font to differentiate"). "Type: technique" — the LABEL keeps its capital because it is a
   proper noun for a control; the VALUE drops one so the eye can tell, at a glance and without
   reading, which half is the question and which half is the answer. Weight stays: lowercase is
   the differentiator, bold is still what marks it as chosen.
   ⚠️ text-transform, NOT lowercased strings. The area's real name is "Crying & Soothing" and it
   stays that in the data — casing is a DISPLAY concern, and D-444 already records what happens
   when a display form gets mistaken for the thing itself (search.js took the short label
   "Crying" and used it AS the area, which is how an abbreviation becomes a third name).
   ⚠️ CHROME, so it belongs to the bar and not to this surface: every surface that inherits the
   find-and-filter bar takes this too. 303 is the only one wearing the bar today. */
.tl-sel b { font-weight: var(--weight-600); text-transform: lowercase; }

/* the list — one card, hairline-separated rows (D-435: lift by tone, the card is the object) */
.tl-list { padding: 0 var(--rhythm-inset) var(--space-24); }
.tl-wrap { background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 0 var(--space-12); }
.tl-row { padding: var(--space-12) 0; border-top: 1px solid var(--border-hairline); }
.tl-row:first-child { border-top: 0; }
.tl-row-btn { display: flex; gap: var(--space-12); width: 100%; border: 0; background: 0;
  text-align: left; cursor: pointer; padding: 0; align-items: flex-start; }
.tl-row-btn > span:last-child { min-width: 0; flex: 1; }
.tl-row-btn:active { opacity: 0.72; }
.tl-row-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-6); }

/* C2's media block — 16:9, CONTAIN, on --surface-card so the cream-75 clips sit seamlessly
   rather than as a pasted-in tile. MANIFEST.md: "the stage never crops". */
.tl-media { position: relative; width: 112px; /* token-exception: nothing on the scale lands a 16:9 block that still leaves a usable title column at 390px */
  aspect-ratio: 16 / 9; flex: none; border-radius: var(--radius-6);
  overflow: hidden; background: var(--surface-card); }
.tl-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the play mark is the APP'S OWN — .crd-play in the shipped reader CSS: a --surface-card disc
   with a --kind-watch-icon glyph. The chat mock drew a dark scrim disc, which exists nowhere
   in this product. */
.tl-play { position: absolute; left: var(--space-4); bottom: var(--space-4);
  width: var(--dim-24); height: var(--dim-24); border-radius: var(--radius-round);
  background: var(--surface-card); color: var(--kind-watch-icon);
  display: grid; place-items: center; box-shadow: var(--shadow-card); }
.tl-play svg { width: 58%; height: 58%; }
/* the area chip, bottom-right — the corner MANIFEST.md tells the clips to keep quiet. */
/* GOLD, ruled 2026-08-16 (Andrew: "make gold as long as legible"). It was --kind-read-fill
   per D-444's standard area chip, which put a TEAL disc beside a GOLD kind word — two colours
   saying two different things on one row. Now one family per row.
   ⚠️ LEGIBILITY CHECKED, NOT ASSUMED: gold-700 on gold-100 is 4.50:1 — BETTER than the teal it
   replaces (teal-600 on teal-100 is 3.74:1), and past the 3:1 floor for a graphical control.
   ⚠️ WORTH KNOWING, TRUE OF BOTH: the disc itself is near-invisible against its backdrop
   (1.09:1 gold, 1.13:1 teal) because MANIFEST.md generates every clip on cream-75. The GLYPH
   is what reads; the disc is not carrying anything. That was already true in teal. */
.tl-area { position: absolute; right: var(--space-4); bottom: var(--space-4);
  width: var(--dim-24); height: var(--dim-24); border-radius: var(--radius-round);
  background: var(--kind-watch-fill); color: var(--kind-watch-icon); display: grid; place-items: center; }
.tl-area svg { width: 58%; height: 58%; }

/* 🔴 THE NO-ART ROW — load-bearing, not an edge case (2026-08-14). Three of the seven have no
   film. Kind glyph on the kind wash, and the meta line says "No film yet" in words. NEVER a
   borrowed image: a still from another technique is the right title over the wrong thing. */
.tl-noart { width: 112px; /* token-exception: matches .tl-media so the rows align */
  aspect-ratio: 16 / 9; flex: none; border-radius: var(--radius-6);
  background: var(--kind-watch-fill); color: var(--kind-watch-icon); display: flex;
  flex-direction: column; gap: var(--space-4); align-items: center; justify-content: center; }
/* ⚠️ WATCH (gold), NOT DO (clay) — and it is worth saying why, because clay is the intuitive
   answer and it is wrong here. Andrew ruled the family for this whole surface in one line:
   "all are Watch". D-454 maps colour to KIND-FAMILY, and a family cannot change row by row on
   one list without the colour stopping meaning anything. I built this clay first — a row with
   no film is not a thing you watch, so clay felt right — and that reasoning quietly re-decides
   a ruled question at the level of a single cell.
   ⚠️ IT DOES LEAVE A REAL ODDITY, AND IT IS ANDREW'S TO RESOLVE, NOT MINE: a row that says
   NO FILM YET is wearing the Watch colour. Either the family is right and the tension is
   cosmetic, or three how-tos genuinely are not Watch and "all are Watch" needs revisiting. */
.tl-noart svg { width: var(--dim-24); height: var(--dim-24); }
.tl-noart-t { font-family: var(--font-label); font-size: var(--size-9); font-weight: var(--weight-700);
  letter-spacing: var(--tracking-05); text-transform: uppercase; }

.tl-name { display: block; font-family: var(--font-display); font-size: var(--size-16);
  font-weight: var(--weight-600); line-height: var(--leading-125); color: var(--text-primary); }
/* 1B — the TYPE lives in the meta line, in words. Colour lives only in the chip. */
.tl-meta { display: block; font-size: var(--size-12); color: var(--text-tertiary); margin-top: var(--space-4); }

/* the empty states — a library CAN legitimately be empty after a filter, unlike Home's
   carousel (D-517 throws there, because a week with nothing to try is a content failure). */
.tl-empty { padding: var(--space-32) var(--space-16); text-align: center; }
.tl-empty-h { font-family: var(--font-display); font-size: var(--size-17); font-weight: var(--weight-600);
  color: var(--text-primary); margin: 0 0 var(--space-4); }
.tl-empty-b { font-size: var(--size-14); color: var(--text-secondary); margin: 0; }