/* ============================================================================
   reel-pick.css  —  🎞️ Reel Pick engine styling (.rp-*)
   Shared across the video-content idea pickers; per-page accent via
   --rp-grad-a / --rp-grad-b set inline on .rp-stage. Vintage film-projector
   look; the stage is a self-contained dark "cinema" that reads on any theme.
   ============================================================================ */
.rp-stage {
    --rp-grad-a: #ffb84d;
    --rp-grad-b: #e0396b;
    position: relative;
    border-radius: 14px;
    padding: 26px 0 20px;
    overflow: hidden;
    background: radial-gradient(120% 140% at 50% 30%, #241a10 0%, #150f09 55%, #0b0805 100%);
    border: 1px solid #3a2c18;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .6), 0 22px 55px -20px rgba(210, 150, 60, .35);
}
.rp-viewport { position: relative; overflow: hidden; }
.rp-strip { display: flex; align-items: stretch; will-change: transform; }
.rp-frame {
    position: relative; flex: none; width: 150px; height: 150px; margin: 22px 7px; border-radius: 3px;
    background: linear-gradient(160deg, #5a4a34, #33281a); border: 1px solid #6b573b;
    display: flex; align-items: center; justify-content: center;
    filter: sepia(.55) contrast(.85) brightness(.62) saturate(.6);
    transition: filter .5s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1), box-shadow .5s;
}
.rp-frame .rp-lbl { color: #efe0c2; font-weight: 700; font-size: 15px; text-align: center; padding: 0 10px; text-shadow: 0 1px 2px #000; line-height: 1.25; }
.rp-frame .rp-num { position: absolute; top: 5px; left: 7px; font-size: 9px; color: #c9b48c; font-family: monospace; opacity: .7; }
.rp-frame.rp-win {
    filter: none; background: linear-gradient(155deg, var(--rp-grad-a) 0%, var(--rp-grad-b) 100%);
    border: 2px solid #ffe6b3; transform: scale(1.06); z-index: 4;
    box-shadow: 0 0 0 3px rgba(255, 196, 105, .25), 0 0 40px 8px rgba(255, 150, 60, .5);
}
.rp-frame.rp-win .rp-lbl { color: #fff; font-size: 16px; font-weight: 800; text-shadow: 0 2px 6px rgba(120, 40, 0, .5); }
.rp-frame.rp-win .rp-num { color: rgba(255, 255, 255, .75); }
/* static film-window overlays */
.rp-perf-row { position: absolute; left: 0; right: 0; height: 16px; display: flex; gap: 22px; padding: 0 10px; z-index: 3; pointer-events: none; overflow: hidden; }
.rp-perf-row.top { top: 6px; } .rp-perf-row.bot { bottom: 6px; }
.rp-perf { width: 14px; height: 11px; border-radius: 2px; background: #e9dcc0; opacity: .82; flex: none; box-shadow: inset 0 0 2px rgba(0, 0, 0, .4); }
.rp-gate {
    position: absolute; top: 8px; bottom: 8px; left: 50%; width: 172px; transform: translateX(-50%); z-index: 5; pointer-events: none; border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(255, 214, 150, .5), 0 0 30px rgba(255, 190, 110, .35);
}
.rp-warm { position: absolute; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(50% 70% at 50% 50%, rgba(255, 196, 105, .16), transparent 70%); }
.rp-vign { position: absolute; inset: 0; pointer-events: none; z-index: 7; box-shadow: inset 0 0 120px 30px rgba(0, 0, 0, .7); }
.rp-stage.rp-rolling .rp-warm { background: radial-gradient(50% 80% at 50% 50%, rgba(255, 205, 120, .28), transparent 72%); }
.rp-caption { position: relative; z-index: 9; margin-top: 18px; text-align: center; color: #cdb488; font-size: 14px; letter-spacing: .3px; min-height: 18px; }
.rp-caption b { color: #ffce88; } .rp-caption .rp-rec { color: #ff7a3c; font-weight: 800; }
/* Roll button + speed */
.rp-rollbtn-wrap { text-align: center; }
.rp-rollbtn-main {
    display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; font-size: 15px; font-weight: 800; color: #fff;
    text-shadow: 0 1px 3px rgba(50, 10, 0, .6);
    padding: 12px 30px; border-radius: 12px; border: 0; cursor: pointer; letter-spacing: .3px;
    background: linear-gradient(135deg, var(--rp-grad-a, #ff8a3c), var(--rp-grad-b, #e0396b)); box-shadow: 0 8px 22px -6px rgba(255, 140, 60, .6);
}
.rp-speed-row { margin-top: 16px; }
.rp-speed-row label { font-size: 13px; font-weight: 600; color: var(--theme-text, #1a1a2e); display: flex; align-items: center; gap: 8px; }
.rp-speed-row input[type=range] { width: 100%; margin-top: 8px; accent-color: #e07a2c; }
.rp-effects { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--theme-text, #1a1a2e); }
.rp-effects label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rp-items-ta { width: 100%; min-height: 220px; font-family: monospace; font-size: .9rem; border-radius: 10px; border: 1px solid var(--theme-border, #d7dbe0); background: var(--theme-bg, #fff); color: var(--theme-text, #1a1a2e); padding: 10px 12px; resize: vertical; }

/* Result bar accent (winner-result-bar.css reads these) */
.page-rp-scope {
    --wsp-result-accent: #e07a2c;
    --wsp-result-grad: linear-gradient(135deg, #ffb84d, #e0396b);
    --wsp-result-plate: rgba(224, 122, 44, .10);
}

@media (max-width: 575.98px) {
    .rp-frame { width: 118px; height: 118px; margin: 18px 5px; }
    .rp-gate { width: 132px; }
}

/* ── SEO content (.rp-content) — type scale from .content-guide; colour only ── */
.rp-content { color: var(--theme-text, #1a1a2e); background: var(--theme-bg, #fff); padding: 3.25rem 0 3.5rem; margin-top: 1rem; border-top: 1px solid var(--theme-border, #e9ecef); }
.rp-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.rp-content h2, .rp-content h3 { color: var(--theme-text, #1a1a2e); }
.rp-content p, .rp-content li { color: var(--theme-muted, #5b6470); }
.rp-content strong { color: var(--theme-text, #1a1a2e); }
.rp-content a { color: #c2410c; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.rp-kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #20140a; background: linear-gradient(135deg, #ffb84d, #ff7a3c); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .95rem; }
.rp-content .rp-lead { font-size: 1.2rem; line-height: 1.7; color: var(--theme-text, #1a1a2e); margin-bottom: 1.25rem; }
.rp-section { margin-top: 2.9rem; }
.rp-steps { margin-top: 1.4rem; display: grid; gap: .6rem; }
.rp-step { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; background: var(--theme-surface, #f8f9fa); border: 1px solid var(--theme-border, #e9ecef); border-left: 3px solid #e07a2c; border-radius: 10px; padding: .8rem 1rem; }
.rp-step-n { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #20140a; background: linear-gradient(135deg, #ffb84d, #ff7a3c); }
.rp-step h3 { margin: 0 0 .15rem !important; font-size: 1rem !important; } .rp-step p { margin: 0; font-size: .92rem; }
.rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.rp-pair-card { background: var(--theme-surface, #f8f9fa); border: 1px solid var(--theme-border, #e9ecef); border-radius: 12px; padding: 1rem 1.1rem; border-top: 3px solid #e07a2c; }
.rp-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; } .rp-pair-card p:last-child { margin-bottom: 0; font-size: .92rem; }
.rp-faq { margin-top: 1.4rem; }
.rp-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--theme-border, #e9ecef); }
.rp-faq .accordion-button { background: transparent; color: var(--theme-text, #1a1a2e); font-weight: 600; padding-left: 0; padding-right: 2.5rem; box-shadow: none; }
.rp-faq .accordion-button:not(.collapsed) { color: #c2410c; background: transparent; }
.rp-faq .accordion-button:focus { box-shadow: none; }
.rp-faq .accordion-body { padding-left: 0; color: var(--theme-muted, #5b6470); }
@media (max-width: 767.98px) { .rp-pair { grid-template-columns: 1fr; } }
body[data-theme="high-contrast"] .rp-content p, body[data-theme="high-contrast"] .rp-content li, body[data-theme="high-contrast"] .rp-content .rp-lead { color: rgba(255,255,255,.84); }
body[data-theme="high-contrast"] .rp-content h2, body[data-theme="high-contrast"] .rp-content h3 { color: #fff; }