/* CD-01 executed-state and Explain-only literal editor */
.captain-badge { position: absolute; z-index: 1; top: 5px; right: 5px; padding: 2px 5px; border-radius: 4px; color: #062017; background: #79e8b1; font-size: clamp(.65rem, .85vw, .82rem); font-weight: 800; }
.character-card.spotlighted { border: 3px solid #74dfff; box-shadow: 0 0 0 2px #74dfff55, 0 0 28px #74dfff77; }
.empty-roster { display: grid; min-height: 100%; place-items: center; padding: 24px; color: #9eb5ca; border: 1px dashed #42637f; font-size: clamp(1rem, 1.4vw, 1.25rem); text-align: center; }
.state-values strong { color: #064d73; }
.state-values small { margin-left: 7px; color: #52687c; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .75em; }
.live-code { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.live-code > p { padding: 12px 18px 0; color: #52687c; font-size: .8rem; }
.live-code pre { padding-top: 10px; }
.code-input { width: min(18ch, 28vw); min-height: 1.55em; padding: 0 3px; border: 1px solid #2786af; border-radius: 3px; color: inherit; background: #e8f7ff; font: inherit; vertical-align: baseline; }
.number-input { width: 4ch; }
.roster-code-input { width: min(12ch, 18vw); }

/* Reusable, authored trace annotations: focus one authentic source token before Next. */
.code-panel code { position: relative; }
.code-token-focus { position: relative; margin: 0 2px; padding: 1px 4px; border: 2px solid #f09a21; border-radius: 7px; color: #182331; background: #fff4bd; box-shadow: 0 0 0 3px #f09a2140; }
.code-token-focus b { position: absolute; z-index: 2; top: -1.9em; left: 0; padding: 2px 6px; border-radius: 5px; color: #3e2500; background: #ffc55c; font: 800 .58em/1.25 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.code-annotation { display: grid; grid-template-columns: max-content max-content 1fr; align-items: baseline; gap: 8px; margin: 0 16px 12px; padding: 9px 12px; border-left: 4px solid #e38a13; color: #392400; background: #fff2d6; font-size: clamp(.78rem, 1.05vw, .96rem); }
.code-annotation > span { color: #7a5a25; font-size: .73em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.code-annotation > strong { color: #593600; white-space: nowrap; }
.code-annotation > p { min-width: 0; color: #604a24; }
.visual-annotation { position: absolute; z-index: 3; right: 18px; bottom: 18px; max-width: min(32ch, 72%); padding: 8px 11px; border: 1px solid #efbf56; border-radius: 8px; color: #fff0c8; background: #34270fe8; box-shadow: 0 8px 20px #07111f66; font-size: clamp(.75rem, 1.05vw, .95rem); font-weight: 700; }
@media (max-width: 1000px) { .code-annotation { grid-template-columns: max-content 1fr; } .code-annotation > p { grid-column: 1 / -1; } }

/* Teacher-led lesson frames surround the locked execution without becoming a slide deck. */
.lesson-frame { grid-template-rows: 48px minmax(0, 1fr) 128px 22px; }
.lesson-canvas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 5vw, 82px); overflow: auto; background: linear-gradient(135deg, #0c1d30, #0a1725); }
.lesson-copy { align-self: center; max-width: 760px; }
.lesson-purpose { margin-bottom: 12px; color: #69d8ff; font-size: clamp(.72rem, 1vw, .9rem); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lesson-copy h1 { max-width: 15ch; font-size: clamp(2rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: -.055em; }
.lesson-prompt { margin-top: 22px; color: #f1f7ff; font-size: clamp(1.2rem, 2vw, 1.85rem); font-weight: 750; line-height: 1.25; }
.lesson-copy > p:not(.lesson-purpose):not(.lesson-prompt) { max-width: 58ch; margin-top: 15px; color: #b9ccdd; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.5; }
.lesson-copy .response-labels { margin-top: 22px; }
.lesson-evidence { display: grid; min-height: 0; place-items: center; }
.lesson-example { display: grid; gap: 14px; width: min(100%, 480px); padding: clamp(24px, 4vw, 54px); border: 1px solid #3a6281; border-radius: 18px; background: #102a42; box-shadow: 0 24px 54px #03091155; text-align: center; }
.lesson-example code { overflow-wrap: anywhere; color: #fff4bd; font: clamp(1.45rem, 2.9vw, 2.8rem)/1.18 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lesson-example span { color: #74dfff; font-size: clamp(.9rem, 1.25vw, 1.15rem); font-weight: 800; }
.lesson-source { width: min(100%, 520px); margin: 0; padding: clamp(24px, 3.5vw, 48px); overflow: auto; border: 1px solid #314f69; border-radius: 14px; color: #152436; background: #f4f7fb; font: clamp(1rem, 1.7vw, 1.55rem)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.lesson-source .code-token-focus { color: #182331; }
.lesson-frame .student-prompt { font-size: clamp(1.05rem, 1.55vw, 1.35rem); }
.lesson-frame .student-prompt .response-labels { align-self: center; }
@media (max-width: 1000px) { .lesson-canvas { grid-template-columns: 1fr; gap: 24px; padding: 28px; } .lesson-copy h1 { max-width: none; } .lesson-evidence { place-items: start; } }