/* The structured authoring renderer inside the existing student lesson shell.
   This file owns only the seam between the two; it does not restyle the board
   compositions or create a second lesson-player design. */

.structured-lesson-player .board-stage {
    position: relative;
    --structured-board-stage-padding-top: 24px;
    padding: 24px 34px 32px;
}

.structured-lesson-player .board-lesson-title {
    opacity: 0;
    transition: opacity 420ms ease;
}

.structured-lesson-player .board-header {
    position: relative;
}

.structured-lesson-player.structured-title-settled .board-lesson-title {
    opacity: 1;
}

.structured-lesson-player .board-progress-button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.structured-lesson-player .board-progress-button:hover,
.structured-lesson-player .board-progress-button:focus-visible,
.structured-lesson-player .board-progress-button[aria-expanded="true"] {
    color: var(--accent);
    outline: none;
}

.structured-lesson-player .board-progress-button::after {
    content: " ▾";
    opacity: .55;
}

.structured-beat-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 40px;
    width: min(520px, calc(100vw - 48px));
    max-height: min(520px, calc(100vh - 150px));
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(34, 48, 58, .22);
    border-radius: 14px;
    background: rgba(251, 250, 245, .98);
    box-shadow: 0 18px 48px rgba(34, 48, 58, .14);
}

.structured-beat-menu[hidden] { display: none; }

.structured-beat-menu-heading {
    margin: 0 0 10px;
    color: var(--board-ink-3);
    font: 600 11px/1.2 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.structured-beat-menu-note {
    margin: 0 0 12px;
    color: var(--board-ink-3);
    font: 12px/1.5 var(--font-ui);
}

.structured-beat-jump:disabled {
    opacity: .45;
    cursor: default;
}

.structured-beat-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.structured-beat-jump {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(34, 48, 58, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .66);
    color: var(--board-ink);
    cursor: pointer;
    font: 600 12px/1.25 var(--font-ui);
    text-align: left;
}

.structured-beat-jump:hover,
.structured-beat-jump:focus-visible,
.structured-beat-jump.is-current {
    border-color: rgba(185, 74, 50, .55);
    background: rgba(185, 74, 50, .08);
    outline: none;
}

.structured-beat-jump-number {
    flex: 0 0 auto;
    color: var(--accent);
    font-family: var(--font-mono);
}

.structured-title-flash {
    position: absolute;
    /* The opening title belongs on the existing lesson board. It must never
       introduce an opaque full-stage panel or cover Piero. */
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 48px;
    color: var(--board-ink);
    background: transparent;
    overflow: visible;
    pointer-events: none;
}

.structured-title-flash-text {
    display: inline-block;
    max-width: min(900px, 88vw);
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 54px);
    font-weight: 650;
    line-height: 1.12;
    text-align: center;
    opacity: 0;
    transition: opacity 420ms ease;
    will-change: opacity;
}

.structured-title-flash.is-visible .structured-title-flash-text {
    opacity: 1;
}

.structured-title-flash.is-leaving .structured-title-flash-text {
    opacity: 0;
}
@media(prefers-reduced-motion:reduce){
    .structured-title-flash-text,.structured-lesson-player .board-lesson-title{transition:none;}
}

.structured-lesson-player #blackboard-inner {
    min-height: 0;
}

.structured-lesson-player #blackboard-inner > .svk-board {
    padding-bottom: 18px;
}

.structured-lesson-player:where(:not(.native-direct-board-player)) .svk-board__pin-rail {
    top: calc(-1 * var(--structured-board-stage-padding-top));
    margin-top: calc(-1 * var(--structured-board-stage-padding-top));
    padding-top: var(--structured-board-stage-padding-top);
    border-radius: 0;
    background: rgba(251, 250, 245, .96);
    box-shadow: none;
}

/* Scenes are rolling authoring windows, not cards placed on top of the real
   lesson board.  Keep their sizing and scroll boundaries, but let the board's
   ruled paper remain the only visible surface.  The separate proof/example
   galleries retain the card treatment from spine_visual_authoring_kit.css. */
.structured-lesson-player:where(:not(.native-direct-board-player)) .svk-scene {
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.structured-lesson-player .board-footer {
    padding-top: 12px;
    padding-bottom: 18px;
}

/* Answer entry follows the question on the scrolling board. The existing
   voice, typing, transcript and Submit controls stay in the player footer. */
.structured-checkpoint-player #checkpoint-response-host {
    width: min(100%, 640px);
    min-width: 0;
    margin: 28px auto 0;
    scroll-margin-top: 20px;
}
.structured-checkpoint-player #checkpoint-response-host[hidden] { display: none; }
.structured-checkpoint-player #checkpoint-response-host > .zcr { animation: zcr-reminder-in 240ms ease-out; }
.structured-checkpoint-player .zcr-final-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.structured-checkpoint-player .zcr-answer-heading { grid-column: 2; grid-row: 1; margin: 0; }
.structured-checkpoint-player .zcr-answer-fields { grid-column: 1; grid-row: 1; max-width: 100%; }
.structured-checkpoint-player .zcr-answer-field {
    min-height: 64px;
    border: 1px solid #dbe3e0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 4px #22303a05;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.structured-checkpoint-player math-field.zcr-answer-field { padding: 10px 14px; font-size: 24px !important; }
.structured-checkpoint-player .zcr-answer-field:focus-within {
    outline: none;
    border-color: #6e94c9;
    box-shadow: 0 0 0 3px #2b5da810, 0 2px 4px #22303a05;
}
.structured-checkpoint-player .zcr-keyboard {
    min-height: 38px;
    padding: 8px 11px;
    gap: 7px;
    border-color: #e0e6e4;
    border-radius: 9px;
    background: #ffffff;
    color: #4d625d;
    font-size: 12px !important;
}
.structured-checkpoint-player .zcr-keyboard svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.structured-checkpoint-player .zcr-keyboard:hover:not(:disabled),
.structured-checkpoint-player .zcr-keyboard[aria-expanded="true"] { background: #eef3fb; border-color: #bacde7; color: #2b5da8; }
.structured-checkpoint-player .zcr-keypad-panel {
    grid-column: 1 / -1;
    justify-self: start;
    width: min(100%, 420px);
    margin: 14px 0 0;
    padding: 14px;
    border: 1px solid #e0e6e4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 16px #22303a08;
    animation: zcr-reminder-in 180ms ease-out;
}
.structured-checkpoint-player:is([data-player-state="CHECKPOINT_RESPONSE"], [data-player-state="CHECKPOINT_GRADING"]):has(#checkpoint-response-host:not([hidden])) .tutor-bubble:not(.checkpoint-reminder) { display: none; }
.structured-checkpoint-player:is([data-player-state="CHECKPOINT_RESPONSE"], [data-player-state="CHECKPOINT_GRADING"]) .board-footer { gap: 10px; padding-top: 10px; padding-bottom: 20px; }
.structured-checkpoint-player #checkpoint-submit-host:not([hidden]) { display: flex; align-items: center; }
.structured-checkpoint-player #checkpoint-submit-host .zcr-footer { margin: 0; min-height: 0; }
.structured-checkpoint-player #checkpoint-submit-host .zcr-submit { min-height: 48px; }
.structured-checkpoint-player #student-bubble.zcr-speech-draft { max-width: min(720px, 85%); padding-bottom: 14px; }
.structured-checkpoint-player #student-bubble.zcr-speech-draft .speech-text { max-height: 18vh; overflow-y: auto; }
.structured-checkpoint-player .board-controls { flex-direction: row; flex-wrap: wrap; gap: 18px; }
.structured-checkpoint-player .typing-controls:not(:has(> :not([hidden]))) { display: none; }
.structured-checkpoint-player #blackboard-inner { min-width: 0; }
@media (max-width: 600px) {
    .structured-checkpoint-player #checkpoint-response-host { margin-top: 24px; }
    .structured-checkpoint-player .zcr-final-answer { column-gap: 8px; }
    .structured-checkpoint-player .zcr-keyboard { padding: 8px; gap: 5px; }
    .structured-checkpoint-player math-field.zcr-answer-field { padding: 9px 10px; }
    .structured-checkpoint-player .zcr-keypad-panel { padding: 13px 10px 14px; }
    .structured-checkpoint-player .board-controls { width: 100%; gap: 12px; }
    .structured-checkpoint-player .lesson-controls:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); }
    .structured-checkpoint-player .lesson-control { min-width: 0; border-right: 0; }
    .structured-checkpoint-player #checkpoint-submit-host { width: min(100%, 360px); }
    .structured-checkpoint-player #checkpoint-submit-host .zcr-footer,
    .structured-checkpoint-player #checkpoint-submit-host .zcr-submit { width: 100%; }
    .structured-checkpoint-player #checkpoint-submit-host .zcr-submit { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .structured-checkpoint-player .zcr-keypad-panel,
    .structured-checkpoint-player #checkpoint-response-host > .zcr { animation: none; }
    .structured-checkpoint-player .zcr-answer-field { transition: none; }
}
@media (min-width: 1120px) {
    .structured-checkpoint-player.checkpoint-calculator-open .board-main {
        width: calc(100% - var(--checkpoint-calculator-space, 0px));
    }
}

.structured-lesson-player .typing-controls {
    display: flex;
    width: min(720px, calc(100vw - 48px));
    gap: 10px;
    justify-content: center;
}

.structured-lesson-player .interrupt-input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(34, 48, 58, 0.25);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.86);
    color: var(--board-ink);
    font: 15px/1.4 var(--font-ui);
}

.structured-lesson-player .interrupt-input:focus {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
}

.structured-lesson-player .lesson-control[hidden] {
    display: none;
}

/* The authored board keeps its readable composition width. The explanation
   uses the room beside it, not a fraction of that capped scrolling canvas. */
.structured-lesson-player .board-workspace {
    --tutor-panel-width: clamp(320px, 34%, 560px);
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.structured-lesson-player .board-workspace > .board-stage {
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    overflow-anchor: none;
    overscroll-behavior: contain;
    transition: margin-right 360ms cubic-bezier(.4, 0, .2, 1);
}
.structured-lesson-player .blackboard.interrupt-mode .board-workspace > .board-stage {
    margin-right: var(--tutor-panel-width);
}
.structured-lesson-player .board-workspace .blackboard-inner {
    /* Preserve the former 1180px stage minus its two 34px gutters. Only the
       content is capped; the scrolling window fills its side of the room. */
    width: 100%;
    max-width: 1112px;
    margin-inline: auto;
}
.structured-lesson-player .blackboard.interrupt-mode .blackboard-inner {
    max-width: 1112px;
    opacity: 1;
    filter: none;
}
.structured-lesson-player .board-workspace > .scratch-region {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: var(--tutor-panel-width);
    min-width: 0;
    height: auto;
    padding: 26px 30px 36px;
    border-left: 1px solid #ded6cb;
    display: block;
    justify-content: flex-start;
    overflow: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    scrollbar-gutter: stable;
    /* Replays take their viewport from this pane, not its auto-height content. */
    container-type: size;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 360ms cubic-bezier(.4, 0, .2, 1),
        opacity 360ms ease-in-out, visibility 0s 360ms;
}
.structured-lesson-player .blackboard.interrupt-mode .scratch-region {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}
.structured-lesson-player .scratch-inner { min-width: 0; }
/* Emphasis must not scale/filter a whole retained scene or alter its layout. */
.structured-lesson-player [data-tutor-emphasis].state-highlighted {
    transform: none;
    filter: none;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.structured-lesson-player .tutor-replay-frame {
    display: block;
    width: 100%;
    height: 100cqh;
    border: 0;
}
.structured-lesson-player .scratch-region:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.structured-lesson-player .blackboard.snapshot-mode .board-workspace { flex: none; overflow: visible; }
.structured-lesson-player .blackboard.tutor-layout-instant .board-stage,
.structured-lesson-player .blackboard.tutor-layout-instant .scratch-region {
    transition: none;
}
@media (max-width: 760px) {
    .structured-lesson-player .blackboard.interrupt-mode .board-workspace > .board-stage {
        margin-right: 0;
    }
    .structured-lesson-player .board-workspace > .scratch-region {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: min(88%, 420px);
        padding: 22px;
        z-index: 20;
        box-shadow: -12px 0 28px #30241710;
    }
}
@media (prefers-reduced-motion: reduce) {
    .structured-lesson-player .board-workspace > .board-stage,
    .structured-lesson-player .board-workspace > .scratch-region { transition: none; }
}

.structured-author-preview .tutor-bubble {
    display: none;
}

/* Silent preview omits the speech bubble, but still needs room for Piero. */
.structured-author-preview .board-footer {
    min-height: calc(var(--board-zeno-height) + var(--board-zeno-bottom));
    flex-shrink: 0;
}

.structured-author-state-review {
    position: relative;
    display: grid;
    grid-template-columns: minmax(112px, auto) minmax(150px, auto) minmax(112px, auto);
    align-items: center;
    border: 1px solid rgba(34, 48, 58, .22);
    background: rgba(250, 248, 242, .92);
}

.structured-author-state-button {
    min-height: 46px;
    padding: 9px 16px;
    border: 0;
    background: transparent;
    color: var(--board-ink);
    cursor: pointer;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.structured-author-state-button--next {
    color: #faf8f2;
    background: var(--accent);
}

.structured-author-state-button:hover:not(:disabled),
.structured-author-state-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(185, 74, 50, .42);
}

.structured-author-state-button:disabled {
    color: rgba(34, 48, 58, .32);
    background: rgba(34, 48, 58, .04);
    cursor: default;
}

.structured-author-state-count {
    appearance: none;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-top: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(34, 48, 58, .18);
    border-left: 1px solid rgba(34, 48, 58, .18);
    color: var(--board-ink-2);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
}

.structured-author-state-count::after { content: '▾'; opacity: .55; }
.structured-author-state-count:hover:not(:disabled),
.structured-author-state-count:focus-visible,
.structured-author-state-count[aria-expanded="true"] {
    color: var(--accent);
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(185, 74, 50, .42);
}
.structured-author-state-count:disabled { cursor: default; opacity: .55; }
.structured-author-state-review > .structured-beat-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
}

@media (max-width: 680px) {
    .structured-beat-menu {
        right: 18px;
        width: calc(100vw - 36px);
    }

    .structured-beat-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .structured-lesson-player .board-header {
        gap: 10px;
        padding: 14px 16px 12px;
    }

    .structured-lesson-player .board-lesson-title {
        font-size: 15px;
        line-height: 1.15;
    }

    .structured-lesson-player .board-progress {
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .structured-lesson-player .board-stage {
        --structured-board-stage-padding-top: 14px;
        padding: 14px 12px 24px;
    }

    .structured-title-flash { padding: 30px; }

    .structured-title-flash-text { font-size: clamp(25px, 8vw, 38px); }

    .structured-lesson-player:where(:not(.native-direct-board-player)) .svk-scene {
        padding: 16px 12px;
        border-radius: 0;
    }

    .structured-lesson-player .tutor-bubble .speech-text {
        font-size: 15px;
    }

    .player-body.structured-lesson-player {
        --board-zeno-height: 80px;
        --board-zeno-bottom: 10px;
    }

    .structured-lesson-player .board-zeno {
        width: 64px;
        left: 10px;
    }

    .structured-lesson-player.awaiting-generated-response .board-zeno {
        bottom: 178px;
    }

    .structured-lesson-player .typing-controls {
        width: 100%;
        padding: 0 4px;
    }

    .structured-author-state-review {
        width: calc(100% - 76px);
        margin-left: 76px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .structured-author-state-button,
    .structured-author-state-count {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 9.5px;
    }
}

/* Dialogue owns its measured height; the board viewport yields the space. */
.structured-lesson-player .board-footer {
    flex-shrink: 0;
}

/* Fade the board at the natural lesson/checkpoint boundary, not the tutor. */
.checkpoint-board-pending .board-stage { opacity: 0; }
.checkpoint-board-entering .board-stage { animation: checkpoint-board-enter 420ms ease both; }
@keyframes checkpoint-board-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .checkpoint-board-entering .board-stage { animation: none; }
}