/* ── Screenplay Editor Styles ─────────────────────────────────────────────── */

/* Font classes */
.screenplay-editor { font-family: 'Courier Prime', 'Courier', monospace; font-size: 12pt; }
.screenplay-editor.font-courier { font-family: 'Courier', monospace; }
.screenplay-editor.font-times { font-family: 'Times New Roman', 'Times', serif; }
.screenplay-editor.font-arial { font-family: 'Arial', 'Helvetica', sans-serif; }

/* Base layout — 6" writing area within standard page */
.screenplay-editor .ProseMirror {
    max-width: 6in;
    margin: 0 auto;
    padding: 1in 0;
    line-height: 1;
    position: relative;
}

/* ── Element Styles ──────────────────────────────────────────────────────── */
/* Spacing calibrated against Boogie Nights (Paul Thomas Anderson) screenplay */

/* Scene Heading: full width, uppercase, bold — one blank line above */
.screenplay-editor .scene-heading {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Action: full width, one blank line between blocks */
.screenplay-editor .action {
    margin-bottom: 1em;
}

/* Character Cue: indented, uppercase, tight to dialogue below */
.screenplay-editor .character-cue {
    text-transform: uppercase;
    margin-left: 2.2in;
    margin-top: 1em;
    margin-bottom: 0;
}

/* Dialogue: 3.5" wide, industry standard indent (1" from left) */
.screenplay-editor .dialogue {
    margin-left: 1in;
    max-width: 3.5in;
    margin-bottom: 1em;
}

/* Parenthetical: slightly indented from dialogue, auto-wrapped in parens */
.screenplay-editor .parenthetical {
    margin-left: 1.4in;
    max-width: 2.5in;
    margin-bottom: 0;
}
.screenplay-editor .parenthetical::before { content: '('; }
.screenplay-editor .parenthetical::after { content: ')'; }

/* Transition: right-aligned, uppercase, one blank line above/below */
.screenplay-editor .transition {
    text-align: right;
    text-transform: uppercase;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Shot: full width, uppercase */
.screenplay-editor .shot {
    text-transform: uppercase;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

/* Dual Dialogue: side by side */
.screenplay-editor .dual-dialogue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5in;
}

/* ── Format Overrides ────────────────────────────────────────────────────── */

/* Multi-cam sitcom: caps action, double-spaced dialogue */
.screenplay-editor.format-multi_cam_sitcom .action {
    text-transform: uppercase;
}
.screenplay-editor.format-multi_cam_sitcom .dialogue {
    line-height: 2;
}

/* ── Screenplay Reader ─────────────────────────────────────────────────── */
/* Override prose-oriented reader styles for screenplay reading view */

.reader-chapter.screenplay-reader {
    font-family: 'Courier Prime', 'Courier', monospace;
    font-size: 12pt;
    max-width: 8.5in;
    line-height: 1;
}

/* Screenplay body in reader: center the 6" writing area */
.reader-chapter.screenplay-reader .reader-ch-body {
    max-width: 6in;
    margin: 0 auto;
}

/* No drop caps in screenplay reader */
.reader-chapter.screenplay-reader .reader-ch-body > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    font-weight: normal;
    color: inherit;
}

/* ── Screenplay Element Toolbar ──────────────────────────────────────────── */

.screenplay-element-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Match .toolbar-btn styles from the main editor toolbar exactly */
.sp-element-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 0.45em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
    white-space: nowrap;
    gap: 0.3rem;
}

.sp-element-btn:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border);
}

.sp-element-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.sp-element-btn img {
    width: 14px;
    height: 14px;
    filter: invert(0.6);
}

.sp-element-btn:hover img {
    filter: invert(0.85);
}

.sp-element-btn.active img {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(220deg) brightness(1.2);
}

.sp-element-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

/* ── Element Type Labels (left margin) ───────────────────────────────────── */

.screenplay-editor .element-label {
    position: absolute;
    left: -1.2in;
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.4;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
}
.screenplay-editor .element-label:hover {
    opacity: 0.8;
}

/* ── Page Break Indicators ───────────────────────────────────────────────── */

.screenplay-editor .page-break-indicator {
    border-top: 1px dashed var(--border);
    margin: 1em -1in;
    padding-top: 0.25em;
    position: relative;
}
.screenplay-editor .page-break-indicator::after {
    content: attr(data-page);
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

/* ── Page Count Status ───────────────────────────────────────────────────── */

.screenplay-page-status {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.screenplay-page-status .page-target-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.screenplay-page-status .page-target-dot.green { background: var(--success, #4a4); }
.screenplay-page-status .page-target-dot.yellow { background: var(--warning, #ca4); }
.screenplay-page-status .page-target-dot.red { background: var(--error, #c44); }
.screenplay-page-status .page-target-dot.neutral { background: var(--text-muted); }

/* ── Screenplay Draft (AI Exploration Pane) ──────────────────────────────── */

.explore-draft--screenplay {
    font-family: 'Courier Prime', 'Courier', monospace;
    font-size: 11pt;
    line-height: 1.1;
    padding-left: 5.5em;
}

/* Element type label — left margin, matches editor's .element-label style */
.sp-draft-label {
    position: absolute;
    left: 0;
    transform: translateX(calc(-100% - 0.5em));
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.4;
    color: var(--text-muted);
    font-family: var(--font-sans);
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

.sp-draft-scene,
.sp-draft-action,
.sp-draft-character,
.sp-draft-dialogue,
.sp-draft-paren,
.sp-draft-transition {
    position: relative;
}

.sp-draft-scene {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
}

.sp-draft-action {
    margin-bottom: 0.8em;
}

.sp-draft-character {
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 30%;
    margin-top: 0.8em;
    margin-bottom: 0;
}

.sp-draft-dialogue {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 0;
}

.sp-draft-paren {
    margin-left: 22%;
    font-style: italic;
    margin-bottom: 0;
}

.sp-draft-transition {
    text-align: right;
    text-transform: uppercase;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

/* ── Clickable Exploration Blocks ─────────────────────────────────────── */

/* Wrapper for each clickable block inside drafts and prose */
.explore-block {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, outline-color 0.15s, opacity 0.2s;
    outline: 1px solid transparent;
    outline-offset: 2px;
}

.explore-block:hover {
    outline-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Selected state — single click */
.explore-block--selected {
    outline-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Used/shaded state — block was inserted into editor */
.explore-block--used {
    opacity: 0.35;
    cursor: pointer;
}

.explore-block--used:hover {
    opacity: 0.55;
    outline-color: color-mix(in srgb, var(--error, #e55) 40%, transparent);
}

/* Screenplay blocks inside clickable wrappers — remove their own margins,
   the wrapper handles spacing */
.explore-block > .sp-draft-scene,
.explore-block > .sp-draft-action,
.explore-block > .sp-draft-character,
.explore-block > .sp-draft-dialogue,
.explore-block > .sp-draft-paren,
.explore-block > .sp-draft-transition {
    margin-top: 0;
    margin-bottom: 0;
}

/* Prose paragraphs inside clickable wrappers */
.explore-block > .explore-text {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Scene Navigator (Reader Sidebar) ────────────────────────────────────── */

.scene-navigator .act-break-header {
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--border);
    margin-top: 1em;
    font-size: 0.85em;
    color: var(--text-muted);
}
.scene-navigator .scene-nav-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25em 0.5em;
    font-size: 0.8em;
    color: var(--text);
    text-decoration: none;
}
.scene-navigator .scene-nav-item:hover {
    background: var(--bg-hover);
}
.scene-navigator .scene-page {
    color: var(--text-muted);
    font-size: 0.75em;
}