/// Fixed physical screenplay geometry; only the preview scale responds to the screen.
.screenplay-editor {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);

    input.screenplay-title {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 16px 24px;
        border: 0;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 0;
        box-shadow: none;
        background: var(--md-sys-color-surface);
        color: inherit;
        font-family: inherit;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.5;
    }

    .screenplay-paper {
        --screenplay-page-scale: 1;
        box-sizing: border-box;
        width: 100%;
        height: var(--screenplay-editor-height, 640px);
        overflow: auto;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
    }

    .screenplay-pages {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        box-sizing: border-box;
        width: max-content;
        min-width: 100%;
        padding: 24px;
    }

    .screenplay-page-frame {
        position: relative;
        flex: none;
        overflow: clip;
        box-shadow: var(--screenplay-page-shadow, 0 0 0 1px #00000026, 0 0 12px #00000040, 0 8px 18px #00000059);
        width: calc(210mm * var(--screenplay-page-scale));
        height: calc(297mm * var(--screenplay-page-scale));
    }

    .screenplay-page {
        position: relative;
        box-sizing: border-box;
        width: 210mm;
        height: 297mm;
        padding: 25.4mm 25.4mm 25.4mm 38.1mm;
        background: var(--screenplay-paper-background, #fff);
        color: var(--screenplay-paper-color, #202124);

        transform: scale(var(--screenplay-page-scale));
        transform-origin: top left;
        font: 12pt/16px "Courier New", Courier, monospace;
    }

    .screenplay-page-body { position: relative; height: 100%; }
    .screenplay-page-number { position: absolute; top: 12.7mm; right: 25.4mm; font: inherit; }
    .screenplay-block { position: relative; padding: 0; }

    .screenplay-block.is-active::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -10px;
        width: 2px;
        border-radius: 2px;
        background: var(--screenplay-paper-color, #202124);
    }

    .screenplay-block-handle {
        position: absolute;
        top: -3px;
        left: -38px;
        display: grid;
        place-items: center;
        width: 24px;
        height: 22px;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: var(--screenplay-paper-color, #202124);
        opacity: 0;
        cursor: grab;

        i { font-size: 20px; }
        &:active { cursor: grabbing; }
        &:focus-visible { opacity: 1; outline: 1px solid currentColor; }
        &:disabled { visibility: hidden; }
    }

    .screenplay-block:is(:hover, :focus-within, .is-active) .screenplay-block-handle { opacity: 0.65; }
    .screenplay-block.is-dragging { opacity: 0.4; }
    .screenplay-drop-indicator {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--screenplay-paper-color, #202124);
        pointer-events: none;
        z-index: 2;

        &::before { content: ""; position: absolute; top: -2px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: inherit; }
    }

    textarea.screenplay-block-input {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: 16px;
        margin: 0;
        padding: 0;
        resize: none;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        color: inherit;
        font: 12pt/16px "Courier New", Courier, monospace;
        letter-spacing: normal;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: normal;
        tab-size: 4;
    }

    textarea.screenplay-measure { position: absolute; visibility: hidden; height: 0; min-height: 0; pointer-events: none; }
    textarea.screenplay-block-input::placeholder { color: var(--screenplay-paper-muted, #727272); opacity: 1; }
    .screenplay-scene textarea, .screenplay-character textarea, .screenplay-transition textarea { text-transform: uppercase; }
    .screenplay-scene textarea { font-weight: 700; }
    .screenplay-character { margin-left: 2in; }
    .screenplay-dialogue { margin-inline: 1in; }
    .screenplay-parenthetical { margin-inline: 1.5in 1in; }
    .screenplay-transition textarea { text-align: right; }

    input.screenplay-title:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
    textarea.screenplay-block-input:focus-visible { outline: none; }
    .screenplay-paper:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
}