/* One action, two views: the chart's decision and the game's visual result.
   This module only styles the learning bridge; approved website and motion stay intact. */
.learning-bridge{--lesson-result-color:var(--cyan,#00f0ff);--lesson-line:#25473f;position:relative;min-width:0;border-top:1px solid var(--lesson-line);padding-top:22px}
.lesson-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.lesson-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;border:1px solid #29463f;border-radius:0;background:#07141b;color:#9abbac;font:700 12px/1.4 var(--mono,'Space Mono',monospace);text-align:center;cursor:pointer;touch-action:manipulation}
.lesson-tabs button[aria-pressed=true]{border-color:var(--cyan,#00f0ff);background:#072831;color:#b5f9f8;box-shadow:inset 0 -2px var(--cyan,#00f0ff)}
.lesson-tabs button:disabled{opacity:.45;cursor:default}
.lesson-tabs button:focus-visible,.lesson-footer button:focus-visible,.lesson-handoff a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.lesson-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);gap:9px 36px;align-items:end;margin-bottom:22px}
#lesson-step{grid-column:1/-1;display:block;font:700 12px/1.5 var(--mono,'Space Mono',monospace);letter-spacing:1px;color:var(--green,#00ff41)}
#lesson-title{margin:0;font:700 25px/1.2 var(--mono,'Space Mono',monospace);letter-spacing:-.7px;color:#e6f2e8;overflow-wrap:anywhere}
#lesson-instruction{margin:0;color:#a6c2b5;font:14px/1.65 var(--sans,'Outfit',Arial,sans-serif);max-width:620px;overflow-wrap:anywhere}
.lesson-compare{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:0;align-items:stretch;min-width:0}
.learning-chart-panel,.learning-arena-panel{min-width:0;position:relative;border:1px solid #2c4b43;background:#06111b;isolation:isolate}
.learning-chart-panel .cabinet-bar,.learning-arena-panel .cabinet-bar{min-height:48px;padding:14px 18px;gap:8px;border-bottom:1px solid #29463f;background:#0b1a21;font:700 11px/1.4 var(--mono,'Space Mono',monospace);letter-spacing:.5px;color:#c0d6cb}
.learning-chart-panel .cabinet-bar>span,.learning-arena-panel .cabinet-bar>span{font:400 10px/1.4 var(--mono,'Space Mono',monospace);color:#79a897;letter-spacing:.3px;text-align:right}
.learning-chart-panel .practice-screen{padding:20px 20px 14px;background:radial-gradient(ellipse at 50% 10%,#00ff4109,transparent 80%);min-width:0}
.learning-chart-panel .practice-quote{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;align-items:end;min-width:0}
.learning-chart-panel .practice-quote>span{grid-column:1/-1;font:11px/1.5 var(--mono,'Space Mono',monospace);letter-spacing:.8px;color:#79a895}
.learning-chart-panel .practice-quote>b{font:700 32px/1.2 var(--mono,'Space Mono',monospace);color:var(--green,#00ff41);white-space:nowrap}
.learning-chart-panel .practice-quote>small{font:11px/1.6 var(--mono,'Space Mono',monospace);color:#a4c5b2;text-align:right;overflow-wrap:anywhere}
.learning-chart-panel .practice-chart{height:116px;margin:10px 0 14px;min-width:0;overflow:hidden}
.learning-chart-panel .practice-chart svg{display:block;width:100%;height:100%;overflow:visible}
.learning-chart-panel .pending-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:11px/1.5 var(--mono,'Space Mono',monospace);color:#8aae9b}
.learning-chart-panel .pending-row>b{font-weight:700;color:var(--green,#00ff41);text-align:right;white-space:nowrap}
.learning-chart-panel .pending-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:31px;margin-top:10px;font:11px/1.5 var(--mono,'Space Mono',monospace);color:#98b7aa}
.learning-chart-panel .pending-chips i{font:700 10px/1.3 var(--mono,'Space Mono',monospace);font-style:normal;padding:5px 7px;border:1px solid #286242;background:#0b281c;color:var(--green,#00ff41)}
.learning-chart-panel .pending-chips i.sell{border-color:#754251;background:#29131b;color:var(--red,#ff526f)}
.lesson-link{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:0;padding:8px 3px;text-align:center;color:var(--cyan,#00f0ff);font:700 10px/1.55 var(--mono,'Space Mono',monospace);letter-spacing:.5px;overflow-wrap:anywhere}
.lesson-link::before,.lesson-link::after{content:'';position:absolute;top:50%;width:6px;height:1px;background:#32707a;pointer-events:none}
.lesson-link::before{left:0}.lesson-link::after{right:0}
.lesson-link b,.lesson-link strong{font-size:22px;line-height:1;font-weight:400}
.lesson-link small{font:inherit}
.lesson-arena{position:relative;height:265px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 26% 76%,#00f0ff0e,transparent 48%),radial-gradient(ellipse at 78% 76%,#ffcc0013,transparent 47%),#050e17}
.lesson-arena::after{content:'';position:absolute;inset:0;border:1px solid var(--lesson-result-color);pointer-events:none;opacity:0;transition:opacity 180ms var(--ease-out,cubic-bezier(.23,1,.32,1));z-index:7}
.lesson-hud{position:absolute;z-index:5;top:12px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px;font:700 11px/1.5 var(--mono,'Space Mono',monospace);color:#a4c3b4;pointer-events:none}
.lesson-hud>span:first-child{color:#86e6bc}.lesson-hud>span:last-child{color:#e2c46b}
#lesson-score{color:var(--lesson-result-color);font:700 16px/1.3 var(--mono,'Space Mono',monospace);text-align:center;white-space:nowrap;text-shadow:0 0 14px #00f0ff19}
.lesson-grid{position:absolute;left:-45%;right:-45%;bottom:20px;height:125px;transform:perspective(250px) rotateX(66deg);transform-origin:center bottom;background:repeating-linear-gradient(0deg,transparent 0 26px,#00ff4120 27px 28px),repeating-linear-gradient(90deg,transparent 0 42px,#00ff411c 43px 44px);border-top:1px solid #00ff4138;pointer-events:none}
.lesson-actor{--lesson-actor-size:266px;position:absolute;z-index:2;bottom:-2px;width:var(--lesson-actor-size);height:var(--lesson-actor-size);pointer-events:none}
.lesson-you{left:calc(25% - var(--lesson-actor-size)/2);transform:scaleX(-1);filter:drop-shadow(0 7px 10px #00f0ff11)}
.lesson-boss{left:calc(77% - var(--lesson-actor-size)/2);filter:drop-shadow(0 7px 10px #ffcc0012)}
.lesson-sprite{display:block;width:100%;height:100%;overflow:hidden}
.lesson-sprite>img{display:block;width:1600%;height:100%;max-width:none;will-change:transform}
.lesson-sprite>img:not(.lesson-acting){animation:lessonIdle 1.2s steps(16,end) infinite}
.lesson-boss .lesson-sprite>img:not(.lesson-acting){animation-delay:-.4s}
@keyframes lessonIdle{to{transform:translateX(-100%)}}
#lesson-action-cue{position:absolute;z-index:6;left:12px;right:12px;bottom:10px;min-height:21px;padding:4px 8px;background:#040d16d9;border-top:1px solid #20483d;text-align:center;color:var(--lesson-result-color);font:700 11px/1.4 var(--mono,'Space Mono',monospace);letter-spacing:.3px;pointer-events:none;overflow-wrap:anywhere}
#lesson-fx{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.lesson-particle{position:absolute;left:50%;top:48%;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.lesson-particle.confetti{width:6px;height:9px;background:var(--particle-color,var(--green,#00ff41))}
.lesson-particle.bone{width:12px;height:4px;border-radius:3px;background:#efe8d6;color:#efe8d6}
.lesson-particle.bone::before,.lesson-particle.bone::after{content:'';position:absolute;top:-2px;width:5px;height:8px;border-radius:3px;background:currentColor}
.lesson-particle.bone::before{left:-1px}.lesson-particle.bone::after{right:-1px}
#lesson-comparison{position:relative;z-index:2;min-height:62px;padding:12px 17px;margin:0;border-top:1px solid #25483c;background:#08151b;color:#b0cbbd;font:13px/1.6 var(--sans,'Outfit',Arial,sans-serif);overflow-wrap:anywhere}
.learning-bridge[data-outcome=gain],.lesson-arena[data-outcome=gain]{--lesson-result-color:var(--green,#00ff41)}
.learning-bridge[data-outcome=loss],.lesson-arena[data-outcome=loss]{--lesson-result-color:var(--red,#ff526f)}
.learning-bridge[data-outcome=cancel],.lesson-arena[data-outcome=cancel]{--lesson-result-color:var(--cyan,#00f0ff)}
.learning-bridge[data-outcome=flat],.lesson-arena[data-outcome=flat]{--lesson-result-color:var(--gold,#ffcc00)}
.learning-bridge[data-outcome] .lesson-arena::after,.lesson-arena[data-outcome]::after{opacity:.5}
.learning-bridge .lesson-shared-controls{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px;max-width:810px;margin:22px auto 14px;padding:0}
.learning-bridge .lesson-shared-controls .button{min-width:0;min-height:58px;gap:9px;padding:12px 14px;font:700 13px/1.4 var(--mono,'Space Mono',monospace);letter-spacing:.2px}
.learning-bridge .lesson-shared-controls .button>small{display:block;color:inherit;font:400 11px/1.4 var(--mono,'Space Mono',monospace);opacity:.85}
.learning-bridge .lesson-shared-controls .buy{border-color:var(--green,#00ff41);color:var(--green,#00ff41);background:#0a281a}
.learning-bridge .lesson-shared-controls .sell{border-color:#bd536d;color:#ff8aa0;background:#2b1220}
.learning-bridge .lesson-shared-controls .button:disabled{opacity:.4;cursor:default;box-shadow:none}
.learning-bridge>#practice-result{max-width:100%;min-height:51px;margin:0;padding:13px 17px;border-left:2px solid var(--lesson-result-color);background:#091b20;color:#c6dfcf;font:14px/1.65 var(--sans,'Outfit',Arial,sans-serif);text-align:left;overflow-wrap:anywhere}
.lesson-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px;padding:15px 0 0;border-top:1px solid #25463a}
#lesson-note{flex:1 1 350px;margin:0;padding-right:10px;color:#86ad98;font:12px/1.65 var(--sans,'Outfit',Arial,sans-serif);overflow-wrap:anywhere}
.lesson-footer button{min-height:44px;padding:10px 14px;border:1px solid #31533f;border-radius:0;background:#071911;color:#b0d9ba;font:700 11px/1.4 var(--mono,'Space Mono',monospace);cursor:pointer;touch-action:manipulation}
.lesson-footer button:disabled{opacity:.4;cursor:default}
#lesson-next{border-color:var(--green,#00ff41);background:#0b2c18;color:var(--green,#00ff41)}
.lesson-handoff{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px 28px;margin-top:22px;padding:25px;border:1px solid var(--green,#00ff41);background:linear-gradient(110deg,#0b2819,#081715);box-shadow:inset 0 0 35px #00ff4105}
.lesson-handoff>h3,.lesson-handoff>p{grid-column:1}
.lesson-handoff h3{font:700 24px/1.25 var(--mono,'Space Mono',monospace);letter-spacing:-.6px;color:#d9f6de}
.lesson-handoff p{font:14px/1.65 var(--sans,'Outfit',Arial,sans-serif);color:#a4c4ae;margin:0;max-width:650px}
.lesson-handoff #lesson-enter{grid-column:2;grid-row:1/span 2;min-height:54px;font-size:12px;white-space:normal;text-align:center}
.motion-paused .lesson-sprite>img,.page-hidden .lesson-sprite>img,.sprite-offscreen .lesson-sprite>img,.lesson-offscreen .lesson-sprite>img,[data-lesson-visible=false] .lesson-sprite>img{animation-play-state:paused}
.motion-paused .lesson-sprite>img,.page-hidden .lesson-sprite>img,.sprite-offscreen .lesson-sprite>img,.lesson-offscreen .lesson-sprite>img,[data-lesson-visible=false] .lesson-sprite>img{will-change:auto}
.motion-paused .lesson-arena::after,.page-hidden .lesson-arena::after{transition:none}
@media(hover:hover) and (pointer:fine){.lesson-tabs button:hover:not(:disabled){border-color:#69b8ad;background:#0c2529}.lesson-footer button:hover:not(:disabled){border-color:#6ac890;background:#0b2618}}
@media(max-width:1050px){
 .lesson-brief{grid-template-columns:1fr 1fr;gap:9px 24px}
 #lesson-title{font-size:23px}
 .lesson-compare{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}
 .learning-chart-panel .cabinet-bar,.learning-arena-panel .cabinet-bar{padding:12px 14px;font-size:10px}
 .learning-chart-panel .cabinet-bar>span,.learning-arena-panel .cabinet-bar>span{font-size:9px}
 .learning-chart-panel .practice-screen{padding:18px 14px 14px}
 .learning-chart-panel .practice-quote>b{font-size:27px}
 .learning-chart-panel .practice-quote>small{font-size:10px}
 .learning-chart-panel .pending-row{font-size:10px}
 .learning-chart-panel .pending-chips{font-size:10px}
 .lesson-link{font-size:9px;padding-inline:2px}
 .lesson-arena{height:257px}
 .lesson-actor{--lesson-actor-size:255px}
 #lesson-comparison{font-size:12px;min-height:62px}
 .lesson-handoff{padding:20px}
 .lesson-handoff h3{font-size:21px}
 .lesson-handoff #lesson-enter{font-size:11px;padding-inline:16px}
}
@media(max-width:760px){
 .learning-bridge{padding-top:17px}
 .lesson-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:17px}
 .lesson-tabs button{min-width:0;min-height:44px;padding:9px 8px;font-size:12px;gap:6px;letter-spacing:0}
 .lesson-brief{display:block;margin-bottom:16px}
 #lesson-step{font-size:12px;letter-spacing:.2px;margin-bottom:6px}
 #lesson-title{font-size:22px;letter-spacing:-.5px;margin-bottom:8px;line-height:1.3}
 #lesson-instruction{font-size:13px;line-height:1.55}
 .lesson-compare{grid-template-columns:minmax(0,1fr);gap:0}
 .learning-chart-panel .cabinet-bar,.learning-arena-panel .cabinet-bar{min-height:42px;padding:10px 12px;flex-wrap:wrap;font-size:12px;letter-spacing:0;gap:3px 8px;line-height:1.5}
 .learning-chart-panel .cabinet-bar>span,.learning-arena-panel .cabinet-bar>span{font-size:12px;letter-spacing:0;line-height:1.5}
 .learning-chart-panel .practice-screen{padding:10px 12px 9px;min-height:0}
 .learning-chart-panel .practice-quote{grid-template-columns:1fr 1.2fr;gap:0 8px;align-items:center}
 .learning-chart-panel .practice-quote>span{grid-column:1;grid-row:1;font-size:12px;letter-spacing:0;line-height:1.4}
 .learning-chart-panel .practice-quote>b{grid-column:1;grid-row:2;font-size:25px;line-height:1.2}
 .learning-chart-panel .practice-quote>small{grid-column:2;grid-row:1/span 2;font-size:12px;line-height:1.45;align-self:center}
 .learning-chart-panel .practice-chart{height:45px;margin:4px 0 5px}
 .learning-chart-panel .pending-row{font-size:12px;line-height:1.5;gap:8px}
 .learning-chart-panel .pending-row>span{max-width:53%}
 /* The explicit BUY/SELL count remains. Repeated decorative chips make the two views harder to compare on a phone. */
 .learning-chart-panel .pending-chips{display:none}
 .lesson-link{min-height:27px;flex-direction:row;gap:10px;padding:4px 10px;font-size:12px;line-height:1.4;letter-spacing:.2px}
 .lesson-link::before,.lesson-link::after{top:0;left:50%;right:auto;width:1px;height:4px}
 .lesson-link::after{top:auto;bottom:0}
 .lesson-link b,.lesson-link strong{font-size:20px}
 .lesson-arena{height:184px}
 .lesson-hud{top:9px;left:12px;right:12px;min-height:19px;font-size:12px;line-height:1.4;gap:6px}
 #lesson-score{font-size:15px;line-height:1.2}
 .lesson-actor{--lesson-actor-size:182px;bottom:-4px}
 .lesson-you{left:calc(25% - var(--lesson-actor-size)/2)}
 .lesson-boss{left:calc(77% - var(--lesson-actor-size)/2)}
 .lesson-grid{bottom:20px;height:82px;background-size:auto;transform:perspective(230px) rotateX(66deg)}
 #lesson-action-cue{left:8px;right:8px;bottom:7px;min-height:20px;padding:3px 5px;font-size:12px;letter-spacing:0;line-height:1.4}
 #lesson-comparison{min-height:0;padding:10px 12px;font-size:12px;line-height:1.55}
 .learning-bridge .lesson-shared-controls{grid-template-columns:1fr 1fr 1.15fr;gap:7px;max-width:none;margin:14px 0 11px}
 .learning-bridge .lesson-shared-controls .button{min-height:51px;padding:9px 5px;gap:4px;flex-wrap:wrap;font-size:12px;letter-spacing:0;line-height:1.3}
 .learning-bridge .lesson-shared-controls .button>span{font-size:17px}
 .learning-bridge .lesson-shared-controls .button>small{font-size:12px;line-height:1.3}
 .learning-bridge>#practice-result{min-height:46px;padding:11px 12px;font-size:13px;line-height:1.55}
 .lesson-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px;padding-top:13px}
 #lesson-note{grid-column:1/-1;font-size:12px;line-height:1.55;padding:0;margin:0 0 3px}
 .lesson-footer button{min-width:0;min-height:44px;padding:9px 7px;font-size:12px;line-height:1.4}
 #lesson-next{grid-column:1/-1}
 .lesson-handoff{grid-template-columns:1fr;gap:12px;padding:19px 16px;margin-top:18px}
 .lesson-handoff h3{font-size:21px;line-height:1.3;letter-spacing:-.5px}
 .lesson-handoff p{font-size:13px;line-height:1.6}
 .lesson-handoff #lesson-enter{grid-column:1;grid-row:auto;width:100%;min-height:51px;font-size:12px;padding:12px}
}
@media(max-width:360px){
 .lesson-tabs button{padding-inline:5px}
 #lesson-title{font-size:20px}
 .learning-chart-panel .practice-quote{grid-template-columns:1fr 1fr}
 .learning-chart-panel .practice-quote>b{font-size:23px}
 .learning-chart-panel .pending-row{align-items:center}
 .learning-chart-panel .pending-row>span{font-size:12px;line-height:1.35}
 .lesson-actor{--lesson-actor-size:176px}
 .lesson-you{left:calc(23% - var(--lesson-actor-size)/2)}
 .lesson-boss{left:calc(78% - var(--lesson-actor-size)/2)}
 .learning-bridge .lesson-shared-controls .button{min-height:55px;gap:3px}
}
@media(prefers-reduced-motion:reduce){
 .lesson-sprite>img{animation:none!important;will-change:auto}
 .lesson-arena::after{transition:none}
 .lesson-particle{will-change:auto}
}

/* Match the shared lesson markup: copy and footer controls have their own wrappers. */
.lesson-brief{display:block}
.lesson-brief>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);gap:24px;align-items:center;margin-top:7px}
.lesson-footer>div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lesson-handoff>div{grid-column:1;grid-row:1}
.lesson-handoff>div>span{display:block;color:var(--green,#00ff41);font:700 11px/1.6 var(--mono,'Space Mono',monospace);letter-spacing:.5px;margin-bottom:8px}
.lesson-handoff p{margin-top:10px}
.lesson-handoff #lesson-enter{grid-row:1}
.lesson-hud>span{display:flex;flex-direction:column;gap:2px}
.lesson-hud>span:nth-child(2){align-items:center;text-align:center}
.lesson-hud>span:last-child{text-align:right}
.lesson-hud small{font:400 10px/1.4 var(--mono,'Space Mono',monospace);color:#89a99b}
.lesson-hud>span:last-child small{color:#b4a165}
.lesson-particle.bone{width:20px;height:10px;background:none;border-radius:0}
.lesson-particle.bone::before,.lesson-particle.bone::after{display:none}
.lesson-particle.bone svg{display:block;width:100%;height:100%;overflow:visible}
.lesson-motion-stopped .lesson-sprite>img{animation-play-state:paused;will-change:auto}
.lesson-motion-stopped .lesson-arena::after{transition:none}
@media(max-width:760px){
 .lesson-brief>div{display:block;margin-top:6px}
 .lesson-footer>div{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .lesson-handoff>div{grid-column:1;grid-row:auto}
 .lesson-handoff>div>span{font-size:12px;letter-spacing:0}
 .lesson-handoff #lesson-enter{grid-row:auto}
 .lesson-hud small{font-size:12px}
 .lesson-actor{--lesson-actor-size:160px;bottom:5px}
 #lesson-action-cue{font-family:var(--sans,'Outfit',Arial,sans-serif);font-size:12px;line-height:1.4}
 .lesson-link>span br{display:none}
 .lesson-link>span{word-spacing:4px}
 .lesson-link>b{transform:rotate(90deg)}
}
/* Keep the completed-lesson invitation hidden until the shared engine unlocks it. */
.lesson-handoff[hidden]{display:none!important}
.learning-chart-panel #lesson-entry-label{text-anchor:end;font-size:12px}
@media(max-width:760px){
 .learning-chart-panel .practice-chart{height:90px}
 .learning-chart-panel #lesson-entry-label{font-size:17px}
 .learning-chart-panel .pending-row>span{font-family:var(--sans,'Outfit',Arial,sans-serif);max-width:53%}
}
@media(max-width:360px){
 /* Preserve the whole chart-to-controls comparison within a 667px phone viewport. */
 .lesson-link{min-height:23px;padding-block:2px}
 .learning-bridge .lesson-shared-controls{margin-top:10px}
}