/* ============================================================
   GAIBE Learning — teacher live class view (teacher-live.js).
   Every selector is .tl- prefixed. Relies on demo.css tokens.
   Status = glyph + word + colour, never colour alone.
   ============================================================ */

.tl {
  /* status scale: text colours checked ≥ 4.5:1 on their soft backgrounds */
  --tl-good: var(--green);           --tl-good-bg: var(--green-soft);
  --tl-bad: #BE3136;                 --tl-bad-bg: rgba(229, 72, 77, 0.11);
  --tl-warn: #8A5300;                --tl-warn-bg: var(--amber-soft);
  --tl-work: #2449D8;                --tl-work-bg: var(--blue-soft);
  --tl-idle: var(--ink-soft);        --tl-idle-bg: var(--paper-deep);
  /* ordinal step ramp: one hue, light → dark */
  --tl-s0: #E7E5DD; --tl-s1: #DCE3FF; --tl-s2: #B6C6FF; --tl-s3: #7D98FF; --tl-s4: #2D5BFF;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-body);
}
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
.tl [hidden] { display: none !important; }
.tl h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.005em; }
.tl .card { border-radius: var(--radius); }

/* ---------------------------------------------------------------- header */
.tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tl-lesson { min-width: 0; }
.tl-lesson-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tl-teks, .tl-grade {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
.tl-teks { background: var(--blue-soft); color: var(--tl-work); }
.tl-grade { background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--line); }
.tl-teks-sm { font-size: 0.56rem; padding: 2px 7px; }
.tl-title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.05rem); font-weight: 580; line-height: 1.05; }
.tl-prompt { margin-top: 7px; max-width: 70ch; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.tl-pulse {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px;
  box-shadow: var(--shadow-soft); white-space: nowrap;
}
.tl-pulse-dot.idle { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }

/* ---------------------------------------------------------------- section heads */
.tl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-sec-head > span { font-size: 0.76rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- tiles */
.tl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tl-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 13px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.tl-k { display: block; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; }
.tl-v { font-family: var(--font-display); font-size: 2.15rem; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-v small { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--ink-faint); margin-left: 5px; }
.tl-sub { display: block; font-size: 0.76rem; line-height: 1.4; color: var(--ink-soft); margin-top: 6px; }
.tl-tile.tl-hero .tl-v { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tl-tile.tl-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.tl-tile.tl-t-bad::before, .tl-tile.tl-t-warn::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.tl-tile.tl-t-bad::before { background: var(--red); }
.tl-tile.tl-t-bad .tl-v { color: var(--tl-bad); }
.tl-tile.tl-t-warn::before { background: var(--amber); }
.tl-tile.tl-t-warn .tl-v { color: var(--tl-warn); }

/* ---------------------------------------------------------------- class progress */
.tl-progress { padding: 14px 16px 13px; margin-bottom: 20px; }
.tl-progress .tl-sec-head { margin-bottom: 9px; }
.tl-bar { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--paper-deep); }
.tl-bar span {
  display: grid; place-items: center; min-width: 3px; height: 100%;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--ink);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-step0 { background: var(--tl-s0); } .tl-bar .tl-step0 { color: var(--ink-soft); }
.tl-step1 { background: var(--tl-s1); }
.tl-step2 { background: var(--tl-s2); }
.tl-step3 { background: var(--tl-s3); }
.tl-step4 { background: var(--tl-s4); } .tl-bar .tl-step4 { color: #fff; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.tl-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-soft); }
.tl-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(27,34,64,.08); }
.tl-leg b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- class layout */
.tl-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tl-students, .tl-groups-wrap { min-width: 0; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

/* ---------------------------------------------------------------- status pill */
.tl-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 0.72rem; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 5px 9px 5px 8px; border-radius: 999px;
}
.tl-glyph { font-size: 0.78rem; line-height: 1; width: 0.9em; text-align: center; }
.tl-s-explained     { background: var(--tl-good-bg); color: var(--tl-good); }
.tl-s-misconception { background: var(--tl-bad-bg);  color: var(--tl-bad); }
.tl-s-stuck         { background: var(--tl-warn-bg); color: var(--tl-warn); }
.tl-s-working       { background: var(--tl-work-bg); color: var(--tl-work); }
.tl-s-not-started   { background: var(--tl-idle-bg); color: var(--tl-idle); }
.tl-s-finished      { background: var(--paper-deep); color: var(--ink-soft); }

/* ---------------------------------------------------------------- student card */
.tl-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 14px 14px; box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.tl-card:hover { transform: translateY(-2px); border-color: rgba(45, 91, 255, 0.35); box-shadow: var(--shadow-lift); }
.tl-card:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-card.tl-st-misconception { box-shadow: inset 3px 0 0 var(--red), var(--shadow-soft); }
.tl-card.tl-st-stuck { box-shadow: inset 3px 0 0 var(--amber), var(--shadow-soft); }
.tl-card.tl-st-not-started { background: rgba(255, 255, 255, 0.6); box-shadow: none; }
.tl-card.tl-st-misconception:hover { box-shadow: inset 3px 0 0 var(--red), var(--shadow-lift); }
.tl-card.tl-st-stuck:hover { box-shadow: inset 3px 0 0 var(--amber), var(--shadow-lift); }

.tl-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tl-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--paper-deep); border: 1px solid var(--line); color: var(--ink-soft);
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.02em;
}
.tl-avatar-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 0.95rem; }
.tl-avatar-sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.64rem; }
.tl-name {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-card-prog { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-dots { display: inline-flex; align-items: center; flex-shrink: 0; width: 86px; }
.tl-dots i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--card); border: 2px solid var(--line-strong); }
.tl-dots i.on { background: var(--blue); border-color: var(--blue); }
.tl-dots b { flex: 1; height: 2px; background: var(--line-strong); }
.tl-dots b.on { background: var(--blue); }
.tl-st-explained .tl-dots i.on { background: var(--green); border-color: var(--green); }
.tl-st-explained .tl-dots b.on { background: var(--green); }
.tl-steplabel { font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em; color: var(--tl-bad);
  background: var(--tl-bad-bg); border-radius: 999px; padding: 3px 9px; overflow-wrap: anywhere;
}
.tl-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); background: var(--paper-deep);
  border-radius: 999px; padding: 3px 9px;
}
.tl-hint-warn, .tl-hint.tl-m-none { color: var(--tl-warn); background: var(--tl-warn-bg); }
.tl-hint.tl-m-partial { color: var(--tl-warn); background: var(--tl-warn-bg); }
.tl-said {
  margin-top: auto; font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  padding-top: 9px; border-top: 1px dashed var(--line);
}
.tl-said-empty { color: var(--ink-faint); font-style: normal; }

/* status-change flash: a ring that blooms and fades (off under reduced motion) */
.tl-card::after, .tl-grp::after, .tl-rep::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.45);
}
.tl-card.tl-st-misconception::after { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.5); }
.tl-card.tl-st-stuck::after { box-shadow: 0 0 0 3px rgba(245, 158, 45, 0.6); }
.tl-card.tl-st-explained::after { box-shadow: 0 0 0 3px rgba(26, 122, 80, 0.5); }
.tl-flash::after { animation: tl-flash 1.6s ease-out; }
@keyframes tl-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- student card: extras */
.tl-tag-fixed { color: var(--ink-soft); background: var(--paper-deep); gap: 7px; }
.tl-tag-fixed .tl-tag-t { text-decoration: line-through; text-decoration-color: rgba(27, 34, 64, 0.35); }
.tl-tag-ok { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; color: var(--tl-good); white-space: nowrap; }
.tl-card-note {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  font-size: 0.8rem; line-height: 1.42; color: var(--ink);
}
.tl-card-note-t { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tl-g.tl-g-xs { width: 18px; height: 18px; border-radius: 6px; font-size: 0.62rem; margin-top: 1px; box-shadow: none; }
.tl-g.tl-g-sm { width: 22px; height: 22px; border-radius: 7px; font-size: 0.72rem; box-shadow: 0 4px 10px -5px rgba(45, 91, 255, 0.6); }

/* ---------------------------------------------------------------- view switch */
.tl-views { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-views-sub { font-size: 0.78rem; color: var(--ink-faint); }
.tl-seg {
  display: inline-flex; gap: 3px; padding: 4px; min-width: 0;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow-soft);
}
.tl-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1.15; color: var(--ink-soft); cursor: pointer;
  background: transparent; border: 0; border-radius: 999px; padding: 8px 16px 8px 13px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tl-seg-btn:hover { color: var(--ink); background: var(--paper-deep); }
.tl-seg-btn[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(27, 34, 64, 0.7); }
.tl-seg-btn:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 1px; }
.tl-seg-g {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 800; background: var(--paper-deep); color: var(--ink-soft);
}
.tl-seg-btn[aria-selected="true"] .tl-seg-g { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tl-seg-btn[data-view="reports"] .tl-seg-g { background: var(--grad); color: #fff; font-family: var(--font-display); }

/* the "By misconception" view IS the grouping: the live-groups aside steps aside */
.tl-v-misconceptions .tl-groups-wrap { display: none; }
.tl-v-misconceptions .tl-main { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- by misconception */
.tl-msecs { display: flex; flex-direction: column; gap: 16px; }
.tl-msec {
  min-width: 0; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 16px;
}
.tl-msec-open { background: var(--card); box-shadow: inset 4px 0 0 var(--red), var(--shadow-soft); }
.tl-msec-corrected { box-shadow: inset 4px 0 0 var(--green); }
.tl-msec-head { margin-bottom: 12px; }
.tl-msec-top { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tl-msec-h { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.tl-msec-bad { font-family: var(--font-mono); font-size: 0.9rem; color: var(--tl-bad); }
.tl-msec-corrected .tl-msec-h { color: var(--tl-good); }
.tl-msec-n { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tl-msec-plain { margin-top: 6px; max-width: 80ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.tl-msec-plain em { font-style: normal; font-weight: 700; color: var(--ink); }
.tl-msec-waiting .tl-card { gap: 6px; padding: 10px 12px; }
.tl-msec-waiting .tl-card-prog, .tl-msec-waiting .tl-said { display: none; }
.tl-msec-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.tl-msec-waiting .tl-msec-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* ---------------------------------------------------------------- progress reports */
.tl-rsum {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 15px 18px; margin-bottom: 14px; overflow: hidden;
}
.tl-rsum::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.tl-rsum-body { min-width: 0; flex: 1 1 380px; }
.tl-rsum-k {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; color: var(--ink);
}
.tl-rsum-of { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tl-rsum-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; font-size: 0.9rem; color: var(--ink-soft); }
.tl-sum { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tl-sum b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-sum-g { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; }
.tl-sum-explained .tl-sum-g { background: var(--tl-good-bg); color: var(--tl-good); }
.tl-sum-partial .tl-sum-g, .tl-sum-none .tl-sum-g { background: var(--tl-warn-bg); color: var(--tl-warn); }
.tl-sum-bad .tl-sum-g { background: var(--tl-bad-bg); color: var(--tl-bad); }
.tl-sum-bad:not(.tl-sum-zero) b { color: var(--tl-bad); }
.tl-sum-pending .tl-sum-g { background: var(--paper-deep); color: var(--ink-soft); }
.tl-sum-zero { opacity: 0.6; }
.tl-sum-sep { color: var(--ink-faint); }
.tl-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 16px 9px 13px;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tl-copy:hover { border-color: var(--ink); }
.tl-copy:disabled { cursor: progress; opacity: 0.75; }
.tl-rsum-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* §8: a gated PDF button stays visible (and focusable) and says why it waits */
.tl-pdf-txt { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; line-height: 1.2; }
.tl-pdf-why { font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); }
.tl-pdf-why[hidden] { display: none; }
.tl-copy[aria-disabled="true"] { cursor: not-allowed; background: var(--paper-deep); border-style: dashed; color: var(--ink-soft); }
.tl-copy[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.tl-copy[aria-disabled="true"] .tl-copy-g { opacity: 0.55; }
.tl-copy.tl-pdf-err { background: var(--tl-bad-bg); border-color: rgba(229, 72, 77, 0.45); color: var(--tl-bad); }
/* §9: the server report couldn't be written, so the PDF used the quick (template) version */
.tl-copy.tl-pdf-quick { border-style: dashed; }
.tl-copy[aria-busy="true"] { cursor: progress; }
.tl-report-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tl-report-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tl-report-actions:not(:has(> :not([hidden]))) { display: none; }
.tl-copy:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-copy-g { font-size: 0.95rem; line-height: 1; }
.tl-copy.tl-copy-ok { background: var(--tl-good-bg); border-color: rgba(26, 122, 80, 0.4); color: var(--tl-good); }
.tl-copy.tl-copy-ok .tl-copy-g::before { content: "✓"; }
.tl-copy.tl-copy-ok .tl-copy-g { font-size: 0; }
.tl-copy.tl-copy-ok .tl-copy-g::before { font-size: 0.9rem; }

.tl-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.tl-rep {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.tl-rep::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.45);
}
.tl-rep.tl-st-misconception { box-shadow: inset 4px 0 0 var(--red), var(--shadow-soft); }
.tl-rep.tl-st-stuck { box-shadow: inset 4px 0 0 var(--amber), var(--shadow-soft); }
.tl-rep.tl-st-explained { box-shadow: inset 4px 0 0 var(--green), var(--shadow-soft); }
.tl-rep-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 16px 0 18px; }
.tl-rep-name {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-rep-note { margin: 12px 14px 0; padding: 12px 14px 13px; background: linear-gradient(94deg, rgba(45,91,255,.06), rgba(123,92,255,.07)); border-radius: 13px; }
.tl-rep-k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-ink);
}
.tl-rep-note-text { margin-top: 8px; font-family: var(--font-display); font-size: 1.08rem; font-weight: 460; line-height: 1.4; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.tl-rep-note-empty { font-family: var(--font-body); font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); }
.tl-rep-track { padding: 13px 18px 0; }
.tl-rep-k2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.tl-rep-k2-l { font-weight: 600; color: var(--ink-soft); }
.tl-rep-k2 .tl-hint { font-size: 0.66rem; padding: 2px 8px; }
.tl-track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.tl-track li { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tl-track-bar { height: 6px; border-radius: 3px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--line); }
.tl-track li.done .tl-track-bar { background: var(--blue); box-shadow: none; }
.tl-st-explained .tl-track li.done .tl-track-bar { background: var(--green); }
.tl-track-l { font-size: 0.66rem; line-height: 1.25; color: var(--ink-faint); overflow-wrap: anywhere; }
.tl-track li.done .tl-track-l { color: var(--ink-soft); font-weight: 600; }
.tl-track li.cur .tl-track-l { color: var(--ink); }
.tl-rep-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 14px; margin: 13px 18px 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.tl-rep-facts dt { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.tl-rep-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tl-rep-mastery { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.tl-rep-mastery.tl-m-explained { color: var(--tl-good); }
.tl-rep-mastery.tl-m-partial, .tl-rep-mastery.tl-m-none { color: var(--tl-warn); }
.tl-rep-mastery.tl-m-pending { color: var(--ink-faint); }
.tl-rep-none { font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); }
.tl-rep-open-note { font-size: 0.72rem; font-weight: 700; color: var(--tl-bad); }
.tl-rep-quote { margin: 12px 18px 0; padding: 9px 12px; background: var(--paper-deep); border-radius: 11px; }
.tl-rep-quote figcaption { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.tl-rep-quote blockquote { font-size: 0.88rem; line-height: 1.45; font-style: italic; color: var(--ink); overflow-wrap: anywhere; }
/* §6 narrative: expandable on the report card, open in focus mode */
.tl-rep-more { margin: 12px 18px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tl-rep-more > summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  padding: 9px 12px; font-size: 0.84rem; font-weight: 700; color: var(--tl-work); border-radius: 12px;
}
.tl-rep-more > summary::-webkit-details-marker { display: none; }
.tl-rep-more > summary::before { content: "▸"; font-size: 0.8rem; color: var(--ink-faint); transition: transform 0.15s ease; }
.tl-rep-more[open] > summary::before { transform: rotate(90deg); }
.tl-rep-more > summary:hover { background: var(--blue-soft); }
.tl-rep-more > summary:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 1px; }
.tl-rep-more-n { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-faint); }
.tl-rep-more-body { padding: 2px 12px 12px; border-top: 1px dashed var(--line); }
.tl-narr { display: grid; gap: 10px; margin-top: 10px; }
.tl-narr dt { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.tl-narr dd { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.tl-narr-tl { margin-top: 12px; }
.tl-narr-k { display: block; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.tl-tline { list-style: none; margin: 0; padding: 0 0 0 2px; position: relative; }
.tl-tline::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; background: var(--line); border-radius: 1px; }
.tl-tline li { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; padding: 3px 0 3px 14px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }
.tl-tline li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--blue); }
.tl-tline time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); padding-top: 1px; }
.tl-tline span { overflow-wrap: anywhere; }
.tl-narr-card { padding: 16px 18px 16px; }
.tl-narr-h { display: flex; align-items: center; gap: 8px; }
.tl-narr-sofar { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tl-narr-card .tl-narr { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 18px; }

.tl-rep-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 12px 10px 18px; border-top: 1px solid var(--line); background: rgba(244, 242, 234, 0.45); }
.tl-rep-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--tl-work); cursor: pointer;
  background: transparent; border: 0; border-radius: 999px; padding: 6px 10px; margin-left: -10px;
  transition: background 0.2s ease;
}
.tl-rep-btn:hover { background: var(--blue-soft); }
.tl-rep-btn:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 1px; }
.tl-rep-turns { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); letter-spacing: 0.04em; }

.tl-rwait { margin-top: 18px; }
.tl-rwait-h { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.tl-rwait-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tl-rep-compact {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 9px 12px;
  background: rgba(255, 255, 255, 0.6); box-shadow: none;
}
.tl-rep-compact .tl-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 0.62rem; }
.tl-rep-compact .tl-rep-name { font-size: 0.98rem; }
.tl-rep-cnote { flex-basis: 100%; padding-left: 35px; font-size: 0.76rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- misconception groups */
.tl-groups { display: flex; flex-direction: column; gap: 11px; }
.tl-grp {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: inset 3px 0 0 var(--red), var(--shadow-soft); min-width: 0;
}
.tl-grp::after { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.45); }
.tl-grp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-grp-tag { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--tl-bad); overflow-wrap: anywhere; min-width: 0; }
.tl-grp-count { margin-top: 12px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tl-grp-plain { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; }
.tl-grp-plain em { font-style: normal; font-weight: 700; color: var(--ink); }
.tl-grp-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tl-ref {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.tl-ref:hover { border-color: var(--blue); color: var(--tl-work); background: var(--card); }
.tl-ref:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.5); outline-offset: 1px; }
.tl-empty {
  padding: 18px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55);
}
.tl-empty b { display: block; color: var(--ink); margin-bottom: 2px; }

/* ---------------------------------------------------------------- focus: bar + chips */
.tl-focus-bar { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 16px; }
.tl-back {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 15px;
  box-shadow: var(--shadow-soft); transition: border-color 0.2s ease, transform 0.2s ease;
}
.tl-back:hover { border-color: var(--ink); transform: translateX(-2px); }
.tl-back:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-chips {
  flex: 1; min-width: 0; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px 3px 6px; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent);
}
.tl-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 8px;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tl-chip:hover { border-color: var(--blue); }
.tl-chip:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 1px; }
.tl-chip-g { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; }
.tl-chip.tl-st-explained .tl-chip-g { background: var(--tl-good-bg); color: var(--tl-good); }
.tl-chip.tl-st-misconception .tl-chip-g { background: var(--tl-bad-bg); color: var(--tl-bad); }
.tl-chip.tl-st-stuck .tl-chip-g { background: var(--tl-warn-bg); color: var(--tl-warn); }
.tl-chip.tl-st-working .tl-chip-g { background: var(--tl-work-bg); color: var(--tl-work); }
.tl-chip.tl-st-finished .tl-chip-g { background: var(--paper-deep); color: var(--ink-soft); }
.tl-chip.tl-st-not-started .tl-chip-g { background: var(--tl-idle-bg); color: var(--tl-idle); }
.tl-chip.tl-chip-on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(27, 34, 64, 0.7); }
.tl-chip.tl-chip-on .tl-chip-g { background: #fff; }

/* ---------------------------------------------------------------- focus: head */
.tl-focus-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; min-width: 0; outline: none; scroll-margin-top: calc(var(--stick, 76px) + 12px); }
.tl-focus-head:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.4); outline-offset: 4px; border-radius: 14px; }
.tl-fh-text { flex: 1; min-width: 0; }
.tl-fh-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.05; overflow-wrap: anywhere; }
.tl-fh-sub { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }
.tl-mono { font-family: var(--font-mono); font-size: 0.72rem; }
.tl-focus-head .tl-pill { font-size: 0.8rem; padding: 7px 12px 7px 10px; }

/* ---------------------------------------------------------------- focus: layout */
.tl-focus-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tl-report { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* the progress note is the hero of the report */
.tl-note { position: relative; padding: 18px 20px 18px; overflow: hidden; }
.tl-note::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad); }
.tl-note-k {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-ink);
}
.tl-note-t { margin-left: auto; letter-spacing: 0.04em; color: var(--ink-faint); text-transform: none; }
.tl-g {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0; text-transform: none; box-shadow: 0 6px 14px -6px rgba(45, 91, 255, 0.6);
}
.tl-note-text { margin-top: 12px; font-family: var(--font-display); font-size: 1.24rem; font-weight: 450; line-height: 1.38; color: var(--ink); text-wrap: pretty; }
.tl-note-empty { font-family: var(--font-body); font-size: 0.92rem; color: var(--ink-soft); }
.tl-evidence { margin: 14px 0 0; padding: 11px 14px; background: var(--paper-deep); border-radius: 12px; }
.tl-evidence figcaption { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.tl-evidence blockquote { font-size: 0.94rem; line-height: 1.45; font-style: italic; color: var(--ink); overflow-wrap: anywhere; }

.tl-report-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-rcard { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; }
.tl-rcard .tl-v { font-size: 1.9rem; }
.tl-steps { list-style: none; margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.tl-steps li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-faint); }
.tl-steps li.done { color: var(--ink); font-weight: 600; }
.tl-steps li.cur { color: var(--tl-work); }
.tl-step-n {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  border: 1.5px solid var(--line-strong); color: var(--ink-faint); background: var(--card);
}
.tl-steps li.done .tl-step-n { background: var(--blue); border-color: var(--blue); color: #fff; }
.tl-mastery { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; margin-top: 2px; }
.tl-mastery.tl-m-explained { color: var(--tl-good); }
.tl-mastery.tl-m-partial, .tl-mastery.tl-m-none { color: var(--tl-warn); }
.tl-mastery.tl-m-pending { color: var(--ink-faint); }
.tl-rcard .tl-hint { margin-top: 10px; align-self: flex-start; }
.tl-grp-focus { box-shadow: inset 3px 0 0 var(--red), var(--shadow-soft); }
.tl-clear {
  display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--tl-good);
  background: var(--tl-good-bg); border-radius: 12px; padding: 10px 14px;
}

/* ---------------------------------------------------------------- focus: transcript */
.tl-tx { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tl-tx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.tl-tx-head > span { font-size: 0.76rem; color: var(--ink-faint); }
.tl-tx-scroll {
  overflow-y: auto; overscroll-behavior: contain; max-height: min(640px, calc(100vh - 230px)); min-height: 260px;
  padding: 16px 16px 20px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--paper);
}
.tl-tx-scroll:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.4); outline-offset: -3px; }
.tl-tx-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tl-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 88%; }
.tl-msg-coach { align-self: flex-start; }
.tl-msg-kid { align-self: flex-end; flex-direction: row-reverse; }
.tl-msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-msg-kid .tl-msg-body { align-items: flex-end; }
.tl-bubble {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 9px 13px; font-size: 0.92rem; line-height: 1.5; color: var(--ink); box-shadow: var(--shadow-soft);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tl-msg-kid .tl-bubble {
  background: #EDF1FF; border-color: rgba(45, 91, 255, 0.22); border-bottom-left-radius: 16px; border-bottom-right-radius: 5px;
  font-weight: 600; box-shadow: none;
}
/* "Their reasoning" = the student gave a reason (right or wrong): neutral marker.
   It turns green with a ✓ only once Gaibe judged the student's reasoning explained. */
.tl-msg-reason .tl-bubble { border-color: rgba(106, 69, 224, 0.4); box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.08); }
.tl-reason-k {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-ink);
}
.tl-reason-k::before { content: "❝"; font-size: 0.72rem; letter-spacing: 0; }
.tl-tx-ok .tl-msg-reason .tl-bubble { background: #E8F4EE; border-color: rgba(26, 122, 80, 0.35); box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.1); }
.tl-tx-ok .tl-reason-k { color: var(--tl-good); }
.tl-tx-ok .tl-reason-k::before { content: "✓"; }
.tl-msg time, .tl-tool time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.tl-msg .tl-g { width: 30px; height: 30px; }
.tl-tool { align-self: center; max-width: 100%; }
.tl-tool-in {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-soft);
  background: var(--card); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 4px 12px;
}
.tl-tool-solved .tl-tool-in { color: var(--tl-good); border-style: solid; border-color: rgba(26, 122, 80, 0.3); background: var(--tl-good-bg); }
.tl-tx-empty { align-self: center; margin: 40px 0; font-size: 0.86rem; color: var(--ink-faint); text-align: center; }
.tl-in { animation: tl-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tl-tx-new {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: inherit; font-size: 0.78rem; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--ink); border: 0; border-radius: 999px; padding: 7px 14px; box-shadow: 0 10px 22px -10px rgba(27, 34, 64, 0.7);
}
.tl-tx-new:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.6); outline-offset: 2px; }

/* ---------------------------------------------------------------- §10a where to go next */
.tl-next {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; margin-bottom: 16px; box-shadow: var(--shadow-soft); min-width: 0;
  position: relative; overflow: hidden;
}
.tl-next::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.tl-nx-head { margin-bottom: 10px; }
.tl-nx-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.tl-nx-hg {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font-size: 0.72rem; color: #fff; background: var(--grad);
}
.tl-nx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tl-next-side .tl-nx-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tl-next-side .tl-nx { gap: 4px; padding: 9px 11px 9px 13px; }
.tl-next-side .tl-nx-why, .tl-next-side .tl-nx-act { font-size: 0.79rem; line-height: 1.4; }
.tl-nx {
  position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px 10px 14px; box-shadow: inset 3px 0 0 var(--tl-idle);
}
.tl-nx-p1 { box-shadow: inset 3px 0 0 var(--red); background: #FFF8F7; }
.tl-nx-p2 { box-shadow: inset 3px 0 0 var(--amber); }
.tl-nx-p3 { box-shadow: inset 3px 0 0 var(--blue); }
.tl-nx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-nx-pri {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px 2px 7px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.tl-nx-pri > span { font-size: 0.62rem; }
.tl-nx-pri.tl-nx-p1 { color: var(--tl-bad); background: var(--tl-bad-bg); box-shadow: none; }
.tl-nx-pri.tl-nx-p2 { color: var(--tl-warn); background: var(--tl-warn-bg); box-shadow: none; }
.tl-nx-pri.tl-nx-p3 { color: var(--tl-work); background: var(--tl-work-bg); box-shadow: none; }
.tl-nx-since { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); white-space: nowrap; }
.tl-nx-h { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.tl-nx-why { font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.tl-nx-act { font-size: 0.82rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.tl-nx-k {
  display: inline-block; margin-right: 6px; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); vertical-align: 1px;
}
.tl-nx-btns { display: flex; gap: 6px; margin-top: 3px; }
.tl-nx-go, .tl-nx-done {
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 5px 13px; line-height: 1.3;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tl-nx-go { color: #fff; background: var(--ink); border: 1px solid var(--ink); }
.tl-nx-go:hover { background: var(--blue); border-color: var(--blue); }
.tl-nx-done { color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); }
.tl-nx-done:hover { color: var(--ink); border-color: var(--ink); }
.tl-nx-go:focus-visible, .tl-nx-done:focus-visible, .tl-nx-more:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
/* §11 earpiece: the 🎧 toggle (teacher-voice.js) sits in the header; 🔊 "click to hear" */
.tl-nx-hr { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 0.76rem; color: var(--ink-faint); }
.tl-nx-hr > [data-tl="nxsub"]:empty { display: none; }
.tl-nx-voice { display: inline-flex; align-items: center; color: var(--ink); }
.tl-nx-voice[hidden] { display: none; }
.tl-hear {
  flex-shrink: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; line-height: 1; border-radius: 50%;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tl-hear:hover { border-color: var(--ink); background: var(--blue-soft); }
.tl-hear:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-nx-hear { margin-left: auto; }
.tl-coach-hear { width: 36px; height: 36px; font-size: 0.95rem; }
.tl-nx-more {
  margin-top: 8px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--tl-work); cursor: pointer;
  background: transparent; border: 0; padding: 4px 2px;
}
.tl-nx-more:hover { text-decoration: underline; }
.tl-nx-empty { font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); padding: 4px 2px 6px; }
.tl-nx-empty b { color: var(--ink); }
.tl-nx-in { animation: tl-nx-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tl-nx-in {
  0% { opacity: 0; transform: translateY(-6px); box-shadow: inset 3px 0 0 var(--blue), 0 0 0 3px rgba(45, 91, 255, 0.35); }
  60% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
.tl-groups-wrap > .tl-next { margin-bottom: 18px; }

/* ---------------------------------------------------------------- §10a focus: group strip */
.tl-gstrip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px;
  padding: 8px 10px 8px 12px; border-radius: var(--radius-sm); background: var(--blue-soft); border: 1px solid rgba(45, 91, 255, 0.2);
}
.tl-gs-k { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tl-work); }
.tl-gs-refs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.tl-gs-refs .tl-ref { display: inline-flex; align-items: center; gap: 5px; }
.tl-gs-refs .tl-chip-g { display: inline; margin: 0; font-size: 0.72rem; }
.tl-ref.tl-gs-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl-gs-leave {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 0.8rem;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
}
.tl-gs-leave:hover { color: var(--ink); border-color: var(--ink); }
.tl-gs-leave:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }

/* ---------------------------------------------------------------- §10b coach me */
.tl-coach { padding: 14px 16px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.tl-coach-head { display: flex; align-items: flex-start; gap: 10px; }
.tl-coach-ht { flex: 1 1 0; min-width: 0; }
.tl-coach-ht h3 { overflow-wrap: anywhere; }
.tl-coach-sub { font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.tl-coach-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 700; color: #fff; background: var(--grad); border: 0;
  border-radius: 999px; padding: 8px 15px; box-shadow: 0 8px 18px -10px rgba(45, 91, 255, 0.7);
}
.tl-coach-btn-soft { color: var(--tl-work); background: var(--blue-soft); box-shadow: none; }
.tl-coach-btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
.tl-coach-btn:focus-visible, .tl-coach-link:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-coach-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: tl-spin 0.8s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-coach-skel { display: grid; gap: 8px; margin-top: 14px; }
.tl-coach-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--paper-deep), #ECEAE1, var(--paper-deep)); background-size: 200% 100%; animation: tl-shimmer 1.3s ease-in-out infinite; }
.tl-coach-skel i:nth-child(2) { width: 86%; } .tl-coach-skel i:nth-child(3) { width: 64%; }
@keyframes tl-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tl-coach-card { margin-top: 12px; display: grid; gap: 10px; }
.tl-coach-card-busy { opacity: 0.6; }
.tl-coach-sum { font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.tl-coach-k, .tl-coach-dl dt {
  display: block; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.tl-coach-say { background: var(--blue-soft); border-radius: var(--radius-sm); padding: 10px 12px 10px 12px; }
.tl-coach-say .tl-coach-k { color: var(--tl-work); }
.tl-coach-say ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.tl-coach-say li { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.tl-coach-say li::marker { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--tl-work); }
.tl-coach-dl { display: grid; gap: 8px; margin: 0; }
.tl-coach-dl dd { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--ink-soft); }
.tl-coach-per { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--line-strong); display: grid; gap: 4px; font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); }
.tl-coach-per b { color: var(--ink); margin-right: 4px; }
.tl-coach-quick { font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); background: var(--amber-soft); border-radius: 10px; padding: 7px 10px; }
.tl-coach-badge {
  display: inline-block; margin-right: 7px; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tl-warn);
}
.tl-coach-link { font: inherit; font-weight: 700; color: var(--tl-work); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 900px) {
  .tl-focus-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; }
  .tl-tx { position: sticky; top: 76px; }
}
@media (min-width: 1100px) {
  .tl-main { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .tl-groups-wrap { position: sticky; top: 76px; }
  /* the queue sits atop this column: keep the column scrollable if it outgrows the screen */
  .tl-groups-wrap { max-height: calc(100vh - var(--stick, 76px) - 24px); overflow-y: auto; scrollbar-width: thin; padding: 0 3px 4px 0; }
}
@media (max-width: 759px) {
  .tl-head { flex-direction: column; gap: 10px; }
  .tl-pulse { margin-top: 0; }
  .tl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tl-tile { padding: 12px 13px; }
  .tl-v { font-size: 1.75rem; }
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-views { align-items: stretch; }
  .tl-seg { display: flex; width: 100%; border-radius: 16px; }
  .tl-seg-btn { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; padding: 8px 4px; border-radius: 12px; font-size: 0.8rem; text-align: center; }
  .tl-rgrid { grid-template-columns: minmax(0, 1fr); }
  .tl-rsum { padding: 14px 14px; }
  .tl-rsum-actions { width: 100%; }
  .tl-sum-sep { display: none; }
  .tl-rsum-line { gap: 6px 14px; }
  .tl-rsum-actions .tl-copy { flex: 1 1 0; justify-content: center; }
  .tl-rsum-actions .tl-copy[data-tl="email"] { flex-basis: 100%; }   /* demo "Email all families": its own row */
  .tl-msec { padding: 12px 12px 14px; }
  .tl-focus-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .tl-back { align-self: flex-start; }
  .tl-fh-name { font-size: 1.4rem; }
  .tl-focus-head { flex-wrap: wrap; }
  .tl-note { padding: 16px 16px; }
  .tl-note-text { font-size: 1.1rem; }
  .tl-tx-scroll { max-height: 70vh; min-height: 200px; padding: 14px 12px 18px; }
  .tl-msg { max-width: 94%; }
  .tl-next { padding: 12px 12px 10px; }
  .tl-nx-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tl-coach { padding: 13px 13px; }
  .tl-coach-head { flex-wrap: wrap; }
  .tl-coach-btn { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .tl-report-row { grid-template-columns: minmax(0, 1fr); }
  .tl-seg-g { display: none; }
  .tl-seg-btn { padding: 10px 4px; }
}

/* ---------------------------------------------------------------- motion + forced colours */
@media (prefers-reduced-motion: reduce) {
  .tl-flash::after { animation: none; }
  .tl-nx-in { animation: none; }
  .tl-coach-spin, .tl-coach-skel i { animation: none; }
  .tl-nx-go, .tl-nx-done, .tl-hear { transition: none; }
  .tl-in { animation: none; opacity: 1; transform: none; }
  .tl-card, .tl-card:hover, .tl-back:hover { transform: none; transition: none; }
  .tl-bar span { transition: none; }
  .tl-seg-btn, .tl-copy, .tl-rep-btn { transition: none; }
  .tl-rep-more > summary::before { transition: none; }
  .tl-chips { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .tl-pill, .tl-tag, .tl-hint, .tl-chip, .tl-card, .tl-grp, .tl-rep, .tl-msec, .tl-seg, .tl-nx, .tl-nx-pri { border: 1px solid CanvasText; }
  .tl-seg-btn[aria-selected="true"] { outline: 2px solid Highlight; }
  .tl-chip.tl-chip-on { outline: 2px solid Highlight; }
}

/* a student who showed the misconception and then reasoned out of it */
.tl-ref-fixed { opacity: .8; }
.tl-ref-ok { font-family: var(--font-mono); font-size: 0.6rem; color: var(--green); margin-left: 4px; }

/* ================================================================ layout "simple"
   try.html: coaching queue + student cards; focus = conversation + Coach me.
   Everything else stays in the DOM (the component's code paths are shared) but
   is never shown. Columns follow the component's own width (a container query),
   not the viewport, because it sits in a split pane. */
.tl.tl-simple { container: tl-simple / inline-size; }
.tl-simple .tl-tiles, .tl-simple .tl-progress, .tl-simple .tl-views,
.tl-simple .tl-groups-wrap > .tl-sec-head, .tl-simple .tl-groups,
.tl-simple .tl-card-meta, .tl-simple .tl-chips, .tl-simple .tl-report,
.tl-simple [data-tl="p-misconceptions"], .tl-simple [data-tl="p-reports"] { display: none !important; }

/* header row: lesson chip · live pulse · End & report */
.tl-shead { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 14px; min-width: 0; }
.tl-shead-k { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.tl-schip {
  display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.2; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-schip b { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; color: var(--tl-work); background: var(--blue-soft); border-radius: 999px; padding: 3px 8px; }
.tl-simple .tl-pulse { margin-top: 0; padding: 4px 11px 4px 9px; font-size: 0.76rem; box-shadow: none; }
.tl-endrep {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px 6px 11px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tl-endrep:hover { border-color: var(--ink); }
.tl-endrep:focus-visible, .tl-sheet-x:focus-visible, .tl-sheet-link:focus-visible { outline: 3px solid rgba(45, 91, 255, 0.55); outline-offset: 2px; }
.tl-endrep-g { font-size: 0.62rem; color: var(--tl-bad); }
.tl-endrep-c { font-size: 0.7rem; color: var(--ink-faint); }
.tl-endrep.tl-endrep-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.tl-endrep.tl-endrep-done .tl-endrep-g, .tl-endrep.tl-endrep-done .tl-endrep-c { color: rgba(255, 255, 255, 0.8); }

/* the compact report sheet */
.tl-sheet {
  position: relative; margin: -4px 0 16px; padding: 13px 16px 12px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.tl-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.tl-sheet-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-sheet-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.tl-sheet-sub { font-size: 0.78rem; color: var(--ink-soft); }
.tl-sheet-x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 0.78rem;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
}
.tl-sheet-x:hover { color: var(--ink); border-color: var(--ink); }
.tl-sheet-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-sheet-note { margin-top: 9px; font-size: 0.78rem; line-height: 1.45; color: var(--ink-faint); }
.tl-sheet-link { margin-left: 8px; font: inherit; font-weight: 700; color: var(--tl-work); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* class mode: cards left, queue right (queue first when the pane is narrow) */
.tl-simple .tl-main { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tl-simple .tl-groups-wrap { order: -1; position: static; max-height: none; overflow: visible; padding: 0; }
.tl-simple .tl-next { margin-bottom: 0; }
.tl-s-head { margin-bottom: 10px; }
.tl-s-empty { margin-bottom: 4px; }
.tl-simple .tl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.tl-simple .tl-card { gap: 8px; padding: 11px 12px 12px; border-radius: 14px; }
.tl-simple .tl-name { font-size: 0.98rem; }
.tl-simple .tl-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 0.62rem; }
.tl-simple .tl-card-top .tl-pill { font-size: 0.68rem; padding: 4px 8px 4px 7px; }
.tl-simple .tl-card-note { font-size: 0.78rem; }
.tl-simple .tl-said { font-size: 0.8rem; padding-top: 7px; }
@container tl-simple (min-width: 660px) {
  .tl-simple .tl-main { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 18px; }
  .tl-simple .tl-groups-wrap { order: 0; }
}

/* focus: the student's conversation + Coach me (+ their PDF once they finish) */
.tl-simple .tl-focus-bar { margin-bottom: 12px; }
.tl-simple .tl-focus-head { margin-bottom: 12px; }
.tl-simple .tl-fh-name { font-size: 1.35rem; }
.tl-simple .tl-avatar-lg { width: 40px; height: 40px; border-radius: 12px; font-size: 0.85rem; }
.tl-simple .tl-focus-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tl-simple .tl-tx { position: relative; top: auto; }
.tl-simple .tl-coach { margin-bottom: 0; }
.tl-simple .tl-report-actions { justify-content: flex-start; }
@container tl-simple (min-width: 720px) {
  .tl-simple .tl-focus-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
}
@media (max-width: 759px) {
  .tl-simple .tl-focus-bar { flex-direction: row; }
  .tl-simple .tl-fh-name { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-endrep { transition: none; }
}

/* simple: a compact card — name on its own row (never "Stude…"), dots + status below */
.tl-simple .tl-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.tl-simple .tl-card-top, .tl-simple .tl-card-prog { display: contents; }
.tl-simple .tl-card .tl-avatar { grid-row: 1; grid-column: 1; }
.tl-simple .tl-card .tl-name { grid-row: 1; grid-column: 2 / 4; }
.tl-simple .tl-card .tl-dots { grid-row: 2; grid-column: 1 / 3; }
.tl-simple .tl-card .tl-pill { grid-row: 2; grid-column: 3; justify-self: end; }
.tl-simple .tl-card .tl-steplabel { display: none; }   /* each dot's title + the card's label carry the step */
.tl-simple .tl-card .tl-card-note, .tl-simple .tl-card .tl-said { grid-column: 1 / -1; }
.tl-simple .tl-coach-head { flex-wrap: wrap; }
.tl-simple .tl-coach-ht { flex: 1 1 190px; }
.tl-simple .tl-card .tl-dots { width: 66px; }
.tl-simple .tl-card .tl-dots i { width: 10px; height: 10px; }