/* Header, pages, home, unit, lesson player, practice, profile, media (code/diagram/video/sim host). */

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--c-border); }
.header-inner { max-width: var(--wide); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 18px; min-height: var(--tap); }
.logo-dot { color: var(--c-primary); }
.logo-sub { color: var(--c-muted); font-weight: 600; }
.header-stats { display: flex; align-items: center; gap: 6px; }
.hstat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--c-surface-2); min-height: 34px; }
.hstat.energy .v { color: var(--c-text); }
.hstat.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.25); background: color-mix(in srgb, var(--c-energy) 30%, var(--c-surface-2)); } }
.sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--c-surface-2); color: var(--c-text); text-decoration: none; min-height: 34px; border: 1px solid var(--c-border); }
.sync-pill[data-status="error"] { background: var(--c-warn-bg); border-color: var(--c-warn); }
.sync-pill[data-status="local"] { background: var(--c-surface-2); }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary-soft); text-decoration: none; font-size: 20px; border: 2px solid var(--c-primary); }
@media (max-width: 640px) {
  .sync-pill.hdr .t { display: none; }
  .logo-sub, .logo-dot { display: none; }
  .header-stats { gap: 4px; }
  .hstat { padding: 4px 8px; }
}

/* ---------- page containers ---------- */
#app { flex: 1; outline: none; }
.page { max-width: var(--wide); margin: 0 auto; padding: 24px 16px 48px; }
.page.narrow { max-width: var(--content); }
.page-head { margin-bottom: 20px; }
.lead { color: var(--c-muted); font-size: var(--fs-lg); line-height: 1.5; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 700; color: var(--c-muted); margin-bottom: 6px; }
.section-title { margin-top: 32px; }
.crumbs { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 12px; }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: var(--fs-lg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.site-footer { text-align: center; color: var(--c-muted); font-size: 13px; padding: 24px 16px 32px; }
.boot { padding: 48px 16px; text-align: center; color: var(--c-muted); }
.big-emoji { font-size: 64px; }
.notfound { text-align: center; padding-top: 48px; }
.empty { text-align: center; padding: 32px; background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--radius); }

/* ---------- progress primitives ---------- */
.pbar { height: 14px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.pbar-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 70%, var(--c-success))); border-radius: 999px; transition: width .6s ease; }
.ring { flex: none; }
.ring-bg { stroke: var(--c-surface-2); }
.ring-started { opacity: .28; }
.ring-fg { transition: stroke-dasharray .6s ease; }
.ring-text { fill: var(--c-text); font-family: inherit; }
.status-pill { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--c-surface-2); }
.status-pill.st-mastered { background: var(--c-success-bg); color: var(--c-success); }
.status-pill.st-started { background: var(--c-primary-soft); color: var(--c-primary); }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow);
  background-image: radial-gradient(circle at 100% 0, var(--c-primary-soft), transparent 55%); }
.hero h1 { font-size: clamp(26px, 4.5vw, 36px); }
.hero-progress { margin: 18px 0 6px; max-width: 520px; }
.hero-progress-label { margin-top: 6px; color: var(--c-muted); font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.hero-sub { color: var(--c-muted); font-size: 15px; }
.hero-stats { display: grid; gap: 10px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: var(--c-surface-2); border-radius: var(--radius); padding: 10px 16px; min-width: 180px; }
.stat-icon { grid-row: span 2; font-size: 26px; }
.stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--c-muted); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 20px; } .hero-stats { grid-template-columns: repeat(3, 1fr); } .stat { min-width: 0; grid-template-columns: 1fr; text-align: center; padding: 10px 6px; } .stat-icon { grid-row: auto; font-size: 20px; } }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.unit-card { position: relative; display: flex; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--c-text); text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.unit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.unit-card-strip { width: 8px; flex: none; background: var(--unit); }
.unit-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.unit-card-top { display: flex; align-items: center; gap: 8px; }
.unit-icon { font-size: 26px; }
.unit-num { font-size: 13px; font-weight: 700; color: var(--c-muted); /* unit colour stays on strip/icon: AA contrast */ text-transform: uppercase; letter-spacing: .05em; }
.unit-card-title { font-size: 19px; margin: 0; }
.unit-card-desc { color: var(--c-muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.unit-card-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.unit-card-count { font-size: 14px; color: var(--c-muted); font-weight: 600; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.quick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); text-decoration: none; color: var(--c-text); min-height: 64px; }
.quick:hover { border-color: var(--c-primary); }
.quick-icon { font-size: 28px; }
.quick small { display: block; color: var(--c-muted); }

/* ---------- unit page ---------- */
.unit-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; border-radius: 20px; margin-bottom: 20px;
  background: color-mix(in srgb, var(--unit) 12%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--unit) 35%, var(--c-border)); }
.unit-head-icon { font-size: 52px; }
.unit-head h1 { margin-bottom: 4px; }
.unit-head .lead { margin: 0; font-size: 17px; }
.unit-head-ring { display: grid; justify-items: center; gap: 4px; color: var(--c-muted); }
@media (max-width: 640px) { .unit-head { grid-template-columns: auto 1fr; padding: 18px; } .unit-head-ring { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; } .unit-head-icon { font-size: 40px; } }
.lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lesson-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; margin: 0; }
.lesson-row.st-mastered { border-color: color-mix(in srgb, var(--c-success) 45%, var(--c-border)); }
.lesson-status { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; background: var(--c-surface-2); color: var(--c-muted); }
.st-started .lesson-status { background: var(--c-primary-soft); color: var(--c-primary); }
.st-mastered .lesson-status { background: var(--c-success-bg); color: var(--c-success); }
.lesson-title { font-weight: 700; color: var(--c-text); text-decoration: none; font-size: 17px; }
.lesson-title:hover { color: var(--c-primary); text-decoration: underline; }
.lesson-meta { margin: 2px 0 0; color: var(--c-muted); font-size: 14px; }
.lesson-goal { margin: 4px 0 0; font-size: 14px; color: var(--c-muted); }
@media (max-width: 560px) { .lesson-row { grid-template-columns: auto 1fr; } .lesson-row > .btn { grid-column: 1 / -1; } }
.unit-foot { margin-top: 24px; text-align: center; }

/* ---------- lesson player ---------- */
.page.lesson { max-width: var(--content); padding-bottom: 140px; }
.lesson-top { position: sticky; top: var(--header-h); z-index: 30; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--c-bg); padding: 8px 0; margin: -8px 0 8px; }
.segments { display: flex; gap: 4px; align-items: center; min-width: 0; }
.seg { flex: 1; height: 12px; min-width: 6px; border-radius: 999px; border: 0; background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); padding: 0; cursor: default; position: relative; }
.seg::after { content: ""; position: absolute; inset: -16px 0; } /* bigger tap area */
.seg.reachable { cursor: pointer; }
.seg.done { background: var(--c-primary); box-shadow: none; }
.seg.correct { background: var(--c-success); box-shadow: none; }
.seg.revealed, .seg.wrong { background: var(--c-warn); box-shadow: none; }
.seg.current { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-primary); }
.step-counter { font-size: 14px; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.lesson-title-row { margin-bottom: 12px; }
.lesson-h1 { font-size: var(--fs-xl); }
.lesson-goal-banner { background: var(--c-primary-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 15px; }
.step-stage { min-height: 200px; overflow-x: clip; overflow-clip-margin: 8px; }
.step-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; }
.step-title { font-size: var(--fs-lg); display: flex; gap: 10px; align-items: center; }
.step-icon { font-size: 22px; }
.step-card .prose { font-size: 18px; }
.step-card .prose p:last-child { margin-bottom: 0; }
.caption { color: var(--c-muted); font-size: 16px; margin-top: 12px; }
.enter-right { animation: enterR .28s ease both; }
.enter-left { animation: enterL .28s ease both; }
@keyframes enterR { from { opacity: 0; transform: translateX(24px); } }
@keyframes enterL { from { opacity: 0; transform: translateX(-24px); } }
@media (max-width: 560px) { .step-card { padding: 16px; border-radius: 14px; } .lesson-back { display: none; } }

.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -4px 16px rgba(0,0,0,.06); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.action-inner { max-width: var(--content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.action-left, .action-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.action-right { justify-content: flex-end; }
.action-primary { min-width: 150px; }
@media (max-width: 480px) { .action-primary { min-width: 0; padding: 0 18px; } .action-inner .btn.ghost { padding: 0 10px; } }
.feedback { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 34; padding: 0 16px; }
.feedback .fb-inner { max-width: var(--content); margin: 0 auto 6px; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-lg); max-height: 40vh; overflow: auto; }
.feedback.success .fb-inner { background: var(--c-success-bg); border: 2px solid var(--c-success); }
.feedback.error .fb-inner { background: var(--c-danger-bg); border: 2px solid var(--c-danger); }
.feedback.warn .fb-inner { background: var(--c-warn-bg); border: 2px solid var(--c-warn); }
.fb-title { font-size: 18px; margin-right: 8px; }
.success .fb-title { color: var(--c-success); }
.error .fb-title { color: var(--c-danger); }
.fb-points { display: inline-block; font-weight: 700; background: var(--c-surface); border-radius: 999px; padding: 0 10px; color: var(--c-text); }
.feedback p { margin: 4px 0 0; }
.slide-up .fb-inner { animation: slideUp .25s ease both; }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } }

.complete { position: relative; text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; padding: 40px 20px; box-shadow: var(--shadow); overflow: hidden; }
.complete-badge { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; font-size: 48px; background: var(--c-success-bg); color: var(--c-success); margin-bottom: 12px; animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.12); } }
.complete-points { font-size: var(--fs-lg); font-weight: 700; }
.complete-status { display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--c-surface-2); }
.complete-status.st-mastered { background: var(--c-success-bg); }
.complete-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 10px; height: 14px; border-radius: 2px; background: var(--pair-0); animation: fall 1.6s ease-in var(--d) forwards; opacity: .9; }
.confetti i:nth-child(3n) { background: var(--c-energy); }
.confetti i:nth-child(3n+1) { background: var(--c-success); }
.confetti i:nth-child(4n) { background: var(--u-pink); }
@keyframes fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }

/* ---------- practice ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.practice-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.practice-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; }
.practice-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--c-muted); font-weight: 600; margin-bottom: 8px; }
.practice-progress { height: 8px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.practice-progress > div { height: 100%; background: var(--c-primary); transition: width .3s; }
.practice-next { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ---------- profile ---------- */
.code-box { display: block; font-family: var(--mono); font-size: clamp(15px, 3.6vw, 22px); font-weight: 600; letter-spacing: .03em; padding: 16px; border-radius: var(--radius-sm); background: var(--c-surface-2); border: 2px dashed var(--c-primary); overflow-wrap: anywhere; user-select: all; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.settings { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; }
.settings select { max-width: 260px; }
.restore label { display: block; font-weight: 600; margin-bottom: 4px; }
.restore .text-input { flex: 1; min-width: 0; font-family: var(--mono); }
.danger-zone { border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-border)); }

/* ---------- videos + glossary ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.video-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.video-card:hover { box-shadow: var(--shadow-lg); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--c-primary-soft), var(--c-surface-2)); display: grid; place-items: center; }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-primary); color: var(--c-primary-ink); font-size: 22px; box-shadow: var(--shadow-lg); }
.video-seen { position: absolute; top: 8px; right: 8px; background: var(--c-success); color: #fff; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
.video-card-body { padding: 12px 14px 16px; display: grid; gap: 4px; }
.video-card-body small { color: var(--c-muted); }
.video-player-slot { margin-bottom: 16px; }
.term-list { margin: 0; }
.term-letter { font-weight: 700; font-size: 22px; color: var(--c-primary); margin: 18px 0 6px; border-bottom: 2px solid var(--c-border); }
.term-item { padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.term-item dt { font-weight: 700; }
.term-item dd { margin: 2px 0 0; color: var(--c-text); }
.term-unit { font-size: 13px; margin-left: 6px; }

/* ---------- media: code ---------- */
.code-wrap { border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--code-bg); margin: 4px 0; }
.code-head { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 13px; color: var(--c-muted); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.code-lang { font-weight: 700; }
.code-src { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
pre.code { margin: 0; padding: 10px 0; overflow-x: auto; font-size: 14px; line-height: 1.65; }
pre.code code { display: block; min-width: max-content; }
.code-line { display: block; padding: 0 14px 0 0; border-left: 4px solid transparent; }
.code-line .ln { display: inline-block; width: 2.6em; padding-right: .9em; text-align: right; color: var(--c-muted); user-select: none; opacity: .7; }
.code-line.hl { background: color-mix(in srgb, var(--c-energy) 18%, transparent); border-left-color: var(--c-energy); }
.code-line.has-note { cursor: pointer; }
.code-line.has-note .ln::after { content: "•"; color: var(--c-primary); margin-left: 2px; }
.code-line.noted { background: color-mix(in srgb, var(--c-primary) 16%, transparent); border-left-color: var(--c-primary); }
.code-note-buttons { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.code-note { padding: 10px 14px; background: var(--c-primary-soft); font-size: 15px; }
.tok-kw { color: var(--tok-kw); font-weight: 600; } .tok-str { color: var(--tok-str); } .tok-num { color: var(--tok-num); }
.tok-com { color: var(--tok-com); font-style: italic; } .tok-fn { color: var(--tok-fn); } .tok-type { color: var(--tok-type); }
.tok-const { color: var(--tok-const); font-weight: 600; } .tok-pre { color: var(--tok-pre); }

/* ---------- media: diagrams ---------- */
figure { margin: 0; }
.diagram-stage { background: var(--c-surface-2); border-radius: var(--radius-sm); padding: 10px; }
.diagram-stage > svg { display: block; width: 100%; height: auto; color: var(--c-text); }
.diagram figcaption, .video figcaption, .sim-caption { margin-top: 10px; color: var(--c-muted); font-size: 16px; }
.diagram-tip { min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--c-primary); margin-top: 4px; }
.dg-node { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 2; }
.dg-node.state { stroke: var(--c-primary); }
.dg-node.svc { stroke: var(--u-purple); }
.dg-node.chr { stroke: var(--c-primary); }
.dg-node.dsc { stroke: var(--u-teal); stroke-dasharray: 6 4; }
.dg-node.chip { fill: var(--c-text); stroke: none; }
.dg-node.imu { fill: var(--viz-g); stroke: none; }
.dg-node.metal { fill: var(--c-border); }
.dg-node.dashed { stroke-dasharray: 6 4; fill: transparent; }
.dg-node.diamond { stroke: var(--u-amber); }
.dg-node.mono + text, .dg-node.mono ~ text { font-family: var(--mono); }
.dg-title { fill: var(--c-text); }
.dg-title-inv { fill: var(--c-bg); }
.dg-sub { fill: var(--c-muted); }
.dg-arrow { fill: none; stroke: var(--c-muted); stroke-width: 2.5; }
.dg-arrow.dashed { stroke-dasharray: 6 5; }
.dg-zone { fill: none; stroke: var(--c-border); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dg-zone.fw { fill: color-mix(in srgb, var(--u-purple) 5%, transparent); }
.dg-zone.app { fill: color-mix(in srgb, var(--u-teal) 5%, transparent); }
.dg-board { fill: color-mix(in srgb, var(--c-primary) 22%, var(--c-surface)); stroke: var(--c-primary); stroke-width: 2; }
.dg-arm { fill: color-mix(in srgb, var(--u-orange) 18%, var(--c-surface)); stroke: color-mix(in srgb, var(--u-orange) 50%, var(--c-border)); stroke-width: 2; }
.dg-antenna { fill: none; stroke: var(--u-amber); stroke-width: 4; }
.dg-led { fill: var(--c-success); stroke: var(--c-surface); stroke-width: 3; }
.dg-row { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 1.5; }
.dg-chip { stroke: rgba(0,0,0,.12); }
.diagram-stage .hs:hover > rect, .diagram-stage .hs:hover > path { stroke: var(--c-primary); }

/* ---------- media: video ---------- */
.video-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.video-frame { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-missing { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--c-warn-bg); color: var(--c-text); }
.video-missing p { margin: 0; }
.video-frame:has(.video-missing) { background: var(--c-surface); }
.video-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- sim host frame (sims.css styles the inside) ---------- */
figure.sim { margin: 0; }
.sim-stage { position: relative; min-height: 220px; background: var(--c-surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.sim-stage > svg { display: block; width: 100%; height: auto; }
.sim-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 0; }
.sim-toolbar.is-locked { opacity: .55; }
.sim-speed { min-height: 38px; padding: 4px 10px; font-size: 15px; }
.sim-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.sim-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); cursor: pointer; padding: 0; position: relative; }
.sim-dot::after { content: ""; position: absolute; inset: -11px; }
.sim-dot.active { background: var(--c-primary); border-color: var(--c-primary); }
.sim-live { margin: 8px 0 0; min-height: 1.5em; font-size: 15px; font-weight: 600; color: var(--c-primary); }
.sim-fallback { display: flex; gap: 12px; align-items: center; padding: 24px 18px; min-height: 220px; font-size: 16px; }
.sim-fallback span { font-size: 32px; }
.sim-fallback p { margin: 0; }