/* ===== Learning Studio (Visual Learning Engine) ===== */
/* Coursera-style lesson player (5 Nov 2026). The visual canvas is the
   star: a big player stage with a centred play overlay, a control bar
   below, lesson details, an up-next prompt, transcript, and a
   course-content sidebar. */
.studio{margin:20px 0}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.layout>*{min-width:0}
/* ---------- Player ---------- */
.player{background:#082F49;border:1px solid #1E3A5F;border-radius:14px;overflow:hidden}
.studio-canvas{position:relative;background:#082F49;min-height:340px;display:flex;align-items:center;justify-content:center;padding:18px 18px 100px 18px;min-width:0;overflow:hidden}

.studio-scene-vis{display:none;flex:1;min-width:0}
.studio-scene-vis.active{display:block}
.studio-canvas svg.flow-mobile{display:none}
/* Beat frames cross-fade (Nov 2026, blackout fix): all frames stack in one
   grid cell and cross-fade by opacity, so the outgoing diagram is still
   visible while the incoming one fades in. The old display:none swap
   vanished the old frame instantly and faded the new one in from
   transparent, which read as a blackout and a PPT slide change. Done steps
   dim, the current step is bright blue, upcoming steps dim more. The
   payment dot travels from the previous actor to the current one. */
.beat-frames{display:grid;width:100%}
.beat-frame{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;pointer-events:none}
.beat-frame.active{opacity:1;visibility:visible;transition:opacity .45s ease;pointer-events:auto}
.beat-frame .bf-done{opacity:.75;transition:opacity .45s ease}
.beat-frame .bf-dim{opacity:.5;transition:opacity .45s ease}
.beat-frame .bf-now{opacity:1}
.beat-frame .bf-now rect{transition:stroke .45s ease,fill .45s ease}
.bf-paydot{animation:bf-dot-travel .9s ease-out .15s both}
@keyframes bf-dot-travel{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px))}to{opacity:1;transform:translate(0,0)}}
.bf-paydot .bf-pulse{transform-box:fill-box;transform-origin:center;animation:bf-pulse 2.4s ease-out 1.1s infinite}
@keyframes bf-pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
/* The large play overlay was removed (Nov 2026): it sat at the bottom of
   the canvas and overlapped the caption text. Play is now via the
   control-bar play button only, matching Coursera. */
.studio-caption{margin:0;color:#E2E8F0;font-size:15px;background:#0E2138;border-top:1px solid #1E3A5F;padding:10px 14px;min-height:44px}
.studio-caption b{color:#5EEAD4}
/* Player controls live INSIDE the video (Nov 2026, Netflix-style): the bar
   is overlaid at the bottom of the canvas and shows only on hover, on
   mouse move, or when paused. It hides after 3s of stillness while
   playing. The grey bar below the canvas is gone. */
.playerbar{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;gap:0;padding:22px 14px 8px;background:linear-gradient(to top,rgba(3,10,20,.93) 0%,rgba(3,10,20,.62) 55%,rgba(3,10,20,0) 100%);border-top:0;opacity:0;pointer-events:none;transition:opacity .3s ease}
.player.show-controls .playerbar{opacity:1;pointer-events:auto}
.playerbar .studio-btn{margin:0}
.playerbar-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.4);margin:0 2px;flex:0 0 auto}
.studio-progress{position:relative;height:22px}
.studio-progress input[type=range]{width:100%;accent-color:#3587FC;margin:0;display:block}
.studio-markers{position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none}
.studio-marker{position:absolute;top:0;width:3px;height:6px;background:#FBBF24;border-radius:2px;transform:translateX(-50%)}
.ctrl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ctrl-btn{background:transparent;border:0;color:#fff;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;padding:0;flex:0 0 auto}
.ctrl-btn:hover{background:rgba(255,255,255,.2)}
.ctrl-btn:disabled{opacity:.45;cursor:not-allowed}
.ctrl-btn:disabled:hover{background:transparent}
.ctrl-btn svg:first-child{display:block}
.ctrl-step{font-size:30px;line-height:1;color:#fff}
.ctrl-speed{width:auto;padding:0 10px;font-size:16px;font-weight:700;color:#fff}
.ctrl-time{color:#fff;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.studio-time{color:#fff;font-size:16px;white-space:nowrap}
.player-stage{font-size:13px;color:#fff;white-space:nowrap}
.playerbar-spacer{flex:1 1 auto}
.ctrl-settings-wrap{position:relative;display:inline-flex}
.ctrl-popover{position:absolute;bottom:54px;right:0;background:#0F172A;border:1px solid #1E3A5F;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;z-index:5;min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ctrl-pop-row{display:flex;align-items:center;gap:8px;color:#E2E8F0;font-size:14px}
.ctrl-popover .studio-btn{text-align:left}
.studio-error{display:none;color:#FCA5A5;background:#450A0A;border:1px solid #B91C1C;border-radius:8px;padding:8px 12px;margin:0 14px 12px;font-size:14px}
/* ---------- Lesson title row, Dive deeper, feedback (Coursera layout) ---------- */
.lesson-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:36px 0 4px}
.lesson-title-row h1{margin:0;font-size:32px;line-height:1.25;font-weight:700;color:#1F1F1F;flex:1 1 auto;min-width:0}
.save-note{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#0056D2;font-size:15px;font-weight:600;cursor:pointer;padding:8px 4px;white-space:nowrap;flex:0 0 auto}
.save-note:hover{text-decoration:underline}
.save-note svg:first-child{flex:0 0 auto}
.lesson-meta-line{margin:0 0 4px;color:#5F6368;font-size:14px}
.lesson-note-saved{margin:4px 0;color:#197D12;font-size:14px}
.note-editor{margin:12px 0;padding:14px;background:#F2F5FA;border:1px solid #E5E7EB;border-radius:12px}
.note-editor textarea{width:100%;box-sizing:border-box;border:1px solid #D1D5DB;border-radius:8px;padding:10px;font:inherit;font-size:15px;color:#1F1F1F;resize:vertical}
.note-editor-row{display:flex;gap:10px;margin-top:10px}
.dive-deeper{background:#F2F5FA;border-radius:12px;padding:20px 24px;margin:28px 0 0}
.dive-head{margin:0 0 16px}
.dive-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.dive-spark{color:#0056D2;display:inline-flex;flex:0 0 auto}
.dive-title{font-size:18px;font-weight:600;color:#1F1F1F;flex:1 1 auto}
.dive-chev{color:#1F1F1F;display:inline-flex;flex:0 0 auto;transition:transform .2s ease}
.dive-deeper.collapsed .dive-chev{transform:rotate(180deg)}
.dive-deeper.collapsed .dive-btns{display:none}
.dive-btns{display:flex;flex-wrap:wrap;gap:12px}
.dive-btn{background:#fff;border:2px solid #0056D2;border-radius:8px;padding:11px 20px;font-size:15px;font-weight:600;color:#1F1F1F;cursor:pointer;line-height:1.3}
.dive-btn:hover{background:#E8F0FE}
.lesson-feedback{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 0}
.fb-icons{display:flex;align-items:center;gap:20px}
.fb-btn{background:none;border:0;color:#5F6368;cursor:pointer;padding:6px;display:inline-flex;border-radius:8px}
.fb-btn:hover{background:#F2F5FA;color:#1F1F1F}
.fb-btn.active{color:#0056D2}
.go-next{background:#fff;border:1px solid #D1D5DB;border-radius:8px;padding:11px 20px;font-size:15px;font-weight:600;color:#1F1F1F;cursor:pointer;white-space:nowrap;height:44px}
.go-next:hover{border-color:#9CA3AF;background:#F9FAFB}
.go-next:disabled{opacity:.5;cursor:not-allowed}
/* ---------- Lesson details ---------- */
.lesson-meta{margin:18px 0 4px}
.lesson-meta h1{margin:0 0 6px;font-size:26px;color:#fff}
.lesson-meta p{margin:0;color:#5B6B85;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{font-size:12px;border:1px solid #334155;border-radius:20px;padding:4px 10px;color:#CBD5E1;background:#1E293B}
.card{background:#0F172A;border:1px solid #1E3A5F;border-radius:12px;padding:16px 18px;margin:16px 0}
.card h2{margin:0 0 10px;font-size:17px;color:#fff}
.card h3{margin:14px 0 6px;font-size:15px;color:#fff}
.card ul{margin:0;padding-left:20px}
.card li{margin:5px 0}
.keyterm{margin:8px 0;font-size:14px;color:#CBD5E1}
.keyterm b{color:#7DD3FC}
.transcript{color:#CBD5E1;font-size:15px}
.studio-terms{font-size:14px;color:#CBD5E1}
/* ---------- End-of-lesson prompt ---------- */
.upnext{border:2px solid #0EA5E9;background:#0C2A44;border-radius:14px;padding:18px;margin:20px 0}
.upnext .tag{display:inline-block;font-size:12px;font-weight:700;color:#0EA5E9;background:#E0F2FE;border-radius:6px;padding:3px 8px;margin-bottom:8px}
.upnext h2{margin:0 0 4px;font-size:19px;color:#fff}
.upnext p{margin:0 0 14px;color:#BAE6FD;font-size:14px}
.upnext .row{display:flex;gap:10px;flex-wrap:wrap}
.upnext .row .studio-btn{padding:8px 14px}
/* ---------- Lesson navigation ---------- */
.lesson-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0}
.lesson-nav .studio-btn{flex:0 0 auto;min-width:0;text-align:center;padding:8px 14px;font-size:14px}
.lesson-nav .lesson-nav-mid{color:#5B6B85;font-size:13px;flex:0 0 auto}
/* ---------- Course content sidebar ---------- */
.side{position:sticky;top:70px}
.side .card{margin-top:0}
.side h2{font-size:16px}
.progress{height:8px;background:#334155;border-radius:4px;overflow:hidden;margin:8px 0 4px}
.progress i{display:block;height:100%;width:0%;background:#22C55E}
.progtext{font-size:12px;color:#5B6B85}
.lesson-list{list-style:none;margin:12px 0 0;padding:0}
.lesson-list li{border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;margin:8px 0;background:#FFFFFF}
.lesson-list li.current{border-color:#0056D2;background:#F0F6FF}
.lesson-list li.done{border-color:#22C55E}
.lesson-list a{text-decoration:none;color:inherit;display:block}
.lesson-list .t{font-size:14px;color:#1F1F1F;font-weight:600}
.lesson-list .m{font-size:12px;color:#5F6368}
.lesson-list .done{color:#197D12;font-size:12px}
/* ---------- Controls: solid, clearly visible buttons ---------- */
/* Plain buttons must read as solid controls on both the dark player bar
   and the light page. A dark button on the dark bar looked like a
   transparent box, so the arrows were invisible. White with dark text
   and a visible border is readable everywhere. */
.studio-btn{background:#FFFFFF;border:1px solid #64748B;color:#0F172A;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;margin:3px 6px 3px 0;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.studio-btn:hover{background:#E2E8F0;color:#0F172A}
.studio-btn.primary{background:#5EEAD4;color:#082F49;font-weight:700;border-color:#5EEAD4}
.studio-btn.primary:hover{background:#7DD3C8;color:#082F49}
.studio-btn:disabled{opacity:.45;cursor:default}
.studio-btn:disabled:hover{background:#FFFFFF;color:#0F172A}
/* Mute button: a proper video-player mute control. Speaker icon plus a
   clear label; when muted the waves hide, the X shows, and the button
   takes a muted (amber) state so the state is obvious at a glance. */
.studio-mute-btn .studio-mute-icon{flex:0 0 auto}
.studio-mute-btn.muted{background:#FEF3C7;border-color:#D97706;color:#92400E}
.studio-note{color:#5B6B85;font-size:13px;margin-top:12px}
.studio-transcript{margin-top:14px}
.studio-transcript summary{cursor:pointer;color:#5EEAD4;font-weight:700}
.studio-transcript p{color:#CBD5E1;font-size:14px}
/* Beat and node highlighting, driven only by the sync engine */
[data-node],[data-conn],[data-field]{transition:opacity .3s, stroke .3s, fill .3s}
.studio-canvas .node-active rect{stroke:#5EEAD4 !important;stroke-width:3 !important}
.studio-canvas path.conn-active, .studio-canvas line.conn-active, .studio-canvas .conn-active line, .studio-canvas .conn-active path{stroke:#5EEAD4 !important;stroke-width:3 !important}
.studio-canvas .beat-off{opacity:.6}
.studio-canvas .beat-on{opacity:1}
.xml-panel{background:#082F49;border:1px solid #1E3A5F;border-radius:8px;padding:12px;overflow-x:auto;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box;color:#CBD5E1;margin:10px 0}
.xml-panel .field-active{background:#14532D;color:#BBF7D0;border-radius:4px;padding:0 2px}
.xml-panel .tag{color:#60A5FA}
.xml-caption{color:#5B6B85;font-size:13px;font-style:italic;margin:4px 48px 10px;box-sizing:border-box;overflow-wrap:anywhere}
.stage-label{fill:#94A3B8;font-size:14px}
.stage-label.done{fill:#34D399;font-weight:700}
.stage-label.now{fill:#5EEAD4;font-weight:700}
/* ---------- Lesson framework (post-audit): dive panels, exercise, quiz, takeaway ---------- */
.dive-panel{display:none;background:#fff;border:1px solid #D1D5DB;border-radius:10px;padding:16px 18px;margin-top:14px}
.dive-panel.open{display:block}
.dive-panel h3{margin:0 0 8px;font-size:16px;color:#1F1F1F}
.dive-panel p{margin:8px 0;color:#1F1F1F;font-size:15px;line-height:1.55}
.dive-btn.active{background:#0056D2;color:#fff;border-color:#0056D2}
.fw-card{background:#0F172A;border:1px solid #1E3A5F;border-radius:12px;padding:16px 18px;margin:16px 0}
.fw-card h2{margin:0 0 10px;font-size:17px;color:#fff}
.fw-card h3{margin:14px 0 6px;font-size:15px;color:#fff}
.fw-card p{color:#CBD5E1;font-size:15px;line-height:1.6}
.fw-card b,.fw-card strong{color:#fff}
.fw-card .fw-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5EEAD4}
.fw-card .fw-steps{margin:8px 0;padding-left:20px}
.fw-card .fw-steps li{margin:6px 0;color:#CBD5E1;font-size:15px;line-height:1.6}
.fw-exercise-answer{display:none;background:#082F49;border:1px solid #1E3A5F;border-radius:8px;padding:12px 14px;margin-top:10px}
.fw-exercise-answer.open{display:block}
.fw-exercise-answer p{margin:6px 0}
.quiz-opt{display:block;width:100%;text-align:left;background:#0F172A;border:1px solid #475569;border-radius:8px;padding:10px 14px;margin:8px 0;font-size:15px;color:#E2E8F0;cursor:pointer;line-height:1.5}
.fw-card .quiz-opt:hover{border-color:#5EEAD4;background:#1E293B}
.fw-card .quiz-opt.correct{border-color:#22C55E;background:#14532D;color:#BBF7D0}
.fw-card .quiz-opt.wrong{border-color:#EF4444;background:#7F1D1D;color:#FECACA}
.fw-card .quiz-opt:disabled{cursor:default}
.quiz-feedback{display:none;margin-top:12px;font-size:15px;line-height:1.6;color:#CBD5E1}
.quiz-feedback.open{display:block}
.quiz-feedback b{color:#fff}
.quiz-feedback .quiz-fb-h{margin:14px 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5EEAD4}
.quiz-feedback p{margin:4px 0 10px}
.quiz-feedback .studio-btn{margin-top:6px}
.fw-tool-link{display:inline-flex;align-items:center;gap:8px;background:#0056D2;color:#fff;border-radius:8px;padding:10px 18px;font-size:15px;font-weight:600;text-decoration:none;margin-top:8px}
.fw-tool-link:hover{background:#0046AC;color:#fff}
.fw-flash{outline:3px solid #5EEAD4;outline-offset:4px}
.fw-files-panel{background:#fff;border:1px solid #D1D5DB;border-radius:10px;padding:14px 16px;margin-top:10px}
.fw-files-panel b{font-size:15px;color:#1F1F1F}
.fw-files-panel p{margin:8px 0;font-size:14px}
.fw-files-panel a{color:#0056D2}
/* Mobile: one column, sidebar below the player, vertical diagrams */
@media (max-width: 760px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .studio-canvas{padding:12px 12px 92px 12px;aspect-ratio:auto}
  .studio-canvas svg.flow-desktop{display:none}
  .studio-canvas svg.flow-mobile{display:block}
  .lesson-meta h1{font-size:21px}
  .lesson-nav .studio-btn{padding:7px 12px;font-size:13px}
  .xml-panel{font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .studio *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Diagram-overlap fix (5 Nov 2026): the ONLY svg sizing rule in the built CSS. Scoped to diagram containers; no bare global svg rule. */
.studio-canvas svg, .diagram svg, .visual-sample2 svg{width:100%;height:auto;display:block}

/* ===== Animated diagrams (visual first) ===== */
.diagram{margin:18px 0 8px;background:#0B1B30;border:1px solid #1E3A5F;border-radius:12px;padding:10px 6px;overflow:hidden}
.diagram-caption{color:#5B6B85;font-size:14px;font-style:italic;margin:4px 0 14px;text-align:center}
.mute-btn{background:#0E2138;border:1px solid #1E3A5F;color:#5EEAD4;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14px;margin-left:10px}
.mute-btn:hover{border-color:#5EEAD4}
.ch-sec{cursor:pointer}
/* ===== 8-Session Learning Path ===== */
.session-block{background:#0B1B30;border:1px solid #1E3A5F;border-radius:12px;padding:20px 24px;margin:16px 0}
.session-block h3{color:#5EEAD4;margin:0 0 8px}
.session-link{display:inline-block;background:#0E2138;border:1px solid #1E3A5F;color:#E2E8F0;border-radius:8px;padding:6px 12px;margin:4px 6px 4px 0;text-decoration:none;font-size:14px}
.session-link:hover{border-color:#5EEAD4;color:#5EEAD4}
.visual-sample2{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#E2E8F0;background:#0F172A;border-radius:12px;padding:16px;max-width:960px}.xml-panel{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;max-width:100%;box-sizing:border-box;background:#1E293B;border:1px solid #334155;border-radius:8px;padding:12px;margin:12px 0 8px;color:#E2E8F0;-webkit-overflow-scrolling:touch}.xml-panel span[data-field]{border-radius:3px}.xml-missing{color:#FCA5A5;background:rgba(248,113,113,.14);outline:1px dashed #F87171}.xml-caption{font-size:12px;line-height:1.5;color:#94A3B8;margin:4px 0 0}@media (max-width:600px){.xml-panel{font-size:11px}}