/* === CSS/SCREENWRITER.CSS === */
/* Industry-Standard Screenwriter Studio Typography & WYSIWYG Layout */

.screenwriter-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--bg-color, #0b0d13);
    color: var(--panel-text, var(--main-color, #e2e8f0));
    box-sizing: border-box;
    overflow: hidden;
}

/* Screenplay Header & Production Bar */
.screenwriter-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--panel-bg, #11141d);
    color: var(--panel-text, var(--main-color, #e2e8f0));
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.screenwriter-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.screenwriter-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--main-color, #00ff66);
}

.screenwriter-metrics-cluster {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sc-metric-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    border-radius: 4px;
    padding: 3px 8px;
    color: inherit;
}

.sc-metric-label {
    opacity: 0.7;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.sc-metric-val {
    font-weight: bold;
    color: var(--main-color, #00ff66);
    font-family: monospace;
}

.screenwriter-element-bar {
    display: flex;
    gap: 4px;
    align-items: center;
}

.sc-element-btn {
    font-size: 10px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    color: inherit;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sc-element-btn:hover,
.sc-element-btn.active {
    background: var(--main-color, #00ff66);
    color: var(--bg-color, #0b0d13);
    border-color: var(--main-color, #00ff66);
    font-weight: bold;
}

.sc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    cursor: pointer;
    user-select: none;
    padding: 3px 6px;
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    border-radius: 3px;
    color: inherit;
    transition: all 0.15s ease;
}

/* Screenplay Main Editor Stage */
.screenwriter-stage {
    flex: 1;
    overflow-y: auto;
    padding: 30px 10px;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
}

.screenplay-paper {
    width: 100%;
    max-width: 780px;
    min-height: 950px;
    background: var(--panel-bg, #11141d);
    color: var(--panel-text, var(--main-color, #111827));
    caret-color: var(--main-color, currentColor);
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 60px 50px;
    font-family: 'Courier Prime', Courier, monospace;
    font-size: 12pt;
    line-height: 1.25;
    outline: none;
    box-sizing: border-box;
}

/* Screenplay Element Types */
.screenplay-block {
    outline: none;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: inherit;
}

.sp-scene-heading {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--main-color, currentColor);
    display: flex;
    justify-content: space-between;
}

.sp-scene-heading .scene-number {
    opacity: 0.6;
    font-size: 10pt;
}

.sp-action {
    margin-bottom: 14px;
    line-height: 1.25;
    color: inherit;
}

.sp-character {
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 36%;
    margin-top: 14px;
    margin-bottom: 0;
    color: var(--main-color, currentColor);
}

.sp-parenthetical {
    margin-left: 28%;
    margin-bottom: 0;
    font-style: italic;
    color: inherit;
    opacity: 0.9;
}

.sp-dialogue {
    margin-left: 18%;
    max-width: 62%;
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.25;
    color: inherit;
}

.sp-transition {
    text-align: right;
    text-transform: uppercase;
    margin: 14px 0;
    font-weight: bold;
    color: var(--main-color, currentColor);
    opacity: 0.95;
}

.sp-centered {
    text-align: center;
    margin: 14px 0;
    color: inherit;
}

.sp-synopsis {
    margin: 10px 0;
    opacity: 0.75;
    font-style: italic;
    color: inherit;
}

.sp-note {
    background: rgba(255, 230, 0, 0.15);
    border-left: 3px solid #eab308;
    padding: 4px 8px;
    margin: 8px 0;
    font-size: 10pt;
    font-family: sans-serif;
    color: inherit;
}

/* Dual Dialogue Grid */
.screenplay-dual-dialogue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 14px 0;
}

.screenplay-dual-dialogue .dual-col .sp-character {
    margin-left: 20%;
}

.screenplay-dual-dialogue .dual-col .sp-dialogue {
    margin-left: 0;
    max-width: 100%;
}

/* Actor Sides Yellow-Lining Highlight */
.actor-sides-highlight {
    background: rgba(250, 204, 21, 0.25);
    border-left: 3px solid #facc15;
    padding-left: 6px;
}

.actor-sides-cue {
    opacity: 0.65;
    border-left: 2px dashed var(--border-color, rgba(128, 128, 128, 0.35));
    padding-left: 6px;
}

/* ========================================================================= */
/* Hollywood Classic Black & White Script Paper Mode                         */
/* Optional toggle: Crisp black Courier ink on pure white script paper       */
/* ========================================================================= */
.bw-paper-mode .screenplay-paper {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    caret-color: #111827 !important;
}

.bw-paper-mode .screenplay-paper .screenplay-block,
.bw-paper-mode .screenplay-paper .sp-action,
.bw-paper-mode .screenplay-paper .sp-dialogue,
.bw-paper-mode .screenplay-paper .sp-parenthetical,
.bw-paper-mode .screenplay-paper .sp-centered,
.bw-paper-mode .screenplay-paper .sp-synopsis {
    color: #111827 !important;
}

.bw-paper-mode .screenplay-paper .sp-character,
.bw-paper-mode .screenplay-paper .sp-scene-heading,
.bw-paper-mode .screenplay-paper .sp-transition,
.bw-paper-mode .screenplay-paper .sp-section {
    color: #000000 !important;
    font-weight: 700 !important;
}

.bw-paper-mode .screenplay-paper .sp-scene-heading .scene-number {
    color: #4b5563 !important;
    opacity: 1 !important;
}

.bw-paper-mode .screenplay-paper .sp-parenthetical {
    opacity: 0.9 !important;
    font-style: italic !important;
}

.bw-paper-mode .screenplay-paper .sp-note {
    background: #fef9c3 !important;
    border-left-color: #ca8a04 !important;
    color: #713f12 !important;
}

.bw-paper-mode .screenplay-paper .actor-sides-cue {
    border-left: 2px dashed #9ca3af !important;
}