/* ┌─────────────────────────────────────────────────────────────────────────────┐
   │  rundtur.css — "Filmen" (rundtur v2) + mikrohints + spotlight-reskin (25/7) │
   │                                                                             │
   │  Designsprog: is & glas — hvid/isblå flader m. blur, --navy, teal-accent,   │
   │  --radius-lg/xl, bløde spredte skygger, cubic-bezier(0.4,0,0.2,1).          │
   │  Filmens overlays (kort, caption, badge, shield, ring, hints) + reskin af   │
   │  den bevarede spotlight-engine (fp-tour-*) til samme sprog.                 │
   │  Motor: js/rundtur.js + MF_RundturFilm.cs; spotlight: speechmaticsInterop.  │
   └─────────────────────────────────────────────────────────────────────────────┘ */

/* ── Intro- og slutkort ──────────────────────────────────────────────────── */

.fp-film-kort {
    position: fixed;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%) translateY(12px);
    z-index: 9750;
    width: min(430px, calc(100vw - 32px));
    padding: 26px 28px 20px;
    border-radius: var(--radius-xl, 28px);
    border: 1px solid rgba(170, 203, 230, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 252, 0.92));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(17, 31, 41, 0.18), 0 4px 16px rgba(17, 31, 41, 0.08);
    color: var(--ink, #16212b);
    opacity: 0;
    animation: fp-film-kort-ind 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fp-film-kort-ind {
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.fp-film-kort-titel {
    margin: 0 0 10px;
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--navy, #15324a);
}

.fp-film-kort-tekst {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted, #607284);
}

.fp-film-kort-knapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-film-knap {
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.fp-film-knap-primaer {
    background: var(--navy, #15324a);
    color: #fff;
    box-shadow: 0 14px 34px rgba(21, 50, 74, 0.22), 0 3px 10px rgba(21, 50, 74, 0.12);
}

.fp-film-knap-primaer:hover {
    background: #1d4363;
    transform: translateY(-1px);
}

.fp-film-knap-ghost {
    background: transparent;
    color: var(--muted, #607284);
}

.fp-film-knap-ghost:hover {
    color: var(--navy, #15324a);
}

/* Slutkortet: vejen videre (billede 7) */

.fp-film-liste {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-film-liste li {
    position: relative;
    padding-left: 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #2a435a;
}

.fp-film-liste li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(63, 151, 166, 0.9);
}

/* Punkterne er LINKS til de andre rundture (25/7) */
.fp-film-liste-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--blue, #2f6c8f);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: left;
    transition: color 130ms ease;
}

.fp-film-liste-link:hover { color: var(--navy, #15324a); }

.fp-film-liste-tekst { color: #2a435a; }

.fp-film-liste-note {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--muted, #607284);
    text-decoration: none;
}

.fp-film-kort-fod {
    margin-top: 12px;
    font-size: 0.78rem;
    color: rgba(96, 114, 132, 0.85);
    text-align: center;
}

.fp-film-kort-igen {
    border: 0;
    background: none;
    padding: 0;
    font-size: inherit;
    color: var(--blue, #2f6c8f);
    text-decoration: underline;
    cursor: pointer;
}

/* ── Demo-badge (overstreget mikrofon) ───────────────────────────────────── */

.fp-film-root { position: fixed; inset: 0; z-index: 9700; pointer-events: none; }

.fp-demo-badge {
    position: absolute;
    top: 60px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(170, 203, 230, 0.6);
    background: rgba(238, 246, 252, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 26px rgba(80, 105, 130, 0.16);
    font-size: 0.8rem;
    font-weight: 700;
    color: #4c6278;
    animation: fp-fade-ind 250ms ease both;
}

.fp-demo-badge-mic {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="9" y="2.5" width="6" height="11" rx="3" fill="black" stroke="none"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0"/><path d="M12 18v3"/><line x1="3" y1="3" x2="21" y2="21" stroke-width="2.6"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="9" y="2.5" width="6" height="11" rx="3" fill="black" stroke="none"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0"/><path d="M12 18v3"/><line x1="3" y1="3" x2="21" y2="21" stroke-width="2.6"/></svg>') center / contain no-repeat;
}

/* Stop-hintet ("Stop konsultationen her …") støjer midt i filmen — væk. */
body.fp-film-aktiv .kp-stop-hint { display: none; }

@keyframes fp-fade-ind {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ── Caption-pillen ──────────────────────────────────────────────────────── */

/* Captionen FØLGER fokus-elementet (Mortens beslutning 25/7 aften): JS
   lægger den under/over/ved siden af fokus-rekten og glider med, når
   fokus flytter sig. Uden fokus: nederst til højre. */
.fp-caption {
    position: absolute;
    left: 0;
    top: 0;
    max-width: min(430px, calc(100vw - 84px));
    padding: 13px 22px;
    border-radius: var(--radius-lg, 18px);
    border: 1px solid rgba(170, 203, 230, 0.55);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(17, 31, 41, 0.22);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--navy, #15324a);
    text-align: left;
    opacity: 0;
    transition: opacity 220ms ease,
                left 240ms cubic-bezier(0.4, 0, 0.2, 1),
                top 240ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fp-caption.is-synlig {
    opacity: 1;
}

/* Nudge-linjen i captionen: "Tryk for at fortsætte" */
.fp-nudge {
    margin-top: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(96, 114, 132, 0.9);
}

/* ── Event-shield ────────────────────────────────────────────────────────── */

.fp-shield { position: fixed; inset: 0; z-index: 9600; pointer-events: none; }

/* 26/7 (Mortens ønske): "Kom godt i gang"-panelet skal kunne lukkes, mens
   filmen kører — løft dokken over skjoldet (9600), under filmens kort (9700+). */
body.fp-film-aktiv .kgig-dock { z-index: 9650; }

.fp-shield-panel {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    /* Geometrien glider (130 ms linear): hullet følger morfer og reflows
       blødt i stedet for at hoppe i ryk mellem intervallets opdateringer. */
    transition: background 250ms ease, backdrop-filter 250ms ease,
                left 130ms linear, top 130ms linear,
                width 130ms linear, height 130ms linear;
}

/* Scenens fokus (25/7, Mortens valg): alt uden for det aktive element gøres
   MØRKT, så fokus står lysende tydeligt frem. */
.fp-shield.is-dim .fp-shield-panel {
    background: rgba(13, 27, 40, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Usynligt låg over fokus-hullet: indholdet er synligt, men aldrig klikbart —
   beats hit-testes mod låget (se rundtur.js). */
.fp-shield-hulcover {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    transition: left 130ms linear, top 130ms linear,
                width 130ms linear, height 130ms linear;
}

/* ── Handlings-beats ─────────────────────────────────────────────────────── */

/* Blid puls på beat-målet: her udføres den rigtige handling (ingen
   nedtælling — brugeren driver filmen selv). !important + body-præfiks:
   uden dem taber pulsen specificitets-kampen til fx mic'ens egen
   is-recording-animation, og beat-markeringen udebliver/flimrer.
   Den konstante teal-kant (26/7) gør målet tydeligt — også små knapper
   som svar-knappen, hvor pulsen alene var for diskret. */
body.fp-film-aktiv .fp-film-beat-puls {
    outline: 2px solid rgba(63, 151, 166, 0.9);
    outline-offset: 2px;
    animation: fp-film-beat-puls 1.6s ease-in-out infinite !important;
}

/* "FlowPilot skriver"-markeringen: teal glød om feltet, mens typewriteren
   kører (journal-filmen, 26/7). */
.fp-film-skriver {
    box-shadow: 0 0 0 2px rgba(63, 151, 166, 0.65), 0 0 18px rgba(63, 151, 166, 0.35) !important;
    border-radius: 21px;
    transition: box-shadow 200ms ease;
}

@keyframes fp-film-beat-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 151, 166, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(63, 151, 166, 0); }
}

/* ── Ripple + puls på ægte knapper ───────────────────────────────────────── */

/* !important af samme grund som beat-pulsen: klik-kvitteringen må ikke
   tabe til elementets egne animationer (fx mic'ens is-recording). */
body.fp-film-aktiv .fp-film-ripple {
    animation: fp-film-ripple 650ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes fp-film-ripple {
    0% { box-shadow: 0 0 0 0 rgba(63, 151, 166, 0.45); transform: scale(1); }
    35% { transform: scale(0.96); }
    100% { box-shadow: 0 0 0 18px rgba(63, 151, 166, 0); transform: scale(1); }
}

/* ── Stil-omskrivningen (billede 5): sætningen skrives om live ───────────── */

.fp-omskriv {
    border-radius: 4px;
    padding: 0 2px;
}

.fp-omskriv.is-omskriver {
    background: rgba(217, 233, 242, 0.9);
    border-bottom: 2px solid rgba(63, 151, 166, 0.7);
}

.fp-omskriv.er-omskrevet {
    animation: fp-omskrevet 1100ms ease;
}

@keyframes fp-omskrevet {
    0% { background: rgba(88, 189, 125, 0.45); }
    100% { background: transparent; }
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.fp-toastholder {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fp-toast {
    position: relative;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(170, 203, 230, 0.55);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 34px rgba(17, 31, 41, 0.16);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--navy, #15324a);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: nowrap;
}

/* Fritstående toasts (efter teardown) får fast position */
body > .fp-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(8px);
    z-index: 9710;
}

.fp-toast.is-synlig { opacity: 1; transform: translateY(0); }
body > .fp-toast.is-synlig { transform: translateX(-50%); }

/* ── Spotlight-engine reskin (prompt-, mcp- og minklinik-turene) ─────────── */

.fp-tour-root {
    position: fixed;
    inset: 0;
    z-index: 9800;
    pointer-events: none;
}

body.fp-tour-active { padding: 0 !important; }

.fp-tour-highlight {
    position: fixed;
    border-radius: 14px;
    border: 1.5px solid rgba(63, 151, 166, 0.9);
    box-shadow:
        0 0 0 9999px rgba(21, 50, 74, 0.38),
        0 0 22px rgba(63, 151, 166, 0.35);
    transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1), top 220ms cubic-bezier(0.4, 0, 0.2, 1),
                width 220ms cubic-bezier(0.4, 0, 0.2, 1), height 220ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fp-tour-card {
    position: fixed;
    width: min(350px, calc(100vw - 24px));
    border-radius: var(--radius-lg, 18px);
    border: 1px solid rgba(170, 203, 230, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 252, 0.94));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--ink, #16212b);
    box-shadow: 0 20px 50px rgba(6, 22, 38, 0.28);
    padding: 16px 18px 14px;
    pointer-events: auto;
    transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1), top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prik-fremdrift i stedet for "3/12"-tælleren */
.fp-tour-counter {
    display: flex;
    gap: 5px;
    margin-bottom: 9px;
}

.fp-tour-counter .fp-tour-prik {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(96, 114, 132, 0.25);
    transition: background 200ms ease, transform 200ms ease;
}

.fp-tour-counter .fp-tour-prik.is-aktiv {
    background: rgba(63, 151, 166, 0.95);
    transform: scale(1.25);
}

.fp-tour-title {
    font-size: 1rem;
    line-height: 1.22;
    margin: 0;
    color: var(--navy, #15324a);
}

.fp-tour-text {
    margin: 7px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #3c5369;
    white-space: pre-line;
}

.fp-tour-actions {
    margin-top: 13px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.fp-tour-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease, transform 110ms ease;
}

.fp-tour-btn:disabled { opacity: 0.4; cursor: default; }

.fp-tour-btn-primary {
    background: var(--navy, #15324a);
    color: #f6fbff;
}

.fp-tour-btn-primary:hover:not(:disabled) { background: #1d4363; }

.fp-tour-btn-secondary {
    background: rgba(217, 233, 242, 0.55);
    border-color: rgba(170, 203, 230, 0.5);
    color: #2a435a;
}

.fp-tour-btn-ghost {
    background: transparent;
    color: #4c6278;
}

.fp-tour-target {
    outline: 2px solid rgba(63, 151, 166, 0.85);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ── Reduceret bevægelse ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fp-film-kort {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .fp-demo-badge {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Uden glide: captionen hopper direkte til sin nye plads. */
    .fp-caption,
    .fp-toast {
        transition: opacity 150ms ease;
    }

    .fp-film-ripple,
    .fp-omskriv.er-omskrevet {
        animation: none;
    }

    body.fp-film-aktiv .fp-film-beat-puls {
        animation: none !important;
        outline: 2px solid rgba(63, 151, 166, 0.85);
        outline-offset: 2px;
    }

    .fp-shield-panel,
    .fp-shield-hulcover { transition: none; }

    .fp-tour-highlight,
    .fp-tour-card { transition: none; }
}