/* =====================================================
   AXIS - Training additions (0097)
   Lesson videos (editor block + player + watch gate),
   the final quiz (builder, taking, result), the admin
   Tracking tab, and the candidate (Guest Plus) banner.
   The original Training styles stay in components.css;
   this file only carries what 0097 added, plus its own
   phone rules at the bottom (a page keeps its mobile
   rules with its stylesheet — see CLAUDE.md).
   ===================================================== */

/* ─── Lesson video: editor block ─────────────────────── */
.tv-optional { font-weight: 400; color: var(--text-tertiary); font-size: 12px; margin-left: 6px; }
.tv-block { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-secondary); overflow: hidden; }
.tv-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); background: var(--bg-primary); }
.tv-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--dur-fast, .15s) var(--ease-out, ease), border-color var(--dur-fast, .15s) var(--ease-out, ease); }
.tv-tab .material-icons-outlined { font-size: 18px; }
.tv-tab.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
.tv-tab:hover { color: var(--text-primary); }
.tv-pane { padding: var(--spacing-md); }
.tv-pane[hidden] { display: none !important; }

.tv-drop { position: relative; border: 2px dashed var(--border-color); border-radius: var(--radius-lg); background: var(--bg-primary); transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), background-color var(--dur-fast, .15s) var(--ease-out, ease); }
.tv-drop[hidden] { display: none !important; }
.tv-drop.tv-dragover { border-color: var(--primary-500); background: color-mix(in srgb, var(--primary-500) 6%, var(--bg-primary)); }
.tv-drop-idle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px; cursor: pointer; }
.tv-drop-idle[hidden] { display: none !important; }
.tv-drop-idle .material-icons-outlined { font-size: 40px; color: var(--primary-500); }
.tv-drop-idle p { margin: 0; color: var(--text-primary); font-size: var(--font-size-sm); }
.tv-drop-idle small { color: var(--text-tertiary); font-size: 12px; line-height: 1.4; max-width: 420px; }

.tv-progress { padding: 16px; }
.tv-progress[hidden] { display: none !important; }
.tv-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--text-secondary); }
.tv-progress-bar { height: 8px; border-radius: 4px; background: var(--bg-tertiary); overflow: hidden; }
.tv-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); border-radius: 4px; transition: width .25s var(--ease-out, ease); }

.tv-preview[hidden] { display: none !important; }
.tv-preview-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.tv-preview-frame video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.tv-preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tv-danger { color: var(--danger-dark, #b91c1c); border-color: color-mix(in srgb, var(--danger, #ef4444) 40%, var(--border-color)); }
.tv-danger:hover { background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-primary)); }

.tv-link-row { display: flex; gap: 8px; align-items: center; }
.tv-link-row input { flex: 1; min-width: 0; }
.tv-embed-preview { position: relative; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.tv-embed-preview[hidden] { display: none !important; }
.tv-embed-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-hint { display: block; margin-top: 8px; color: var(--text-tertiary); font-size: 12px; }
.tv-required { display: flex; align-items: flex-start; gap: 8px; padding: 10px var(--spacing-md) 12px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-secondary); cursor: pointer; line-height: 1.4; }
.tv-required input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary-600); flex-shrink: 0; }
.tv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary-500) 12%, var(--bg-primary)); color: var(--primary-700, var(--primary-600)); font-size: 11px; font-weight: 600; }

/* ─── Lesson video: player + watch gate ──────────────── */
.training-lesson-player { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 0 0 var(--spacing-lg); border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.training-lesson-player video, .training-lesson-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.training-watch-gate { display: inline-flex; align-items: center; gap: 10px; }
.training-watch-ring { --pct: 0; position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--primary-500) calc(var(--pct) * 1%), var(--bg-tertiary) 0); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.training-watch-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-primary); }
.training-watch-ring > span { position: relative; }
.training-watch-ring[hidden] { display: none !important; }
/* Lesson completes by itself: the footer centre says what still has to happen. */
.training-lesson-state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); text-align: center; }
.training-lesson-state .material-icons-outlined { font-size: 18px; }
.training-lesson-state--preview { color: var(--text-tertiary); font-weight: 500; }
.training-reading-icon { color: var(--primary-500); animation: trainingReadPulse 1.8s ease-in-out infinite; }
@keyframes trainingReadPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .training-reading-icon { animation: none; } }
.training-lesson-end { height: 1px; width: 100%; }
.training-lesson-finish { display: inline-flex; }

/* ─── Final quiz: learner card (course page) ─────────── */
.tq-card { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tq-card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-secondary); color: var(--text-secondary); }
.tq-card-icon .material-icons-outlined { font-size: 24px; }
.tq-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tq-card-body strong { font-size: var(--font-size-md); color: var(--text-primary); }
.tq-card-body span { font-size: 12px; color: var(--text-secondary); }
.tq-card-body em { font-style: normal; font-size: 12px; color: var(--text-tertiary); }
.tq-card--ready { border-color: color-mix(in srgb, var(--primary-500) 45%, var(--border-color)); background: color-mix(in srgb, var(--primary-500) 5%, var(--bg-primary)); }
.tq-card--ready .tq-card-icon { background: color-mix(in srgb, var(--primary-500) 14%, var(--bg-primary)); color: var(--primary-600); }
.tq-card--failed .tq-card-icon { background: #fff7ed; color: #c2410c; }
.tq-card--passed { border-color: #bbf7d0; background: #f0fdf4; }
.tq-card--passed .tq-card-icon { background: #dcfce7; color: #15803d; }
.tq-card--locked .tq-card-icon { color: var(--text-tertiary); }
.tq-off { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; font-weight: 600; vertical-align: middle; }

/* ─── Final quiz as the last step of the Course Content list ── */
.training-lesson-item--quiz { border-left: 3px solid #6366f1; }
.training-lesson-item--quiz.training-lesson--done { border-left-color: #22c55e; }
.training-lesson-item--quiz.training-lesson--current { background: color-mix(in srgb, #6366f1 6%, var(--bg-primary)); }
.training-lesson-item--quiz.training-lesson--locked { opacity: .65; }
.training-lesson-number--quiz { display: grid; place-items: center; }
.training-lesson-number--quiz .material-icons-outlined { font-size: 16px; color: #6366f1; }
.training-lesson-lock { font-size: 20px; color: var(--text-tertiary); }
.training-lesson-cta { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; background: #6366f1; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.training-course-done-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-lg); background: #f0fdf4; border: 1px solid #bbf7d0; }
.training-course-done-pill > .material-icons-outlined { color: #16a34a; font-size: 26px; }
.training-course-done-pill strong { display: block; color: #15803d; font-size: var(--font-size-sm); }
.training-course-done-pill span { font-size: 12px; color: var(--text-secondary); }
.training-card-status--quiz { color: #4f46e5; font-weight: 600; }

/* ─── Final quiz: taking it ──────────────────────────── */
.tq-take-head { margin-bottom: var(--spacing-lg); }
.tq-take-head h2 { font-size: 1.3rem; margin: 0 0 4px; color: var(--text-primary); }
.tq-take-head p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.tq-take-list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.tq-q { display: flex; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tq-q-num { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.tq-q-main { flex: 1; min-width: 0; }
.tq-q-prompt { font-size: var(--font-size-md); font-weight: 600; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
.tq-options { display: flex; flex-direction: column; gap: 8px; }
.tq-option { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; background: var(--bg-primary); transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), background-color var(--dur-fast, .15s) var(--ease-out, ease); }
.tq-option:hover { border-color: var(--primary-300, #93c5fd); }
.tq-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-option-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-color); flex-shrink: 0; margin-top: 2px; transition: border-color var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
.tq-option-text { font-size: var(--font-size-sm); color: var(--text-primary); line-height: 1.45; }
.tq-option.is-selected { border-color: var(--primary-500); background: color-mix(in srgb, var(--primary-500) 7%, var(--bg-primary)); }
.tq-option.is-selected .tq-option-dot { border-color: var(--primary-600); box-shadow: inset 0 0 0 4px var(--primary-600); }
.tq-option:focus-within { outline: 2px solid var(--primary-400, #60a5fa); outline-offset: 2px; }
.tq-take-footer { position: sticky; bottom: calc(var(--mobile-nav-h, 0px) + 8px); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-top: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); z-index: 2; }
.tq-take-footer span { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 600; }

/* ─── Final quiz: result ─────────────────────────────── */
/* Registered so the ring can TRANSITION from 0 to the score (a plain custom property cannot animate). */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }
.tq-result-page .training-lesson-topbar { margin-bottom: var(--spacing-md); }
.tq-result-hero { --tq-accent: var(--primary-600); --tq-accent-soft: var(--bg-tertiary); position: relative; overflow: hidden; display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: var(--spacing-lg) var(--spacing-xl); align-items: center; padding: var(--spacing-xl); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-xl, 16px); margin-bottom: var(--spacing-xl); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tq-result-hero.is-passed { --tq-accent: #16a34a; --tq-accent-soft: #dcfce7; border-color: #bbf7d0; background: linear-gradient(135deg, #f0fdf4 0%, var(--bg-primary) 60%); }
.tq-result-hero.is-failed { --tq-accent: #ea580c; --tq-accent-soft: #ffedd5; border-color: #fed7aa; background: linear-gradient(135deg, #fff7ed 0%, var(--bg-primary) 60%); }
.tq-result-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tq-accent); }
.tq-result-glyph { position: absolute; right: -22px; top: -26px; font-size: 220px; color: var(--tq-accent); opacity: .07; pointer-events: none; user-select: none; }
.tq-result-ring-col { display: grid; place-items: center; }
.tq-score-ring { --pct: 0; position: relative; width: 152px; height: 152px; border-radius: 50%; background: conic-gradient(var(--tq-accent) calc(var(--pct) * 1%), var(--tq-accent-soft) 0); display: grid; align-content: center; justify-items: center; row-gap: 2px; box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--tq-accent) 60%, transparent); transition: --pct .9s var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
.tq-score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-primary); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06); }
.tq-score-val, .tq-score-cap { position: relative; }
.tq-score-val { display: inline-flex; align-items: baseline; gap: 2px; }
.tq-score-val .training-quiz-score-value { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -.02em; }
.tq-score-val small { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.tq-score-cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.tq-result-body { position: relative; min-width: 0; }
.tq-result-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tq-accent); }
.tq-result-eyebrow .material-icons-outlined { font-size: 16px; }
.tq-result-hero h2 { margin: 6px 0 4px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text-primary); }
.tq-result-hero p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.tq-result-note { margin-top: 8px !important; color: var(--text-primary) !important; line-height: 1.55; max-width: 62ch; }
.tq-result-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tq-stat { min-width: 100px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg-primary); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tq-stat-v { display: inline-flex; align-items: baseline; font-size: 1.2rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.tq-stat-v .material-icons-outlined { font-size: 22px; color: var(--tq-accent); }
.tq-stat-of { font-size: .8em; font-weight: 600; color: var(--text-tertiary); }
.tq-stat-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.tq-stat--badge { border-color: color-mix(in srgb, var(--badge-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--badge-color) 8%, var(--bg-primary)); }
.tq-stat--badge .tq-stat-v .material-icons-outlined { color: var(--badge-color); }
.tq-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tq-review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin: 0 0 12px; }
.tq-review-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.tq-review-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.tq-review-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tq-review-chip .material-icons-outlined { font-size: 15px; }
.tq-review-chip.is-correct { background: #dcfce7; color: #15803d; }
.tq-review-chip.is-wrong { background: #fee2e2; color: #b91c1c; }
.tq-result-list { display: flex; flex-direction: column; gap: 10px; }
.tq-result-item { position: relative; display: flex; gap: 14px; padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.tq-result-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border-color); }
.tq-result-item.is-correct::before { background: #22c55e; }
.tq-result-item.is-wrong::before { background: #ef4444; }
.tq-result-mark-wrap { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.is-correct .tq-result-mark-wrap { background: #dcfce7; }
.is-wrong .tq-result-mark-wrap { background: #fee2e2; }
.tq-result-mark { font-size: 22px; font-weight: 700; }
.is-correct .tq-result-mark { color: #16a34a; }
.is-wrong .tq-result-mark { color: #dc2626; }
.tq-result-main { flex: 1; min-width: 0; }
.tq-result-prompt { display: flex; gap: 10px; align-items: baseline; font-weight: 600; color: var(--text-primary); font-size: var(--font-size-md); line-height: 1.45; }
.tq-result-num { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-tertiary); }
.tq-result-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.tq-answer-pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }
.is-correct .tq-answer-pill { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.is-wrong .tq-answer-pill { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.tq-answer-verdict { font-weight: 700; }
.is-correct .tq-answer-verdict { color: #15803d; }
.is-wrong .tq-answer-verdict { color: #b91c1c; }
.tq-result-explain { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.tq-result-explain .material-icons-outlined { font-size: 18px; color: #ca8a04; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .tq-score-ring { transition: none; } }

/* ─── Final quiz: builder (course editor) ────────────── */
.tq-editor .training-editor-section-header { position: relative; }
.tq-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.tq-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-toggle-track { width: 40px; height: 22px; border-radius: 999px; background: var(--bg-tertiary); position: relative; transition: background-color var(--dur-fast, .15s) var(--ease-out, ease); }
.tq-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-fast, .15s) var(--ease-out, ease); }
.tq-toggle input:checked + .tq-toggle-track { background: #22c55e; }
.tq-toggle input:checked + .tq-toggle-track::after { transform: translateX(18px); }
.tq-toggle input:focus-visible + .tq-toggle-track { outline: 2px solid var(--primary-400, #60a5fa); outline-offset: 2px; }
.tq-toggle-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 24px; }
.tq-settings { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-color); }
.tq-help { margin: 0 0 12px; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }
.tq-passing { display: flex; align-items: center; gap: 8px; }
.tq-passing label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.tq-passing input { width: 84px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font: inherit; font-weight: 700; text-align: center; }
.tq-passing-hint { font-size: 12px; color: var(--text-tertiary); }
.tq-questions { display: flex; flex-direction: column; gap: 10px; padding: var(--spacing-md) var(--spacing-lg); }
.tq-question { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tq-handle { cursor: grab; color: var(--text-tertiary); margin-top: 2px; }
.tq-question-num { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 700; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.tq-question-body { flex: 1; min-width: 0; }
.tq-question-prompt { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-primary); line-height: 1.45; }
.tq-question-options { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tq-question-options li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.tq-question-options li .material-icons-outlined { font-size: 16px; color: var(--text-tertiary); }
.tq-question-options li.is-correct { color: #15803d; font-weight: 600; }
.tq-question-options li.is-correct .material-icons-outlined { color: #16a34a; }
.tq-question-explain { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }
.tq-question-explain .material-icons-outlined { font-size: 15px; color: #ca8a04; flex-shrink: 0; }
.tq-footer { display: flex; align-items: center; gap: 12px; padding: 0 var(--spacing-lg) var(--spacing-md); }
.tq-count { font-size: 12px; color: var(--text-tertiary); }
.tq-opt-list { display: flex; flex-direction: column; gap: 8px; }
.tq-opt-row { display: flex; align-items: center; gap: 8px; }
.tq-opt-correct { display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; border-radius: 50%; }
.tq-opt-correct input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-opt-correct .material-icons-outlined { color: var(--text-tertiary); font-size: 22px; }
.tq-opt-correct input:checked + .material-icons-outlined { color: #16a34a; }
.tq-opt-letter { width: 22px; font-size: 12px; font-weight: 700; color: var(--text-tertiary); text-align: center; flex-shrink: 0; }
.tq-opt-row .tq-opt-text { flex: 1; min-width: 0; }
.tq-modal { max-width: 640px; }

/* ─── Candidate (Guest Plus) banner ──────────────────── */
.training-candidate-banner { display: flex; gap: var(--spacing-md); align-items: flex-start; padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); border-radius: var(--radius-lg); background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #c7d2fe; }
.training-candidate-banner > .material-icons-outlined { font-size: 28px; color: #4f46e5; flex-shrink: 0; }
.training-candidate-banner strong { display: block; font-size: var(--font-size-md); color: var(--text-primary); margin-bottom: 2px; }
.training-candidate-banner strong em { font-style: normal; color: #4338ca; }
.training-candidate-banner span { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }
.training-candidate-banner.is-done { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: #bbf7d0; }
.training-candidate-banner.is-done > .material-icons-outlined { color: #16a34a; }
.training-candidate-stage { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--stage-color) 12%, #fff); color: var(--stage-color); font-size: 11px !important; font-weight: 600; vertical-align: middle; }
.training-candidate-stage .material-icons-outlined { font-size: 14px; }

/* ─── Admin: Courses | Tracking tabs ─────────────────── */
.training-admin-tabs { display: flex; gap: 4px; margin: 0 0 var(--spacing-md); padding: 4px; background: var(--bg-secondary); border-radius: var(--radius-lg); width: max-content; max-width: 100%; }
.training-admin-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast, .15s) var(--ease-out, ease), color var(--dur-fast, .15s) var(--ease-out, ease); }
.training-admin-tab .material-icons-outlined { font-size: 18px; }
.training-admin-tab.active { background: var(--bg-primary); color: var(--primary-600); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }

/* ─── Admin: tracking overview ───────────────────────── */
.tt-summary .training-stat-card { min-width: 0; }
.tt-section { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); overflow: hidden; }
.tt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-color); }
.tt-section-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--font-size-md); color: var(--text-primary); }
.tt-section-head h3 .material-icons-outlined { font-size: 20px; color: var(--primary-500); }
.tt-section-head > span { font-size: 12px; color: var(--text-tertiary); }
.tt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: 720px; }
.tt-table th { text-align: left; padding: 10px var(--spacing-md); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); background: var(--bg-secondary); white-space: nowrap; }
.tt-table td { padding: 10px var(--spacing-md); border-top: 1px solid var(--border-light, var(--border-color)); vertical-align: middle; color: var(--text-primary); }
.tt-row-link { cursor: pointer; }
.tt-row-link:hover td { background: color-mix(in srgb, var(--primary-500) 4%, var(--bg-primary)); }
.tt-course-cell strong, .tt-user-cell strong { display: block; font-weight: 600; }
.tt-course-cell span, .tt-user-cell span { display: block; font-size: 11px; color: var(--text-tertiary); }
.tt-user-cell { display: flex; align-items: center; gap: 10px; }
.tt-tag { display: inline-block; font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.tt-tag--cand { background: #eef2ff; color: #4338ca; }
.tt-bar { display: inline-block; vertical-align: middle; width: 90px; height: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; margin-right: 6px; }
.tt-bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
.tt-bar-text { font-size: 12px; color: var(--text-secondary); }
.tt-muted { color: var(--text-tertiary); }
.tt-empty { text-align: center; color: var(--text-tertiary); padding: var(--spacing-xl) !important; }
.tt-expand-icon { font-size: 20px; color: var(--text-tertiary); transition: transform var(--dur-fast, .15s) var(--ease-out, ease); vertical-align: middle; }
.is-open .tt-expand-icon { transform: rotate(180deg); }
.tt-detail td { background: var(--bg-secondary); padding: var(--spacing-sm) var(--spacing-lg); }
.tt-detail[hidden] { display: none !important; }
.tt-detail-grid { display: flex; flex-direction: column; gap: 6px; }
.tt-detail-row { display: grid; grid-template-columns: minmax(160px, 2fr) 130px 1fr 1.4fr 1fr; gap: 12px; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border-color); }
.tt-detail-row:last-child { border-bottom: 0; }
.tt-detail-course { font-weight: 600; color: var(--text-primary); }
.tt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--chip) 12%, var(--bg-primary)); color: var(--chip); font-size: 11px; font-weight: 600; white-space: nowrap; }
.tt-chip .material-icons-outlined { font-size: 14px; }

/* ─── Admin: per-course tracking additions ───────────── */
.tt-quiz-summary { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.tt-quiz-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tt-quiz-summary-head .material-icons-outlined { color: var(--primary-500); }
.tt-quiz-summary-head strong { color: var(--text-primary); }
.tt-quiz-summary-head > span:last-child { font-size: 12px; color: var(--text-tertiary); }
.tt-quiz-summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tt-quiz-summary-stats > div { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; }
.tt-quiz-summary-stats b { font-size: 1.2rem; color: var(--text-primary); }
.tt-quiz-summary-stats span { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.tt-quiz-line { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--chip); }
.tt-quiz-line .material-icons-outlined { font-size: 14px; }
.tt-has-attempts { cursor: pointer; }
.tt-attempts { display: flex; flex-direction: column; gap: 4px; padding: 6px var(--spacing-md) 10px 64px; background: var(--bg-secondary); }
.tt-attempts[hidden] { display: none !important; }
.tt-attempt { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-primary); }
.tt-attempt .material-icons-outlined { font-size: 16px; }
.tt-attempt.is-pass .material-icons-outlined { color: #16a34a; }
.tt-attempt.is-fail .material-icons-outlined { color: #dc2626; }

/* ─── Design pass: catalog cards, course page, lesson rail ── */
.training-course-card { transition: transform var(--dur-fast, .15s) var(--ease-out, ease), box-shadow var(--dur-fast, .15s) var(--ease-out, ease); }
.training-course-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .12); }
.training-card-thumb--gradient { display: grid; place-items: center; }
.training-thumb-glyph { font-size: 52px !important; color: rgba(255, 255, 255, .92); text-shadow: 0 4px 16px rgba(0, 0, 0, .25); }

.training-detail-hero { min-height: 240px; background-size: cover; background-position: center; border-radius: var(--radius-xl, 16px); }
.training-detail-hero--gradient .training-detail-hero-overlay { background: linear-gradient(180deg, rgba(11, 34, 94, .05) 0%, rgba(11, 34, 94, .55) 100%); }
.training-detail-hero-content { max-width: 760px; }

.training-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-lg); align-items: start; margin-top: var(--spacing-lg); }
/* The aside comes first in the DOM (so it leads on a phone) but sits on the right on desktop. */
.training-detail-main { min-width: 0; grid-column: 1; grid-row: 1; }
.training-detail-side { grid-column: 2; grid-row: 1; }
.training-detail-main .training-lessons-section { margin-top: 0; }
.training-detail-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: var(--spacing-md); }
.training-side-card { margin: 0 !important; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex !important; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.training-side-card .training-detail-progress-bar-wrap { width: 100%; }
.training-side-card .btn { width: 100%; justify-content: center; min-height: 46px; font-size: 14px; }
.training-side-card .training-badge-earned-card, .training-side-card .training-course-done-pill { width: 100%; box-sizing: border-box; }
.training-side-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.training-side-facts > div { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; }
.training-side-facts b { font-size: 1.05rem; color: var(--text-primary); }
.training-side-facts span { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.training-side-status { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, var(--bg-primary)); color: var(--c); font-size: 12px; font-weight: 700; }
.training-side-status .material-icons-outlined { font-size: 16px; }
.training-ring { --pct: 0; position: relative; width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--primary-500) calc(var(--pct) * 1%), var(--bg-tertiary) 0); display: grid; place-items: center; }
.training-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-primary); }
.training-ring > span { position: relative; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); display: grid; place-items: center; }
.training-ring > span .material-icons-outlined { font-size: 40px; color: #16a34a; }
.training-ring.is-done { background: conic-gradient(#22c55e 100%, #22c55e 0); }
.training-lessons-list .training-lesson-item { min-height: 64px; }
.training-lesson-item.training-lesson--current { box-shadow: inset 3px 0 0 var(--primary-600); }

.training-lesson-layout { max-width: 1180px; }
.training-lesson-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.training-lesson-main { min-width: 0; }
.training-lesson-rail { position: sticky; top: 16px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.training-rail-head { padding: 14px 16px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 6px; }
.training-rail-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 700; }
.training-rail-head strong { font-size: 14px; color: var(--text-primary); line-height: 1.3; }
.training-rail-head .training-progress-bar { margin-top: 4px; }
.training-rail-pct { font-size: 11px; color: var(--text-secondary); }
.training-rail-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.training-rail-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius-md); cursor: pointer; min-height: 44px; transition: background-color var(--dur-fast, .15s) var(--ease-out, ease); }
.training-rail-item:hover { background: var(--bg-secondary); }
.training-rail-item.is-current { background: color-mix(in srgb, var(--primary-500) 10%, var(--bg-primary)); box-shadow: inset 3px 0 0 var(--primary-600); }
.training-rail-mark { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-color); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; margin-top: 1px; }
.training-rail-mark .material-icons-outlined { font-size: 18px; }
.training-rail-item.is-done .training-rail-mark { border-color: #22c55e; color: #16a34a; }
.training-rail-item.is-current .training-rail-mark { border-color: var(--primary-600); color: var(--primary-600); }
.training-rail-item--quiz .training-rail-mark { color: #6366f1; border-color: #c7d2fe; }
.training-rail-item--quiz.is-open { background: color-mix(in srgb, #6366f1 8%, var(--bg-primary)); }
.training-rail-text { display: flex; flex-direction: column; min-width: 0; }
.training-rail-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.training-rail-meta { font-size: 11px; color: var(--text-tertiary); }
.training-lesson-content { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.rte-rendered-content { font-size: 15px; line-height: 1.8; }

@media (max-width: 1024px) {
    .training-detail-grid { grid-template-columns: 1fr; }
    .training-detail-main { grid-column: auto; grid-row: auto; }
    .training-detail-side { position: static; grid-column: auto; grid-row: auto; order: -1; }
    .training-lesson-body { grid-template-columns: 1fr; }
    .training-lesson-rail { position: static; }
    .training-rail-list { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .training-rail-item { flex: 0 0 auto; max-width: 220px; }
}

/* ─── Phone ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .training-side-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-ring { width: 96px; height: 96px; }
    .training-admin-tabs { width: 100%; }
    .training-admin-tab { flex: 1; justify-content: center; }
    .tt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-section-head { flex-direction: column; gap: 2px; }
    .tt-detail-row { grid-template-columns: 1fr 1fr; }
    .tt-attempts { padding-left: var(--spacing-md); }
    .tt-attempt { flex-wrap: wrap; gap: 6px 10px; }
    .training-candidate-banner { padding: var(--spacing-md); }
    .tq-card { flex-wrap: wrap; padding: var(--spacing-md); }
    .tq-card > .btn { flex-basis: 100%; justify-content: center; }
    .tq-q { padding: var(--spacing-md); }
    .tq-take-footer { flex-wrap: wrap; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
    .tq-take-footer .btn { flex: 1; justify-content: center; }
    .tq-result-hero { grid-template-columns: 1fr; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-md); text-align: center; }
    .tq-result-glyph { font-size: 150px; right: -30px; top: -30px; }
    .tq-result-body { display: flex; flex-direction: column; align-items: center; }
    .tq-result-hero h2 { font-size: 1.5rem; }
    .tq-result-stats { justify-content: center; width: 100%; }
    .tq-stat { flex: 1 1 calc(50% - 10px); min-width: 0; align-items: center; }
    .tq-result-actions { width: 100%; }
    .tq-result-actions .btn { flex: 1; justify-content: center; }
    .tq-review-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .tq-passing { flex-wrap: wrap; }
    .tq-question { flex-wrap: wrap; }
    .tq-question .training-editor-lesson-actions { flex-basis: 100%; justify-content: flex-end; }
    .tv-tab { font-size: 12px; padding: 8px 6px; }
    .tv-preview-meta { flex-direction: column; align-items: flex-start; }
    .tv-preview-actions { width: 100%; }
    .tv-preview-actions .btn { flex: 1; justify-content: center; }
    .tv-link-row { flex-wrap: wrap; }
    .tv-link-row input { flex-basis: 100%; }
    .training-lesson-player { margin-left: calc(-1 * var(--spacing-md)); margin-right: calc(-1 * var(--spacing-md)); width: auto; border-radius: 0; }
    .training-lesson-footer { flex-wrap: wrap; }
    .training-lesson-state { flex-basis: 100%; justify-content: center; order: -1; }
}