/* teach.css — Teach (Training.swift on the web). Owned by the Teach agent.
   Contract: docs/web-redesign-spec/4-surfaces.md §4.4. Everything else the
   page uses (.tpage .tbody .block .statusrow .noterow .field .btnrow .seg
   .dropzone .more .swhelp) is base. No colour word and no hex in this file. */

/* the recording clock: 26/600, tabular */
.bigtime{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;margin:0 0 var(--s-xs)}
.recdot{width:8px;height:8px}

/* the drop zone's glyph */
.dropzone.short>svg{color:var(--faint)}

/* Start a recording: the disclosure left, the primary hard right */
.teach-start{display:flex;align-items:center;justify-content:space-between;gap:var(--s-m);margin-top:var(--s-xl)}
.teach-seg{width:fit-content}

/* Look at every picture: 96×60 thumbnails */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s-m);margin:0 0 var(--s-m)}
.thumb{position:relative;width:96px}
.thumb img{display:block;width:96px;height:60px;border-radius:var(--r-sm);object-fit:contain;background:var(--bg)}
.thumbx{position:absolute;top:2px;right:2px;background:var(--card)}
.thumbname{display:block;margin-top:var(--s-xs);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}