/* training.css — InferFoundry Training Portal
   Adapted from the Virtual Doc Room's docroom.css. Layered on top of
   colors_and_type.css. Reusable `.dr-*` chrome (sidebar, gates, tables,
   buttons, admin pages) kept; `.tp-*` classes added for the learner
   surfaces (path header, course cards, module viewer, quiz, compliance). */

* { box-sizing: border-box; }
html, body { background: var(--bg); margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────
   APP SHELL — two pane: sidebar + canvas
   ────────────────────────────────────────────────────────────── */
.dr-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
}
.dr-app.density-compact { --dr-row-py: 5px; --dr-canvas-px: 28px; }
.dr-app.density-comfy   { --dr-row-py: 9px; --dr-canvas-px: 56px; }
.dr-app:not(.density-compact):not(.density-comfy) { --dr-row-py: 7px; --dr-canvas-px: 40px; }

/* ──────────────────────────────────────────────────────────────
   SIDEBAR (graphite, dark always)
   ────────────────────────────────────────────────────────────── */
.dr-sidebar {
  background: var(--c-graphite);
  color: var(--c-parchment);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--c-graphite-700);
  min-height: 0;
}
.dr-sidebar-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--c-graphite-700);
}
.dr-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; border: none;
  color: var(--c-parchment);
}
.dr-brand img { display: block; }
.dr-brand-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  line-height: 1;
}
.dr-brand-sub {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--c-ember-soft); margin-top: 4px;
}

.dr-tree {
  flex: 1; overflow-y: auto; padding: 8px 8px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.dr-tree::-webkit-scrollbar { width: 6px; }
.dr-tree::-webkit-scrollbar-thumb { background: var(--c-graphite-700); border-radius: 3px; }

.dr-folder { display: contents; }
.dr-folder-row {
  display: grid;
  grid-template-columns: 12px 16px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: var(--dr-row-py, 7px) 8px;
  border-radius: var(--r-1);
  cursor: pointer;
  color: #B0B4B9;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  user-select: none;
  font-size: 12.5px;
  font-weight: 500;
}
.dr-folder-row:hover { background: var(--c-graphite-800); color: var(--c-parchment); }
.dr-folder-row.is-active {
  background: var(--c-graphite-800);
  color: var(--c-parchment);
  box-shadow: inset 2px 0 0 var(--c-ember);
}
.dr-chev {
  width: 12px; height: 12px;
  color: #7E8389;
  transition: transform var(--dur-2) var(--ease-out);
}
.dr-folder-row.is-open .dr-chev { transform: rotate(90deg); }
.dr-folder-label { line-height: 1.2; }
.dr-folder-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #7E8389;
}
.dr-folder-glyph { display: inline-flex; color: #7E8389; }
.dr-folder-row.is-active .dr-folder-glyph { color: var(--c-ember-soft); }

.dr-files {
  display: flex; flex-direction: column;
  padding-left: 14px;
  margin: 2px 0 6px 6px;
  border-left: 1px dashed var(--c-graphite-700);
  gap: 1px;
}
.dr-file-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-1);
  cursor: pointer;
  color: #9aa0a7;
  font-size: 11.5px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dr-file-row:hover { background: var(--c-graphite-800); color: var(--c-parchment); }
.dr-file-row.is-active {
  background: var(--c-graphite-800);
  color: var(--c-parchment);
}
.dr-file-name { line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-file-mark {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #7E8389;
}

.dr-admin-tree {
  flex: 0 0 auto;
  margin-top: 4px;
  border-top: 1px solid var(--c-graphite-700);
}
.dr-admin-tree .dr-file-row { grid-template-columns: 1fr; }
.dr-admin-tree .dr-folder-count { display: none; }
.dr-admin-tree .dr-file-row.is-active { box-shadow: inset 2px 0 0 var(--c-ember); }

.dr-sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--c-graphite-700);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px;
  flex-shrink: 0;
}
.dr-foot-row {
  display: flex; align-items: center; gap: 8px;
  color: #B0B4B9;
  font-size: 11px;
  line-height: 1.3;
}
.dr-foot-row .ok { width: 6px; height: 6px; border-radius: 50%; background: #4A6E48; flex-shrink: 0; }
.dr-foot-logout {
  width: 100%;
  justify-content: center;
  background: transparent;
  color: #B0B4B9;
  border: 1px solid var(--c-graphite-600);
}
.dr-foot-logout:hover { border-color: var(--c-parchment); color: var(--c-parchment); }
.dr-foot-feedback {
  width: 100%;
  justify-content: center;
  background: transparent;
  color: #B0B4B9;
  border: 1px solid var(--c-graphite-600);
}
.dr-foot-feedback:hover { border-color: var(--c-ember-soft); color: var(--c-parchment); }

/* ──────────────────────────────────────────────────────────────
   CANVAS (main pane)
   ────────────────────────────────────────────────────────────── */
.dr-canvas {
  background: var(--bg);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  position: relative;
}
.dr-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--dr-canvas-px, 40px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  gap: 24px;
}
.dr-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.dr-crumbs .sep { color: var(--c-fog); }
.dr-crumbs .here { color: var(--fg1); }
.dr-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.dr-viewer {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
}
.dr-viewer-meta { display: flex; flex-direction: column; line-height: 1.1; }
.dr-viewer-name { font-size: 11px; font-weight: 600; }
.dr-viewer-org { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); }
.dr-viewer-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-slate-deep); color: var(--c-parchment);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
}

.dr-scroll {
  flex: 1; overflow-y: auto;
  padding: 24px var(--dr-canvas-px, 40px) 56px;
  display: flex; flex-direction: column;
  min-height: 0;
}

/* ──────────────────────────────────────────────────────────────
   PAGE HEADINGS + STATS (shared learner/admin)
   ────────────────────────────────────────────────────────────── */
.dr-folder-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 24px;
}
.dr-folder-title {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 6px;
}
.dr-folder-no {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: var(--c-ember); letter-spacing: 0.08em;
}
.dr-folder-h1 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg1);
}
.dr-folder-desc {
  font-size: 14px; color: var(--fg2);
  max-width: 640px;
  line-height: 1.55;
}
.dr-stat-label {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2);
}
.dr-stat-value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────
   TABLES
   ────────────────────────────────────────────────────────────── */
.dr-filelist {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}
.dr-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.dr-tbl thead th {
  text-align: left; padding: 10px 16px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg2); font-weight: 500;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.dr-tbl tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.dr-tbl tbody tr:last-child td { border-bottom: none; }
.dr-tbl-meta-row {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg2);
}
.dr-num { text-align: right; }

/* ──────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────── */
.dr-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-1);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
  line-height: 1; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.dr-btn-primary { background: var(--c-graphite); color: var(--c-parchment); }
.dr-btn-primary:hover { background: var(--c-graphite-700); }
.dr-btn-ghost { background: transparent; color: var(--fg1); border-color: var(--line-strong); }
.dr-btn-ghost:hover { border-color: var(--c-graphite); }
.dr-btn-danger { background: transparent; color: var(--c-signal); border-color: rgba(224,82,27,0.4); }
.dr-btn-danger:hover { border-color: var(--c-signal); }
.dr-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.dr-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--fg2); cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.dr-icon-btn:hover { border-color: var(--c-graphite); color: var(--fg1); }

/* Hand-rolled HTML5 drag-and-drop rows (learner profile — assigned
   course reordering). dragend is the single commit/rollback point;
   these three classes are purely visual feedback during the drag. */
.dr-drag-row { cursor: grab; }
.dr-drag-row.is-dragging { opacity: 0.4; }
.dr-drag-row.is-drop-target { border-top: 2px solid var(--c-ember); }

/* ──────────────────────────────────────────────────────────────
   ACCEPT GATE (confidentiality acknowledgement)
   ────────────────────────────────────────────────────────────── */
.dr-nda-overlay {
  position: fixed; inset: 0;
  background: rgba(26,28,31,0.92);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.dr-nda-card {
  width: 560px; max-width: 100%;
  background: var(--c-parchment);
  border: 1px solid var(--c-graphite-700);
  border-radius: var(--r-4);
  box-shadow: var(--sh-deep);
  overflow: hidden;
  position: relative;
}
.dr-nda-stamp {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-signal); border: 1px solid var(--c-signal);
  padding: 4px 8px; border-radius: var(--r-1);
  transform: rotate(-3deg);
}
.dr-nda-head { padding: 28px 32px 22px; border-bottom: 1px solid var(--line); }
.dr-nda-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.dr-nda-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.dr-nda-overline {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-ember); margin-bottom: 8px;
}
.dr-nda-h1 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0;
}
.dr-nda-body { padding: 22px 32px; }
.dr-nda-viewer {
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  margin: 0 0 18px;
}
.dr-nda-viewer dt {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2); margin: 0;
}
.dr-nda-viewer dd {
  margin: 2px 0 0; font-size: 12px; font-weight: 500;
  font-family: var(--font-mono);
}
.dr-nda-terms {
  font-size: 12.5px; line-height: 1.6; color: var(--fg1);
}
.dr-nda-terms p { margin: 0 0 10px; }
.dr-nda-terms strong { color: var(--c-graphite); }
.dr-nda-foot {
  border-top: 1px solid var(--line);
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--c-paper);
}
.dr-nda-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* ──────────────────────────────────────────────────────────────
   LOGIN GATE (email + access code)
   ────────────────────────────────────────────────────────────── */
.dr-login-overlay {
  position: fixed; inset: 0;
  background: rgba(26,28,31,0.94);
  display: grid; place-items: center;
  z-index: 1100;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.dr-login-card {
  width: 440px; max-width: 100%;
  background: var(--c-parchment);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.55), 0 2px 0 rgba(0,0,0,0.04) inset;
  position: relative;
}
.dr-login-head { padding: 28px 32px 20px; border-bottom: 1px solid var(--line); }
.dr-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.dr-login-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.dr-login-overline {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-ember);
  margin-bottom: 8px;
}
.dr-login-h1 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 8px;
}
.dr-login-sub { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 0; max-width: 36ch; }
.dr-login-body { padding: 22px 32px 4px; display: flex; flex-direction: column; gap: 14px; }
.dr-field { display: flex; flex-direction: column; gap: 6px; }
.dr-field-label {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2);
}
.dr-field-input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg1);
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
}
.dr-field-input::placeholder { color: var(--fg3); }
.dr-field-input:focus {
  border-color: var(--c-graphite);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 0 0 3px rgba(26,28,31,0.08);
}
.dr-field-input:disabled { opacity: 0.55; cursor: not-allowed; }
.dr-field-code {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
}
.dr-field-hint {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg3);
}
.dr-login-err {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.45;
  color: var(--c-signal-deep);
  background: rgba(224,82,27,0.06);
  border: 1px solid rgba(224,82,27,0.28);
  border-radius: var(--r-2);
  padding: 9px 12px;
}
.dr-login-err .dt {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-signal);
  flex-shrink: 0;
}
.dr-login-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  background: var(--c-paper);
  border-radius: 0 0 var(--r-4) var(--r-4);
}
.dr-login-help { font-size: 11.5px; color: var(--fg2); line-height: 1.4; max-width: 24ch; }
.dr-login-help a {
  color: var(--c-graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.dr-login-help a:hover { color: var(--c-ember-deep); border-bottom-color: var(--c-ember); }
.dr-login-trust {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 32px 18px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg3);
}
.dr-login-trust .ok { width: 6px; height: 6px; border-radius: 50%; background: #4A6E48; flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────
   ADMIN PAGES
   ────────────────────────────────────────────────────────────── */
.dr-admin-page { max-width: 980px; }
.dr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.dr-stat-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 16px 18px;
}
.dr-stat-card-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.dr-stat-card.is-ember { border-color: rgba(185,106,60,0.4); }
.dr-stat-card.is-ember .dr-stat-card-num { color: var(--c-ember); }
.dr-stat-card.is-signal { border-color: rgba(224,82,27,0.4); }
.dr-stat-card.is-signal .dr-stat-card-num { color: var(--c-signal); }

/* Empty / locked states */
.dr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 360px;
  text-align: center; gap: 12px;
  color: var(--fg2);
}
.dr-empty h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.dr-empty p { font-size: 13px; max-width: 360px; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   TP — TRAINING-SPECIFIC SURFACES
   ══════════════════════════════════════════════════════════════ */

/* ── Compliance status badges ─────────────────────────────────
   on_track → success green · at_risk → amber · overdue → signal
   red/ember · complete → graphite. Shape mirrors the doc room's
   investor pipeline badges. */
.tp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--fg2); background: transparent;
}
.tp-badge .dt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tp-badge--on_track { color: var(--state-success); border-color: rgba(74,110,72,0.35);  background: rgba(74,110,72,0.07); }
.tp-badge--at_risk  { color: var(--state-warn);    border-color: rgba(176,126,31,0.4);  background: rgba(176,126,31,0.07); }
.tp-badge--overdue  { color: var(--c-signal);      border-color: rgba(224,82,27,0.35);  background: rgba(224,82,27,0.06); }
.tp-badge--complete { color: var(--c-parchment);   border-color: var(--c-graphite);     background: var(--c-graphite); }
/* course-state variants reuse the same shape */
.tp-badge--locked      { color: var(--fg3); border-color: var(--line); }
.tp-badge--pre-quiz    { color: var(--c-slate);      border-color: rgba(79,101,115,0.35); background: rgba(79,101,115,0.06); }
.tp-badge--in-progress { color: var(--c-ember-deep); border-color: rgba(185,106,60,0.35); background: rgba(185,106,60,0.06); }
.tp-badge--post-quiz   { color: var(--c-ember-deep); border-color: rgba(185,106,60,0.35); background: rgba(185,106,60,0.06); }
.tp-badge--passed { color: var(--state-success); border-color: rgba(74,110,72,0.35); background: rgba(74,110,72,0.07); }
.tp-badge--failed { color: var(--c-signal);      border-color: rgba(224,82,27,0.35); background: rgba(224,82,27,0.06); }

/* ── Path progress header (learner home) ─────────────────────── */
.tp-path-head { margin-bottom: 20px; }
.tp-path-overline {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-ember); margin-bottom: 8px;
}
.tp-path-h1 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0 0 8px;
  color: var(--fg1);
}
.tp-path-blurb { font-size: 14px; color: var(--fg2); max-width: 640px; line-height: 1.55; margin: 0; }

.tp-deadline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 24px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.tp-deadline.is-overdue { border-color: rgba(224,82,27,0.45); background: rgba(224,82,27,0.05); }
.tp-deadline.is-at_risk { border-color: rgba(176,126,31,0.45); background: rgba(176,126,31,0.05); }
.tp-deadline-date { font-size: 13px; font-weight: 600; }
.tp-deadline-days {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg2); letter-spacing: 0.04em;
}
.tp-deadline.is-overdue .tp-deadline-days { color: var(--c-signal); font-weight: 600; }

/* ── Course cards ─────────────────────────────────────────────── */
.tp-courses { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.tp-course-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tp-course-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-raised); }
.tp-course-card.is-locked { cursor: not-allowed; opacity: 0.6; }
.tp-course-card.is-locked:hover { border-color: var(--line); box-shadow: none; }
.tp-course-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-ember); letter-spacing: 0.08em;
}
.tp-course-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 3px;
}
.tp-course-blurb { font-size: 12.5px; color: var(--fg2); line-height: 1.5; margin: 0 0 8px; }
.tp-course-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg3);
}
.tp-course-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tp-course-scores {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg2); text-align: right; line-height: 1.5;
}

/* Progress ring — SVG sized here, stroke colours via currentColor. */
.tp-ring { width: 56px; height: 56px; position: relative; flex-shrink: 0; }
.tp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tp-ring .tp-ring-track { stroke: var(--line); }
.tp-ring .tp-ring-fill { stroke: var(--c-ember); transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
.tp-ring.is-complete .tp-ring-fill { stroke: var(--state-success); }
.tp-ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* Progress bar (slim, used inside cards and admin tables) */
.tp-bar {
  height: 4px; border-radius: 2px;
  background: var(--bg-sunk);
  overflow: hidden;
  min-width: 80px;
}
.tp-bar-fill {
  height: 100%;
  background: var(--c-ember);
  border-radius: 2px;
  transition: width var(--dur-4) var(--ease-out);
}
.tp-bar-fill.is-complete { background: var(--state-success); }

/* ── Learner profile (admin) ──────────────────────────────────── */
.tp-profile-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--fg2);
  margin-left: 6px;
}
.tp-profile-timeline { display: flex; flex-direction: column; gap: 0; }
.tp-profile-timeline-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.tp-profile-timeline-row:last-child { border-bottom: none; }

/* ── Course view: module rail + viewer ────────────────────────── */
.tp-course-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.tp-module-rail {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.tp-module-rail-head {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2);
  padding: 4px 10px 8px;
}
.tp-module-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-1);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--fg1);
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.tp-module-row:hover { background: var(--bg-raised); }
.tp-module-row.is-active {
  background: var(--bg-raised);
  border-color: var(--line);
  box-shadow: inset 2px 0 0 var(--c-ember);
}
.tp-module-row.is-locked { color: var(--fg3); cursor: not-allowed; }
.tp-module-title { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-module-mins {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--fg3); letter-spacing: 0.06em;
}
.tp-tick {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  color: transparent;
  flex-shrink: 0;
}
.tp-tick svg { width: 9px; height: 9px; }
.tp-tick.is-done {
  background: var(--state-success);
  border-color: var(--state-success);
  color: #fff;
}

/* Module iframe viewer — full-height panel */
.tp-module-view {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}
.tp-module-view-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tp-module-view-title { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-module-view-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.08em; }
.tp-module-view-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tp-module-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  min-height: 0;
}
.tp-dwell-hint {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--fg3); letter-spacing: 0.06em;
}

/* ── Quiz ─────────────────────────────────────────────────────── */
.tp-quiz { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.tp-quiz-intro {
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px; line-height: 1.55; color: var(--fg2);
}
.tp-quiz-progress {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg2);
}
.tp-quiz-q {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 18px 20px;
}
.tp-quiz-q-num {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-ember); letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tp-quiz-prompt { font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 0 0 14px; }
.tp-quiz-kind {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--fg3); text-transform: uppercase; letter-spacing: 0.1em;
  margin-left: 8px; font-weight: 400;
}
.tp-options { display: flex; flex-direction: column; gap: 8px; }
.tp-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--c-paper);
  cursor: pointer;
  font-size: 13px; line-height: 1.45;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  user-select: none;
}
.tp-option:hover { border-color: var(--line-strong); }
.tp-option input { margin-top: 2px; accent-color: var(--c-graphite); flex-shrink: 0; }
.tp-option.is-selected {
  border-color: var(--c-graphite);
  background: var(--bg-sunk);
}
.tp-option.is-disabled { cursor: default; }
.tp-option.is-correct {
  border-color: rgba(74,110,72,0.6);
  background: rgba(74,110,72,0.08);
}
.tp-option.is-incorrect {
  border-color: rgba(224,82,27,0.55);
  background: rgba(224,82,27,0.06);
}
.tp-option-mark {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0;
  align-self: center;
}
.tp-option.is-correct .tp-option-mark { color: var(--state-success); }
.tp-option.is-incorrect .tp-option-mark { color: var(--c-signal); }
.tp-explain {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--c-ember);
  background: var(--bg-sunk);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: 12.5px; line-height: 1.55; color: var(--fg1);
}
.tp-explain .tp-explain-label {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-ember-deep);
  display: block; margin-bottom: 4px;
}

/* Quiz result panel */
.tp-quiz-result {
  padding: 22px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  display: flex; flex-direction: column; gap: 10px;
}
.tp-quiz-score {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tp-quiz-score .max { color: var(--fg3); font-size: 20px; }
.tp-quiz-result.is-passed { border-color: rgba(74,110,72,0.45); }
.tp-quiz-result.is-failed { border-color: rgba(224,82,27,0.45); }

/* ── Pre/post delta display ───────────────────────────────────── */
.tp-delta {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
}
.tp-delta-item { display: flex; flex-direction: column; gap: 4px; }
.tp-delta-label {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg2);
}
.tp-delta-num {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tp-delta-num.is-up { color: var(--state-success); }
.tp-delta-num.is-down { color: var(--c-signal); }
.tp-delta-arrow { color: var(--fg3); font-size: 18px; align-self: center; }

/* ── Feedback modal (bug / request / recommendation → Jira) ───────
   Overlay chrome mirrors the login/accept gates; type cards echo
   .tp-option's selected treatment but with an ember accent instead
   of graphite, so a feedback pick reads as its own lighter action
   rather than a quiz answer. */
.tp-feedback-overlay {
  position: fixed; inset: 0;
  background: rgba(26,28,31,0.92);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.tp-feedback-card {
  width: 480px; max-width: 100%;
  background: var(--c-parchment);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--sh-deep);
  overflow: hidden;
}
.tp-feedback-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); }
.tp-feedback-overline {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-ember); margin-bottom: 8px;
}
.tp-feedback-h1 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 6px;
}
.tp-feedback-context { font-size: 12.5px; color: var(--fg2); margin: 0; }
.tp-feedback-body { padding: 20px 26px; display: flex; flex-direction: column; gap: 14px; }
.tp-feedback-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-feedback-type {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--c-paper);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.tp-feedback-type:hover { border-color: var(--line-strong); }
.tp-feedback-type.is-selected {
  border-color: var(--c-ember);
  background: rgba(185,106,60,0.08);
}
.tp-feedback-type-label { font-size: 12.5px; font-weight: 600; color: var(--fg1); }
.tp-feedback-type-sub { font-size: 10.5px; color: var(--fg2); line-height: 1.35; }
.tp-feedback-textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }
.tp-feedback-foot {
  border-top: 1px solid var(--line);
  padding: 16px 26px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: var(--c-paper);
}
.tp-feedback-success {
  padding: 32px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.tp-feedback-tick {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--state-success); color: #fff;
  font-size: 18px; line-height: 1;
}
.tp-feedback-success p { margin: 0; font-size: 13.5px; color: var(--fg1); line-height: 1.5; }
.tp-feedback-success-actions { display: flex; gap: 8px; margin-top: 6px; }