/* ── First-time UI spotlight tour (static/app/features/tour/tour.js) ──────────
   Self-contained block — only touched by tour.js, nothing else references
   these classes. */
.tour-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.68);
    z-index: 3000;
    animation: fadeUp 0.18s ease;
}
/* The story editor sits at z-index 350 — well under the backdrop's 3000, so a
   highlighted element inside it is a descendant of a stacking context that's
   entirely behind the backdrop and can't poke through no matter its own
   z-index. Applied to #storyEditorOverlay only while the tour has it open, so
   the modal (and whatever inside it carries .tour-highlight) renders above the
   backdrop instead of under it. Selected by ID: #storyEditorOverlay's own
   z-index rule outranks a class, and a class here would silently lose.
   The campaign picker has no ID rule of its own, so the two-class selector is
   enough to outrank .modal-overlay's base z-index: 200 whatever the sheet
   order — but it can't replace the ID one above, which it would lose to. */
#storyEditorOverlay.tour-boost,
.modal-overlay.tour-boost { z-index: 3001; }
/* Lifting the overlay puts everything in it above the backdrop, not just the
   spotlit part — Generate Bible, Save and the tab strip all stayed clickable
   mid-tour, and a Save while the protagonist step's demo values sat in the real
   fields would have persisted them. The overlay itself keeps its pointer events
   so a stray click stops there instead of reaching .tour-backdrop, whose handler
   ends the tour; main.js's two click-outside handlers skip a .tour-boost
   overlay for the same reason. */
.tour-boost > * { pointer-events: none; }
/* The spotlight shadow is clipped by any overflow ancestor, which would confine
   the dim to the editor's body. Unclipped while the tour drives the editor;
   .modal still clips at the viewport edge. */
.modal-overlay.tour-boost .modal-body { overflow: visible; }
.tour-highlight {
    position: relative;
    z-index: 3001;
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 8px;
    box-shadow: 0 0 0 6000px rgba(0,0,0,0.68);
    /* Elements like .story-area have no background of their own — without this,
       their blank areas let .tour-backdrop's dark tint show through underneath,
       reading as darker than the page normally looks. */
    background: var(--bg);
}
/* var(--bg) above is the page's background; .modal-fullpage runs its own darker
   --panel, which is what a highlighted region inside the editor sits on. */
.modal-overlay.tour-boost .tour-highlight { background-color: var(--panel); }
/* For targets as wide as the full-page editor, where an outward outline would
   fall off the viewport edge. */
.tour-highlight.tour-inset { outline-offset: -3px; }
/* A dim built for navy is far too heavy over cream — on a pale page the same
   68% black reads as the lights going out rather than as everything but one
   element stepping back. Warm, and half the weight. */
body.theme-cream .tour-backdrop { background: rgba(58,43,29,0.34); }
body.theme-cream .tour-highlight { box-shadow: 0 0 0 6000px rgba(58,43,29,0.34); }
/* Sits above a highlight's dim in the same stacking context, so it stays lit
   alongside the highlighted element. */
.tour-lift { position: relative; z-index: 3002; }
/* These regions cover most of the editor, so there's too little left around them
   for the dim alone to read as a highlight — they have to be lit outright. The
   panels are transparent over --panel and every field in them resolves
   --input-dark, so raising those on the region lifts its whole interior; a wash
   or a brightness filter only tints, the editor's palette being near-black. */
.tour-highlight.tour-inset,
.tour-lift {
    --panel:      #16233a;
    --panel2:     #1d2f4d;
    --input-dark: #101d33;
    --border:     #2c5183;
    background-color: var(--panel);
}
/* Lit the other way on cream — the region goes brighter than the page, not
   darker, so it still reads as the thing being pointed at. */
body.theme-cream .tour-highlight.tour-inset,
body.theme-cream .tour-lift {
    --panel:      #fffaf2;
    --panel2:     #f6ecdc;
    --input-dark: #ffffff;
    --border:     #d8c3a5;
}
body.theme-espresso .tour-highlight.tour-inset,
body.theme-espresso .tour-lift {
    --panel:      #34291d;
    --panel2:     #42341f;
    --input-dark: #241c13;
    --border:     #6b5335;
}
.tour-card {
    position: fixed;
    z-index: 3002;
    width: min(90vw, 320px);
    background: var(--panel);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    box-shadow: 0 18px 44px var(--shadow-lg);
    animation: fadeUp 0.22s ease;
}
.tour-card-step {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gold);
    margin-bottom: 0.3rem;
}
.tour-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; color: var(--cream);
    margin-bottom: 0.35rem;
}
.tour-card-text {
    font-size: 0.85rem; line-height: 1.5; color: var(--text);
    margin-bottom: 0.85rem;
}
.tour-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.tour-skip-btn {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.78rem; letter-spacing: 0.05em; padding: 0.2rem;
}
.tour-skip-btn:hover { color: var(--text); }
.tour-next-btn {
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border: none; border-radius: 6px; color: #0a1220; font-weight: 600;
    font-size: 0.82rem; padding: 0.45rem 0.9rem; cursor: pointer;
}
.tour-example-badge {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    background: rgba(0,0,0,0.6); border: 1px solid var(--gold);
    border-radius: 5px; color: var(--gold);
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 0.68rem; letter-spacing: 0.08em; padding: 0.2rem 0.55rem;
    pointer-events: none;
}