/* Left navigation rail, Learn page layout, marker pop-up, collapsible panels, voice button */
body { padding-left: var(--rail-w); transition: padding-left .25s; }
body.rail-collapsed { --rail-w: 72px; }

.rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); background: rgba(251,252,252,.97); border-right: 1px solid var(--ln); display: flex; flex-direction: column; padding: 14px 12px; z-index: 30; transition: width .25s; overflow: hidden; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 56px; }
.rail-logo { display: flex; align-items: center; text-decoration: none; }
.rail-logo { width: 170px; overflow: hidden; }
.rail-logo .wordmark { height: 64px; width: auto; max-width: none; margin: -8px 0; }
.rail-logo .hexmark { display: none; width: 40px; height: 40px; }
.railbtn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 0; background: none; color: var(--t2); font-size: 13px; white-space: nowrap; text-align: left; }
.railbtn:hover { background: var(--tint); color: var(--t1); }
.railbtn.icon { padding: 6px; width: 30px; height: 30px; justify-content: center; border-radius: 50%; flex: none; }
.railbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#railtoggle svg { transition: transform .25s; }
.rail-title { margin: 16px 8px 4px; font: 600 17px 'Cormorant Garamond', Georgia, serif; color: var(--t1); line-height: 1.2; }
.rail-items { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.rail-items a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--t2); text-decoration: none; font-size: 13.5px; white-space: nowrap; transition: .15s; }
.rail-items a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-items a:hover { background: var(--tint); color: var(--t1); }
.rail-items a.on { background: var(--teal-soft); color: var(--teal-d); font-weight: 500; }
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ln); align-items: flex-start; }
.rail-bottom .userchip { padding: 0 4px; }

body.rail-collapsed .rail-top { flex-direction: column; gap: 10px; }
body.rail-collapsed .rail-logo { width: auto; }
body.rail-collapsed .rail-logo .wordmark { display: none; }
body.rail-collapsed .rail-logo .hexmark { display: block; }
body.rail-collapsed #railtoggle svg { transform: rotate(180deg); }
body.rail-collapsed .rail .t { display: none; }
body.rail-collapsed .rail-title { display: none; }
body.rail-collapsed .rail-items a, body.rail-collapsed .railbtn:not(.icon) { justify-content: center; padding: 10px 0; }
body.rail-collapsed .rail-bottom { align-items: center; }
body.rail-collapsed .rail-bottom .chip { padding: 6px; }
@media (max-width: 900px) {
  body { --rail-w: 72px; }
  .rail .t, .rail-title { display: none; }
  .rail-top { flex-direction: column; gap: 10px; }
  .rail-logo { width: auto; }
  .rail-logo .wordmark { display: none; }
  .rail-logo .hexmark { display: block; }
  .rail-bottom { align-items: center; }
  .rail-bottom .chip { padding: 6px; }
}

/* ---------- Learn page: fits one screen ---------- */
#view.view-learn { --res: calc(274px + var(--tl-extra, 0px) + var(--dr-extra, 0px)); height: 100vh; max-width: none; margin: 0; padding: 14px 22px 10px; display: flex; flex-direction: column; gap: 10px; overflow-x: hidden; overflow-y: auto; }
#view.view-learn.tl-open { --tl-extra: 56px; }
#view.view-learn.dr-open { --dr-extra: 214px; }
@media (min-width: 1000px) { body.clara-open #view.view-learn, body.clara-open #view.view-lesson { margin-right: var(--clara-w); } }
.lhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lhead h2 { font-size: 26px; line-height: 1.1; margin-top: 2px; }
.lright { display: flex; align-items: center; gap: 10px; }

/* Shared header for every topic page: label + one-line title on row 1, stepper always on its own row 2 */
.thead { display: flex; flex-direction: column; gap: 8px; flex: none; min-width: 0; }
.th-r1 { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; min-width: 0; }
.th-t { min-width: 0; flex: 1; }
.th-t h2 { margin: 2px 0 0; font-size: 26px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-right { display: flex; align-items: center; gap: 10px; flex: none; }
.th-right:empty { display: none; }
.tsteps { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px 2px 3px; }
.tsteps::-webkit-scrollbar { display: none; }
.ts-pill, .ts-sep, .ts-soon { flex: none; }

/* Soft fade between topic pages so moving video to chat to assessment feels like one continuous screen */
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view.view-learn > *, #view.view-lesson > *, #view.view-assess > *, #view.view-practical > * { animation: viewin .32s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { #view > * { animation: none !important; } }
.vtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vtab { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 99px; border: 1px solid var(--ln2); background: var(--card); font-size: 12.5px; color: var(--t2); transition: .15s; }
.vtab b { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--t2); }
.vtab:hover { border-color: var(--teal); }
.vtab.on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-d); }
.vtab.on b { background: var(--teal); color: #fff; }
.vtab.done b { background: var(--green); color: #fff; }
.vtab .pct { font-size: 10.5px; color: var(--t3); }

#view.view-learn .player { width: min(100%, max(320px, calc((100vh - var(--res)) * 1.7778))); aspect-ratio: 16/9; margin: 0 auto; flex: none; }
.player .nudge { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; margin: 0; background: rgba(255,248,230,.97); box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Marker pop-up over the video, like HMEL */
.mkpop { position: absolute; inset: 0; display: none; place-items: center; background: rgba(12,24,26,.5); backdrop-filter: blur(3px); z-index: 5; padding: 12px; }
.mkpop.on { display: grid; animation: fadein .25s both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.mkcard { background: #fff; width: min(580px, 94%); max-height: 96%; overflow: auto; border-radius: 20px; padding: 18px 24px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.35); animation: rise .35s cubic-bezier(.16,1,.3,1) both; }
.mkcard h3 { font-size: clamp(17px, 2.6vh, 21px); line-height: 1.3; margin: 6px 0 12px; }
.mkcard textarea { min-height: 70px; }

/* Collapsible cognitive-load strip */
.tl { padding: 8px 16px 8px; flex: none; }
.tlhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tlbtn { background: none; border: 0; display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--t2); }
.tlbtn svg { width: 14px; height: 14px; transition: transform .2s; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tl.open .tlbtn svg { transform: rotate(90deg); }
.tlbtn:hover { color: var(--teal-d); }
#view.view-learn .ribbon { height: 16px; margin-top: 12px; transition: height .25s; }
#view.view-learn .tl.open .ribbon { height: 64px; }
.tl .legend { display: none; margin-top: 8px; }
.tl.open .legend { display: flex; }

/* Collapsible chapters / transcript / markers drawer */
.drawer { flex: none; }
.drawer .tabs { display: flex; align-items: center; border-bottom: 0; padding: 0 8px; }
.drawer .tabs button { padding: 9px 14px; }
.drawer.open .tabs { border-bottom: 1px solid var(--ln); }
.drawer .tabs .chev { margin-left: auto; padding: 8px; display: grid; place-items: center; }
.drawer .tabs .chev svg { width: 16px; height: 16px; fill: none; stroke: var(--t2); stroke-width: 2.2; stroke-linecap: round; transition: transform .2s; transform: rotate(-90deg); }
.drawer.open .tabs .chev svg { transform: rotate(90deg); }
.drawer .tabs button.on { color: var(--t2); border-color: transparent; }
.drawer.open .tabs button.on { color: var(--teal-d); border-color: var(--teal); }
.drawer .tabbody { display: none; height: 200px; max-height: none; overflow: auto; padding: 6px 8px; }
.drawer.open .tabbody { display: block; }

/* Voice */
.mic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ln2); background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--t2); flex: none; transition: .15s; font-size: 13px; padding: 0; }
.mic:hover { border-color: var(--teal); color: var(--teal-d); }
.mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic.pill { width: auto; height: 36px; padding: 0 16px; border-radius: 99px; }
.mic.rec { background: var(--red); border-color: var(--red); color: #fff; animation: micpulse 1.3s infinite; }
.mic.busy { opacity: .6; pointer-events: none; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 rgba(196,75,75,.45); } 100% { box-shadow: 0 0 0 12px rgba(196,75,75,0); } }
.micstat { font-size: 12px; color: var(--t2); }
.micstat.rec { color: var(--red); }

@media (max-width: 640px) {
  .th-r1 { flex-wrap: wrap; align-items: flex-start; }
  .th-t { flex-basis: 100%; }
  .th-t h2 { white-space: normal; overflow: visible; font-size: 24px; }
  .th-right { flex-wrap: wrap; max-width: 100%; }
  .tsteps { padding-bottom: 8px; scrollbar-width: thin; }
  .tsteps::-webkit-scrollbar { display: block; height: 4px; }
  .tsteps::-webkit-scrollbar-thumb { background: var(--ln2); border-radius: 4px; }
  .ts-pill { min-height: 44px; }
  /* A transformed player would constrain the fixed marker dialog to the video. */
  #view.view-learn .player { width: 100%; animation: none; }
  .tlhead > .row { width: 100%; }
  .tlhead .gauge { flex: 1; min-width: 40px; }
  .tlhead #chapnow { flex-basis: 100%; }
  .tlbtn { min-height: 44px; text-align: left; }
  .drawer .tabs { flex-wrap: wrap; padding: 0 4px; }
  .drawer .tabs button { flex: none; padding: 12px 8px; font-size: 11px; }
  .drawer .tabbody { height: auto; max-height: 320px; }
  .item { padding: 10px 4px; gap: 8px; }
  .item > div { min-width: 0; }
  .player .nudge { flex-wrap: wrap; max-height: 100%; overflow-y: auto; }
  .mkpop.on { position: fixed; inset: env(safe-area-inset-top, 0px) 0 var(--mobile-nav-h); z-index: 50; padding: 12px; }
  .mkcard { width: 100%; max-height: 100%; padding: 16px; }
  .sim { padding: 28px 12px 44px; }
  .sim .cap { font-size: 16px; min-height: 0; max-height: 100%; overflow-y: auto; }
  .sim .note { top: 6px; left: 8px; right: 8px; font-size: 9px; }
  .sim .ctl { bottom: 6px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #clara { width: calc(100vw - var(--rail-w)); }
}