/* Classification Threshold Lab — Custom Styles
 * Extends shared/css/main.css
 * Dr. Baker's Marketing Analytics Tools
 * Created: 2026-02-26
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   NO-DATA PLACEHOLDER
   ═══════════════════════════════════════════════════════════════════════════════ */

.no-data-card {
    text-align: center;
    padding: 2.5rem;
    color: var(--app-muted, #64748b);
    font-size: 1.05rem;
    background: #f8fafc;
    border: 2px dashed var(--app-border, #d6dfea);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTROLS GRID
   ═══════════════════════════════════════════════════════════════════════════════ */

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

@media (max-width: 700px) {
    .controls-grid {
        grid-template-columns: 1fr;
    }
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Span full width for the threshold slider */
.control-group--full {
    grid-column: 1 / -1;
}

.control-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text, #1f2a37);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.control-hint {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--app-muted, #5f6b7a);
}

/* ─── Cost Number Input ─────────────────────────────────────────────────────── */

.cost-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 180px;
}

.input-prefix {
    background: var(--app-bg, #f5f7fb);
    border: 1px solid var(--app-border, #d6dfea);
    border-right: none;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-muted, #5f6b7a);
    border-radius: 8px 0 0 8px;
    line-height: 1;
}

.cost-input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--app-border, #d6dfea);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    color: var(--app-text, #1f2a37);
    background: #fff;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.cost-input:focus {
    outline: none;
    border-color: var(--app-accent, #2a7de1);
    box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.15);
}

/* ─── Threshold Slider ──────────────────────────────────────────────────────── */

.threshold-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.threshold-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
    accent-color: #7c3aed;
}

.threshold-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #7c3aed;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.threshold-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.threshold-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #7c3aed;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

.slider-label-left,
.slider-label-right {
    font-size: 0.78rem;
    color: var(--app-muted, #5f6b7a);
    text-align: center;
    line-height: 1.3;
    min-width: 64px;
}

.slider-label-left { text-align: right; }
.slider-label-right { text-align: left;  }

.threshold-display-row {
    text-align: center;
    font-size: 1rem;
    color: var(--app-muted, #5f6b7a);
    margin-top: 0.35rem;
}

.threshold-display-row strong {
    color: #7c3aed;
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OPTIMAL THRESHOLD CALLOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.optimal-callout {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1.5px solid #16a34a;
    border-radius: 12px;
}

.optimal-callout__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.optimal-callout__icon {
    font-size: 1.3rem;
}

.optimal-callout__header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #14532d;
}

.optimal-callout__formula {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.formula-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}

.optimal-callout__formula code {
    background: rgba(255,255,255,0.7);
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.9rem;
    color: #14532d;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.shift-explanation {
    margin: 0;
    font-size: 0.92rem;
    color: #166534;
    font-weight: 500;
    line-height: 1.5;
}

.calibration-gap {
    margin-top: 0.85rem;
    padding: 0.7rem 1rem;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #92400e;
    line-height: 1.6;
}
.calibration-gap strong { color: #78350f; }

/* ═══════════════════════════════════════════════════════════════════════════════
   CHART HELPERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.chart-explainer {
    font-size: 0.9rem;
    color: var(--app-muted, #5f6b7a);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.plot-container {
    width: 100%;
    height: 360px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESULTS DUO (CONFUSION MATRIX + COST BREAKDOWN SIDE BY SIDE)
   ═══════════════════════════════════════════════════════════════════════════════ */

.results-duo-section {
    margin-bottom: 0;
}

.results-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 860px) {
    .results-duo {
        grid-template-columns: 1fr;
    }
}

.results-card h2 {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--app-muted, #5f6b7a);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONFUSION MATRIX
   ═══════════════════════════════════════════════════════════════════════════════ */

.cm-wrapper {
    margin: 1rem 0 1.25rem;
}

/* Column header row */
.cm-col-labels {
    display: grid;
    grid-template-columns: 72px 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.cm-col-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-muted, #5f6b7a);
    line-height: 1.3;
    padding: 0.25rem;
}

.cm-col-label.pred-pos { color: #7c3aed; }
.cm-col-label.pred-neg { color: #475569;  }

/* Each row */
.cm-row {
    display: grid;
    grid-template-columns: 72px 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cm-row-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-muted, #5f6b7a);
    text-align: right;
    line-height: 1.3;
    padding-right: 0.5rem;
}

/* Individual cells */
.cm-cell {
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1.5px solid transparent;
}

.cm-cell-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

.cm-cell-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.cm-cell-note {
    font-size: 0.72rem;
    opacity: 0.7;
    line-height: 1.3;
}

/* Cell color themes */
.cm-tp {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

.cm-tn {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.cm-fp {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.cm-fn {
    background: #fff7ed;
    border-color: #fdba74;
    color: #92400e;
}

/* Precision / Recall row */
.cm-metrics-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid var(--app-border, #e2e8f0);
}

.cm-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.cm-metric-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-muted, #5f6b7a);
    cursor: help;
    text-decoration: underline dotted;
}

.cm-metric-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--app-text, #1f2a37);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COST BREAKDOWN
   ═══════════════════════════════════════════════════════════════════════════════ */

.cost-breakdown-table {
    margin: 1rem 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--app-border, #e2e8f0);
}

.cost-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--app-border, #e2e8f0);
}

.cost-row:last-child {
    border-bottom: none;
}

.cost-row__type {
    font-weight: 600;
    font-size: 0.92rem;
}

.cost-row__count {
    font-size: 0.85rem;
    color: var(--app-muted, #5f6b7a);
    white-space: nowrap;
}

.cost-row__cost {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    text-align: right;
    min-width: 80px;
}

.cost-row--fp {
    background: #fef2f2;
    color: #991b1b;
}

.cost-row--fn {
    background: #fff7ed;
    color: #92400e;
}

.cost-row--total {
    background: #f8fafc;
    border-top: 2px solid var(--app-border, #e2e8f0);
}

.cost-row--total .cost-row__type {
    font-size: 1rem;
    color: var(--app-text, #1f2a37);
}

.cost-row--total .cost-row__cost {
    font-size: 1.15rem;
    color: var(--app-text, #1f2a37);
}

/* Cost-vs-optimal badge */
.cost-vs-optimal {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.83rem;
    font-weight: 600;
}

.cost-vs-optimal.bad {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
}

.cost-vs-optimal.good {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCENARIO DESCRIPTION: COST CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.scenario-costs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.25rem 0;
}

@media (max-width: 640px) {
    .scenario-costs-grid {
        grid-template-columns: 1fr;
    }
}

.cost-card {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cost-card.cost-tp {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
}

.cost-card.cost-fp {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
}

.cost-card.cost-fn {
    background: #fff7ed;
    border: 1.5px solid #fdba74;
}

.cost-type {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.cost-card.cost-tp .cost-type { color: #14532d; }
.cost-card.cost-fp .cost-type { color: #991b1b; }
.cost-card.cost-fn .cost-type { color: #92400e; }

.cost-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.cost-card.cost-tp .cost-amount,
.tp-amount { color: #16a34a; }
.cost-card.cost-fp .cost-amount { color: #dc2626; }
.cost-card.cost-fn .cost-amount { color: #d97706; }

.cost-desc {
    font-size: 0.82rem;
    color: var(--app-muted, #5f6b7a);
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCENARIO DESCRIPTION: CONTEXT GRID  (reused from overfitting)
   ═══════════════════════════════════════════════════════════════════════════════ */

.context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.context-item {
    background: #f8fafc;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.context-item strong {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted, #5f6b7a);
}

.context-item span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-text, #1f2a37);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCENARIO DESCRIPTION: INSIGHTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.scenario-insights {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
}

.scenario-insights h5 {
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    color: #0369a1;
}

.scenario-insights ul {
    margin: 0;
    padding-left: 1.25rem;
}

.scenario-insights li {
    font-size: 0.88rem;
    color: #0c4a6e;
    line-height: 1.55;
    margin-bottom: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONCEPT GRID  (exploratory questions section)
   ═══════════════════════════════════════════════════════════════════════════════ */

.concept-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

@media (max-width: 700px) {
    .concept-grid {
        grid-template-columns: 1fr;
    }
}

.guide-section {
    background: #f8fafc;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.guide-section h5 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--app-text, #1f2a37);
}

.guide-section p {
    font-size: 0.868rem;
    color: var(--app-muted, #5f6b7a);
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUESTIONS LIST
   ═══════════════════════════════════════════════════════════════════════════════ */

.questions-list {
    padding-left: 1.5rem;
    margin: 0;
}

.questions-list li {
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
    color: var(--app-text, #1f2a37);
}

.questions-list li:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   D3 SCORE DISTRIBUTION CHART
   The score-dist-chart div hosts a D3 SVG with two smooth KDE curves and a
   draggable threshold line. All SVG elements are styled here.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container — override the 360px from .plot-container so the SVG dictates its own height */
#score-dist-chart {
    height: auto;
    overflow: hidden;  /* clip at the SVG boundary; no bleeding into content below */
    cursor: default;
}

/* SVG root — block so no inline whitespace gap below it */
.dist-svg {
    display: block;
    overflow: visible;  /* lets labels in the top margin show above the SVG edge */
}

/* Placeholder message shown before data is loaded */
.dist-placeholder {
    fill: #9ca3af;
    font-size: 0.875rem;
    font-style: italic;
    font-family: Inter, -apple-system, sans-serif;
}

/* ─── Dot chart — mirrored beeswarm ────────────────────────────────────────── */

/* Centerline separating positives (top) from negatives (bottom) */
.center-line {
    stroke: #cbd5e1;
    stroke-width: 1.5;
    stroke-dasharray: 4, 4;
    pointer-events: none;
}

/* Half-labels: "Positives ↑" / "Negatives ↓" */
.half-label {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: Inter, -apple-system, sans-serif;
    pointer-events: none;
    opacity: 0.75;
}

.half-label--pos { fill: #1d4ed8; }
.half-label--neg { fill: #4b5563; }

/* Individual meeples — fill/stroke applied via JS (_DOT_FILL / _DOT_STROKE) */
.score-dot {
    transition: fill 0.25s ease;
}

/* Dot legend text (TP/FN/FP/TN labels) */
.dot-legend-text {
    fill: #374151;
    font-size: 0.72rem;
    font-family: Inter, -apple-system, sans-serif;
    dominant-baseline: middle;
}

/* Sampling note shown when N > _DOT_MAX */
.sample-note {
    fill: #9ca3af;
    font-size: 0.65rem;
    font-style: italic;
    font-family: Inter, -apple-system, sans-serif;
}

/* ─── Decision-zone shading ─────────────────────────────────────────────────── */

/* Left of threshold: "No-Action Zone" — subtle warm amber (FN risk lives here) */
.region-nact {
    fill: rgba(251, 191, 36, 0.10);
    pointer-events: none;
}

/* Right of threshold: "Action Zone" — subtle cool blue (FP risk lives here) */
.region-act {
    fill: rgba(59, 130, 246, 0.07);
    pointer-events: none;
}

/* ─── Current threshold line ────────────────────────────────────────────────── */

.threshold-line {
    stroke: #2a7de1;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Draggable handle rectangle */
.threshold-handle {
    fill: #2a7de1;
    stroke: #ffffff;
    stroke-width: 2;
    cursor: ew-resize;
    transition: fill 0.15s ease;
}

.threshold-handle:hover {
    fill: #1a5fb4;
}

.threshold-handle.dragging {
    fill: #1a5fb4;
    cursor: grabbing;
}

.threshold-label {
    fill: #1e40af;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', monospace;
    pointer-events: none;
}

/* ─── Optimal threshold line ────────────────────────────────────────────────── */

.optimal-line {
    stroke: #f3b440;
    stroke-width: 2;
    stroke-dasharray: 7, 3;
    opacity: 0.9;
}

.optimal-label {
    fill: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', monospace;
    pointer-events: none;
}

/* ─── Zone labels ───────────────────────────────────────────────────────────── */

/* Zone labels sit below the x-axis, above the axis title */
.zone-label {
    fill: #9ca3af;
    font-size: 0.70rem;
    font-style: italic;
    font-family: Inter, -apple-system, sans-serif;
    pointer-events: none;
}

.zone-action {
    fill: rgba(37, 99, 235, 0.65);
    font-style: normal;
    font-weight: 600;
}

/* ─── Grid lines + axis ─────────────────────────────────────────────────────── */

.dist-axis .tick text {
    fill: #6b7280;
    font-size: 0.72rem;
    font-family: Inter, -apple-system, sans-serif;
}

.dist-axis-label {
    fill: #5f6b7a;
    font-size: 0.8rem;
    font-family: Inter, -apple-system, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   JUMP TO OPTIMAL BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.jump-optimal-row {
    text-align: center;
    margin-top: 0.9rem;
}

.btn-jump-optimal {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.btn-jump-optimal:hover {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.38);
}

.btn-jump-optimal:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESET COSTS ROW
   ═══════════════════════════════════════════════════════════════════════════════ */

.reset-costs-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.reset-costs-btn {
    font-size: 0.83rem;
    padding: 0.35rem 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REVENUE / PROFIT DISPLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* TP Revenue row (green accent) */
.cost-row--tp-rev {
    border-left: 3px solid #16a34a;
    background: rgba(22, 163, 74, 0.05);
}

.cost-row--tp-rev .cost-row__type {
    color: #15803d;
    font-weight: 700;
}

/* Net Profit row (bold, dynamic coloring via JS) */
.cost-row--profit {
    border-top: 2px solid #e5e7eb;
    border-left: 3px solid #6366f1;
    margin-top: 0.25rem;
    background: rgba(99, 102, 241, 0.04);
}

.cost-row--profit .cost-row__type {
    font-weight: 700;
    color: #4338ca;
    font-size: 1rem;
}

/* Green / red colouring for positive / negative values */
.cost-val-positive {
    color: #15803d !important;
    font-weight: 700;
}

.cost-val-negative {
    color: #dc2626 !important;
    font-weight: 700;
}

/* Profit formula row label in optimal callout */
.formula-label--profit {
    color: #0369a1;
    font-weight: 600;
}

.formula-subtext {
    font-size: 0.78em;
    font-weight: 400;
    color: #6b7280;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ADVANCED BLOCK (Flip Rate)
   ═══════════════════════════════════════════════════════════════════════════════ */

.advanced-block {
    margin-top: 1rem;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 0;
}

.advanced-block > summary {
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 8px;
}

.advanced-block > summary::-webkit-details-marker { display: none; }

.advanced-block[open] > summary {
    color: #374151;
    border-bottom: 1px dashed #d1d5db;
    border-radius: 8px 8px 0 0;
}

.advanced-block__body {
    padding: 1rem 1rem 0.5rem;
}

.flip-rate-impact {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #7c3aed;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROFESSOR MODE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.professor-mode-banner {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: 12px;
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
}

.professor-mode-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.professor-mode-info {
    flex: 1;
    min-width: 240px;
}

.professor-mode-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 0.35rem;
}

.professor-mode-info p {
    font-size: 0.875rem;
    color: #075985;
    margin: 0;
    line-height: 1.5;
}

.professor-mode-toggle {
    flex-shrink: 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0369a1;
    white-space: nowrap;
}

.toggle-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0369a1;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACT SECTIONS — 5-ACT PEDAGOGICAL STRUCTURE
   ═══════════════════════════════════════════════════════════════════════════ */
.act-section {
    margin-top: 2.5rem;
}

.act-heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.act-heading h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #374151;
    text-transform: uppercase;
}

.act-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.act-narrative {
    font-size: 0.94rem;
    color: #4b5563;
    line-height: 1.65;
    margin: 0 0 1rem;
    max-width: 760px;
}