/* Training portal + hub home — page layouts on top of the shared kit (tools/web/_work_ui/static/work.css).
   Reads var(--w-*) only; no colour literal may live here (design_tokens.py --check).
   Rebuilt 2026-10-16 from the approved Paper review file "Work hub — every screen, before and after"
   (boards A2/A3 Home, J2 classroom, K2/K3 lesson, L2/L3 analytics, M2/M3 drafts, N2 review,
   O2 to re-record, P2 AI token). Spec: workflows/work_hub_design.md. */

/* ── sign-in pages ─────────────────────────────────────────────────────── */
body.tr-auth { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--w-page);
  font-family: var(--w-font-sans); color: var(--w-ink); padding: 16px; box-sizing: border-box; }
.tr-auth-box { width: 100%; max-width: 420px; background: var(--w-surface); border: 1px solid var(--w-border-subtle);
  border-radius: var(--w-r-lg); padding: 32px; box-sizing: border-box; }
.tr-auth-brand { font-weight: 600; font-size: var(--w-fs-ui); margin-bottom: 24px; }
.tr-auth-brand span { color: var(--w-ink-3); font-weight: 400; }
.tr-auth-box h1 { font-size: var(--w-fs-card-title); line-height: var(--w-lh-card-title); font-weight: 600; margin: 0 0 8px; }
.tr-auth-form { display: grid; gap: 8px; margin-top: 16px; }
.tr-auth-form label { font-size: var(--w-fs-ui); font-weight: 600; }
.tr-auth-form input { height: var(--w-control); border: 1px solid var(--w-border); border-radius: var(--w-r-md);
  padding: 0 12px; font: inherit; font-size: var(--w-fs-ui); }
.tr-auth-form input:focus { outline: none; border-color: var(--w-focus); box-shadow: var(--w-shadow-focus); }
.tr-btn-primary { height: var(--w-control); border: 0; border-radius: var(--w-r-md); background: var(--w-primary);
  color: var(--w-primary-ink); font: inherit; font-size: var(--w-fs-button); font-weight: var(--w-fw-button);
  cursor: pointer; margin-top: 8px; }
.tr-btn-primary:hover { background: var(--w-primary-hover); }

/* ── shared bits ───────────────────────────────────────────────────────── */
.tr-muted { color: var(--w-ink-3); }
.tr-small { font-size: var(--w-fs-small); line-height: var(--w-lh-small); }
.tr-spacer { flex: 1; }
.tr-flash { background: var(--w-info-bg); color: var(--w-info-fg); border-radius: var(--w-r-md); padding: 10px 14px;
  margin: 0 0 16px; font-size: var(--w-fs-ui); }
.tr-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--w-surface-sunk); border-radius: var(--w-r-md); padding: 10px 14px; margin: 0 0 20px; }
.tr-banner form { margin: 0; }
.w .tr-quote { white-space: pre-wrap; border-left: 2px solid var(--w-border); padding-left: 14px; margin: 12px 0 16px;
  font-size: var(--w-fs-body); line-height: 26px; color: var(--w-ink); }
.w .tr-note { background: var(--w-surface-sunk); border-radius: var(--w-r-md); padding: 10px 12px; margin: 8px 0; font-size: var(--w-fs-ui); }
.w h3.w-eyebrow { font-size: var(--w-fs-small); margin: 0 0 12px; }

/* A neutral chip that carries a fact ("Importer", "Required", "2 lessons"), never a status. */
.tr-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--w-r-sm);
  background: var(--w-neutral-bg); color: var(--w-ink-2); font-size: var(--w-fs-small); font-weight: 600;
  line-height: 1; white-space: nowrap; }
.tr-chip--sm { height: 18px; padding: 0 6px; font-weight: 500; text-transform: capitalize; }

/* A row action is a LINK (work_hub_design.md §3 Table). */
.w .tr-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: var(--w-fs-ui);
  line-height: var(--w-lh-ui); font-weight: 500; color: var(--w-link); cursor: pointer; white-space: nowrap; }
.w .tr-linkbtn:hover { color: var(--w-link-hover); text-decoration: underline; }
.w .tr-linkbtn.is-quiet { color: var(--w-ink-2); }
.w .tr-linkbtn.is-quiet:hover { color: var(--w-ink); }
.w .tr-linkbtn--danger { color: var(--w-danger-fg); }
.w .tr-linkbtn:disabled { opacity: .5; cursor: default; }

/* ⋯ overflow menu: <details class="tr-menu"><summary>…</summary><div class="tr-menu__list">… */
.tr-menu { position: relative; display: inline-block; }
.tr-menu > summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  color: var(--w-icon); cursor: pointer; }
.tr-menu > summary .w-icon { transform: rotate(90deg); }
.tr-menu > summary::-webkit-details-marker { display: none; }
.tr-menu > summary:hover, .tr-menu[open] > summary { background: var(--w-surface-sunk); color: var(--w-ink); }
.tr-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; padding: 4px;
  display: flex; flex-direction: column; background: var(--w-surface); border: 1px solid var(--w-border-subtle);
  border-radius: var(--w-r-md); box-shadow: var(--w-shadow-popover); text-align: left; white-space: nowrap; }
.w .tr-menu__item { position: relative; display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink);
  text-align: left; cursor: pointer; }
.w .tr-menu__item:hover { background: var(--w-surface-sunk); color: var(--w-ink); text-decoration: none; }

/* A native <select> laid invisibly over a label, so a picker reads as a chip or a link. */
.cl-chip, .dr-chip, .dr-pick, .tr-tri-move, .ct-bulk__move, .tr-floatbar__pick { position: relative; }
.cl-chip select, .dr-chip select, .dr-pick select, .tr-tri-move select, .ct-bulk__move select, .tr-floatbar__pick select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* ONE dark floating bar, only while rows are ticked (§4b Bulk actions). */
.tr-floatbar, .ct-bulk { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 20px; max-width: calc(100vw - 32px); padding: 10px 18px;
  border-radius: var(--w-r-lg); background: var(--w-primary); color: var(--w-primary-ink);
  box-shadow: var(--w-shadow-popover); white-space: nowrap; }
.tr-floatbar[hidden], .ct-bulk[hidden] { display: none; }
.tr-floatbar strong, .ct-bulk strong { font-size: var(--w-fs-ui); font-weight: 600; }
.tr-floatbar button, .tr-floatbar label, .ct-bulk button, .ct-bulk label {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; margin: 0;
  font: inherit; font-size: var(--w-fs-ui); font-weight: 500; color: var(--w-primary-ink); cursor: pointer; }
.tr-floatbar button:hover, .tr-floatbar label:hover, .ct-bulk button:hover, .ct-bulk label:hover { opacity: .8; }
.tr-floatbar button:disabled { opacity: .5; }
.tr-floatbar__x, .ct-bulk__x { margin-left: -12px !important; color: var(--w-ink-disabled) !important; }
.tr-floatbar__x .w-icon, .ct-bulk__x .w-icon { width: 14px; height: 14px; }
.tr-floatbar__sep, .ct-bulk__sep { width: 1px; height: 20px; background: var(--w-ink-2); }
.tr-floatbar .w-icon, .ct-bulk .w-icon { width: 12px; height: 12px; }

/* ── forms in modals ───────────────────────────────────────────────────── */
.tr-form { display: grid; gap: 14px; }
.tr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tr-field { display: grid; gap: 6px; font-size: var(--w-fs-ui); }
.tr-field > span, .tr-res-editor > label, .tr-cover-upload > label { font-weight: 600; font-size: var(--w-fs-ui); }
.tr-field select, .tr-res-row input { border: 1px solid var(--w-border); border-radius: var(--w-r-md); padding: 8px 10px;
  font: inherit; font-size: var(--w-fs-ui); background: var(--w-surface); min-width: 0; }
.tr-roles { border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-md); padding: 10px 12px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--w-fs-ui); }
.tr-roles legend { font-weight: 600; padding: 0 4px; }
.tr-roles [data-roles-override] { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
.tr-roles [data-roles-override][hidden] { display: none; }
.tr-check { display: flex; gap: 8px; align-items: center; font-size: var(--w-fs-ui); }
.tr-res-editor { display: grid; gap: 6px; }
.tr-res-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 6px; }
.tr-cover-upload { display: grid; gap: 6px; }
.tr-icon-btn { background: none; border: 0; cursor: pointer; color: var(--w-icon); padding: 4px; border-radius: 6px;
  display: inline-grid; place-items: center; font-size: var(--w-fs-ui); }
.tr-icon-btn:hover { background: var(--w-surface-sunk); color: var(--w-ink); }

/* Phone: the approved phone boards (A3, K3, L3, M3) carry only the kit's mobile bar, which already
   names the page; the breadcrumb pill under it repeated that name and wrapped on long titles. */
@media (max-width: 899px) { .w-main > .w-header { display: none; } }

/* Titles and descriptions break on balanced lines, never with one word alone on the last. */
.w .w-title__h, .w .w-title__sub, .cl-row__text b, .cl-row__text span, .tr-lesson-head h1, .tr-lesson-title,
.dr-title, .dr-why, .od-title, .hm-drop__title, .hm-row__t, .hm-row__m, .rv-lesson b, .an-lesson, .an-fcard b,
.w .tr-pager span, .tk-v p, .w-empty__body { text-wrap: balance; }

/* ══ A2 · Home ═══════════════════════════════════════════════════════════ */
.hm { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.hm-main, .hm-side { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.w h3.hm-eyebrow-link, .w .hm-sec h3.w-eyebrow { margin-bottom: 8px; }
.hm-eyebrow-link a { order: 2; font-size: var(--w-fs-ui); font-weight: 500; letter-spacing: 0; text-transform: none; }
.hm-eyebrow-link::after { order: 1; }
.hm-drop { display: flex; align-items: center; gap: 24px; padding: 20px 24px; margin-bottom: 4px;
  border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-lg); }
.hm-drop__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-small); line-height: var(--w-lh-small);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--w-ink-3); }
.hm-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--w-ink-disabled); }
.hm-drop__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--w-fs-card-title);
  line-height: var(--w-lh-card-title); font-weight: 600; letter-spacing: -0.02em; }
.hm-drop__when { font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink-2); }
.hm-drop__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.w .hm-drop .w-btn { height: 36px; padding: 0 14px; }
.hm-count { font-size: var(--w-fs-small); color: var(--w-ink-3); white-space: nowrap; }
.hm-count b { font-family: var(--w-font-mono); font-size: var(--w-fs-card-title); line-height: 24px; font-weight: 600;
  color: var(--w-ink); margin-right: 4px; }
.w .hm-row { display: flex; align-items: center; gap: 16px; padding: 14px 10px; border-bottom: 1px solid var(--w-border-subtle);
  color: var(--w-ink); }
.w .hm-row:hover { background: var(--w-surface-hover); text-decoration: none; color: var(--w-ink); }
.hm-row__n { width: 48px; flex: none; font-size: var(--w-fs-stat); line-height: var(--w-lh-stat); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-row__t { font-size: var(--w-fs-body); line-height: var(--w-lh-body); font-weight: 500; }
.hm-row__m { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); }
.hm-row__go { flex: none; width: 140px; text-align: right; font-size: var(--w-fs-ui); font-weight: 500; color: var(--w-link); }
.hm-clear { display: flex; align-items: center; gap: 16px; padding: 10px; font-size: var(--w-fs-body); line-height: var(--w-lh-body);
  color: var(--w-ink-3); }
.hm-clear .w-icon { width: 48px; height: 16px; flex: none; color: var(--w-success-solid); padding-right: 32px; }
.hm-big { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 14px 10px; border-bottom: 1px solid var(--w-border-subtle); }
.hm-big b { font-size: var(--w-fs-stat); line-height: var(--w-lh-stat); font-weight: 600; letter-spacing: -0.02em; }
.hm-big span { font-size: var(--w-fs-body); color: var(--w-ink-2); }
.w .hm-person { display: flex; align-items: center; gap: 16px; padding: 12px 10px; border-bottom: 1px solid var(--w-border-subtle); color: var(--w-ink); }
.w .hm-person:hover { background: var(--w-surface-hover); text-decoration: none; color: var(--w-ink); }
.hm-person__av { width: 28px; height: 28px; margin-right: 20px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--w-surface-sunk); color: var(--w-ink-2); font-size: var(--w-fs-small); font-weight: 600; }
.hm-person__main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hm-person__main b { font-size: var(--w-fs-body); font-weight: 500; }
.hm-person__main span { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.hm-person__st { width: 220px; flex: none; }
.hm-person .hm-row__go { width: 120px; }
.hm-tools { display: flex; flex-direction: column; }
.w .hm-tool { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--w-r-md); color: var(--w-ink); }
.w .hm-tool:hover { background: var(--w-surface-sunk); text-decoration: none; color: var(--w-ink); }
.hm-tool__ico { width: 20px; height: 22px; flex: none; display: grid; place-items: center; color: var(--w-icon); }
.hm-tool__ico .w-icon { width: 18px; height: 18px; }
.hm-tool__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-tool__body b { font-size: var(--w-fs-body); line-height: 22px; font-weight: 500; }
.hm-tool__body span { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); }

@media (max-width: 899px) {
  .hm { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hm-drop { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 20px; }
  .hm-drop { position: relative; }
  .hm-drop__side { align-items: flex-start; }
  .hm-count { position: absolute; top: 18px; right: 20px; }
  .hm-count b { font-size: var(--w-fs-body); }
  .hm-row, .hm-person { padding-left: 0; padding-right: 0; }
  .hm-row__n { width: 40px; }
  .hm-row__go { width: auto; font-size: 0; }
  .hm-row__go::after { content: "›"; font-size: var(--w-fs-card-title); color: var(--w-ink-disabled); }
  .hm-person { align-items: flex-start; }
  .hm-person__av { margin-right: 4px; }
  .hm-person__main { gap: 2px 6px; }
  .hm-person__st { position: absolute; }
  .w .hm-person { position: relative; padding-bottom: 36px; }
  .hm-person__st { left: 48px; bottom: 12px; width: auto; }
  .hm-clear .w-icon { width: 40px; padding-right: 24px; }
  .hm-big { flex-direction: column; gap: 2px; }
}

/* ══ J2 · Resources, classroom ══════════════════════════════════════════ */
.cl-chip { cursor: pointer; }
.cl-chip .w-icon { width: 12px; height: 12px; color: var(--w-ink-3); }
.cl-meta { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.tr-viewas { margin: 0; }
.cl { --cl-cols: minmax(0, 1fr) 200px 190px 90px; }
.cl:not(.cl--admin) { --cl-cols: minmax(0, 1fr) 320px; }
.cl-head { display: grid; grid-template-columns: var(--cl-cols); gap: 16px; padding: 0 10px 10px;
  border-bottom: 1px solid var(--w-border); font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--w-ink-3); }
.cl-head__cat { padding-left: 80px; }
.cl-step { margin-top: 16px; }
.w .cl-band { width: 100%; border: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: var(--w-ink); }
.cl-band__chev { display: inline-grid; color: var(--w-ink-2); transition: transform .15s; }
.cl-band__chev .w-icon { width: 14px; height: 14px; }
.cl-step.is-folded .cl-band__chev { transform: rotate(-90deg); }
.cl-step.is-folded .cl-rows { display: none; }
.cl-band__name { white-space: nowrap; }
.cl-band .w-band__count { white-space: nowrap; }
.cl-head .cl-count { font-size: inherit; color: inherit; }
.cl-band__blurb { min-width: 0; font-weight: 400; font-size: var(--w-fs-ui); color: var(--w-ink-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cl-sub { margin: 16px 10px 4px; font-size: var(--w-fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--w-ink-3); }
.cl-empty { padding: 14px 10px; color: var(--w-ink-3); font-size: var(--w-fs-ui); }
.w .cl-row { display: grid; grid-template-columns: var(--cl-cols); gap: 16px; align-items: center; padding: 12px 10px;
  border-bottom: 1px solid var(--w-border-subtle); color: var(--w-ink); }
.w a.cl-row:hover, .cl-row:hover { background: var(--w-surface-hover); text-decoration: none; color: var(--w-ink); }
.cl-row.is-dragging { opacity: .4; }
.cl--admin .cl-row[draggable="true"] { cursor: grab; }
.w .cl-row__cat { display: flex; align-items: center; gap: 16px; min-width: 0; color: var(--w-ink); }
.w .cl-row__cat:hover { text-decoration: none; }
.w a.cl-row__cat:hover b { text-decoration: underline; }
.cl-cover { width: 64px; height: 40px; flex: none; border-radius: 6px; display: grid; place-items: center;
  background: var(--w-info-fg); color: var(--w-primary-ink); font-size: 11px; line-height: 1; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.cl-cover--shop { background: var(--w-primary); font-style: italic; letter-spacing: .02em; }
.cl-row__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cl-row__text b { font-size: var(--w-fs-body); line-height: 22px; font-weight: 500; }
.cl-row__text span { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-for { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cl-for__chip { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--w-r-sm); background: var(--w-neutral-bg);
  color: var(--w-ink-2); font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-count { font-size: var(--w-fs-body); color: var(--w-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cl-prog { display: flex; align-items: center; gap: 16px; }
.cl-bar { position: relative; flex: none; width: 140px; height: 6px; border-radius: 3px; background: var(--w-neutral-bg); overflow: hidden; }
.cl-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--w-ink); }
.cl-bar.is-done > i { background: var(--w-success-solid); }
.cl-prog__txt { font-size: var(--w-fs-ui); color: var(--w-ink-2); white-space: nowrap; }
.cl-prog__txt.is-done { color: var(--w-success-solid); }

@media (max-width: 899px) {
  .cl-head { display: none; }
  .cl-band__blurb { display: none; }
  .w .cl-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cat cat acts" "for count acts";
    gap: 8px 12px; padding: 12px 0; }
  .w .cl-row--learner { grid-template-areas: "cat cat cat" "prog prog prog"; }
  .cl-row__cat { grid-area: cat; }
  .cl--admin .cl-for { grid-area: for; margin-left: 80px; }
  .cl-count { grid-area: count; font-size: var(--w-fs-ui); }
  .cl-acts { grid-area: acts; }
  .cl-prog { grid-area: prog; margin-left: 80px; }
  .cl-bar { width: auto; flex: 1; }
}

/* ══ K2 · Resources, a lesson ═══════════════════════════════════════════ */
.ct-back { display: none; }
.tr-class { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.tr-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 2px 4px 24px 0; min-width: 0; }
.ct-railhead { margin-bottom: 14px; }
.w .ct-railhead__btn { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; color: var(--w-ink); cursor: default; }
.ct-railhead__label { flex: 1; font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--w-ink-3); }
.ct-railhead__label--phone, .ct-railhead__chev { display: none; }
.ct-railhead__n { font-size: var(--w-fs-ui); color: var(--w-ink-2); white-space: nowrap; }
.ct-bar { display: block; position: relative; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--w-neutral-bg); overflow: hidden; }
.ct-bar > i { position: absolute; inset: 0 auto 0 0; background: var(--w-ink); border-radius: 2px; }
.ct-findrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ct-findrow .w-find { flex: 1; }
.ct-selmode[aria-pressed="true"] { font-weight: 600; }
.tr-folder-head { display: flex; align-items: center; margin-top: 10px; }
.w .tr-folder-toggle { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 30px; border: 0; background: none;
  font: inherit; font-size: var(--w-fs-ui); font-weight: 600; color: var(--w-ink); text-align: left; cursor: pointer; }
.tr-folder-toggle .w-icon { width: 12px; height: 12px; color: var(--w-ink-2); transition: transform .15s; }
.tr-folder.is-collapsed .tr-folder-toggle .w-icon { transform: rotate(-90deg); }
.tr-folder.is-collapsed .tr-lessons { display: none; }
.tr-folder.is-dragging { opacity: .4; }
.tr-lessons { list-style: none; margin: 0; padding: 0; min-height: 6px; }
.w .tr-lessons li a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--w-r-md);
  color: var(--w-ink); font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); }
.w .tr-lessons li a:hover { background: var(--w-surface-hover); text-decoration: none; }
.w .tr-lessons li.is-active a { background: var(--w-surface-sunk); font-weight: 600; }
.tr-lessons li.is-dragging { opacity: .4; }
.tr-lessons li[draggable="true"] { cursor: grab; }
.tr-lesson-title { flex: 1; min-width: 0; }
.tr-drop-hint { color: var(--w-ink-3); font-size: var(--w-fs-small); padding: 6px 10px; }
.tr-tick { width: 18px; height: 18px; margin-top: 1px; flex: none; border-radius: 50%; border: 1.5px solid var(--w-border);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; color: var(--w-primary-ink); }
.tr-tick .w-icon { width: 11px; height: 11px; }
/* The circle is a BUTTON for a learner (2026-10-19) and sits OUTSIDE the lesson link, so clicking
   it ticks the lesson off instead of opening it. It keeps the same 18px circle the status dot had,
   so the rail does not move. The check lives inside from the start and only becomes visible when
   the lesson is done, or faintly on hover, so there is no layout shift when it is ticked. */
.w .tr-lessons li { display: flex; align-items: flex-start; }
.w .tr-lessons li > a { flex: 1; min-width: 0; }
.w .tr-lessons li > .tr-tick--btn { margin: 10px 0 0 10px; }
.w .tr-tick--btn { padding: 0; background: none; cursor: pointer; transition: border-color .12s, background .12s; }
.w .tr-tick--btn .w-icon { opacity: 0; transition: opacity .12s; }
.w .tr-tick--btn:hover { border-color: var(--w-ink-2); }
.w .tr-tick--btn:hover .w-icon { opacity: .45; }
.w .tr-tick--btn[aria-pressed="true"] .w-icon { opacity: 1; }
/* ⚠️ `.w .tr-tick--btn` is MORE SPECIFIC than `.tr-tick-done`, so the button's own
   `background: none` beat the green and a ticked lesson rendered as an empty circle with a faint
   check. Every assertion passed (aria-pressed was true, the counter moved) and only the pixels
   showed it. Measured 2026-10-19. Keep these two selectors at the same weight as the base. */
.w .tr-tick--btn.tr-tick-done { background: var(--w-success-solid); border-color: var(--w-success-solid); }
.w .tr-tick--btn.tr-tick-done:hover { border-color: var(--w-success-solid); }
.w .tr-tick--btn:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }
.w .tr-tick--btn:disabled { cursor: progress; opacity: .6; }
.tr-tick--locked { cursor: default; }
/* The "I watched it" row under the video. */
.tr-doneline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.tr-doneline .tr-muted { font-size: var(--w-fs-small); }
.tr-tick-done { background: var(--w-success-solid); border-color: var(--w-success-solid); }
.tr-tick-wait { border-color: var(--w-ink-3); border-style: dashed; }
.tr-tick-back { background: var(--w-warning-bg); border-color: var(--w-warning-fg); color: var(--w-warning-fg); }
/* The select lane exists only in select mode (§4b: checkboxes are ink). */
.tr-sel { display: none; width: 16px; height: 16px; margin-top: 2px; flex: none; border-radius: 4px; border: 1.5px solid var(--w-border);
  background: var(--w-surface); cursor: pointer; position: relative; }
.tr-rail.is-selecting .tr-sel { display: inline-block; }
.tr-sel:hover { border-color: var(--w-ink); }
.tr-sel.is-selected { background: var(--w-ink); border-color: var(--w-ink); }
.tr-sel.is-selected::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--w-primary-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tr-outdated-dot { color: var(--w-warning-fg); font-size: var(--w-fs-ui); }
.tr-rail.is-trimmed:not(.is-finding) .tr-more:not(.is-active):not(:has(.is-active)) { display: none; }
.tr-rail .tr-nomatch { display: none; }
.ct-more { margin: 14px 10px 0; }
.tr-rail.is-finding .ct-more { display: none; }
.ct-nomatch { padding: 10px; color: var(--w-ink-3); font-size: var(--w-fs-ui); }

.tr-lesson { min-width: 0; }
.tr-lesson-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tr-lesson-head h1 { font-size: var(--w-fs-card-title); line-height: var(--w-lh-card-title); font-weight: 600; letter-spacing: -0.02em; }
.tr-lesson-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.w .tr-lesson-edit { margin-left: auto; }
.tr-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--w-r-lg); overflow: hidden; background: var(--w-primary); }
.tr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tr-triage { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px;
  background: var(--w-surface-sunk); border-radius: 10px; }
.w .tr-tri { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; font: inherit;
  font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); font-weight: 500; color: var(--w-link); cursor: pointer; white-space: nowrap; }
.w .tr-tri:hover { color: var(--w-link-hover); }
.tr-tri .w-icon { width: 12px; height: 12px; }
.tr-tri kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--w-border);
  border-radius: 4px; font: inherit; font-size: 11px; line-height: 1; color: var(--w-ink-3); background: var(--w-surface); }
.w .tr-tri-remove { color: var(--w-danger-fg); }
.w .tr-tri-remove:hover { color: var(--w-danger-solid-hover); }
.tr-od-on, .tr-tri-outdated.is-on .tr-od-off { display: none; }
.tr-tri-outdated.is-on .tr-od-on { display: inline; }
.w .tr-tri-outdated.is-on { color: var(--w-warning-fg); }
.tr-body { margin-top: 20px; font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink); max-width: 760px; overflow-wrap: anywhere; }
.tr-body h3 { font-size: var(--w-fs-body); font-weight: 600; margin: 16px 0 4px; }
.tr-body p + p, .tr-body ul, .tr-body ol { margin-top: 10px; }
.tr-resources { margin-top: 24px; }
.tr-resources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tr-resources a { font-size: var(--w-fs-ui); }
.tr-takeaway { margin-top: 24px; }
.tr-pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--w-border-subtle); }
.w .tr-pager a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; font-size: var(--w-fs-body); line-height: var(--w-lh-body); font-weight: 500; }
.w .tr-pager a:hover { text-decoration: none; }
.w .tr-pager a:hover span { text-decoration: underline; }
.tr-pager small { font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--w-ink-3); }
.tr-pager__next { text-align: right; margin-left: auto; }

@media (max-width: 899px) {
  .ct-title { display: none; }
  .w .ct-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: var(--w-fs-ui); font-weight: 500; }
  .ct-back .w-icon { width: 14px; height: 14px; }
  .tr-class { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tr-class > .tr-lesson { order: 1; }
  .tr-rail { order: 2; position: static; max-height: none; overflow: visible; padding: 14px 16px; border-radius: var(--w-r-lg);
    background: var(--w-surface-sunk); }
  .tr-rail:not(.is-open) > :not(.ct-railhead) { display: none; }
  .tr-rail:not(.is-open) .ct-railhead { margin-bottom: 0; }
  .w .ct-railhead__btn { cursor: pointer; align-items: center; gap: 8px; }
  .ct-railhead__label { display: none; }
  .ct-railhead__label--phone { display: block; flex: 1; font-size: var(--w-fs-body); line-height: var(--w-lh-body); font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--w-ink); }
  .ct-railhead__chev { display: inline-grid; color: var(--w-ink-2); }
  .tr-rail.is-open .ct-railhead__chev { transform: rotate(180deg); }
  .tr-rail .w-find { background: var(--w-surface); }
  .tr-lesson-head { gap: 10px; margin-bottom: 14px; }
  .tr-lesson-head h1 { flex: 1 1 100%; font-size: var(--w-fs-stat); line-height: var(--w-lh-stat); }
  .w .tr-lesson-edit { margin-left: 0; }
  .tr-video { border-radius: var(--w-r-md); }
  .tr-triage { gap: 8px 18px; }
  .tr-triage > .w-status, .tr-triage .tr-spacer, .tr-tri kbd, .tr-tri-move { display: none !important; }
  .tr-pager { flex-direction: column-reverse; gap: 16px; }
  .w .tr-pager a { max-width: none; }
  .tr-pager__next { text-align: left; margin-left: 0; }
  .ct-bulk { gap: 14px; padding: 10px 14px; overflow-x: auto; }
  .tr-form-row { grid-template-columns: 1fr; }
}

/* ══ L2 · Resources, analytics ══════════════════════════════════════════ */
.an-toolbar { margin-bottom: 24px; }
.an-pick { position: static; }
.an-pick > summary.w-seg__item { width: auto; height: 30px; display: inline-flex; gap: 6px; }
.an-pick > summary .w-icon { width: 12px; height: 12px; transform: none; }
.w-seg { position: relative; }
.an-pick__form { left: auto; right: 0; top: calc(100% + 6px); padding: 12px; gap: 10px; min-width: 220px;
  max-width: calc(100vw - 32px); }
.an-pick__form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--w-fs-small); font-weight: 600; color: var(--w-ink-3); }
.an-pick__form input { height: 34px; padding: 0 8px; border: 1px solid var(--w-border); border-radius: var(--w-r-md); font: inherit;
  font-size: var(--w-fs-ui); color: var(--w-ink); }
.an-range { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.an-stats { margin-bottom: 24px; }
.w-stats__value small { margin-left: 6px; font-size: var(--w-fs-body); font-weight: 400; letter-spacing: 0; color: var(--w-ink-2); }
.an-chart { margin-bottom: 36px; }
.an-chart__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.an-chart__head h3 { font-size: var(--w-fs-body); font-weight: 600; }
.an-chart__head span { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.an-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; border-bottom: 1px solid var(--w-border-subtle); }
.an-bar { position: relative; flex: 1; height: 100%; min-width: 2px; }
.an-bar > i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; background: var(--w-ink); }
.an-bar.is-zero > i { height: 2px !important; border-radius: 1px; background: var(--w-neutral-bg); }
.an-num { font-variant-numeric: tabular-nums; }
.an-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--w-fs-small); color: var(--w-ink-3); }
.an-people td { vertical-align: middle; }
.w .an-name { font-size: var(--w-fs-body); font-weight: 500; color: var(--w-ink); }
.an-row { cursor: pointer; }
.an-seen { color: var(--w-ink); }
.an-before { font-size: var(--w-fs-small); color: var(--w-ink-3); }
.an-track { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
td.an-track { display: table-cell; }
td.an-track > * { vertical-align: middle; }
.an-trackbar { position: relative; display: inline-block; width: 146px; height: 6px; border-radius: 3px; background: var(--w-neutral-bg); overflow: hidden; }
.an-trackbar > i { position: absolute; inset: 0 auto 0 0; background: var(--w-ink); border-radius: 3px; }
.an-tracktxt { display: inline-block; min-width: 64px; margin-left: 12px; text-align: right; font-size: var(--w-fs-ui); color: var(--w-ink-2); }
.an-go { text-align: right; white-space: nowrap; }
.an-go a { font-weight: 500; }
.an-cards, .an-funnel-cards { display: none; }
.w h3.an-lessons-h { margin-top: 36px; }
.an-lesson { font-weight: 500; }
.an-strong { font-weight: 600; }
.an-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 12px; padding: 0 10px; }
.an-foot p { max-width: 560px; text-align: right; font-size: var(--w-fs-small); line-height: var(--w-lh-small); color: var(--w-ink-3); }
@media (min-width: 900px) { .an-phone-only { display: none; } }
@media (max-width: 899px) {
  .an-toolbar .w-toolbar__spacer, .an-range { display: none; }
  .an-toolbar .w-seg { max-width: 100%; }
  .an-toolbar .w .w-seg__item, .an-toolbar .w-seg__item { padding: 0 10px; }
  .an-stats .w-stats__item { padding-left: 0; border-left: 0; }
  .an-stats .w-stats__item:nth-child(3) { flex-basis: 100%; }
  .an-chart__head { flex-direction: column; gap: 2px; margin-bottom: 14px; }
  .an-bars { gap: 3px; }
  .an-people-wrap, .an-funnel-wrap { display: none; }
  .an-cards, .an-funnel-cards { display: block; }
  .w .an-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 28px 14px 0;
    border-bottom: 1px solid var(--w-border-subtle); color: var(--w-ink); }
  .w .an-card:hover { text-decoration: none; }
  .an-card__name { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
  .an-card__name b { font-size: var(--w-fs-body); font-weight: 500; color: var(--w-ink); margin-right: 4px; }
  .an-card__seen { font-size: var(--w-fs-ui); color: var(--w-ink-2); }
  .an-card .an-track { gap: 0; }
  .an-card .an-trackbar { flex: 1; width: auto; }
  .an-card__chev { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--w-ink-disabled); }
  .an-fcard { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--w-border-subtle); }
  .an-fcard[hidden] { display: none; }
  .an-fcard b { font-size: var(--w-fs-body); font-weight: 500; }
  .an-fcard span { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
  .an-foot { flex-direction: column; gap: 10px; padding: 0; }
  .an-foot p { text-align: left; }
}

/* ══ M2 · Resources, drafts ═════════════════════════════════════════════ */
.dr-tabs { margin-bottom: 20px; }
.w .dr-tabs a { position: relative; display: inline-flex; align-items: center; padding: 0 0 11px; color: var(--w-ink-2);
  font-size: var(--w-fs-ui); }
.w .dr-tabs a:hover { color: var(--w-ink); text-decoration: none; }
.w .dr-tabs a[aria-selected="true"] { color: var(--w-ink); font-weight: 600; }
.w .dr-tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--w-ink); }
.dr-tabs small { margin-left: 8px; font-size: var(--w-fs-ui); font-weight: 400; }
.dr-chip .w-icon { width: 12px; height: 12px; color: var(--w-ink-3); }
.dr-find { width: 300px; height: 34px; }
.dr-table td { vertical-align: top; }
.dr-cb { width: 36px; }
.dr-check { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--w-ink); cursor: pointer; }
.dr-title { display: block; font-size: var(--w-fs-body); line-height: 22px; font-weight: 500; color: var(--w-ink); }
.dr-watch { font-size: var(--w-fs-ui); }
.dr-cat, .dr-for { color: var(--w-ink-2); }
.dr-why { color: var(--w-ink-2); max-width: 300px; }
.dr-why .w-cell-sub { margin-top: 2px; }
.dr-sugg, .dr-watch--phone { display: none; }
.dr-log summary { font-size: var(--w-fs-small); color: var(--w-link); cursor: pointer; list-style: none; }
.dr-log summary::-webkit-details-marker { display: none; }
.dr-log p { margin-top: 4px; font-family: var(--w-font-mono); font-size: var(--w-fs-small); line-height: var(--w-lh-small);
  color: var(--w-ink-3); overflow-wrap: anywhere; }
.dr-acts { white-space: nowrap; text-align: right; }
.dr-acts > * { vertical-align: middle; }
.w .dr-acts > * + * { margin-left: 14px; }
.w .dr-acts .tr-menu { margin-left: 8px; }
.w .dr-pick { display: inline-flex; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); font-weight: 500; color: var(--w-ink-2); cursor: pointer; }
.w .dr-pick.is-primary { color: var(--w-link); }
.w .dr-pick:hover { color: var(--w-ink); }
.dr-more { margin-top: 18px; text-align: center; font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.dr-more button { margin-left: 8px; }
.dr-more button[hidden] { display: none; }
.dr-wrap { padding-bottom: 8px; }
.dr-nomatch { padding: 24px 10px; text-align: center; color: var(--w-ink-3); font-size: var(--w-fs-ui); }
.dr-nomatch[hidden] { display: none; }
@media (max-width: 899px) {
  .dr-find { width: 100%; flex: 1 1 100%; order: -1; }
  .dr-table { min-width: 0 !important; }
  .dr-table, .dr-table tbody, .dr-table tr, .dr-table td { display: block; }
  .dr-table thead, .dr-table td.dr-cb, .dr-table td.dr-cat, .dr-table td.dr-for, .dr-loom .dr-watch { display: none; }
  .dr-table tr[hidden] { display: none; }
  .dr-table tr { padding: 14px 0; border-bottom: 1px solid var(--w-border-subtle); }
  .dr-table td { padding: 0; border: 0; }
  .dr-table tbody tr:hover td { background: none; }
  .dr-why { max-width: none; margin-top: 6px; font-size: var(--w-fs-ui); }
  .dr-sugg { display: block; margin-top: 6px; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); }
  .dr-table td.dr-acts { display: flex; align-items: center; gap: 18px; margin-top: 10px; text-align: left; }
  .w .dr-acts > * + * { margin-left: 0; }
  .dr-watch--phone { display: inline; font-weight: 500; }
  .w .dr-acts .tr-menu { margin-left: auto; }
}

/* ══ N2 · Resources, review ═════════════════════════════════════════════ */
.rv { max-width: 1080px; }
.rv-list { display: flex; flex-direction: column; gap: 16px; }
.rv-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
.rv-who { display: flex; gap: 14px; align-items: flex-start; }
.rv-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--w-surface-sunk);
  color: var(--w-ink-2); font-size: var(--w-fs-small); font-weight: 600; }
.rv-who div { display: flex; flex-direction: column; gap: 1px; font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.rv-who b { font-size: var(--w-fs-body); font-weight: 600; color: var(--w-ink); }
.rv-body { min-width: 0; }
.rv-lesson { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.rv-lesson b { font-size: var(--w-fs-body); font-weight: 600; color: var(--w-ink); }
.rv-form { display: flex; align-items: flex-end; gap: 8px; }
.rv-note { flex: 1; min-width: 0; min-height: 36px; padding: 7px 12px; border: 1px solid transparent; border-radius: var(--w-r-md);
  background: var(--w-surface-sunk); font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink);
  resize: none; overflow: hidden; }
.rv-note:focus { outline: none; border-color: var(--w-ink); background: var(--w-surface); }
.w .rv-form .w-btn { height: 36px; padding: 0 14px; }
.w h3.rv-recent-h { margin-top: 36px; }
.rv-strong { font-weight: 500; }
.rv-muted { color: var(--w-ink-2); }
@media (max-width: 899px) {
  .rv-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rv-form { flex-wrap: wrap; }
  .rv-note { flex: 1 1 100%; }
}

/* ══ O2 · Resources, to re-record ═══════════════════════════════════════ */
.od-title { display: block; font-size: var(--w-fs-body); line-height: 22px; font-weight: 500; color: var(--w-ink); }
.od-watch { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--w-fs-ui); }
.od-watch .w-icon { width: 12px; height: 12px; }
.od-muted { color: var(--w-ink-2); }
.od-acts { text-align: right; white-space: nowrap; }
.od-acts > * { vertical-align: middle; }
.od-acts .tr-menu { margin-left: 10px; }

/* ══ P2 · Your AI token ═════════════════════════════════════════════════ */
.tk-rows { border-top: 1px solid var(--w-border-subtle); }
.tk-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--w-border-subtle); }
.tk-k b { display: block; font-size: var(--w-fs-body); font-weight: 600; }
.tk-k span { display: block; margin-top: 2px; font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.tk-v p { font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink-2); }
.tk-field { display: flex; gap: 8px; align-items: flex-start; }
.tk-tok { flex: 1; min-width: 0; min-height: 36px; padding: 8px 14px; border-radius: var(--w-r-md); background: var(--w-surface-sunk);
  font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); letter-spacing: .2em; color: var(--w-ink-2); overflow-wrap: anywhere; }
.tk-tok.is-shown { letter-spacing: 0; color: var(--w-ink); }
.tk-btns { display: flex; gap: 8px; flex: none; }
.w .tk-btns .w-btn { height: 36px; padding: 0 14px; gap: 6px; }
.w .tk-v .tk-help { margin-top: 10px; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); }
.tk-link { display: inline-block; margin-top: 8px; font-size: var(--w-fs-ui); font-weight: 500; }
@media (max-width: 899px) {
  .tk-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .tk-field { flex-wrap: wrap; }
  .tk-tok { flex: 1 1 100%; }
}

/* ══ person page + error ════════════════════════════════════════════════ */
.pe-list { display: flex; flex-direction: column; }
.pe-item { padding: 14px 10px; border-bottom: 1px solid var(--w-border-subtle); }
.pe-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pe-head b { font-size: var(--w-fs-body); font-weight: 500; }
.pe-when { font-size: var(--w-fs-ui); color: var(--w-ink-3); }
.w h3.pe-act-h { margin-top: 32px; }
.pe-none { padding: 10px; color: var(--w-ink-3); }
.er { padding-top: 32px; }

/* ── lesson body content (rendered markdown) ───────────────────────────── */
/* An embedded clip. Chris, 2026-10-09: "instead of hyperlinking, I wanted you to embed
   each loom." Four blue links in a lesson are four decisions to leave the page. */
.tr-embed { margin: 20px 0; }
.tr-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--w-r-md); background: var(--w-surface-sunk); }
.tr-embed figcaption { margin-top: 8px; color: var(--w-ink-2);
  font-size: var(--w-fs-small); line-height: var(--w-lh-small); }

/* Copyable block — for text a person must paste EXACTLY (a setup block, a command).
   Chris, 2026-10-09, running the setup as a teammate: a long literal shown as prose is
   unreadable and easy to half-select, and on a setup step that means a broken install the
   person cannot debug. One click, whole block. ⚠️ The <pre> scrolls INSIDE the block, so a long
   command line can never widen the phone page. */
.tr-code { position: relative; margin: 16px 0; border: 1px solid var(--w-border); max-width: 100%;
  border-radius: var(--w-r-md); background: var(--w-surface-sunk); }
.tr-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; max-width: 100%; }
.tr-code code { font-family: var(--w-font-mono); font-size: 13px; line-height: 1.6; white-space: pre; color: var(--w-ink); }
.tr-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 12px;
  border: 1px solid var(--w-border); border-radius: var(--w-r-sm);
  background: var(--w-surface); color: var(--w-ink-2); font-size: 12px;
  font-weight: 600; cursor: pointer; }
.tr-copy:hover { border-color: var(--w-focus); color: var(--w-ink); }
.tr-copy[data-done] { background: var(--w-success-bg); color: var(--w-success-solid);
  border-color: var(--w-success-solid); }

/* The person's own key, inside a block that is otherwise all one colour.
   Chris, 2026-10-09: it "blends in with the background" — and it is the one
   value in the block that is his and that a typo silently breaks. */
.tr-key { background: var(--w-info-bg); color: var(--w-info-fg);
  border-radius: var(--w-r-sm); padding: 1px 4px; font-weight: 700; }

/* The one thing in a block they must TYPE OVER. Danger colours on purpose: `.tr-key` says
   "this is already yours, leave it", this says "replace me or nothing works". */
.tr-fill { background: var(--w-danger-bg); color: var(--w-danger-fg);
  border-radius: var(--w-r-sm); padding: 1px 4px; font-weight: 700;
  outline: 1px dashed var(--w-danger-fg); outline-offset: 1px; }

/* Below 900px no SENTENCE is set under 14px (live review 2026-10-16): the 12px step stays for
   caps labels, counts and kbd only. */
@media (max-width: 899px) {
  /* last in the file on purpose: it must win over every page rule above */
  .w .w-cell-sub, .dr-sugg, .dr-log summary, .dr-log p, .an-foot p, .tr-drop-hint,
  .tk-k span, .hm-count, .w-stats__note { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); }
}

/* Done-toggle QA fixes (2026-10-19). The target is 24px for touch and keyboard users while the
   painted status circle remains 18px. The outer box replaces margin, so lesson text stays aligned. */
.w .tr-lessons li > .tr-tick--btn { margin: 7px 0 0 4px; }
.w .tr-tick--btn { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.w .tr-tick--btn::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--w-border);
  border-radius: 50%; transition: border-color .12s, background .12s; }
.w .tr-tick--btn .w-icon { position: relative; z-index: 1; }
.w .tr-tick--btn:hover::before { border-color: var(--w-ink-2); }
.w .tr-tick--btn.tr-tick-done { background: none; border-color: transparent; }
.w .tr-tick--btn.tr-tick-done::before { background: var(--w-success-solid); border-color: var(--w-success-solid); }
.w .tr-tick--btn.tr-tick-done:hover::before { border-color: var(--w-success-solid); }
.w .tr-tick--btn.tr-tick-wait { border: 0; }
.w .tr-tick--btn.tr-tick-wait::before { border-color: var(--w-ink-3); border-style: dashed; }
.w .tr-tick--btn.tr-tick-back { border: 0; background: none; }
.w .tr-tick--btn.tr-tick-back::before { background: var(--w-warning-bg); border-color: var(--w-warning-fg); }
@media (max-width: 480px) {
  .tr-doneline [data-done-hint] { flex-basis: 100%; }
}