/* Bibeldykk — alle stiler, ekstrahert fra index.html. */

        :root {
            --bg: #f5f1eb;
            --card-bg: #ffffff;
            --text: #2c2c2c;
            --text-muted: #6b6b6b;
            --accent: #a83232;
            --accent-hover: #8c2828;
            --border: #d4cfc7;
            --error: #9c3030;
            --error-bg: #fdf0f0;
            --verse-num: #a83232;
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
            /* Motion-tokens */
            --ease-out: cubic-bezier(.16, 1, .3, 1);
            --ease-in-out: cubic-bezier(.4, 0, .2, 1);
            --dur-fast: 150ms;
            --dur-med: 260ms;
            --dur-slow: 420ms;
        }

        html { scroll-behavior: smooth; touch-action: manipulation; }
        @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

        [data-theme="dark"] {
            --bg: #1a1a1e;
            --card-bg: #26262b;
            --text: #e0e0e0;
            --text-muted: #9a9a9a;
            --accent: #c94444;
            --accent-hover: #b33636;
            --border: #3a3a40;
            --error: #e05555;
            --error-bg: #2e1a1a;
            --verse-num: #c94444;
            --shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html {
            /* Reservér plass til scrollbaren også når innholdet ikke trenger den,
               så sidens vannrette layout ikke "hopper" når man bytter mellom kort
               og lengre kapitler. */
            scrollbar-gutter: stable;
            /* html må arve samme bakgrunn som body — ellers vises gutter-feltet
               (eller en kort overflow-clip ved swipe) som hvit stripe på mobil. */
            background: var(--bg);
            /* Kompenserer for fast header + søkefelt (mobil) ved scrollIntoView-kall
               som ikke bruker _scrollToVerse-hjelperen. */
            scroll-padding-top: 130px;
            /* Deaktiver iOS sin native pull-to-refresh og bounce-overscroll
               så vi får full kontroll over vår egen PTR-implementasjon
               (iOS 16+). Påvirker kun y-aksen så side-swipes til nav bevares. */
            overscroll-behavior-y: contain;
        }

        /* PWA-splash — rød full-skjerm overlay, vises ved oppstart. */
        .app-splash {
            position: fixed; inset: 0;
            background: #a83232;
            display: flex; align-items: center; justify-content: center;
            z-index: 9999;
            opacity: 1;
            visibility: visible;
            transition: opacity 360ms ease, visibility 0s linear 360ms;
            pointer-events: none;
        }
        .app-splash.hidden {
            opacity: 0;
            visibility: hidden;
        }
        .app-splash-inner {
            display: flex; flex-direction: column; align-items: center; gap: 20px;
            animation: appSplashPulse 1.6s ease-in-out infinite;
        }
        .app-splash-logo {
            width: 96px; height: 96px;
            border-radius: 22px;
            background: white;
            padding: 14px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
            color: var(--accent);
            --logo-bg: white;
            display: block;
        }
        .app-splash-name {
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: white;
            font-size: 1.4rem;
            font-weight: 600;
            letter-spacing: 0.6px;
        }
        @keyframes appSplashPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50%      { transform: scale(1.04); opacity: 0.92; }
        }
        @media (max-width: 700px) {
            /* iOS Safari leser den underliggende html-bredden, ikke body —
               så hvis et barn-element strikker html bredere enn viewport
               (popover, sticky, lazy-rendret komponent), zoomer iOS effektivt
               ut hele siden for å passe inn alt. overflow-x: clip på html
               fanger overflow på root-nivå UTEN å lage en ny scroll-/
               positioning-kontekst (forskjell fra 'hidden'), så sticky-
               elementer og touch-swipes oppfører seg normalt.
               Støttet i Safari 16+, Chrome 90+, Firefox 81+ — fallback til
               hidden er trygt for eldre nettlesere via shorthand-rekkefølge. */
            html {
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;   /* fallback */
                overflow-x: clip;     /* moderne — overstyrer hidden hvis støttet */
                overflow-anchor: auto;
            }
            body {
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;
                overflow-x: clip;
                overflow-anchor: auto;
            }
        }
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100dvh;
            /* Slå av tekst-utheving overalt som standard. Bare bibelvers og
               input-felter skal være selectable — overstyres under. */
            -webkit-user-select: none;
            user-select: none;
        }
        /* Tillat utheving på faktisk bibeltekst og i alle input-felter / contenteditable. */
        .verse-content,
        .verse-text,
        input,
        textarea,
        [contenteditable="true"] {
            -webkit-user-select: text;
            user-select: text;
        }

        .app-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: var(--accent);
            color: white;
            z-index: 200;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            /* iOS PWA standalone: dytt innhold under status bar/notch */
            padding-top: env(safe-area-inset-top, 0px);
        }
        .app-header-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 10px 24px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-self: center;
            padding: 0;
            border: 0;
            background: transparent;
            color: white;
            font: inherit;
            cursor: pointer;
            /* Fjern stygg hvit tap-highlight på iOS/Android ved trykk */
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            user-select: none;
        }
        /* Ingen hover/active/focus-effekter på header-tittelen — den brukes
           kun til å gå tilbake til forsiden, og brukeren har ingen behov
           for visuell respons der. Vi nuller ut ALL feedback (også på
           barn-elementer som svg/h1, hvor nettleseren ellers tegner en
           hvit/grå tap-state) for å unngå det stygge presse-utseendet
           brukeren rapporterte. */
        .header-left,
        .header-left *,
        .header-left:focus,
        .header-left:focus-visible,
        .header-left:active,
        .header-left:hover,
        .header-left *:focus,
        .header-left *:focus-visible,
        .header-left *:active,
        .header-left *:hover {
            outline: none !important;
            opacity: 1 !important;
            background-color: transparent !important;
            -webkit-tap-highlight-color: transparent !important;
            /* Browserens default :active gjør tekst svart — overstyr så
               tittelen forblir hvit ved trykk (særlig på mobil). */
            color: white !important;
        }
        .header-logo {
            height: 36px;
            width: 36px;
            display: block;
            color: white;
            --logo-bg: var(--accent);
        }
        .app-header h1 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.5px; }
        .header-actions { display: flex; gap: 6px; align-items: center; }
        .header-actions-right { justify-self: end; }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .header-icon-btn {
            background: transparent;
            border: none;
            color: white;
            width: 38px; height: 38px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1.15rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
            /* Fjern stygg hvit tap-highlight på iOS/Android */
            -webkit-tap-highlight-color: transparent;
        }
        .header-icon-btn:hover { background-color: rgba(255,255,255,0.1); }
        .header-icon-btn:active { background-color: rgba(255,255,255,0.18); }

        /* ── "Tilbake til <vers>"-banner som vises etter klikk på en
              kryssreferanse — sticky under header-en, så brukeren kommer
              tilbake til verset de jobbet med uten å bruke browser-tilbake. */
        .xref-back-banner {
            position: fixed;
            left: 50%;
            top: calc(env(safe-area-inset-top, 0px) + 64px);
            transform: translateX(-50%);
            z-index: 150;
            pointer-events: none;
            animation: xrefBackIn 220ms cubic-bezier(.16, 1, .3, 1);
        }
        @keyframes xrefBackIn {
            from { opacity: 0; transform: translate(-50%, -8px); }
            to   { opacity: 1; transform: translate(-50%, 0); }
        }
        .xref-back-btn {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px 8px 12px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--accent);
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
            transition: background 130ms, border-color 130ms, transform 130ms;
            -webkit-tap-highlight-color: transparent;
        }
        .xref-back-btn:hover,
        .xref-back-btn:focus-visible {
            background: rgba(168, 50, 50, 0.06);
            border-color: var(--accent);
            outline: none;
        }
        .xref-back-btn:active { transform: translateY(1px); }
        .xref-back-btn strong { color: var(--text); font-weight: 700; }
        [data-theme="dark"] .xref-back-btn:hover,
        [data-theme="dark"] .xref-back-btn:focus-visible {
            background: rgba(201, 68, 68, 0.14);
        }
        @media (max-width: 600px) {
            .xref-back-banner { top: calc(env(safe-area-inset-top, 0px) + 60px); }
            .xref-back-btn { font-size: 0.88rem; padding: 7px 14px 7px 10px; }
        }

        /* ── Hovedmeny (hamburger) ── */
        .nav-backdrop {
            position: fixed; inset: 0;
            background: rgba(0, 0, 0, 0.42);
            opacity: 0;
            visibility: hidden;
            transition: opacity 220ms ease, visibility 0s linear 220ms;
            z-index: 200;
        }
        .nav-backdrop.open {
            opacity: 1;
            visibility: visible;
            transition: opacity 220ms ease, visibility 0s;
        }
        .nav-drawer {
            position: fixed;
            top: 0; left: 0;
            width: 320px; max-width: 92vw;
            height: 100dvh;
            background: var(--card-bg);
            color: var(--text);
            box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18);
            transform: translateX(-100%);
            transition: transform 260ms cubic-bezier(.22,.86,.24,1);
            z-index: 210;
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        .nav-drawer.open { transform: translateX(0); }
        .nav-drawer-top {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 14px;
            padding-top: calc(12px + env(safe-area-inset-top, 0px));
            border-bottom: 1px solid var(--border);
            background: var(--accent);
            color: white;
        }
        .nav-drawer-top .header-icon-btn,
        .nav-drawer-top .dark-toggle { color: white; }
        /* Knapperad rett under topp-fanen — tilbakemelding og lenke til
           annen søketjeneste. Like styles for begge så de fremstår som "samme" knapp. */
        .nav-drawer-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
        }
        .nav-drawer-action-btn {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            background: rgba(168, 50, 50, 0.06);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-size: 0.9rem;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
        }
        .nav-drawer-action-btn:hover {
            background: rgba(168, 50, 50, 0.12);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        [data-theme="dark"] .nav-drawer-action-btn { background: rgba(201, 68, 68, 0.10); }
        [data-theme="dark"] .nav-drawer-action-btn:hover { background: rgba(201, 68, 68, 0.18); }
        .nav-drawer-action-icon { font-size: 1.05rem; line-height: 1; }
        .nav-drawer-tree {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 6px 0;
        }
        .nav-tree-section { border-bottom: 1px solid var(--border); }
        .nav-tree-section:last-child { border-bottom: none; }
        .nav-tree-row {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 16px;
            cursor: pointer;
            font-size: 0.95rem;
            user-select: none;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            color: inherit;
            transition: background 120ms ease;
        }
        .nav-tree-row:hover { background: rgba(168, 50, 50, 0.06); }
        [data-theme="dark"] .nav-tree-row:hover { background: rgba(201, 68, 68, 0.10); }
        .nav-tree-row.section-head { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.3px; }
        .nav-tree-row.book-head { padding-left: 28px; font-size: 0.9rem; color: var(--text-muted); }
        .nav-tree-row.book-head[aria-expanded="true"] { color: var(--text); font-weight: 600; }
        .nav-tree-row .nav-caret {
            width: 14px; flex: 0 0 auto;
            transition: transform 160ms ease;
            color: var(--text-muted);
        }
        .nav-tree-row[aria-expanded="true"] .nav-caret { transform: rotate(90deg); color: var(--accent); }
        .nav-tree-children { display: none; }
        .nav-tree-children.open { display: block; animation: navExpand 180ms cubic-bezier(.22,.86,.24,1); }
        @keyframes navExpand {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .nav-chapter-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            padding: 8px 16px 14px 44px;
        }
        .nav-chapter-pill {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 32px;
            padding: 4px 8px;
            border: 1px solid var(--border);
            background: transparent;
            border-radius: 999px;
            font-size: 0.82rem;
            color: var(--text);
            cursor: pointer;
            font-family: inherit;
            transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
        }
        .nav-chapter-pill:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }
        @media (max-width: 700px) {
            .nav-chapter-grid { grid-template-columns: repeat(4, 1fr); }
        }
        /* Footer i drawer — viser KI-notatet kun når man IKKE er på landingssiden.
           Bruker body.is-home som settes i renderAll. */
        .nav-drawer-footer {
            flex: 0 0 auto;
            border-top: 1px solid var(--border);
            padding: 12px 16px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.4;
            display: none;
        }
        body:not(.is-home) .nav-drawer-footer { display: block; }
        body:not(.is-home) .ai-footer-note { display: none; }

        /* ── Bibelnavigator-popup ── */
        .bnav-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.32);
            opacity: 0; visibility: hidden;
            transition: opacity 200ms ease, visibility 0s linear 200ms;
            z-index: 190;
        }
        .bnav-backdrop.open {
            opacity: 1; visibility: visible;
            transition: opacity 200ms ease;
        }
        .bnav-popup {
            position: fixed;
            top: calc(58px + env(safe-area-inset-top, 0px));
            left: 12px; right: 12px;
            max-width: 460px;
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
            z-index: 300;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-8px);
            visibility: hidden;
            transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
        }
        .bnav-popup.open {
            opacity: 1; transform: translateY(0); visibility: visible;
            transition: opacity 200ms ease, transform 200ms ease;
        }
        /* Inline-anchored variant: popupen posisjoneres rett under en knapp
           i empty-state ("Åpne en bok"-lenken) i stedet for å henge i toppen
           av viewporten. Bruker --bnav-inline-top satt fra JS.
           Maks-høyde sørger for at popupen ikke flyter ut av bunnen — det
           overskytende blir scrollbart i selve listen via .bnav-body. */
        .bnav-popup.inline-anchored {
            top: var(--bnav-inline-top, 80px);
            left: 50%;
            right: auto;
            transform: translate(-50%, -8px);
            width: calc(100vw - 24px);
            max-width: 460px;
            max-height: calc(100dvh - var(--bnav-inline-top, 80px) - 16px);
            display: flex;
            flex-direction: column;
        }
        .bnav-popup.inline-anchored.open {
            transform: translate(-50%, 0);
        }
        /* Indre scroll skjer i body, ikke i hele popupen (breadcrumb skal stå fast) */
        .bnav-popup.inline-anchored .bnav-body {
            max-height: calc(100dvh - var(--bnav-inline-top, 80px) - 80px);
            min-height: 0;
        }
        @media (min-width: 500px) {
            .bnav-popup.inline-anchored { width: 420px; min-width: auto; }
        }

        @media (min-width: 500px) {
            .bnav-popup { left: 12px; right: auto; min-width: 340px; }
        }
        .bnav-breadcrumb {
            display: flex; align-items: center; gap: 4px;
            max-height: 0; overflow: hidden;
            padding: 0 14px;
            transition: max-height 0.22s ease, padding 0.22s ease;
        }
        .bnav-breadcrumb.has-content {
            max-height: 64px;
            padding: 12px 14px 4px;
        }
        /* Tilbake-knapper i breadcrumben: gjort tydelig større og mer
           klikkbart-utseende enn den opprinnelige pille-stilen, slik at
           "gå tilbake til testament/bok" er åpenbart for brukeren.
           Pilikonet ← bekrefter retningen. */
        .bnav-crumb-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(168,50,50,0.10);
            border: 1.5px solid rgba(168,50,50,0.35);
            border-radius: 10px;
            color: var(--accent);
            font-size: 0.92rem; font-weight: 700;
            padding: 7px 14px;
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
            transition: background 140ms, border-color 140ms, transform 100ms;
        }
        .bnav-crumb-btn:hover {
            background: rgba(168,50,50,0.18);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .bnav-crumb-btn:active { transform: translateY(0); }
        .bnav-crumb-arrow {
            font-size: 1.05rem;
            line-height: 1;
            font-weight: 700;
        }
        [data-theme="dark"] .bnav-crumb-btn {
            background: rgba(201,68,68,0.14);
            border-color: rgba(201,68,68,0.4);
        }
        [data-theme="dark"] .bnav-crumb-btn:hover {
            background: rgba(201,68,68,0.24);
            border-color: var(--accent);
        }
        .bnav-crumb-sep { color: var(--text-muted); font-size: 1.05rem; padding: 0 2px; font-weight: 500; }
        .bnav-body {
            padding: 14px;
            max-height: calc(100dvh - 180px);
            overflow-y: auto;
        }
        @keyframes bnavLeave {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-10px); }
        }
        @keyframes bnavEnter {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .bnav-body.leaving  { animation: bnavLeave 0.18s ease forwards; pointer-events: none; }
        .bnav-body.entering { animation: bnavEnter 0.22s ease forwards; }
        .bnav-testament-grid { display: flex; flex-direction: column; gap: 10px; }
        .bnav-testament-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 16px 20px;
            background: rgba(168,50,50,0.05);
            border: 1.5px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-size: 1rem; font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 140ms, border-color 140ms, transform 100ms;
        }
        .bnav-testament-btn:hover {
            background: rgba(168,50,50,0.12);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .bnav-testament-count {
            font-size: 0.78rem; font-weight: 400;
            color: var(--text-muted); margin-top: 3px;
        }
        [data-theme="dark"] .bnav-testament-btn { background: rgba(201,68,68,0.08); }
        [data-theme="dark"] .bnav-testament-btn:hover { background: rgba(201,68,68,0.16); }
        /* Bok-oversikt: 3-kolonners grid med kompakte knapper.
           Lange boknavn brytes med word-break. Body scroller når
           39 GT-bøker overstiger popup-høyden. */
        .bnav-pill-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        .bnav-pill {
            padding: 7px 5px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-size: 0.76rem;
            font-family: inherit;
            cursor: pointer;
            text-align: center;
            line-height: 1.2;
            word-break: break-word;
            transition: background 120ms, border-color 120ms, color 120ms;
        }
        .bnav-pill:hover { background: var(--accent); border-color: var(--accent); color: white; }
        .bnav-chapter-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
        }
        .bnav-chapter-pill {
            display: flex; align-items: center; justify-content: center;
            padding: 7px 4px;
            background: transparent;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 0.85rem;
            font-family: inherit;
            cursor: pointer;
            transition: background 120ms, border-color 120ms, color 120ms;
        }
        .bnav-chapter-pill:hover { background: var(--accent); border-color: var(--accent); color: white; }
        @media (max-width: 380px) { .bnav-chapter-grid { grid-template-columns: repeat(5, 1fr); } }

        /* "Markerte passasjer"-knappen i bibelnavigator-popup */
        .bnav-marked-section {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .bnav-marked-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 14px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-size: 0.95rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .bnav-marked-btn:hover { background: var(--bg-subtle, rgba(0,0,0,0.04)); border-color: var(--accent); color: var(--accent); }
        [data-theme="dark"] .bnav-marked-btn:hover { background: rgba(255,255,255,0.06); }
        .bnav-marked-btn .bnav-marked-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 7px;
            background: var(--accent);
            color: white;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            margin-left: auto;
        }
        .bnav-marked-btn .bnav-marked-count.is-zero { display: none; }
        /* Liten meta-tekst (f.eks. e-post ved siden av "Logg ut") */
        .bnav-marked-btn .bnav-marked-meta {
            font-size: 0.74rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: auto;
            max-width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* "Markerte passasjer"-overlay */
        .mp-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 400;
            opacity: 0;
            visibility: hidden;
            transition: opacity 200ms ease, visibility 0s linear 200ms;
        }
        .mp-backdrop.open {
            opacity: 1; visibility: visible;
            transition: opacity 200ms ease;
        }
        .mp-overlay {
            position: fixed;
            top: calc(50px + env(safe-area-inset-top, 0px));
            bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            left: 12px; right: 12px;
            max-width: 720px;
            margin: 0 auto;
            background: var(--bg);
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10);
            z-index: 401;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transform: translateY(8px);
            visibility: hidden;
            transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
            overflow: hidden;
        }
        .mp-overlay.open {
            opacity: 1; transform: translateY(0); visibility: visible;
            transition: opacity 220ms ease, transform 220ms ease;
        }
        .mp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 11px 16px 9px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .mp-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text); }
        .mp-close-btn {
            width: 36px; height: 36px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 1.3rem;
            font-weight: 300;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
        .mp-close-btn:hover { color: var(--accent); border-color: var(--accent); }
        .mp-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 16px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .mp-color-filters { display: flex; gap: 6px; flex-wrap: wrap; }
        .mp-color-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 10px;
            background: transparent;
            border: 1.5px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mp-color-chip:hover { border-color: var(--text-muted); }
        .mp-color-chip.active { background: var(--card-bg); color: var(--text); border-color: var(--accent); }
        .mp-color-chip-dot {
            width: 13px; height: 13px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.15);
        }
        .mp-color-chip-icon {
            font-size: 0.95em;
            line-height: 1;
        }
        .mp-color-chip-count { font-weight: 600; opacity: 0.75; }
        .mp-toolbar-right { display: flex; gap: 8px; align-items: center; }
        /* "Rediger fargenavn"-snarvei i markeringer-toolbar-en */
        .mp-edit-names-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 10px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 0.82rem;
            cursor: pointer;
            transition: background 130ms, color 130ms, border-color 130ms;
            -webkit-tap-highlight-color: transparent;
        }
        .mp-edit-names-btn:hover,
        .mp-edit-names-btn:focus-visible {
            background: rgba(168, 50, 50, 0.08);
            color: var(--accent);
            border-color: var(--accent);
            outline: none;
        }
        [data-theme="dark"] .mp-edit-names-btn:hover,
        [data-theme="dark"] .mp-edit-names-btn:focus-visible {
            background: rgba(201, 68, 68, 0.14);
        }
        /* På små skjermer: skjul tekst, vis kun ikon for å spare plass */
        @media (max-width: 480px) {
            .mp-edit-names-btn .men-text { display: none; }
            .mp-edit-names-btn { padding: 6px 9px; }
        }

        .mp-sort {
            padding: 6px 10px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 0.82rem;
            font-family: inherit;
            cursor: pointer;
        }
        .mp-action-btn {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mp-action-btn:hover { border-color: var(--accent); color: var(--accent); }
        .mp-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px 14px 14px;
        }
        .mp-empty {
            text-align: center;
            color: var(--text-muted);
            padding: 40px 16px;
            font-size: 0.95rem;
        }
        .mp-section-heading {
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            padding: 14px 0 6px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 6px;
        }
        .mp-entry {
            display: grid;
            grid-template-columns: 14px 1fr;
            gap: 10px;
            padding: 10px 8px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            border-radius: 8px;
            transition: background 0.12s;
        }
        .mp-entry:hover { background: var(--bg-subtle, rgba(0,0,0,0.03)); }
        [data-theme="dark"] .mp-entry:hover { background: rgba(255,255,255,0.04); }
        .mp-entry-color-stripe {
            width: 4px;
            border-radius: 4px;
            margin-top: 2px;
            margin-bottom: 2px;
            align-self: stretch;
            justify-self: center;
            background: var(--border);
        }
        /* Notat-bare entries: dempet stripe i nøytral farge så de skiller seg
           visuelt fra fargemarkerte vers */
        .mp-entry-color-stripe.mp-entry-stripe-note-only {
            background: var(--text-muted);
            opacity: 0.35;
        }
        .mp-entry-content {
            display: flex; flex-direction: column; gap: 4px;
            min-width: 0;
        }
        .mp-entry-ref {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--accent);
        }
        .mp-entry-text {
            font-size: 0.92rem;
            line-height: 1.45;
            color: var(--text);
        }
        /* Notat-blokk: kompakt callout med blyant-ikon til venstre. Ikonet
           signaliserer "dette er brukerens notat" uten å ta en hel rad. */
        .mp-entry-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 6px;
            padding: 8px 12px;
            background: var(--bg-subtle, rgba(0, 0, 0, 0.04));
            border-left: 3px solid var(--text-muted);
            border-radius: 0 8px 8px 0;
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--text);
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        [data-theme="dark"] .mp-entry-note {
            background: rgba(255, 255, 255, 0.04);
            border-left-color: var(--text-muted);
        }
        .mp-entry-note-icon {
            font-size: 0.95rem;
            line-height: 1.5;
            flex-shrink: 0;
            opacity: 0.65;
        }
        .mp-entry-note-body {
            flex: 1;
            min-width: 0;
            color: var(--text);
        }
        /* Kapittel-entries: litt mindre, ingen "verse text"-blokk */
        .mp-entry-chapter .mp-entry-ref {
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .mp-entry-meta {
            font-size: 0.74rem;
            color: var(--text-muted);
            font-style: italic;
        }
        .mp-loading-row {
            opacity: 0.55;
            font-style: italic;
            color: var(--text-muted);
        }

        /* ── Sync-konflikt-modal ───────────────────────────────────────── */
        .sync-conflict-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 520;
            opacity: 0; visibility: hidden;
            transition: opacity 200ms ease, visibility 0s linear 200ms;
        }
        .sync-conflict-backdrop.open {
            opacity: 1; visibility: visible;
            transition: opacity 200ms ease;
        }
        .sync-conflict-modal {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, calc(-50% + 8px));
            width: calc(100% - 32px);
            max-width: 600px;
            max-height: calc(100vh - 64px);
            background: var(--bg);
            border-radius: 16px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.28);
            z-index: 521;
            display: flex; flex-direction: column;
            opacity: 0; visibility: hidden;
            transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
        }
        .sync-conflict-modal.open {
            opacity: 1; visibility: visible;
            transform: translate(-50%, -50%);
            transition: opacity 220ms ease, transform 220ms ease;
        }
        .sync-conflict-head {
            padding: 22px 24px 12px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .sync-conflict-head h2 {
            margin: 0 0 6px;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
            display: flex; align-items: center; gap: 8px;
        }
        .sync-conflict-head p {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.88rem;
            line-height: 1.5;
        }
        .sync-conflict-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px 24px 12px;
        }
        .sync-conflict-item {
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }
        .sync-conflict-item:last-child { border-bottom: none; }
        .sync-conflict-ref {
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 10px;
        }
        .sync-conflict-choices {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        @media (max-width: 480px) {
            .sync-conflict-choices { grid-template-columns: 1fr; }
        }
        .sync-conflict-choice {
            display: flex; flex-direction: column;
            padding: 12px 14px;
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
            font-family: inherit;
        }
        .sync-conflict-choice:hover {
            border-color: var(--accent);
        }
        .sync-conflict-choice.picked {
            border-color: var(--accent);
            background: rgba(168, 50, 50, 0.06);
        }
        [data-theme="dark"] .sync-conflict-choice.picked {
            background: rgba(201, 68, 68, 0.14);
        }
        .sync-conflict-choice-source {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .sync-conflict-choice-content {
            display: flex; align-items: center; gap: 10px;
        }
        .sync-conflict-color-swatch {
            width: 28px; height: 28px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.18);
            flex-shrink: 0;
        }
        .sync-conflict-color-name {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text);
        }
        .sync-conflict-date {
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 8px;
            font-style: italic;
        }
        .sync-conflict-note-merge-info {
            margin-top: 8px;
            padding: 8px 10px;
            background: var(--bg-subtle, rgba(0,0,0,0.04));
            border-radius: 8px;
            font-size: 0.78rem;
            color: var(--text-muted);
            display: flex; align-items: center; gap: 6px;
        }
        [data-theme="dark"] .sync-conflict-note-merge-info {
            background: rgba(255,255,255,0.04);
        }
        .sync-conflict-foot {
            padding: 14px 24px 22px;
            border-top: 1px solid var(--border);
            display: flex; gap: 10px; flex-wrap: wrap;
            flex-shrink: 0;
        }
        .sync-conflict-foot .bulk-btns {
            display: flex; gap: 8px; flex: 1; flex-wrap: wrap;
        }
        .sync-conflict-bulk-btn {
            padding: 8px 14px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .sync-conflict-bulk-btn:hover {
            border-color: var(--text);
            color: var(--text);
        }
        .sync-conflict-apply-btn {
            padding: 10px 20px;
            background: var(--accent);
            border: none;
            border-radius: 999px;
            color: white;
            font-size: 0.92rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s, opacity 0.15s;
        }
        .sync-conflict-apply-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .sync-conflict-apply-btn:hover:not(:disabled) { background: #8e2828; }
        .sync-conflict-progress {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 8px;
        }

        /* ── Sync-merge-toast (notater flettet automatisk) ─────────────── */
        .sync-merge-toast {
            position: fixed;
            top: 16px;
            right: 16px;
            max-width: 360px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            border-radius: 10px;
            padding: 12px 14px 12px 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.18);
            z-index: 510;
            font-size: 0.88rem;
            color: var(--text);
            line-height: 1.45;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 220ms ease, transform 220ms ease;
            pointer-events: none;
        }
        .sync-merge-toast.open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .sync-merge-toast-title {
            font-weight: 700;
            margin-bottom: 4px;
            display: flex; align-items: center; gap: 6px;
        }
        .sync-merge-toast-link {
            color: var(--accent);
            text-decoration: underline;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            font-size: inherit;
        }

        /* ── Auth (pålogging) ──────────────────────────────────────────── */
        .auth-modal-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 500;
            opacity: 0; visibility: hidden;
            transition: opacity 200ms ease, visibility 0s linear 200ms;
        }
        .auth-modal-backdrop.open {
            opacity: 1; visibility: visible;
            transition: opacity 200ms ease;
        }
        .auth-modal {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, calc(-50% + 8px));
            width: calc(100% - 32px);
            max-width: 420px;
            background: var(--bg);
            border-radius: 16px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.24);
            z-index: 501;
            padding: 26px 26px 22px;
            opacity: 0; visibility: hidden;
            transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
        }
        .auth-modal.open {
            opacity: 1; visibility: visible;
            transform: translate(-50%, -50%);
            transition: opacity 220ms ease, transform 220ms ease;
        }
        .auth-modal-close {
            position: absolute; top: 12px; right: 12px;
            width: 32px; height: 32px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 1.2rem; font-weight: 300;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
        .auth-modal-close:hover { color: var(--accent); border-color: var(--accent); }
        .auth-modal-title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; color: var(--text); }
        .auth-modal-text { margin: 0 0 18px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
        .auth-modal form { display: flex; flex-direction: column; gap: 10px; }
        .auth-modal input[type="email"] {
            padding: 12px 14px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-size: 1rem;
            font-family: inherit;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .auth-modal input[type="email"]:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.18);
        }
        .auth-submit-btn {
            padding: 12px 18px;
            background: var(--accent);
            border: none;
            border-radius: 999px;
            color: white;
            font-size: 0.95rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
        }
        .auth-submit-btn:hover { background: #8e2828; }
        .auth-submit-btn:active { transform: translateY(1px); }
        .auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        /* Sekundær-knapp i kode-trinnet ("Bruk annen e-post") */
        .auth-link-btn {
            margin-top: 4px;
            padding: 8px 12px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.84rem;
            font-family: inherit;
            cursor: pointer;
            text-decoration: underline;
            align-self: center;
        }
        .auth-link-btn:hover { color: var(--accent); }
        /* Kode-input: monospaced og stort, lett å lese og taste */
        .auth-modal input#authCodeInput {
            padding: 14px 16px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
            font-size: 1.4rem;
            font-weight: 600;
            letter-spacing: 6px;
            text-align: center;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .auth-modal input#authCodeInput:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.18);
        }
        .auth-msg {
            margin-top: 14px;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 0.88rem;
            line-height: 1.4;
            display: none;
        }
        .auth-msg.visible { display: block; }
        .auth-msg.ok    { background: rgba(0, 130, 60, 0.10); color: #1d7a3f; border: 1px solid rgba(0,130,60,0.3); }
        .auth-msg.err   { background: rgba(200, 50, 50, 0.10); color: var(--accent); border: 1px solid rgba(200,50,50,0.3); }
        [data-theme="dark"] .auth-msg.ok  { background: rgba(60, 180, 100, 0.15); color: #5fcc88; }
        [data-theme="dark"] .auth-msg.err { background: rgba(220, 80, 80, 0.18); color: #ee8888; }

        /* ── Sync-nudge-toast (slides in fra bunnen) ───────────────────── */
        .sync-nudge-toast {
            position: fixed;
            left: 50%;
            bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            transform: translateX(-50%) translateY(160%);
            width: calc(100% - 24px);
            max-width: 440px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.05);
            padding: 11px 12px;
            z-index: 450;
            display: flex; align-items: center; gap: 10px;
            opacity: 0;
            /* Smooth-flytt også når bunn-offset endres (drawer toggles) */
            transition: transform 320ms cubic-bezier(.2,.8,.25,1),
                        opacity 240ms ease,
                        bottom 280ms cubic-bezier(.2,.8,.25,1);
        }
        .sync-nudge-toast.visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
        .sync-nudge-icon {
            font-size: 1.15rem;
            flex-shrink: 0;
            line-height: 1;
        }
        .sync-nudge-text {
            flex: 1; min-width: 0;
            font-size: 0.88rem;
            line-height: 1.4;
            color: var(--text);
            /* tillat to-linjers wrap på mobil i stedet for å squeeze action-knappen */
            overflow-wrap: anywhere;
        }
        .sync-nudge-action {
            padding: 7px 13px;
            background: var(--accent);
            border: none;
            border-radius: 999px;
            color: white;
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: background 0.15s, transform 0.1s;
        }
        .sync-nudge-action:hover { background: #8e2828; }
        .sync-nudge-action:active { transform: scale(0.97); }
        .sync-nudge-close {
            width: 26px; height: 26px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.15rem;
            font-weight: 300;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
            border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0;
        }
        .sync-nudge-close:hover { background: var(--bg-subtle, rgba(0,0,0,0.06)); color: var(--text); }

        /* Mobil: kompakter, mindre padding, lavere skygge */
        @media (max-width: 700px) {
            .sync-nudge-toast {
                width: calc(100% - 16px);
                max-width: 100%;
                padding: 10px 11px;
                gap: 9px;
                border-radius: 12px;
                box-shadow: 0 6px 20px rgba(0,0,0,0.16);
            }
            .sync-nudge-icon { font-size: 1.05rem; }
            .sync-nudge-text {
                font-size: 0.83rem;
                line-height: 1.35;
            }
            .sync-nudge-action {
                padding: 6px 11px;
                font-size: 0.77rem;
            }
            .sync-nudge-close {
                width: 24px; height: 24px;
                font-size: 1.05rem;
            }
        }

        /* ── Konto-seksjon i Markeringer og notater-overlay ────────────── */
        .mp-account {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }
        .mp-login-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 11px 14px;
            background: transparent;
            border: 1px dashed var(--border);
            border-radius: 10px;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mp-login-link:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
        .mp-account-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            padding: 4px 2px;
        }
        .mp-account-email {
            font-size: 0.88rem;
            color: var(--text);
            font-weight: 600;
            display: flex; align-items: center; gap: 6px;
        }
        .mp-account-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .mp-account-actions button {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mp-account-actions .mp-logout-btn:hover { border-color: var(--accent); color: var(--accent); }
        .mp-account-actions .mp-delete-btn:hover { border-color: #c44; color: #c44; }
        .mp-sync-status {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 6px;
            text-align: center;
        }
        .mp-sync-status.syncing { color: var(--accent); }

        /* Innstillinger-side: seksjons-headinger og hjelpe-tekst */
        .mp-settings-section {
            padding: 10px 4px;
        }
        .mp-settings-heading {
            margin: 0 0 12px;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
        }
        .mp-settings-help {
            margin: 12px 0 0;
            color: var(--text-muted);
            font-size: 0.85rem;
            line-height: 1.5;
        }
        /* Settings-side har enklere mp-account-info: vertikal flow */
        #settingsOverlay .mp-account-info {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            padding: 0;
        }
        #settingsOverlay .mp-account-email {
            font-size: 0.95rem;
        }
        #settingsOverlay .mp-account-actions {
            justify-content: flex-start;
        }

        /* ── Innstillinger-side: kort-basert layout ──────────────────── */
        .mp-settings-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 8px;
        }
        .mp-settings-card-heading {
            margin: 0 0 10px;
            font-size: 0.74rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .mp-settings-card.danger { border-color: rgba(196, 60, 60, 0.3); }
        [data-theme="dark"] .mp-settings-card.danger { border-color: rgba(220, 80, 80, 0.35); }

        .mp-settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 4px 0;
        }
        .mp-settings-row.stack {
            display: block;
            padding-top: 8px;
        }
        .mp-settings-row + .mp-settings-row {
            margin-top: 2px;
            border-top: 1px solid var(--border);
            padding-top: 10px;
        }
        .mp-settings-row.stack + .mp-settings-row.stack { padding-top: 10px; }
        .mp-settings-row-text { flex: 1; min-width: 0; }
        .mp-settings-row-label { font-size: 0.96rem; color: var(--text); margin: 0; font-weight: 500; }
        .mp-settings-row-help {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 2px 0 0;
            line-height: 1.4;
        }
        .mp-settings-help-block {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.45;
            margin: 0 0 10px;
        }

        /* Konsekvent luft mellom flere stablede knapper i et kort (f.eks. krypterings-seksjonen) */
        .mp-settings-action-btn + .mp-settings-action-btn { margin-top: 6px; }

        /* Toggle switch (Mørk modus) */
        .mp-toggle-switch {
            position: relative;
            width: 46px;
            height: 26px;
            background: var(--border);
            border-radius: 999px;
            cursor: pointer;
            transition: background 0.22s ease;
            border: none;
            padding: 0;
            flex-shrink: 0;
        }
        .mp-toggle-switch::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px;
            width: 20px; height: 20px;
            background: white;
            border-radius: 50%;
            transition: transform 0.22s cubic-bezier(.2,.8,.25,1);
            box-shadow: 0 1px 4px rgba(0,0,0,0.22);
        }
        .mp-toggle-switch.on { background: var(--accent); }
        .mp-toggle-switch.on::after { transform: translateX(20px); }
        .mp-toggle-switch:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Segmentert kontroll (skrifttype-velger) */
        .mp-segmented {
            display: flex;
            gap: 2px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 3px;
            margin-top: 10px;
        }
        .mp-segmented-btn {
            flex: 1;
            padding: 9px 8px;
            background: transparent;
            border: none;
            border-radius: 7px;
            color: var(--text-muted);
            font-size: 0.86rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            min-width: 0;
        }
        .mp-segmented-btn.active {
            background: var(--card-bg);
            color: var(--text);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        [data-theme="dark"] .mp-segmented-btn.active { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .mp-segmented-btn:hover:not(.active) { color: var(--text); }
        /* Forhåndsvis fonten i selve knapp-teksten */
        .mp-segmented-btn[data-font="serif"] { font-family: Georgia, 'Times New Roman', serif; }
        .mp-segmented-btn[data-font="sans"]  { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
        .mp-segmented-btn[data-font="iowan"] { font-family: 'Iowan Old Style', 'Palatino Linotype', 'Charter', Georgia, serif; }

        /* Settings-knapp (Logg ut, Logg inn, Slett konto) */
        .mp-settings-action-btn {
            width: 100%;
            padding: 11px 14px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text);
            font-size: 0.92rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            text-align: center;
        }
        .mp-settings-action-btn:hover { border-color: var(--accent); color: var(--accent); }
        .mp-settings-action-btn.danger {
            color: #c44;
            border-color: rgba(196, 60, 60, 0.4);
        }
        .mp-settings-action-btn.danger:hover {
            background: #c44;
            color: white;
            border-color: #c44;
        }
        [data-theme="dark"] .mp-settings-action-btn.danger {
            color: #ee8888;
            border-color: rgba(238, 136, 136, 0.4);
        }

        /* Verktøy-grid i Innstillinger (Send tilbakemelding / Annen søketjeneste) */
        .mp-settings-tools-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        /* Alle iPhone-bredder (SE 375 → 16 Pro Max 430) får 1 kolonne så
           knappetekster som "Eksporter markeringer (JSON)" ikke brytes over
           3 linjer mens "Send tilbakemelding" tar 1, og 3. knapp ikke
           spawner solo i 2. rad. */
        @media (max-width: 480px) {
            .mp-settings-tools-grid { grid-template-columns: 1fr; }
        }
        .mp-settings-tool-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 14px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-size: 0.84rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            transition: all 0.15s;
        }
        .mp-settings-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
        .mp-settings-tool-icon { font-size: 1.4rem; line-height: 1; }
        .mp-settings-tool-label { line-height: 1.3; }

        /* Fargenavn-redigerer (Innstillinger → Mine fargenavn) */
        .mp-color-name-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mp-color-name-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .mp-color-name-swatch {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.15);
            flex-shrink: 0;
        }
        .mp-color-name-input {
            flex: 1;
            min-width: 0;
            padding: 8px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            /* 16px er minimum for å unngå at iOS Safari auto-zoomer
               når man fokuserer feltet på mobil. Mindre verdi gir
               zoom + tap av festepunkter for siden. */
            font-size: 16px;
            font-family: inherit;
        }
        .mp-color-name-input:focus {
            outline: none;
            border-color: var(--accent);
        }
        .mp-color-name-reset {
            margin-top: 4px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-family: inherit;
            text-decoration: underline;
            cursor: pointer;
            padding: 4px 0;
            align-self: flex-start;
        }
        .mp-color-name-reset:hover { color: var(--accent); }

        /* ── Profil-knapp (høyre header-knapp) status-indikator ── */
        .header-icon-btn.profile-btn { position: relative; }
        .profile-status-dot {
            position: absolute;
            right: 6px;
            bottom: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2ecc71;
            border: 2px solid var(--header-bg, #a83232);
            box-sizing: content-box;
            opacity: 0;
            transform: scale(0.6);
            transition: opacity 180ms ease, transform 180ms ease;
            pointer-events: none;
        }
        .profile-status-dot.active {
            opacity: 1;
            transform: scale(1);
        }

        /* ── Profil-popup (dropdown fra høyre header-knapp) ── */
        .profile-popup-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.32);
            opacity: 0; visibility: hidden;
            transition: opacity 200ms ease, visibility 0s linear 200ms;
            z-index: 290;
        }
        .profile-popup-backdrop.open {
            opacity: 1; visibility: visible;
            transition: opacity 200ms ease;
        }
        .profile-popup {
            position: fixed;
            top: calc(58px + env(safe-area-inset-top, 0px));
            right: 8px;
            min-width: 260px;
            max-width: calc(100vw - 16px);
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
            z-index: 300;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-8px);
            visibility: hidden;
            transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
        }
        .profile-popup.open {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            transition: opacity 180ms ease, transform 180ms ease;
        }
        .profile-popup-header {
            padding: 12px 16px 10px;
            font-size: 13px;
            color: var(--text-muted, #666);
            border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        [data-theme="dark"] .profile-popup-header {
            border-bottom-color: rgba(255,255,255,0.08);
        }
        .profile-popup-body {
            padding: 6px 0;
            display: flex;
            flex-direction: column;
        }
        .profile-popup-item {
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 16px;
            font: inherit;
            font-size: 15px;
            color: var(--text, #222);
            cursor: pointer;
            text-align: left;
            transition: background-color 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .profile-popup-item:hover,
        .profile-popup-item:focus-visible {
            background: var(--bg-subtle, rgba(0,0,0,0.04));
            outline: none;
        }
        [data-theme="dark"] .profile-popup-item:hover,
        [data-theme="dark"] .profile-popup-item:focus-visible {
            background: rgba(255,255,255,0.06);
        }
        .profile-popup-item-primary {
            color: var(--accent, #a83232);
            font-weight: 600;
        }
        .profile-popup-item-danger {
            color: var(--accent, #a83232);
        }
        .profile-popup-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .profile-popup-label {
            flex: 1;
        }
        .profile-popup-chevron {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            opacity: 0.4;
        }
        .profile-popup-separator {
            height: 1px;
            background: var(--border, rgba(0,0,0,0.08));
            margin: 4px 0;
        }
        [data-theme="dark"] .profile-popup-separator {
            background: rgba(255,255,255,0.08);
        }

        /* ── Hjelp og om-overlay-seksjoner ── */
        .help-about-section {
            margin-bottom: 14px;
        }
        .help-about-section:last-child {
            margin-bottom: 0;
        }
        .help-about-section h3 {
            margin: 0 0 6px;
            font-size: 0.95rem;
        }
        .help-about-section p { margin: 0 0 6px; }
        .help-about-section p:last-child { margin-bottom: 0; }
        .help-about-section ul {
            margin: 0 0 8px;
            padding-left: 20px;
        }
        .help-about-section ul li { margin-bottom: 2px; line-height: 1.45; }
        /* Vipps-tekst i Vipps' offisielle oransje (#FF5B24). Brukes på selve
           ordet "vippse" i "Laget av"-seksjonen i Hjelp og om. */
        .vipps-text {
            color: #FF5B24;
            font-weight: 600;
        }

        /* ── Generelt ikon-system (SVG-sprite via #icon-...) ─────────────── */
        /* Standard: .icon skalerer med font-size i konteksten via 1em.
           Bruker currentColor automatisk, så ikoner følger tema/farge. */
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;  /* visuell senter på baseline */
            flex-shrink: 0;
            display: inline-block;
        }
        .icon-md { width: 18px; height: 18px; }
        .icon-lg { width: 22px; height: 22px; }
        .icon-xl { width: 28px; height: 28px; }

        .header-icon-btn svg,
        .dark-toggle svg {
            width: 19px;
            height: 19px;
            display: block;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        body { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }

        .search-area {
            padding: 0;
        }

        .controls {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-box {
            flex: 1;
            min-width: 250px;
        }
        .search-box input {
            width: 100%;
            padding: 12px 16px;
            font-size: 1rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text);
            outline: none;
            transition: border-color 0.2s;
        }
        .search-box input:focus { border-color: var(--accent); }
        .search-box input::placeholder { color: #aaa; }

        .btn {
            padding: 10px 20px;
            font-size: 0.95rem;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s, transform 0.1s;
        }
        .btn:active { transform: scale(0.97); }
        .btn-primary { background: var(--accent); color: white; }
        .btn-primary:hover { background: var(--accent-hover); }
        .btn-secondary { background: var(--card-bg); color: var(--text); border: 2px solid var(--border); }
        .btn-secondary:hover { background: #f0ede7; }
        [data-theme="dark"] .btn-secondary:hover { background: #32323a; }
        .btn-secondary.active { background: var(--accent); color: white; border-color: var(--accent); }

        select {
            padding: 10px 14px;
            font-size: 0.95rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text);
            cursor: pointer;
            outline: none;
        }
        select:focus { border-color: var(--accent); }
        select option { background: var(--card-bg); color: var(--text); }

        .dark-toggle {
            background: transparent;
            border: none;
            color: white;
            width: 38px; height: 38px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }
        .dark-toggle:hover { background-color: rgba(255,255,255,0.1); }

        /* Book browser / sorter — fjernet. Bruk 'Johannes:' prefix eller referanse-søk i stedet. */

        /* Toggles */
        .toggles {
            max-width: 1400px;
            margin: 12px auto 0;
            padding: 0 24px;
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        .toggle-group {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        .toggle { position: relative; width: 42px; height: 24px; }
        .toggle input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute; inset: 0;
            background: var(--border);
            border-radius: 24px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 18px; height: 18px;
            left: 3px; bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: transform 0.2s;
        }
        .toggle input:checked + .toggle-slider { background: var(--accent); }
        .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

        /* Results area */
        .results-wrapper {
            max-width: 1400px;
            margin: 8px auto 20px;
            padding: 0 24px 40px;
        }
        .verse-row {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
            align-items: stretch;
        }
        .verse-row > .verse-card {
            flex: 1;
            min-width: 0;
            margin-bottom: 0;
        }
        .compare-columns-header {
            display: flex;
            gap: 20px;
            margin-bottom: 12px;
        }
        .column-label {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
        }
        .column-label select {
            padding: 5px 8px;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 400;
        }


        /* Verse card */
        .verse-card {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 20px 24px;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out);
        }
        @media (hover: hover) {
            .verse-card:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 20px rgba(0,0,0,0.10);
            }
            [data-theme="dark"] .verse-card:hover {
                box-shadow: 0 6px 20px rgba(0,0,0,0.4);
            }
        }
        .verse-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            gap: 8px;
        }
        /* Delt handlings-pille — "Les opp | Kilde" som ett visuelt element
           med en tynn vertikal divider mellom. Vises øverst til høyre i
           kort-headeren. Den ytre wrapperen tegner border + border-radius
           én gang; inner-knappene er flate (ingen egen border) men har
           hver sin hover/active-state. overflow:hidden klipper aktiv-fyll
           til pille-form. */
        .verse-card-actions-pill {
            display: inline-flex;
            align-items: stretch;
            margin-left: auto;
            border: 1px solid var(--border);
            border-radius: 999px;
            overflow: hidden;
            font-size: 0.78rem;
            line-height: 1;
            -webkit-tap-highlight-color: transparent;
            transition: border-color 140ms;
        }
        .verse-card-actions-divider {
            width: 1px;
            background: var(--border);
            align-self: stretch;
            flex-shrink: 0;
        }
        .verse-card-tts-btn,
        .verse-card-source-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            background: transparent;
            border: 0;
            border-radius: 0;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            transition: background 140ms, color 140ms;
            -webkit-tap-highlight-color: transparent;
        }
        .verse-card-tts-btn:hover,
        .verse-card-tts-btn:focus-visible,
        .verse-card-source-link:hover,
        .verse-card-source-link:focus-visible {
            color: var(--accent);
            background: rgba(168, 50, 50, 0.08);
            outline: none;
        }
        .verse-card-tts-btn:active,
        .verse-card-source-link:active {
            background: rgba(168, 50, 50, 0.16);
        }
        /* Aktiv lesing-state: accent-fyll på TTS-seksjonen + pulserende prikk.
           overflow:hidden på den ytre pillen klipper fyll-rektangelet til
           pille-form (rundt venstre side). */
        .verse-card-tts-btn.is-playing {
            background: var(--accent);
            color: white;
        }
        .verse-card-tts-btn.is-playing::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
            margin-right: 2px;
            animation: ttsPulse 1.1s infinite ease-in-out;
        }
        .verse-card-tts-btn.is-paused {
            background: rgba(168, 50, 50, 0.18);
            color: var(--accent);
        }
        @keyframes ttsPulse {
            0%, 100% { opacity: 0.4; transform: scale(0.85); }
            50%      { opacity: 1.0; transform: scale(1.0); }
        }
        [data-theme="dark"] .verse-card-tts-btn:hover,
        [data-theme="dark"] .verse-card-tts-btn:focus-visible,
        [data-theme="dark"] .verse-card-source-link:hover,
        [data-theme="dark"] .verse-card-source-link:focus-visible {
            background: rgba(201, 68, 68, 0.14);
        }
        [data-theme="dark"] .verse-card-tts-btn.is-paused {
            background: rgba(201, 68, 68, 0.22);
        }
        /* Karaoke-highlight: verset som leses akkurat nå. Mild gul-accent
           som ikke kolliderer med vers-mark-farger eller place-highlights. */
        .verse-span.tts-active .verse-content {
            background: linear-gradient(180deg,
                rgba(245, 200, 90, 0.0) 0%,
                rgba(245, 200, 90, 0.28) 30%,
                rgba(245, 200, 90, 0.28) 70%,
                rgba(245, 200, 90, 0.0) 100%);
            border-radius: 4px;
            transition: background 220ms ease;
        }
        [data-theme="dark"] .verse-span.tts-active .verse-content {
            background: linear-gradient(180deg,
                rgba(220, 180, 60, 0.0) 0%,
                rgba(220, 180, 60, 0.30) 30%,
                rgba(220, 180, 60, 0.30) 70%,
                rgba(220, 180, 60, 0.0) 100%);
        }

        /* ── ⋯-meny-knapp i kort-header ─────────────────────────────────
           Erstatter den gamle [Les opp | Kilde]-pillen. Beholder
           klassen .verse-card-tts-btn så eksisterende is-playing/
           is-paused-styling fra TTS-state fungerer videre. */
        .verse-card-actions-menu-btn {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 26px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            transition: background 140ms, color 140ms, border-color 140ms;
            -webkit-tap-highlight-color: transparent;
        }
        .verse-card-actions-menu-btn:hover,
        .verse-card-actions-menu-btn:focus-visible {
            background: rgba(168, 50, 50, 0.08);
            color: var(--accent);
            outline: none;
        }
        .verse-card-actions-menu-btn.autoscroll-on {
            border-color: var(--accent);
            color: var(--accent);
        }
        [data-theme="dark"] .verse-card-actions-menu-btn:hover,
        [data-theme="dark"] .verse-card-actions-menu-btn:focus-visible {
            background: rgba(201, 68, 68, 0.14);
        }

        /* ── Dropdown-meny (portalert til body) ─────────────────────── */
        .card-actions-menu {
            position: absolute;
            z-index: 9000;
            width: max-content;
            min-width: 140px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
            padding: 6px;
            font-size: 0.92rem;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            animation: camFadeIn 130ms ease-out;
        }
        @keyframes camFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .card-actions-menu .cam-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 9px 12px;
            background: transparent;
            border: 0;
            border-radius: 8px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.95rem;
            text-align: left;
            cursor: pointer;
            transition: background 120ms;
        }
        .card-actions-menu .cam-item:hover,
        .card-actions-menu .cam-item:focus-visible {
            background: rgba(168, 50, 50, 0.10);
            outline: none;
        }
        .card-actions-menu .cam-item .cam-icon {
            width: 20px;
            text-align: center;
            font-size: 1rem;
        }
        .card-actions-menu .cam-item.is-on {
            color: var(--accent);
            font-weight: 600;
        }
        [data-theme="dark"] .card-actions-menu .cam-item:hover,
        [data-theme="dark"] .card-actions-menu .cam-item:focus-visible {
            background: rgba(201, 68, 68, 0.16);
        }

        /* Slider-rad: skjult som standard, vises når Autoscroll er PÅ */
        .card-actions-menu .cam-slider-row {
            display: none;
            align-items: center;
            gap: 10px;
            padding: 8px 12px 10px;
            margin-top: 2px;
            border-top: 1px solid var(--border);
        }
        .card-actions-menu .cam-slider-row.is-visible { display: flex; }
        .card-actions-menu .cam-slider-label {
            font-size: 0.82rem;
            color: var(--text-muted);
            flex: 0 0 auto;
        }
        .card-actions-menu .cam-slider {
            flex: 1 1 auto;
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            background: var(--border);
            border-radius: 4px;
            outline: none;
        }
        .card-actions-menu .cam-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            border: 2px solid var(--card-bg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .card-actions-menu .cam-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            border: 2px solid var(--card-bg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .card-actions-menu .cam-slider-value {
            min-width: 28px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* ── Flytende avspillingspille (sentrert nederst) ───────────── */
        .playback-pill {
            position: fixed;
            left: 50%;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
            transform: translate(-50%, 20px);
            display: none;
            align-items: center;
            gap: 4px;
            padding: 6px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
            z-index: 9500;
            opacity: 0;
            transition: opacity 180ms ease, transform 180ms ease;
            -webkit-tap-highlight-color: transparent;
        }
        .playback-pill.is-visible {
            display: inline-flex;
            opacity: 1;
            transform: translate(-50%, 0);
        }
        .playback-pill .pp-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            transition: background 130ms, color 130ms;
        }
        .playback-pill .pp-btn:hover,
        .playback-pill .pp-btn:focus-visible {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
            outline: none;
        }
        .playback-pill .pp-toggle {
            background: var(--accent);
            color: white;
        }
        .playback-pill .pp-toggle:hover,
        .playback-pill .pp-toggle:focus-visible {
            background: var(--accent);
            filter: brightness(1.08);
            color: white;
        }
        /* +/− speed-knapper: litt mindre enn pause/stop, uten accent-fyll */
        .playback-pill .pp-speed {
            width: 34px;
            height: 34px;
            color: var(--text-muted);
        }
        .playback-pill .pp-speed:hover,
        .playback-pill .pp-speed:focus-visible {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
        }
        /* Speed-flash: liten boble over pillen som viser ny px/s ved +/− */
        .playback-pill .pp-speed-flash {
            position: absolute;
            top: -28px;
            left: 50%;
            transform: translate(-50%, 4px);
            background: var(--text);
            color: var(--card-bg);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 999px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 160ms ease, transform 160ms ease;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .playback-pill .pp-speed-flash.is-on {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        [data-theme="dark"] .playback-pill .pp-btn:hover,
        [data-theme="dark"] .playback-pill .pp-btn:focus-visible {
            background: rgba(201, 68, 68, 0.18);
        }
        @media (max-width: 600px) {
            .playback-pill {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
            }
        }

        /* ── Versjons-toggle-pille (A/B-bytte mellom oversettelser) ── */
        .version-pill {
            position: fixed;
            left: 50%;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
            transform: translate(-50%, 20px);
            display: none;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
            z-index: 9500;
            opacity: 0;
            transition: opacity 180ms ease, transform 180ms ease;
            -webkit-tap-highlight-color: transparent;
        }
        .version-pill.is-visible {
            display: inline-flex;
            opacity: 1;
            transform: translate(-50%, 0);
        }
        /* Versjons-chips: runde piller. Aktiv = accent-fyll. */
        .version-pill .vp-chip {
            min-width: 56px;
            height: 38px;
            padding: 0 14px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 130ms, color 130ms, border-color 130ms;
            white-space: nowrap;
        }
        .version-pill .vp-chip.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .version-pill .vp-chip:not(.active):hover,
        .version-pill .vp-chip:not(.active):focus-visible {
            border-color: var(--accent);
            color: var(--accent);
            outline: none;
        }
        .version-pill .vp-pick,
        .version-pill .vp-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: background 130ms, color 130ms;
        }
        .version-pill .vp-pick:hover,
        .version-pill .vp-pick:focus-visible,
        .version-pill .vp-close:hover,
        .version-pill .vp-close:focus-visible {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
            outline: none;
        }
        /* Versjons-velger som popper opp over pillen */
        .version-pill-picker {
            position: fixed;
            z-index: 9600;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 6px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
            max-height: 50vh;
            overflow-y: auto;
        }
        .version-pill-picker .vpp-item {
            padding: 9px 16px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--text);
            font: inherit;
            font-size: 0.92rem;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
            transition: background 120ms;
        }
        .version-pill-picker .vpp-item:hover,
        .version-pill-picker .vpp-item:focus-visible {
            background: var(--bg-subtle, rgba(0,0,0,0.05));
            outline: none;
        }
        .version-pill-picker .vpp-item.active {
            color: var(--accent);
            font-weight: 600;
        }
        [data-theme="dark"] .version-pill-picker .vpp-item:hover,
        [data-theme="dark"] .version-pill-picker .vpp-item:focus-visible {
            background: rgba(255,255,255,0.06);
        }
        .verse-card-header .verse-card-label {
            flex: 0 1 auto;
            min-width: 0;
        }
        .verse-card-label { font-weight: 700; font-size: 1rem; color: var(--accent); }
        /* Klikkbar tittel — åpner bibelnavigatoren rett på chapter-fasen for
           gjeldende bok (compact-modus). Chevron ▾ etter teksten signaliserer
           dropdown-funksjonen også på touch der :hover ikke gir feedback.
           Margin-justering hindrer at bakgrunnen flytter omkringliggende layout. */
        .verse-card-label.is-nav-trigger {
            cursor: pointer;
            border-radius: 8px;
            padding: 3px 8px;
            margin: -3px -8px -3px -8px;
            transition: background 140ms, color 140ms, transform 100ms;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .verse-card-label.is-nav-trigger::after {
            content: '\25BE'; /* ▾ */
            font-size: 0.75em;
            opacity: 0.6;
            transition: opacity 140ms, transform 140ms;
        }
        .verse-card-label.is-nav-trigger:hover::after {
            opacity: 1;
            transform: translateY(1px);
        }
        .verse-card-label.is-nav-trigger:hover,
        .verse-card-label.is-nav-trigger:focus-visible {
            background: rgba(168,50,50,0.10);
            outline: none;
        }
        .verse-card-label.is-nav-trigger:active {
            background: rgba(168,50,50,0.18);
            transform: scale(0.98);
        }
        [data-theme="dark"] .verse-card-label.is-nav-trigger:hover,
        [data-theme="dark"] .verse-card-label.is-nav-trigger:focus-visible {
            background: rgba(201,68,68,0.16);
        }
        [data-theme="dark"] .verse-card-label.is-nav-trigger:active {
            background: rgba(201,68,68,0.26);
        }
        .verse-card-label.is-nav-trigger:focus-visible {
            box-shadow: 0 0 0 2px var(--accent);
        }
        .copy-btn {
            padding: 5px 14px;
            font-size: 0.8rem;
            line-height: 1.4;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            cursor: pointer;
            color: var(--text-muted);
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s;
            white-space: nowrap;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 28px;
            margin-left: 6px;
        }
        .copy-btn:hover:not(:disabled) {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.22), 0 0 10px rgba(168, 50, 50, 0.25);
        }
        .copy-btn:active:not(:disabled) { transform: translateY(0); }
        [data-theme="dark"] .copy-btn:hover:not(:disabled) {
            box-shadow: 0 0 0 2px rgba(201, 68, 68, 0.3), 0 0 12px rgba(201, 68, 68, 0.35);
        }
        .copy-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        /* Liten popup-meny som åpnes fra Kopier-knappen — viser to
           alternativer: "Kopier tekst" og "Kopier lenke". Posisjoneres
           absolutt via JS i forhold til knappen. */
        .copy-menu {
            position: fixed;
            z-index: 500;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
            padding: 4px;
            min-width: 168px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            opacity: 0;
            transform: translateY(4px) scale(0.97);
            transition: opacity 140ms ease, transform 140ms ease;
            -webkit-tap-highlight-color: transparent;
        }
        .copy-menu.open {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .copy-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            background: transparent;
            border: 0;
            border-radius: 7px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.92rem;
            color: var(--text);
            text-align: left;
            transition: background 120ms;
        }
        .copy-menu-item:hover,
        .copy-menu-item:focus-visible {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
            outline: none;
        }
        .copy-menu-item:active {
            background: rgba(168, 50, 50, 0.18);
        }
        [data-theme="dark"] .copy-menu-item:hover,
        [data-theme="dark"] .copy-menu-item:focus-visible {
            background: rgba(201, 68, 68, 0.16);
        }
        .copy-menu-emoji {
            font-size: 1em;
            flex-shrink: 0;
        }
        .copy-menu-label {
            font-weight: 500;
        }
        .copy-btn.active:hover:not(:disabled) {
            background: var(--accent-hover);
            color: white;
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.3), 0 0 12px rgba(168, 50, 50, 0.4);
        }

        /* Handlinger til høyre i header */
        .card-head-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-left: auto;  /* alltid til høyre, faller ikke utenfor */
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .copy-btn-pair { display: inline-flex; }
        .copy-btn-pair > .copy-btn { margin-left: 0; }
        .copy-btn-pair > .copy-btn + .copy-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -1px;
        }
        .copy-btn-pair > .copy-btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .copy-btn-pair > .copy-btn:hover,
        .copy-btn-pair > .copy-btn:focus { z-index: 1; position: relative; }

        /* Chevron-knapp for å åpne/lukke hele kapittelet (utenfor kortet) */
        /* Wrapper rundt chevron-rad + (skjult/lokket) toolbar — gir posisjons-anker
           for hover-popout som flyter på chevron-radens høyde. */
        .chevron-and-tools { position: relative; }
        .chevron-wrap {
            display: flex;
            align-items: center;
            margin: 4px 0 14px;
            border-radius: 12px;
            background: transparent;
            position: relative;
        }
        .chevron-wrap.compare { width: 100%; }
        /* Mobil: gi studie-knappen mer logisk luft fra vers/kapittel-kortet over */
        @media (max-width: 700px) {
            .chevron-wrap { margin-top: 14px; }
        }
        /* Hover-effekten ligger nå kun på selve chevron-knappen, så hover på 🎓
           ikke aktiverer chevron-bakgrunnen. Pille-radius (999px) for å matche
           systemets øvrige knapper. */
        .expand-chapter-btn:hover {
            background: rgba(168, 50, 50, 0.10);
            border-radius: 999px;
        }
        [data-theme="dark"] .expand-chapter-btn:hover {
            background: rgba(201, 68, 68, 0.14);
        }
        /* Verktøy-knapp (studiehatt) helt til venstre i chevron-raden.
           Plasseres absolutt så den ikke tar plass fra flex-layouten —
           chevronen kan dermed sentreres relativt til hele vers-kortet
           selv om 🎓 visuelt "kutter" inn fra venstre. */
        .verse-tools-btn {
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 30px;
            padding: 0 12px 0 10px;
            border: 1px solid var(--border);
            background: var(--card-bg);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 600;
            border-radius: 999px;
            transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
            z-index: 1;
        }
        .verse-tools-btn .vtb-icon {
            font-size: 0.95rem;
            line-height: 1;
        }
        .verse-tools-btn .vtb-text {
            line-height: 1;
            letter-spacing: 0.2px;
        }
        .verse-tools-btn:hover {
            background: rgba(168, 50, 50, 0.08);
            color: var(--accent);
            border-color: var(--accent);
        }
        .verse-tools-btn[aria-pressed="true"] {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        [data-theme="dark"] .verse-tools-btn:hover {
            background: rgba(201, 68, 68, 0.14);
        }

        .expand-chapter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 auto;
            padding: 8px 0;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 12px;
            transition: color 0.2s;
        }
        .expand-chapter-btn:hover { color: var(--accent); }
        .chevron-svg {
            display: block;
            transition: transform 0.22s cubic-bezier(.2, .8, .2, 1);
        }
        .expand-chapter-btn:hover .chevron-svg { transform: translateY(2px); }
        .expand-chapter-btn.collapse:hover .chevron-svg { transform: translateY(-2px); }

        /* Inline 'Alle versjoner' — glir ut mellom hoved-kort og verktøylinjen */
        .all-versions-inline {
            display: grid;
            grid-template-rows: 1fr;
            transition: grid-template-rows 0.35s cubic-bezier(.2, .8, .2, 1);
            margin-top: 8px;
        }
        .all-versions-inline-inner {
            overflow: hidden;
            min-height: 0;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 14px 20px;
            animation: fadeInUp 300ms cubic-bezier(.2, .8, .2, 1);
        }
        .all-versions-row {
            margin-bottom: 14px;
        }
        .all-versions-row:last-child { margin-bottom: 0; }
        .all-versions-row .version-label {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--accent);
            margin-bottom: 4px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .all-versions-row:first-child .version-label {
            padding-top: 0;
            border-top: none;
        }
        .all-versions-row .verse-text {
            font-size: 0.95rem;
            line-height: 1.55;
        }

        .verse-text {
            font-family: var(--verse-font-family, 'Georgia', 'Times New Roman', 'Palatino Linotype', serif);
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text);
            flex: 1;
        }
        .verse-num {
            color: var(--verse-num);
            font-size: 0.75em;
            vertical-align: super;
            font-weight: 700;
            margin-right: 1px;
            font-family: 'Segoe UI', system-ui, sans-serif;
            cursor: pointer;
            padding: 0 1px;
            border-radius: 4px;
            display: inline-block;
            transition: background 0.15s;
        }
        .verse-num:hover { background: rgba(168, 50, 50, 0.15); }
        [data-theme="dark"] .verse-num:hover { background: rgba(201, 68, 68, 0.2); }
        /* Vers-tekst har alltid en transparent dotted-underline med 0 tykkelse —
           det lar oss animere tykkelsen og fargen smooth ved hover/valg.
           text-decoration-style: dotted gjør at understreken vises som en
           rad små sirkler i stedet for én sammenhengende strek — gir et
           mykere, mindre dominerende uttrykk både ved hover og ved valg. */
        .verse-span .verse-content {
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: transparent;
            text-decoration-thickness: 0;
            text-underline-offset: 4px;
            transition: text-decoration-color 220ms ease,
                        text-decoration-thickness 240ms cubic-bezier(.16, 1, .3, 1);
        }
        /* Hover-stil bare på pekerenheter — utelat fra mobil (touch) */
        @media (hover: hover) {
            .verse-span:hover .verse-content {
                text-decoration-color: rgba(168, 50, 50, 0.45);
                text-decoration-thickness: 1.5px;
            }
            [data-theme="dark"] .verse-span:hover .verse-content {
                text-decoration-color: rgba(201, 68, 68, 0.55);
            }
        }
        /* "Låst" understrek mens et studieelement (Oversikt/Tidslinje) for
           verset er åpent — bruker samme transition så det glir inn smooth. */
        .verse-span.study-active .verse-content {
            text-decoration-color: rgba(168, 50, 50, 0.75);
            text-decoration-thickness: 2px;
        }
        [data-theme="dark"] .verse-span.study-active .verse-content {
            text-decoration-color: rgba(201, 68, 68, 0.85);
        }

        /* Vers-utvalg: vedvarende understrek når brukeren har tappet for å velge.
           Bruker samme transition som hover så streken glir fra tynn til tykk
           i stedet for å poppe direkte inn. */
        .verse-span.verse-selected .verse-content {
            text-decoration-color: var(--accent);
            text-decoration-thickness: 2.5px;
        }
        [data-theme="dark"] .verse-span.verse-selected .verse-content {
            text-decoration-color: var(--accent);
        }
        /* Hint om at hele verset er klikkbart (bare på pekerenheter) */
        @media (hover: hover) {
            .verse-span .verse-content { cursor: pointer; }
        }
        /* Touch-respons: fjern iOS Safari sin 300ms double-tap-delay og
           sørg for raskere tap-registrering på mobil. */
        .verse-text,
        .verse-span,
        .verse-content {
            touch-action: manipulation;
        }
        /* Grunntekst-versjonen: hebraiske vers rendres RTL med hebraisk font
           og litt større skrift + luftigere linjeavstand (vokaltegn + ta'amim
           trenger plass). Greske vers får gresk font, LTR. */
        .verse-content.verse-hebrew {
            font-family: 'SBL Hebrew', 'Ezra SIL', 'Taamey Frank CLM', 'Times New Roman', serif;
            font-size: 1.3em;
            line-height: 2.0;
            direction: rtl;
            unicode-bidi: isolate;
            display: inline-block;
        }
        .verse-content.verse-greek {
            font-family: 'SBL BibLit', 'Cardo', 'Galatia SIL', 'Gentium Plus', 'Times New Roman', serif;
            font-size: 1.08em;
            line-height: 1.75;
        }

        /* ── Bunnbar for vers-utvalg ──────────────────────────────────────── */
        .verse-selection-bar {
            position: fixed;
            left: 0; right: 0;
            bottom: 0;
            z-index: 200;
            padding: 10px 24px calc(14px + env(safe-area-inset-bottom, 0px));
            pointer-events: none;
            display: flex;
            justify-content: center;
            transform: translateY(140%);
            /* Lukke-retning (slide ned): ease-IN — akselererer ut, ingen
               oppbremsing i bunnen, så den glir rett ned. CSS bruker transition
               fra tilstanden elementet går TIL, så denne gjelder kun ved skjul. */
            transition: transform 300ms cubic-bezier(.4, 0, 1, 1);
        }
        /* Åpne-retning (slide opp): ease-OUT — deselererer pent inn på plass. */
        .verse-selection-bar.visible {
            transform: translateY(0);
            transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
        }
        .verse-selection-bar-inner {
            pointer-events: auto;
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            border-radius: 28px;
            padding: 12px 14px 12px 18px;
            width: 100%;
            /* Standard PC-bredde — uavhengig av om brukeren har utvidet til
               kapittel-visning enda. page-top-mode/compare-active bumper
               opp ytterligere ved behov. Utvidet til 1000px (responsivt
               klampet til viewport) så alle ~10 studie-knappene får plass
               på én linje sammen med de komprimerte knappene over. */
            max-width: min(1000px, calc(100vw - 40px));
            box-shadow: 0 10px 36px -4px rgba(0,0,0,0.24), 0 3px 10px rgba(0,0,0,0.12);
            display: flex;
            flex-direction: column;
            /* GPU-akselerert transform-overgang for smooth snap */
            transition: transform 360ms cubic-bezier(.22, 1, .36, 1),
                        opacity 220ms ease;
            will-change: transform;
        }
        /* Drag-handle vises kun på mobil — skjult som default */
        .vsel-drag-handle { display: none; }
        /* Chevron-collapse-knapp på PC — sitter på samme rad som farger og
           primær-knapper. Klikk lukker utvalget. Skjult på mobil
           (drag-handle der har samme funksjon). */
        .vsel-collapse-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 6px 8px;
            cursor: pointer;
            border-radius: 999px;
            opacity: 0.55;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
        }
        .vsel-collapse-btn:hover {
            opacity: 1;
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
        }
        [data-theme="dark"] .vsel-collapse-btn:hover {
            background: rgba(201, 68, 68, 0.16);
        }
        /* Skjul chevron-knappen på mobil — der har vi drag-handle i stedet */
        @media (max-width: 700px) {
            .vsel-collapse-btn { display: none; }
        }
        /* Innholds-area for studieelementer (drawer-modus, mobil).
           Alltid i layout med flex; max-height + opacity styrer synlighet
           så åpne/lukke-overgangen blir smooth (ikke display: none-pop). */
        .vsel-content-area {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            max-height: 0;
            opacity: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* Hindrer at scroll i innholdet "lekker" videre til hele siden
               (rubber-band) når man treffer topp/bunn — del av fiksen mot at
               drag-ned-for-å-lukke ender med å dra hele nettsiden på iOS. */
            overscroll-behavior: contain;
            margin-bottom: 0;
            transition: opacity 280ms cubic-bezier(.32, .72, 0, 1),
                        max-height 380ms cubic-bezier(.32, .72, 0, 1),
                        margin-bottom 380ms cubic-bezier(.32, .72, 0, 1);
        }
        .verse-selection-bar.drawer-half .vsel-content-area,
        .verse-selection-bar.drawer-full .vsel-content-area {
            max-height: 100vh;
            opacity: 1;
            margin-bottom: 0;
        }
        /* Når tredje etasje (tool-actions) er aktiv, gjenoppretter vi luften
           mellom studieelement og tool-actions så de ikke limer seg sammen. */
        .verse-selection-bar.vsel-has-tool-actions.drawer-half .vsel-content-area,
        .verse-selection-bar.vsel-has-tool-actions.drawer-full .vsel-content-area {
            margin-bottom: 6px;
        }
        .vsel-content-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 4px 10px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            margin-bottom: 10px;
            flex: 0 0 auto;
        }
        [data-theme="dark"] .vsel-content-header {
            border-bottom-color: rgba(255,255,255,0.10);
        }
        .vsel-content-title {
            flex: 1 1 auto;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
        }
        .vsel-content-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.4rem;
            line-height: 1;
            padding: 4px 10px;
            cursor: pointer;
            border-radius: 999px;
            transition: background 140ms ease, color 140ms ease;
        }
        .vsel-content-close:hover {
            background: rgba(168,50,50,0.10);
            color: var(--accent);
        }
        /* ‹ vers › -navigasjon øverst i drawer-innholdet — kompakt stripe
           for å bla til forrige/neste vers uten å lukke studieelementet.
           Holdes liten (~34px) så den ikke spiser lesehøyde. */
        .vsel-verse-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 2px 0 8px;
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            flex: 0 0 auto;
        }
        [data-theme="dark"] .vsel-verse-nav {
            border-bottom-color: rgba(255,255,255,0.10);
        }
        .vsel-verse-nav[hidden] { display: none; }
        .vsel-vnav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 30px;
            padding: 0;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--accent);
            cursor: pointer;
            transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
            -webkit-tap-highlight-color: transparent;
        }
        .vsel-vnav-btn:hover:not(:disabled),
        .vsel-vnav-btn:focus-visible:not(:disabled) {
            background: rgba(168,50,50,0.08);
            border-color: var(--accent);
            outline: none;
        }
        [data-theme="dark"] .vsel-vnav-btn:hover:not(:disabled),
        [data-theme="dark"] .vsel-vnav-btn:focus-visible:not(:disabled) {
            background: rgba(201,68,68,0.16);
        }
        .vsel-vnav-btn:disabled {
            opacity: 0.32;
            cursor: default;
            color: var(--text-muted);
        }
        .vsel-vnav-ref {
            min-width: 96px;
            text-align: center;
            font-weight: 700;
            font-size: 0.92rem;
            color: var(--text);
            font-variant-numeric: tabular-nums;
        }
        .vsel-multi-verse-note {
            font-size: 0.82rem;
            color: var(--text-muted);
            background: rgba(168,50,50,0.06);
            border-radius: 8px;
            padding: 6px 10px;
            margin-bottom: 8px;
        }
        [data-theme="dark"] .vsel-multi-verse-note {
            background: rgba(201,68,68,0.10);
        }
        .vsel-content-body { flex: 1 1 auto; min-height: 0; }
        /* Når et studie-host er flyttet inn i drawer-body, skjul hostens egen
           header (drawer har sin egen tittel + ×) så vi unngår dobbel
           overskrift / dobbel lukke-knapp. */
        .vsel-content-body .study-panel-header { display: none; }
        /* Fjern overflødig border/padding/margin på host-wrappere i drawer —
           drawer-en er allerede et innramming, så ekstra border + padding
           skviser innholdet og kapper synlig plass. Gjelder både ytre
           wrapper (.bible-map-wrap) og innerste body (.bible-map-body). */
        .vsel-content-body .bible-map-wrap,
        .vsel-content-body .bible-map-body {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
            animation: none !important;
        }
        /* Note-popover i drawer: fjern topp-margin og padding så innholdet
           starter direkte under drawer-headeren (referanser/fotnote) */
        .note-popover-collapse.in-drawer {
            margin: 0 !important;
            padding: 0 !important;
        }
        .note-popover-collapse.in-drawer .note-popover {
            margin: 0 !important;
            padding: 0 !important;
        }
        /* Note-popover (xref/fn) når den er flyttet inn i drawer-body */
        .note-popover-collapse.in-drawer {
            position: static !important;
            transform: none !important;
            opacity: 1 !important;
            max-height: none !important;
            box-shadow: none !important;
            background: transparent !important;
            border: none !important;
            width: auto !important;
        }
        .note-popover-collapse.in-drawer > .note-popover-shell {
            position: static !important;
            transform: none !important;
        }
        .note-popover-collapse.in-drawer .note-popover {
            position: static !important;
            box-shadow: none !important;
            border: none !important;
            background: transparent !important;
            width: 100%;
            max-width: 100%;
            min-height: 0;
        }
        .note-popover-collapse.in-drawer .note-popover-list {
            max-height: none !important;
        }
        /* Skjul popover-ens egne lukke-knapper i drawer (drawer har egen ×) */
        .note-popover-collapse.in-drawer .note-popover-close { display: none; }
        /* Skjul label siden drawer har sin egen tittel */
        .note-popover-collapse.in-drawer .note-popover-label { display: none; }
        /* Skjul "Vis alle"-knappen i drawer-modus (lazy-load tar over) */
        .note-popover-collapse.in-drawer .xref-action-showmore { display: none; }
        /* Studie-tool-spesifikk handling-rad ("tredje etasje") mellom
           content-area og bottom. Bakgrunnen matcher sidens bakgrunnsfarge
           (beige i lys modus) så raden skiller seg visuelt fra drawer-en.
           Topp-margin er 0 så raden sitter flush mot innholdet over —
           ingen hvitt gap. Bunn-margin gir luft til pille-knappene under. */
        .vsel-tool-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            padding: 0 14px;
            /* Subtil mørk overlay på drawer-bg istedenfor side-bg —
               stripen føles som en seksjon INNI drawer-en, ikke som et
               'vindu' ut til siden under. */
            background: rgba(0,0,0,0.04);
            border-radius: 8px;
            margin: 0 6px 6px;
            flex: 0 0 auto;
            height: 40px;
            box-sizing: border-box;
            position: relative;
        }
        [data-theme="dark"] .vsel-tool-actions {
            background: rgba(255,255,255,0.05);
        }
        /* Skygge over tool-actions-raden NÅR scrollbart innhold er over —
           indikerer at brukeren kan scrolle for å se flere referanser.
           Bruker samme gradient-mønster som .vsel-bottom::before for
           konsistens. Ingen sidebleed siden ::before er klippet til
           tool-actions-bredden (som har 6px sidemargin). */
        .verse-selection-bar.vsel-content-scrollable .vsel-tool-actions::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            height: 14px;
            background: linear-gradient(to top,
                rgba(0,0,0,0.16) 0%,
                rgba(0,0,0,0.05) 60%,
                rgba(0,0,0,0) 100%);
            pointer-events: none;
        }
        [data-theme="dark"] .verse-selection-bar.vsel-content-scrollable .vsel-tool-actions::before {
            background: linear-gradient(to top,
                rgba(0,0,0,0.40) 0%,
                rgba(0,0,0,0.12) 60%,
                rgba(0,0,0,0) 100%);
        }
        .vsel-tool-actions[hidden] { display: none; }
        /* Knapper inni tool-actions-stripen — solid hvit "knapp"-feel
           (ikke pille), matchet radius (10px) til container (8px) for
           visuelt sammenhengende look. Litt skygge gir touch-friendly
           løft mot den mørke overlay-bakgrunnen. */
        .vsel-tool-actions .xref-action-btn {
            margin: 0;
            border-radius: 10px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
            height: 30px;
            padding: 0 14px;
            font-size: 0.86rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        [data-theme="dark"] .vsel-tool-actions .xref-action-btn {
            box-shadow: 0 1px 2px rgba(0,0,0,0.22);
        }
        .vsel-tool-actions .xref-action-btn:hover,
        .vsel-tool-actions .xref-action-btn:active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            box-shadow: 0 1px 4px rgba(168,50,50,0.28);
        }
        /* Aktiv sub-tool i tool-actions (Oversikt/Tidslinje) — rødt fyll
           som speiler vsel-active-stilen i studie-raden. */
        .vsel-tool-actions .xref-action-btn.vsel-active,
        .vsel-tool-actions .xref-action-btn.vsel-active:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            box-shadow: 0 1px 4px rgba(168,50,50,0.28);
        }
        /* Tool-select: en label + select-pille for valg av versjon/tema */
        .vsel-tool-select {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.86rem;
            color: var(--text-muted);
            /* Lar selectene krympe og holde seg innenfor parent på smale skjermer */
            max-width: 100%;
            min-width: 0;
        }
        .vsel-tool-select-label {
            font-weight: 500;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .vsel-tool-select-input {
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--card-bg);
            color: var(--text);
            font-size: 0.86rem;
            font-family: inherit;
            cursor: pointer;
            /* Hindrer at en lang option-tekst presser selecten ut over drawer-kanten */
            max-width: 100%;
            min-width: 0;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        /* Sammenlign-blokker i drawer */
        .vsel-compare-block {
            margin-bottom: 14px;
            padding: 10px 4px;
        }
        .vsel-compare-block + .vsel-compare-block {
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        [data-theme="dark"] .vsel-compare-block + .vsel-compare-block {
            border-top-color: rgba(255,255,255,0.10);
        }
        .vsel-compare-label {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .vsel-compare-verse {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 1rem;
            line-height: 1.55;
            color: var(--text);
            margin: 0 0 6px;
        }
        .vsel-compare-vnum {
            color: var(--accent);
            font-weight: 700;
            font-size: 0.72em;
            margin-right: 3px;
        }
        .vsel-compare-loading {
            padding: 16px;
            color: var(--text-muted);
            text-align: center;
            font-style: italic;
        }
        /* Bottom: 2 rader med flex column. Rad 1 = farger + info + primary
           + close (horisontal flex). Rad 2 = studie-knapper (sentrert). */
        .vsel-bottom {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 0 0 auto;
            position: relative;  /* anker for ::before-gradient-skygge */
            /* Konsistent padding-top + border-top på tvers av pille- og
               half/full-state så knappene IKKE hopper 11px når brukeren
               tapper et studielement. Border er transparent i pille; bare
               fargen endres ved overgang til half/full. _measurePilleHeight
               leser offsetHeight, så CSS-variabelen --vsel-pille-h fanger
               den nye høyden automatisk. */
            padding-top: 10px;
            border-top: 1px solid transparent;
            transition: border-top-color 220ms ease;
        }
        /* Skille over .vsel-bottom — dynamisk basert på om innhold scrolles:
           - Hvis content-area er scrollbar: gradient-skygge (scroll-indikator)
           - Hvis content-area passer: tynn sentrert strek (subtilt skille)
           JS toggler .vsel-content-scrollable på baren via ResizeObserver +
           MutationObserver på .vsel-content-area. */
        .verse-selection-bar.drawer-half .vsel-bottom::before,
        .verse-selection-bar.drawer-full .vsel-bottom::before {
            content: '';
            position: absolute;
            bottom: 100%;
            pointer-events: none;
            /* Default (innhold passer): tynn sentrert strek 60% bred */
            left: 20%;
            right: 20%;
            height: 1px;
            background: rgba(0,0,0,0.08);
            transition: background 220ms ease, opacity 220ms ease;
        }
        [data-theme="dark"] .verse-selection-bar.drawer-half .vsel-bottom::before,
        [data-theme="dark"] .verse-selection-bar.drawer-full .vsel-bottom::before {
            background: rgba(255,255,255,0.10);
        }
        /* Når innholdet er scrollbart: bytt til gradient-skygge full bredde */
        .verse-selection-bar.vsel-content-scrollable.drawer-half .vsel-bottom::before,
        .verse-selection-bar.vsel-content-scrollable.drawer-full .vsel-bottom::before {
            left: 0;
            right: 0;
            height: 14px;
            background: linear-gradient(to top,
                rgba(0,0,0,0.16) 0%,
                rgba(0,0,0,0.05) 60%,
                rgba(0,0,0,0) 100%);
        }
        [data-theme="dark"] .verse-selection-bar.vsel-content-scrollable.drawer-half .vsel-bottom::before,
        [data-theme="dark"] .verse-selection-bar.vsel-content-scrollable.drawer-full .vsel-bottom::before {
            background: linear-gradient(to top,
                rgba(0,0,0,0.40) 0%,
                rgba(0,0,0,0.12) 60%,
                rgba(0,0,0,0) 100%);
        }
        /* Border-top: er nå transparent (vi bruker ::before istedenfor) */
        .verse-selection-bar.drawer-half .vsel-bottom,
        .verse-selection-bar.drawer-full .vsel-bottom {
            border-top-color: transparent;
        }
        /* Når tool-actions (3. etasje) er synlig: skjul ::before-skillet
           helt — tool-actions-raden gir allerede visuell separasjon. */
        .verse-selection-bar.vsel-has-tool-actions .vsel-bottom::before {
            display: none !important;
        }
        .verse-selection-bar.vsel-has-tool-actions .vsel-bottom {
            border-top: none !important;
            padding-top: 0 !important;
        }
        .vsel-bottom-row1 {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .verse-selection-colors          { flex: 0 0 auto; }
        .verse-selection-info            { flex: 1 1 auto; min-width: 0; }
        .verse-selection-primary-actions { flex: 0 0 auto; }
        .verse-selection-close           { flex: 0 0 auto; }
        /* Aktiv studie-knapp i drawer (lyser rødt) */
        .verse-selection-study-actions .card-action-btn.vsel-active {
            background: var(--accent);
            color: white;
        }
        .verse-selection-study-actions .card-action-btn.vsel-active:hover {
            background: var(--accent);
            color: white;
        }
        /* Compare-modus trenger ekstra plass for side-ved-side-versjoner */
        .compare-active .verse-selection-bar-inner { max-width: 1300px; }
        [data-theme="dark"] .verse-selection-bar-inner {
            box-shadow: 0 8px 32px -4px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.25);
        }
        .verse-selection-info {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: baseline;
            gap: 10px;
            font-size: 0.95rem;
        }
        .verse-selection-count {
            font-weight: 700;
            color: var(--accent);
            flex: 0 0 auto;
            font-size: 1rem;
        }
        .verse-selection-refs {
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Primær-aksjoner blir én SAMMENHENGENDE 'segmentert' pille
           (Les vers | Kopier | Kilde) med skillelinjer mellom segmentene. */
        .verse-selection-primary-actions {
            display: inline-flex;
            background: rgba(168, 50, 50, 0.10);
            border-radius: 999px;
            overflow: hidden;
            flex: 0 0 auto;
            gap: 0;
        }
        [data-theme="dark"] .verse-selection-primary-actions {
            background: rgba(201, 68, 68, 0.16);
        }
        .verse-selection-primary-actions .card-action-btn {
            background: transparent;
            border: none;
            border-radius: 0;
            color: var(--text);
            font-size: 0.9rem;
            padding: 8px 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            position: relative;
        }
        .verse-selection-primary-actions .card-action-btn + .card-action-btn::before {
            content: '';
            position: absolute;
            left: 0;
            top: 18%;
            bottom: 18%;
            width: 1px;
            background: rgba(0, 0, 0, 0.10);
        }
        [data-theme="dark"] .verse-selection-primary-actions .card-action-btn + .card-action-btn::before {
            background: rgba(255, 255, 255, 0.14);
        }
        .verse-selection-primary-actions .card-action-btn:hover:not(:disabled) {
            background: rgba(168, 50, 50, 0.18);
            color: var(--accent);
            transform: none;
            box-shadow: none;
        }
        [data-theme="dark"] .verse-selection-primary-actions .card-action-btn:hover:not(:disabled) {
            background: rgba(201, 68, 68, 0.28);
        }
        /* Studie-aksjoner: horisontal scroll på smale skjermer med fade-
           mask som viser at det finnes flere knapper. min-width: 0 sikrer
           at flex-child respekterer parent-bredde. Padding-y gir hover-
           skygge plass uten å bli kappet av overflow-clip. */
        .verse-selection-study-actions {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: visible;
            min-width: 0;
            justify-content: center;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            scroll-padding: 0 16px;
            padding: 4px 0;
            /* touch-action: pan-x låser swipe-gester til horisontal scroll
               i denne raden. Uten dette kunne iOS/Android tolke en swipe
               med liten vertikal komponent som side-scroll og treffe verset
               under drawer-en i stedet. overscroll-behavior: contain hindrer
               scroll-chaining til siden når man når enden av raden. */
            touch-action: pan-x;
            overscroll-behavior-x: contain;
        }
        .verse-selection-study-actions::-webkit-scrollbar { display: none; }
        /* Når innhold er bredere enn container: fade ut til høyre/venstre */
        .verse-selection-study-actions.has-overflow-end {
            mask-image: linear-gradient(to right, black 0%, black calc(100% - 32px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 32px), transparent 100%);
            justify-content: flex-start;
        }
        .verse-selection-study-actions.has-overflow-start {
            mask-image: linear-gradient(to right, transparent 0%, black 32px, black 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32px, black 100%);
            justify-content: flex-start;
        }
        .verse-selection-study-actions.has-overflow-start.has-overflow-end {
            mask-image: linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
        }
        /* PC (≥701px): hold studie-knappene på ÉN linje. Vi komprimerer
           knappene (mindre padding/font/gap) så alle ~10 elementene får
           plass uten å bla. Pillen utvides også (se .verse-selection-bar-inner
           max-width under). Horisontal scroll beholdes som fallback på
           smale PC-vinduer. Mobil (<701px) er uendret. */
        @media (min-width: 701px) {
            .verse-selection-study-actions {
                gap: 3px;
            }
            .verse-selection-study-actions .card-action-btn {
                padding: 7px 9px;
                font-size: 0.82rem;
                gap: 5px;
            }
        }
        .verse-selection-study-actions .card-action-btn {
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 0.9rem;
            padding: 8px 14px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .verse-selection-study-actions .card-action-btn:hover:not(:disabled) {
            background: rgba(168, 50, 50, 0.12);
            color: var(--accent);
            transform: none;
            box-shadow: none;
        }
        [data-theme="dark"] .verse-selection-study-actions .card-action-btn:hover:not(:disabled) {
            background: rgba(201, 68, 68, 0.20);
        }
        /* Aktiv tool-knapp lyser rødt — definert ETTER hover så den vinner */
        .verse-selection-study-actions .card-action-btn.vsel-active,
        .verse-selection-study-actions .card-action-btn.vsel-active:hover {
            background: var(--accent);
            color: white;
        }
        /* Notat-knapp har lagret notat: rød indikator-prikk øverst til høyre */
        .verse-selection-study-actions .card-action-btn.has-note {
            color: var(--accent);
            position: relative;
        }
        .verse-selection-study-actions .card-action-btn.has-note::after {
            content: '';
            position: absolute;
            top: 3px;
            right: 5px;
            width: 6px;
            height: 6px;
            background: var(--accent);
            border-radius: 50%;
        }
        /* Aktiv-modus + has-note: prikken må være hvit */
        .verse-selection-study-actions .card-action-btn.has-note.vsel-active::after {
            background: white;
        }
        /* Skillelinje mellom de to etasjene — kun når studie-rad har innhold,
           ellers vises ingen tom strek */
        .verse-selection-study-actions:not(:empty) {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            padding-top: 10px;
        }
        [data-theme="dark"] .verse-selection-study-actions:not(:empty) {
            border-top-color: rgba(255, 255, 255, 0.12);
        }
        /* Default (desktop): emoji + tekst på samme linje */
        .vsel-emoji { line-height: 1; }
        .vsel-text { line-height: 1; }
        .verse-selection-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.2rem;
            line-height: 1;
            padding: 4px 10px;
            cursor: pointer;
            border-radius: 999px;
            transition: background 140ms ease, color 140ms ease;
        }
        .verse-selection-close:hover {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
        }
        @media (max-width: 700px) {
            /* Mobil: drawer-stil — kant til kant, klistret til bunnen,
               avrundet kun øverst, drag-handle for sveip-ned. */
            .verse-selection-bar { padding: 0; }
            .verse-selection-bar-inner {
                padding: 20px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
                border-radius: 24px 24px 0 0;
                max-width: 100%;
                width: 100%;
                border: none;
                /* Tydelig topp-skygge MED minimal sidebleed — strammere blur
                   (14) og mer negativ spread (-10) gjør at skyggen kun strekker
                   seg ~4px ut til hver side, men 12px opp er fortsatt godt
                   synlig. Høyere opacity (0.45) kompenserer for kompakt blur
                   så båndet føles like markert som før. */
                box-shadow: 0 -8px 14px -10px rgba(0,0,0,0.45);
            }
            [data-theme="dark"] .verse-selection-bar-inner {
                box-shadow: 0 -8px 14px -10px rgba(0,0,0,0.75);
            }
            /* Bar er fixed bottom: 0 (default — beholdes uendret).
               Inner er normal flex-child; max-height-transition gir
               smooth snap mellom tilstandene. Bunn-rad ligger nederst
               i flex-column og er derfor klistret til viewport-bunn. */
            .verse-selection-bar-inner {
                max-height: var(--vsel-pille-h, 220px);
                /* iOS-spring-easing for mer naturlig snap */
                transition: max-height 380ms cubic-bezier(.32, .72, 0, 1);
                will-change: max-height;
            }
            .verse-selection-bar.drawer-half  .verse-selection-bar-inner { max-height: 55vh; }
            .verse-selection-bar.drawer-full  .verse-selection-bar-inner { max-height: 92vh; }
            /* Tastatur-modus (notat-redigering på mobil) — DOBBEL DETEKSJON:
               1) JS-styrt vsel-keyboard-up-klasse (eksisterende mekanisme)
               2) CSS :has(.note-textarea:focus) som fallback — fungerer
                  uavhengig av JavaScript-deteksjon (iOS Safari 15.4+).
               Begge utløser samme skjul-regler så vi er garantert at
               drawer-knappene forsvinner ved fokus på tekstboksen. */
            .verse-selection-bar.vsel-keyboard-up .vsel-bottom,
            .verse-selection-bar.vsel-keyboard-up .vsel-drag-handle,
            .verse-selection-bar.vsel-keyboard-up .vsel-content-header,
            .verse-selection-bar.vsel-keyboard-up .vsel-tool-actions,
            .verse-selection-bar.vsel-keyboard-up .note-related-band,
            .verse-selection-bar:has(.note-textarea:focus) .vsel-bottom,
            .verse-selection-bar:has(.note-textarea:focus) .vsel-drag-handle,
            .verse-selection-bar:has(.note-textarea:focus) .vsel-content-header,
            .verse-selection-bar:has(.note-textarea:focus) .vsel-tool-actions,
            .verse-selection-bar:has(.note-textarea:focus) .note-related-band {
                display: none !important;
            }
            /* Drawer-rammen får HVIT bakgrunn når textarea har fokus —
               så bibel-teksten under ikke synes mellom textarea og tastatur.
               Samme topp-skygge som base-regelen for konsistent visuell
               topp-kant på tvers av states. */
            .verse-selection-bar.vsel-keyboard-up .verse-selection-bar-inner,
            .verse-selection-bar:has(.note-textarea:focus) .verse-selection-bar-inner {
                background: var(--card-bg) !important;
                border: none !important;
                box-shadow: 0 -8px 14px -10px rgba(0,0,0,0.45) !important;
                padding: 12px !important;
                max-height: none !important;
                overflow: visible !important;
            }
            [data-theme="dark"] .verse-selection-bar.vsel-keyboard-up .verse-selection-bar-inner,
            [data-theme="dark"] .verse-selection-bar:has(.note-textarea:focus) .verse-selection-bar-inner {
                box-shadow: 0 -8px 14px -10px rgba(0,0,0,0.75) !important;
            }
            /* Også ytre bar-padding zeroes så ingen rest av forrige drawer-
               state-padding kan skape horisontal overflow ved scroll. */
            .verse-selection-bar.vsel-keyboard-up,
            .verse-selection-bar:has(.note-textarea:focus) {
                padding: 0 !important;
            }
            /* Hugger textarea — ingen overflødig margin/scroll. */
            .verse-selection-bar:has(.note-textarea:focus) .vsel-content-area,
            .verse-selection-bar:has(.note-textarea:focus) .vsel-content-body,
            .verse-selection-bar:has(.note-textarea:focus) .note-host-body,
            .verse-selection-bar:has(.note-textarea:focus) .note-textarea-wrap {
                max-height: none !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: visible !important;
                flex: 0 0 auto !important;
            }
            /* Selve textarea-en blir det eneste synlige innholdet — eget
               kort-utseende med skygge. iOS Safari posisjonerer drawer
               automatisk over tastaturet (visualViewport-positionering), så
               textarea-en havner rett over tastatur-toppen helt automatisk. */
            .verse-selection-bar:has(.note-textarea:focus) .note-textarea {
                max-height: 38vh;
                min-height: 120px;
                resize: none;
                background: var(--card-bg);
                border-radius: 12px;
                box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
                width: 100%;
            }
        }

        /* Portalert notat-textarea-wrap når tastaturet er oppe — flyttet til
           document.body av JS-en så den er IKKE inni den transformerte drawer-
           baren. Fixed-positionering fungerer korrekt mot viewport her.
           Brukes både på mobil og bredere viewports der visualViewport.height
           rapporterer keyboard-offset. */
        .note-textarea-wrap.kb-portaled {
            position: fixed !important;
            left: 12px;
            right: 12px;
            bottom: calc(var(--vsel-kb-offset, 0px) + 6px);
            z-index: 250;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.22);
            padding: 0;
        }
        .note-textarea-wrap.kb-portaled .note-textarea {
            max-height: 38vh;
            min-height: 120px;
            resize: none;
            width: 100%;
            border-radius: 12px;
            border: none;
            box-shadow: none;
        }
        /* Sikkerhetsnett — pakker inn den 'fortsatt synlig vsel-keyboard-up
           media-query'-blokken her under. */
        @media (max-width: 700px) {
            /* Sørg for at portalert wrap aldri arver display: none fra noe
               nivå. */
            body > .note-textarea-wrap.kb-portaled { display: block; }
            /* Når kapittel-studieelement åpnes uten utvalg: skjul bunn-rad */
            .verse-selection-bar.drawer-no-bottom .vsel-bottom { display: none; }
            .verse-selection-bar.drawer-no-bottom .verse-selection-bar-inner {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
            }
            /* Bottom-rad: kompakt grid på mobil */
            .vsel-bottom {
                column-gap: 6px;
                row-gap: 8px;
            }
            /* Dark-mode skygge for drawer-inner er definert lenger opp i samme
               media-query (sammen med base topp-skygge-regelen). */
            /* Drag-handle — to ::before/::after-linjer som danner et flatt
               drag-bar default, og kan animeres til chevron opp/ned via
               JS-toggle av .chevron-up/.chevron-down-klasser. Større tap-
               target (38x18) for komfortabel mobil-tap. */
            .vsel-drag-handle {
                display: block;
                position: absolute;
                top: 4px;
                left: 50%;
                transform: translateX(-50%);
                /* Bredden MÅ være 56px: chevron-strekene (::before/::after,
                   20px brede, forankret 8px fra hver kant) møtes da i midten
                   (8+20+20+8) og danner en skarp spiss. Bredere → gap i midten
                   → ingen spiss. Økt høyde (24px) gir likevel større drag-flate
                   vertikalt uten å dekke innholdet i half/full-state. */
                width: 56px;
                height: 24px;
                cursor: pointer;
                background: transparent;
                z-index: 5;
                /* iOS skal aldri tolke en gest som starter på handtaket som
                   native scroll — vi driver all bevegelse selv via touchmove. */
                touch-action: none;
            }
            .vsel-drag-handle::before,
            .vsel-drag-handle::after {
                content: '';
                position: absolute;
                top: 50%;
                width: 20px;
                height: 4px;
                background: var(--text-muted);
                opacity: 0.4;
                transition: transform 320ms cubic-bezier(.4, 0, .2, 1),
                            opacity 220ms ease;
            }
            /* Border-radius KUN på ytter-endene så chevron-spissen møtes
               skarpt i midten. Inner-endene har skarpe 0-corners så de
               butter mot hverandre i et skarpt V/∧-punkt. */
            .vsel-drag-handle::before {
                left: 8px;
                border-radius: 2px 0 0 2px;  /* rund venstre, skarp høyre */
                transform: translateY(-50%) rotate(0deg);
                transform-origin: 100% 50%;  /* høyre kant pivot (chevron-spiss) */
            }
            .vsel-drag-handle::after {
                right: 8px;
                border-radius: 0 2px 2px 0;  /* skarp venstre, rund høyre */
                transform: translateY(-50%) rotate(0deg);
                transform-origin: 0% 50%;  /* venstre kant pivot (chevron-spiss) */
            }
            /* Chevron-down (V) — begge linjer tilter slik at endene går opp.
               Left: rot clockwise rundt høyre pivot → venstre ende opp.
               Right: rot CCW rundt venstre pivot → høyre ende opp. */
            .vsel-drag-handle.chevron-down::before {
                transform: translateY(-50%) rotate(14deg);
                opacity: 0.55;
            }
            .vsel-drag-handle.chevron-down::after {
                transform: translateY(-50%) rotate(-14deg);
                opacity: 0.55;
            }
            /* Chevron-up (∧) — speilet: linjeendene går ned. */
            .vsel-drag-handle.chevron-up::before {
                transform: translateY(-50%) rotate(-14deg);
                opacity: 0.55;
            }
            .vsel-drag-handle.chevron-up::after {
                transform: translateY(-50%) rotate(14deg);
                opacity: 0.55;
            }
            .vsel-drag-handle:active::before,
            .vsel-drag-handle:active::after {
                opacity: 0.75;
            }
            .verse-selection-info { display: none; }
            /* Push primær-segmentet til høyre på mobil (info er skjult) */
            .verse-selection-primary-actions { margin-left: auto; }
            /* Skjul drawer-headeren på mobil — den aktive studie-knappen
               i bunnen viser samme tittel og fungerer som lukke-toggle */
            .vsel-content-header { display: none; }
            .vsel-content-area { margin-bottom: 8px; }
            /* Mobil: alle handle-knapper er kvadratiske med emoji over tekst */
            .verse-selection-primary-actions .card-action-btn,
            .verse-selection-study-actions .card-action-btn {
                flex-direction: column;
                gap: 2px;
                padding: 6px 8px;
                min-width: 52px;
            }
            /* Studie-knapper på mobil får myke hjørner; primary-segmentet
               bestemmer avrunding via containeren */
            .verse-selection-study-actions .card-action-btn {
                border-radius: 14px;
            }
            .verse-selection-primary-actions .vsel-emoji,
            .verse-selection-study-actions .vsel-emoji {
                font-size: 1.05rem;
                line-height: 1;
            }
            .verse-selection-primary-actions .vsel-text,
            .verse-selection-study-actions .vsel-text {
                font-size: 0.62rem;
                font-weight: 500;
                line-height: 1.1;
                white-space: nowrap;
            }
            /* Mobil: primær-handlinger (Åpne vers / Kopier / Del) viser kun
               ikon — knappene blir mer rom-effektive og symbolet er tydelig
               nok alene. Studie-handlinger beholder tekst-label. */
            .verse-selection-primary-actions .vsel-text { display: none; }
            .verse-selection-primary-actions .vsel-emoji .icon {
                width: 22px; height: 22px;
            }
            .verse-selection-study-actions { gap: 5px; padding-top: 8px; }
            /* Mobil: krympede fargesirkler */
            .verse-selection-colors { gap: 3px; padding-right: 4px; margin-right: 0; }
            .verse-selection-colors .mark-color,
            .verse-selection-colors .mark-remove {
                width: 22px; height: 22px;
            }
            .verse-selection-close {
                padding: 4px 8px;
                font-size: 1rem;
            }
        }

        /* Markering = "markeringstusj" — pastellfarget bakgrunn over selve
           verset. box-decoration-break: clone gir en pen avrundet "stripe"
           per linje når teksten brytes. Valgt-stilen (rødt understrek)
           ligger uavhengig av markering. */
        .verse-span.verse-marked .verse-content {
            background-color: var(--verse-mark-color, transparent);
            padding: 1px 3px;
            border-radius: 3px;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        /* Inline-fargeknapper i bunnbar (ingen popover, alltid synlige) */
        .verse-selection-colors {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            padding-right: 4px;
            border-right: 1px solid var(--border);
            margin-right: 4px;
        }
        .verse-selection-colors .mark-color {
            width: 26px; height: 26px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.10);
            cursor: pointer;
            padding: 0;
            transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        }
        [data-theme="dark"] .verse-selection-colors .mark-color {
            border-color: rgba(255,255,255,0.18);
        }
        .verse-selection-colors .mark-color:hover {
            transform: scale(1.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(168,50,50,0.15);
        }
        .verse-selection-colors .mark-remove {
            width: 26px; height: 26px;
            border-radius: 50%;
            border: 1.5px dashed var(--border);
            background: transparent;
            cursor: pointer;
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
        }
        .verse-selection-colors .mark-remove:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: rgba(168,50,50,0.06);
        }
        /* Bunnbar er stacking-context */
        .verse-selection-bar-inner { position: relative; }
        .chapter-heading {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-muted);
            margin: 12px 0 4px;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .chapter-heading:first-child { margin-top: 0; }
        .section-heading {
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--accent);
            margin: 18px 0 6px;
            font-family: 'Segoe UI', system-ui, sans-serif;
            letter-spacing: 0.2px;
        }
        .section-heading:first-child { margin-top: 0; }

        /* Note markers (footnotes, cross-references) */
        .note-marker {
            display: inline-block;
            margin-left: 0;
            padding: 2px 2px;
            font-size: 0.75em;
            font-weight: 700;
            cursor: pointer;
            border-radius: 6px;
            vertical-align: super;
            line-height: 1.2;
            transition: background 0.15s, transform 0.1s;
            font-family: 'Segoe UI', system-ui, sans-serif;
            user-select: none;
            min-width: 12px;
            text-align: center;
        }
        .note-marker:active { transform: scale(0.92); }
        @media (max-width: 700px) {
            /* På mobil holdes markøren kompakt — brukeren kan også åpne
               kryssref/fotnote ved å trykke verset og bruke pop-up-knappen,
               så vi prioriterer tett satsing fremfor stor hit-flate. */
            .note-marker {
                padding: 1px 3px;
                font-size: 0.78em;
                margin-left: 1px;
                margin-right: 0;
                min-width: 0;
                border: 1px solid transparent;
            }
            .note-footnote { border-color: rgba(212, 180, 74, 0.3); }
            .note-xref { border-color: rgba(168, 50, 50, 0.25); }
        }
        .note-footnote {
            color: #8b6914;
            background: rgba(212, 180, 74, 0.15);
        }
        .note-footnote:hover, .note-footnote.active {
            background: rgba(212, 180, 74, 0.4);
        }
        .note-xref {
            color: var(--text-muted);
            background: transparent;
            border-color: transparent !important;
            opacity: 0.65;
            transition: color 0.15s, opacity 0.15s, text-shadow 0.15s;
        }
        .note-xref:hover, .note-xref.active {
            color: var(--accent);
            background: transparent;
            opacity: 1;
            text-shadow: 0 0 6px rgba(168, 50, 50, 0.35);
        }
        [data-theme="dark"] .note-footnote { color: #d4a84b; }

        /* ── Popover (kryssreferanser + fotnoter) ── */
        /* Collapse-wrapper styrer slide-down/up animasjon */
        .note-popover-collapse {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            margin: 0;
            transition: grid-template-rows 0.32s cubic-bezier(.2, .8, .2, 1),
                        opacity 0.22s ease,
                        margin 0.32s cubic-bezier(.2, .8, .2, 1);
        }
        .note-popover-collapse.open {
            grid-template-rows: 1fr;
            opacity: 1;
            margin: 8px 0;
        }
        .note-popover-collapse > .note-popover-shell {
            overflow: hidden;
            min-height: 0;
        }
        .note-popover {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 0.92rem;
            line-height: 1.5;
            box-shadow: var(--shadow);
            position: relative;
            display: flex;
            flex-direction: column;
            max-height: 50vh;
            min-height: 80px;
            overflow: hidden;        /* sørger for at listen klippes ved popover-grensen,
                                        ikke renner ut over footeren */
        }
        .note-popover-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 10px 14px 2px;
        }
        .note-popover-text {
            color: var(--text);
            padding: 0 14px 14px;
        }
        /* Liste over xref-treff (scrollbart område) */
        .note-popover-list-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }
        .note-popover-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: hidden;     /* kollapset modus: ingen scroll, viser bare topp-3 */
            padding: 4px 12px;
            box-sizing: border-box;
        }
        .note-popover-list.expanded {
            overflow-y: auto;       /* utvidet modus: rull for å se resten */
        }
        /* Scroll-skygger over og under listen — overlay som ikke deltar i flex-flowen */
        .popover-fade-top, .popover-fade-bot {
            position: absolute;
            left: 0; right: 0;
            height: 18px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.18s;
            z-index: 2;
        }
        .note-popover-list-wrap > .popover-fade-top,
        .note-popover-list-wrap > .popover-fade-bot {
            flex: 0 0 0;
        }
        .popover-fade-top {
            top: 0;
            background: linear-gradient(to bottom, var(--card-bg) 30%, transparent);
        }
        /* Fade-bot ligger inne i .note-popover-list-wrap, RETT over .note-popover-list
           sin nedre kant (dvs. like over footer-skillestreken). */
        .popover-fade-bot {
            bottom: 0;
            background: linear-gradient(to top, var(--card-bg) 30%, transparent);
        }
        .note-popover.scroll-top .popover-fade-top { opacity: 1; }
        .note-popover.scroll-bot .popover-fade-bot { opacity: 1; }

        /* Hver xref-rad: tittel + verstekst */
        .xref-entry {
            display: block;
            width: 100%;
            text-align: left;
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 10px 10px;
            cursor: pointer;
            transition: background 0.15s;
            font-family: inherit;
        }
        .xref-entry + .xref-entry { border-top: 1px solid var(--border); }
        .xref-entry:hover, .xref-entry:focus-visible {
            background: rgba(168, 50, 50, 0.06);
            outline: none;
        }
        [data-theme="dark"] .xref-entry:hover,
        [data-theme="dark"] .xref-entry:focus-visible {
            background: rgba(201, 68, 68, 0.10);
        }
        .xref-entry-ref {
            color: var(--accent);
            font-weight: 700;
            font-size: 0.85rem;
            margin-bottom: 4px;
            letter-spacing: 0.15px;
        }
        .xref-entry-text {
            color: var(--text);
            font-size: 0.82rem;
            line-height: 1.45;
        }
        .xref-entry-text.loading {
            color: var(--text-muted);
            font-style: italic;
            opacity: 0.7;
        }

        /* Bunnrad med Kart/Tidslinje + tynn skillestrek */
        .note-popover-footer {
            flex: 0 0 auto;
            display: flex;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid var(--border);
            background: var(--card-bg);
            border-radius: 0 0 20px 20px;
        }
        .xref-action-btn {
            padding: 7px 14px;
            background: transparent;
            color: var(--accent);
            border: 1px solid var(--border);
            border-radius: 999px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.15s;
        }
        .xref-action-btn:hover, .xref-action-btn:active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        /* Lukke-knapp */
        .note-popover-close {
            position: absolute;
            top: 6px;
            right: 8px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.25rem;
            cursor: pointer;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            z-index: 3;
        }
        .note-popover-close:hover { background: rgba(0,0,0,0.08); color: var(--text); }
        [data-theme="dark"] .note-popover-close:hover { background: rgba(255,255,255,0.08); }

        @media (max-width: 700px) {
            .note-popover { font-size: 0.96rem; max-height: 60vh; }
            .xref-entry-text { font-size: 0.86rem; }
            .xref-action-btn { padding: 9px 16px; font-size: 0.92rem; }
            .note-popover-close { font-size: 1.5rem; padding: 6px 10px; }
        }
        /* Viz-hosts-wrapper (Bibelkart, Tidslinje, Kontekst, Tema-kart) */
        .viz-hosts-wrap {
            max-width: 880px;
            margin: 0 auto;
            padding: 0 24px;
        }
        .compare-active .viz-hosts-wrap { max-width: 1300px; }
        @media (max-width: 700px) {
            .viz-hosts-wrap { padding: 0 14px; max-width: 100%; }
        }
        .viz-hosts-wrap:empty { display: none; }

        /* ── Split-modus: studieelementer flyttet til høyre panel ── */
        :root { --side-panel-width: 40vw; }
        .viz-hosts-side { display: none; }
        .viz-side-title { display: none; }
        body.split-active .viz-side-title,
        body.split-preview .viz-side-title { display: block; }
        @media (min-width: 1100px) {
            body { transition: padding-right 0.42s cubic-bezier(.22,.86,.24,1); }
            body.split-active,
            body.split-preview { padding-right: var(--side-panel-width); }
            /* Sidemenyen ligger alltid i DOM på desktop, transform-flyttet ut av syn
               når den ikke er aktiv. Dermed kan både body-padding og sidemenyen gli
               i synkron — verse-card bredde og sidebarens posisjon endrer seg jevnt. */
            .viz-hosts-side {
                display: flex !important;
                flex-direction: column;
                position: fixed;
                top: 60px;
                right: 0;
                bottom: 0;
                width: var(--side-panel-width);
                background: var(--bg);
                border-left: 1px solid var(--border);
                z-index: 120;
                box-shadow: -2px 0 12px rgba(0,0,0,0.06);
                transform: translateX(100%);
                opacity: 0;
                pointer-events: none;
                transition: transform 0.42s cubic-bezier(.22,.86,.24,1),
                            opacity 0.32s ease;
            }
            body.split-active .viz-hosts-side,
            body.split-preview .viz-hosts-side {
                transform: translateX(0);
                opacity: 1;
                pointer-events: auto;
            }
            .viz-side-title {
                flex: 0 0 auto;
                font-size: 0.78rem;
                font-weight: 600;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                color: var(--text-muted);
                padding: 14px 20px 8px;
                border-bottom: 1px solid var(--border);
            }
            .viz-side-inner {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 18px 20px 40px;
                display: flex;
                flex-direction: column;
                gap: 18px;
            }
            .viz-side-inner > .bible-map-wrap { margin-top: 0 !important; width: 100%; }
            .viz-side-resizer {
                position: absolute;
                top: 0; bottom: 0;
                left: -4px;
                width: 8px;
                cursor: col-resize;
                z-index: 2;
                background: transparent;
            }
            .viz-side-resizer:hover, .viz-side-resizer.dragging {
                background: linear-gradient(to right, transparent 2px, var(--accent) 3px, var(--accent) 5px, transparent 6px);
            }
        }
        /* Move-over-knapp: identisk stil som lukkeknapp (card-action-btn) */
        .card-action-btn.move-over-btn[data-moved="1"] { color: var(--accent); border-color: var(--accent); }
        @media (max-width: 1099px) {
            .card-action-btn.move-over-btn { display: none; }
        }
        /* Lukkeknapp (×) for studieelementer: alltid lengst til høyre i actions-raden */
        .card-action-btn.study-close-btn {
            order: 100;           /* etter move-over og andre knapper (order: 0 default) */
            padding: 0;
            width: 34px;
            height: 34px;
            font-size: 1.25rem;
            font-weight: 300;
            letter-spacing: 0;
            justify-content: center;
            flex-shrink: 0;
        }
        /* Litt generøsere touch-target på mobil */
        @media (max-width: 700px) {
            .card-action-btn.study-close-btn {
                width: 38px;
                height: 38px;
                font-size: 1.35rem;
            }
        }
        /* Felles header for alle studieelementer (xref-kart/tidslinje + AI-paneler) */
        .study-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .study-panel-header .study-panel-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .study-panel-header .study-panel-actions {
            display: inline-flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* 💬 Kommentarer-visning */
        .commentary-source { margin-bottom: 14px; }
        .commentary-entry {
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 6px;
            background: var(--bg);
        }
        .commentary-entry > summary {
            cursor: pointer;
            padding: 8px 12px;
            font-weight: 500;
            font-size: 0.9rem;
            user-select: none;
            list-style: none;
        }
        .commentary-entry > summary::-webkit-details-marker { display: none; }
        .commentary-entry > summary::before {
            content: "▸";
            display: inline-block;
            margin-right: 6px;
            transition: transform 0.15s;
            color: var(--text-muted);
        }
        .commentary-entry[open] > summary::before { transform: rotate(90deg); }
        .commentary-entry-body {
            padding: 4px 14px 14px;
            font-size: 0.93rem;
            line-height: 1.55;
            color: var(--text);
        }
        .commentary-entry-body p { margin: 0.6em 0; }
        .commentary-entry-body font[size="+1"] {
            display: block;
            font-size: 0.95rem;
            color: var(--text-muted);
            border-left: 3px solid var(--accent);
            padding-left: 10px;
            margin: 0.6em 0;
            font-style: italic;
        }
        /* Skjul bibelteksten (KJV) i kommentaren — bruker har allerede teksten åpen */
        /* Bibelteksten (KJV) som er innebygd i Matthew Henrys full-versjon
           skjules alltid — full versjon vises uten bibelteksten. */
        .commentary-entry-body font[size="+1"] { display: none; }
        /* Fane-rad for kommentar-kilder (kortfattet, detaljert, fremtidige) —
           samme stil som leksikon-fanene, men plassert øverst i panelet. */
        .commentary-source-tabs {
            display: flex;
            gap: 4px;
            margin: 0 0 12px;
            flex-wrap: wrap;
        }
        .commentary-src-btn {
            font-size: 0.78rem;
            padding: 3px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--bg);
            cursor: pointer;
            color: var(--text-muted);
        }
        .commentary-src-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .commentary-src-btn:hover:not(.active):not(:disabled) {
            color: var(--text);
            border-color: var(--accent);
        }
        /* KI-marker for setninger i kommentaren som handler om åpent vers */
        .commentary-entry-body mark.commentary-focus {
            background: rgba(255, 220, 100, 0.55);
            padding: 0 2px;
            border-radius: 2px;
            color: inherit;
        }
        [data-theme="dark"] .commentary-entry-body mark.commentary-focus {
            background: rgba(220, 180, 60, 0.40);
        }
        /* Bibelvers-lenker inni kommentar-tekst (JFB). Tema-rød farge med
           svakt rødt bakgrunns-element — ikke standard blå nettleser-lenke. */
        .commentary-entry-body .comm-ref,
        a.comm-ref {
            color: var(--accent);
            background: rgba(168, 50, 50, 0.08);
            border: 1px solid rgba(168, 50, 50, 0.18);
            border-radius: 5px;
            padding: 0 5px;
            text-decoration: none;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: background 140ms, border-color 140ms, color 140ms;
            -webkit-tap-highlight-color: transparent;
        }
        .commentary-entry-body .comm-ref:hover,
        .commentary-entry-body .comm-ref:focus-visible,
        a.comm-ref:hover,
        a.comm-ref:focus-visible {
            background: rgba(168, 50, 50, 0.18);
            border-color: var(--accent);
            outline: none;
        }
        .commentary-entry-body .comm-ref:active,
        a.comm-ref:active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        [data-theme="dark"] .commentary-entry-body .comm-ref,
        [data-theme="dark"] a.comm-ref {
            background: rgba(201, 68, 68, 0.14);
            border-color: rgba(201, 68, 68, 0.28);
        }
        [data-theme="dark"] .commentary-entry-body .comm-ref:hover,
        [data-theme="dark"] a.comm-ref:hover {
            background: rgba(201, 68, 68, 0.26);
        }

        /* ✏️ Notat-host (studieelement) */
        .note-host-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* Tilfelle C: overlap-velger når et utvalg har eksisterende notater
           som dekker noen av versene. Brukeren får liste over relevante
           notater + "lag eget"-knapp. */
        .note-host-picker {
            gap: 10px;
            padding-top: 4px;
        }
        .note-overlap-intro {
            font-size: 0.92rem;
            color: var(--text-muted);
            line-height: 1.4;
        }
        .note-overlap-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .note-overlap-item {
            text-align: left;
            background: rgba(168, 50, 50, 0.05);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 12px;
            cursor: pointer;
            font-family: inherit;
            color: var(--text);
            transition: background 140ms, border-color 140ms;
        }
        .note-overlap-item:hover {
            background: rgba(168, 50, 50, 0.10);
            border-color: var(--accent);
        }
        [data-theme="dark"] .note-overlap-item {
            background: rgba(201, 68, 68, 0.08);
        }
        [data-theme="dark"] .note-overlap-item:hover {
            background: rgba(201, 68, 68, 0.16);
        }
        .note-overlap-item-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 4px;
        }
        .note-overlap-item-ref {
            font-weight: 600;
            color: var(--accent);
            font-size: 0.92rem;
        }
        .note-overlap-item-date {
            font-size: 0.74rem;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .note-overlap-item-snippet {
            font-size: 0.86rem;
            color: var(--text);
            line-height: 1.4;
            opacity: 0.85;
            word-break: break-word;
        }
        .note-overlap-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }
        .note-overlap-new-btn {
            text-align: center;
            background: transparent;
            border: 1.5px dashed var(--border);
            border-radius: 10px;
            padding: 10px 12px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--accent);
            transition: background 140ms, border-color 140ms;
        }
        .note-overlap-new-btn:hover {
            background: rgba(168, 50, 50, 0.06);
            border-color: var(--accent);
            border-style: solid;
        }
        [data-theme="dark"] .note-overlap-new-btn:hover {
            background: rgba(201, 68, 68, 0.10);
        }
        /* Tilfelle B-tillegg: bånd som varsler om andre relaterte notater. */
        .note-related-band {
            background: rgba(168, 50, 50, 0.04);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 2px 0;
        }
        [data-theme="dark"] .note-related-band {
            background: rgba(201, 68, 68, 0.08);
        }
        .note-related-toggle {
            width: 100%;
            text-align: left;
            background: transparent;
            border: 0;
            padding: 8px 12px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.84rem;
            color: var(--text-muted);
        }
        .note-related-toggle:hover { color: var(--accent); }
        .note-related-list {
            padding: 0 8px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .note-related-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
            text-align: left;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 7px 10px;
            cursor: pointer;
            font-family: inherit;
            color: var(--text);
            transition: border-color 140ms;
        }
        .note-related-item:hover { border-color: var(--accent); }
        .note-related-item-ref {
            font-weight: 600;
            color: var(--accent);
            font-size: 0.86rem;
        }
        .note-related-item-snippet {
            font-size: 0.8rem;
            color: var(--text);
            opacity: 0.85;
            word-break: break-word;
        }
        .note-textarea-wrap {
            position: relative;
        }
        .note-textarea-wrap .note-textarea {
            padding-bottom: 44px;   /* plass til slett-knappen i hjørnet */
        }
        .note-textarea-wrap .note-host-status {
            position: absolute;
            bottom: 12px;
            left: 14px;
            pointer-events: none;
            font-size: 0.78rem;
        }
        .note-textarea-wrap .note-host-delete-btn {
            position: absolute;
            bottom: 8px;
            right: 8px;
            /* Solid bakgrunn så knappen ikke legger seg gjennomsiktig
               oppå notatteksten i den nederste 44px-sonen av textarea. */
            background: var(--card-bg);
            box-shadow: 0 0 6px 6px var(--card-bg);
        }
        .note-textarea {
            width: 100%;
            min-height: 140px;
            max-height: 75vh;        /* PC: lar lange notat ekspandere mer */
            padding: 12px 14px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.96rem;
            line-height: 1.5;
            resize: vertical;
            box-sizing: border-box;
            transition: border-color 0.18s, box-shadow 0.18s;
            overflow-y: auto;
        }
        .note-textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.18);
        }
        [data-theme="dark"] .note-textarea:focus {
            box-shadow: 0 0 0 2px rgba(201, 68, 68, 0.25);
        }
        .note-host-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.78rem;
            color: var(--text-muted);
            padding: 0 2px;
        }
        .note-host-status {
            font-style: italic;
            opacity: 0;
            transition: opacity 0.22s ease;
        }
        .note-host-status.visible { opacity: 1; }
        .note-host-actions { display: flex; gap: 6px; }
        .note-host-delete-btn {
            padding: 5px 10px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .note-host-delete-btn:hover {
            border-color: #c44;
            color: #c44;
        }
        /* Notat-knapp i toolbar: liten prikk-indikator når et notat er lagret */
        .card-action-btn.note-btn.has-note {
            border-color: var(--accent);
            color: var(--accent);
            position: relative;
        }
        .card-action-btn.note-btn.has-note::after {
            content: '';
            position: absolute;
            top: 4px;
            right: 6px;
            width: 6px;
            height: 6px;
            background: var(--accent);
            border-radius: 50%;
        }

        /* 📚 Leksikon-visning */
        .lexicon-entries { display: flex; flex-direction: column; gap: 6px; }
        .lexicon-entry {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg);
        }
        .lexicon-entry > summary {
            cursor: pointer;
            padding: 8px 12px;
            font-weight: 500;
            font-size: 0.9rem;
            user-select: none;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .lexicon-entry > summary::-webkit-details-marker { display: none; }
        .lexicon-entry > summary::before {
            content: "▸";
            color: var(--text-muted);
            transition: transform 0.15s;
            flex-shrink: 0;
        }
        .lexicon-entry[open] > summary::before { transform: rotate(90deg); }
        .lexicon-title { flex: 1; }
        .lexicon-orig {
            color: var(--text-muted);
            font-size: 0.8em;
            font-weight: 400;
            font-style: italic;
            margin: -2px 0 8px;
            letter-spacing: 0.2px;
        }
        .lexicon-orig::before { content: '🇬🇧 '; font-style: normal; opacity: 0.7; }
        .lexicon-source-tag {
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--text-muted);
            background: var(--bg-alt, var(--border));
            border-radius: 4px;
            padding: 1px 6px;
            white-space: nowrap;
        }
        .lexicon-entry-body {
            padding: 4px 14px 14px;
            font-size: 0.93rem;
            line-height: 1.55;
            color: var(--text);
        }
        .lexicon-entry-body p { margin: 0.6em 0; }
        .lexicon-source-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
        .lexicon-src-btn {
            font-size: 0.78rem;
            padding: 2px 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--bg);
            cursor: pointer;
            color: var(--text-muted);
        }
        .lexicon-src-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .lexicon-empty {
            color: var(--text-muted);
            font-style: italic;
            font-size: 0.9rem;
            text-align: center;
            padding: 20px 0;
        }

        /* Fotnote om KI-bruk nederst på siden */
        .ai-footer-note {
            text-align: center;
            padding: 16px 20px 20px;
            font-size: 0.75rem;
            color: var(--text-muted);
            opacity: 0.7;
            letter-spacing: 0.2px;
        }
        /* Mobil/PWA: fest fotnoten til bunnen av viewporten på landingssiden
           (vises kun der pga body:not(.is-home) .ai-footer-note display:none),
           ellers havner den nesten midt på skjermen siden landingssiden har
           lite innhold (kun dagens vers). Reserverer tilsvarende plass i
           bunnen av results-wrapper så dagens-vers ikke skjules. */
        @media (max-width: 700px) {
            body.is-home .ai-footer-note {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
                background: var(--bg);
                opacity: 0.85;
                z-index: 1;
            }
            body.is-home .results-wrapper { padding-bottom: 64px; }
        }

        /* Verktøy-rad under hvert vers-kort. Default: hover-popout-stilet
           absolutt-posisjonert, men usynlig (opacity:0) — slik at både åpning OG
           lukking kan ha glatt CSS-transition i stedet for harde display-skifter.
           Origin er ved 🎓-knappen så popouten "vokser ut" av den ved åpning og
           "trekkes tilbake" mot den ved lukking. */
        /* Kapittel-toolbar: alltid synlig under chevron-raden. Studie-toggle
           er fjernet — knappene flyter inline under vers-kortet.
           (Tidligere ble den togglet via data-state="hidden|hover|locked";
           den state-mekanismen er borte i favor av alltid-synlig.) */
        .chevron-and-tools .verse-card-toolbar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 10px 0 6px;
            padding: 6px 8px;
            gap: 8px;
        }
        /* På mobil ved kapittel-visning (>5 vers): skjul Sammenlign /
           Alle versjoner / Tema — de blir for tunge å bruke. Aktive
           knapper beholdes så brukeren kan slå dem av igjen. */
        @media (max-width: 700px) {
            .verse-card-toolbar.is-chapter-view .compare-toggle-btn:not(.active),
            .verse-card-toolbar.is-chapter-view .allversjoner-btn:not(.active),
            .verse-card-toolbar.is-chapter-view .topic-btn:not(.active) {
                display: none;
            }
        }
        /* (Tidligere data-state-baserte animasjoner og keyframes for slide-inn/ut
           av verktøyraden er fjernet — toolbar er nå alltid synlig.) */

        /* Card footer buttons (behold CSS for bakoverkompatibilitet hvis brukt andre steder) */
        .verse-card-footer {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
            flex-wrap: wrap;
        }
        .card-action-btn {
            padding: 8px 18px;
            font-size: 0.88rem;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            cursor: pointer;
            color: var(--text-muted);
            font-weight: 600;
            letter-spacing: 0.1px;
            transition: all 0.18s;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .card-action-btn:hover:not(:disabled) {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.22), 0 0 10px rgba(168, 50, 50, 0.25);
        }
        [data-theme="dark"] .card-action-btn:hover:not(:disabled) {
            box-shadow: 0 0 0 2px rgba(201, 68, 68, 0.3), 0 0 12px rgba(201, 68, 68, 0.35);
        }
        .card-action-btn:active:not(:disabled) { transform: translateY(0); }
        /* Ekstern-lenke-knapp: liten pil-pekende-ut-ikon til høyre for teksten */
        .card-action-btn.external-link-btn .external-link-icon {
            font-size: 0.78em;
            opacity: 0.65;
            margin-left: 2px;
            display: inline-block;
            transform: translateY(-1px);
        }
        .card-action-btn.external-link-btn:hover:not(:disabled) .external-link-icon {
            opacity: 1;
        }
        /* Aktiv (valgt) stil for ikke-KI-knapper: rødt fylt, hvit tekst — samme som .copy-btn.active */
        .card-action-btn.active:not(.ai-btn) {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        .card-action-btn.active:not(.ai-btn):hover:not(:disabled) {
            background: var(--accent-hover);
            color: white;
            box-shadow: 0 0 0 2px rgba(168, 50, 50, 0.3), 0 0 12px rgba(168, 50, 50, 0.4);
            border-color: var(--accent);
        }

        /* KI-knapper i verktøylinjen: nøytrale som standard, gul tint ved hover, gul glow når aktiv */
        .card-action-btn.ai-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, #fff8d8, #fbd27d);
            color: #7a5b1a;
            border-color: rgba(217, 158, 10, 0.75);
            box-shadow: 0 3px 10px rgba(217, 158, 10, 0.2);
        }
        .card-action-btn.ai-btn.active {
            background: linear-gradient(180deg, #e9a10c, #c08400);
            color: #fff;
            border-color: #9a6a00;
            box-shadow: none;
        }
        .card-action-btn.ai-btn.active:hover:not(:disabled) {
            background: linear-gradient(180deg, #f2ab12, #cc8e00);
            color: #fff;
            border-color: #9a6a00;
            box-shadow: none;
        }
        [data-theme="dark"] .card-action-btn.ai-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, #4a3a14, #342408);
            color: #fbbf24;
            border-color: rgba(217, 158, 10, 0.6);
        }
        [data-theme="dark"] .card-action-btn.ai-btn.active {
            background: linear-gradient(180deg, #c08400, #9a6a00);
            color: #fff7d6;
            border-color: #6b4900;
            box-shadow: none;
        }

        /* Error */
        .error-card { background: var(--error-bg); border-left: 4px solid var(--error); }
        .error-card .verse-card-label { color: var(--error); }
        .error-message { color: var(--error); font-size: 0.95rem; }

        /* Text search results */
        .search-result-item {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 14px 18px;
            margin-bottom: 10px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: border-color 0.2s;
            border: 2px solid transparent;
        }
        .search-result-item:hover { border-color: var(--accent); }
        .search-result-ref {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.9rem;
            margin-bottom: 4px;
            display: flex;
            align-items: baseline;
            gap: 6px;
        }
        .search-result-version {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--text-muted);
            opacity: 0.8;
            letter-spacing: 0.2px;
        }
        .search-result-text {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text);
        }
        .search-result-count {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        /* All-versions view */
        .all-versions-block {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 20px 24px;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }
        .all-versions-block .version-label {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--accent);
            margin-bottom: 8px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }
        .all-versions-block .version-label:first-child {
            padding-top: 0;
            border-top: none;
        }
        .all-versions-block .verse-text {
            margin-bottom: 18px;
        }
        .all-versions-block .verse-text:last-child { margin-bottom: 0; }

        /* Collapsible book groups - integrated card style */
        .book-group {
            margin-bottom: 10px;
            background: var(--card-bg);
            border: 2px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .book-group:has(.book-group-header.open) { border-color: var(--accent); }
        .book-group-header {
            padding: 12px 18px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            color: var(--accent);
            user-select: none;
        }
        .book-group-header:hover { background: rgba(168, 50, 50, 0.04); }
        [data-theme="dark"] .book-group-header:hover { background: rgba(201, 68, 68, 0.08); }
        .book-group-header .chevron {
            transition: transform 0.2s;
            font-size: 0.8em;
            color: var(--text-muted);
        }
        .book-group-header.open .chevron { transform: rotate(90deg); }
        .book-group-count {
            font-weight: 400;
            color: var(--text-muted);
            font-size: 0.9em;
            margin-left: 6px;
        }
        /* .book-group-items-overrides er definert lengre ned (grid-animert) */
        .book-group-item {
            padding: 12px 18px;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.15s;
        }
        .book-group-item:last-child { border-bottom: none; }
        .book-group-item:hover { background: rgba(168, 50, 50, 0.05); }
        [data-theme="dark"] .book-group-item:hover { background: rgba(201, 68, 68, 0.1); }
        .book-group-item.expanded { background: rgba(168, 50, 50, 0.05); }
        [data-theme="dark"] .book-group-item.expanded { background: rgba(201, 68, 68, 0.1); }
        .book-group-more {
            padding: 10px 18px;
            font-size: 0.85rem;
            color: var(--text-muted);
            font-style: italic;
            border-top: 1px solid var(--border);
            text-align: center;
        }
        .book-group-actions {
            padding: 10px 18px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .other-version-header {
            font-weight: 700;
            color: var(--accent);
            margin: 16px 0 8px;
            padding: 0 2px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .search-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 20px 20px 60px;
            color: var(--text-muted);
        }
        .empty-state h2 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text); }

        /* Diskret tekst-link i empty-state: "📖 Bla i Bibelen ›" */
        .browse-bible-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin: 6px auto 22px;
            padding: 7px 12px;
            background: transparent;
            border: none;
            color: var(--accent, #a83232);
            font-size: 0.95rem;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .browse-bible-link:hover,
        .browse-bible-link:focus-visible {
            background: rgba(168, 50, 50, 0.08);
            outline: none;
        }
        [data-theme="dark"] .browse-bible-link:hover,
        [data-theme="dark"] .browse-bible-link:focus-visible {
            background: rgba(220, 100, 100, 0.12);
        }
        .browse-bible-link svg { width: 17px; height: 17px; flex-shrink: 0; }
        /* display: inline-flex overrider [hidden]-attributtets default display:none.
           Eksplisitt regel for å sikre at hidden-attributtet faktisk skjuler knappen
           (brukes av Fortsett-knappen som er hidden inntil localStorage har data). */
        .browse-bible-link[hidden] { display: none; }
        .competitor-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin: 0 auto 14px;
            padding: 6px 14px;
            font-size: 0.82rem;
            font-weight: 600;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.18s;
        }
        .competitor-link:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-1px);
        }

        /* Modal (Info-vindu) */
        .modal-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.42);
            z-index: 500;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 180ms cubic-bezier(.2, .8, .2, 1);
        }
        .modal-backdrop.open { display: flex; }
        @keyframes fadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }
        .modal-card {
            background: var(--card-bg);
            border-radius: 24px;
            max-width: 680px;
            width: 100%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            animation: modalPop 200ms cubic-bezier(.2, .8, .2, 1);
            overflow: hidden;
        }
        .modal-card-head { flex: 0 0 auto; }
        .modal-card .modal-card-body {
            flex: 1 1 auto;
            overflow-y: auto;
            min-height: 0;
        }
        @keyframes modalPop {
            from { opacity: 0; transform: translateY(10px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .modal-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
            color: var(--text);
        }
        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.6rem;
            cursor: pointer;
            line-height: 1;
            padding: 0 4px;
            transition: color 0.15s;
        }
        .modal-close:hover { color: var(--accent); }
        .modal-card-body {
            padding: 16px 20px 20px;
            font-size: 0.95rem;
            line-height: 1.55;
            color: var(--text);
        }
        .modal-card-body p { margin: 0 0 10px; }
        .modal-card-body p:last-child { margin-bottom: 0; }
        .modal-card-body code {
            background: var(--border);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.88em;
        }
        .modal-card-body h3 {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--accent);
            margin: 22px 0 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border);
        }
        .modal-card-body h3:first-child { margin-top: 0; }
        .modal-card-body ul {
            margin: 0 0 10px;
            padding-left: 22px;
        }
        .modal-card-body ul li { margin-bottom: 4px; }
        .modal-card-body a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid rgba(168, 50, 50, 0.4);
        }
        .modal-card-body a:hover { border-bottom-color: var(--accent); }
        [data-theme="dark"] .modal-card-body a { border-bottom-color: rgba(201, 68, 68, 0.5); }
        .modal-links {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }
        .modal-links .competitor-link,
        .modal-links .feedback-link { margin: 0; }
        .feedback-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 999px;
            background: var(--accent);
            color: white !important;
            border: 1px solid var(--accent) !important;
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 600;
            transition: background 0.15s, transform 0.15s;
        }
        .feedback-link:hover { background: var(--accent-hover); transform: translateY(-1px); }

        /* ── Tour-modal (velkomst-veiledning for nye brukere) ─────────── */
        .tour-card {
            max-width: 520px;
            /* Egen, mykere pop-animasjon for tour'en — mer subtil enn standard
               modalPop, med litt lengre varighet og ease-out som gir en behagelig
               innføringsfølelse i stedet for en harsh pop. */
            animation: tourCardIn 380ms cubic-bezier(.16, 1, .3, 1);
        }
        @keyframes tourCardIn {
            from { opacity: 0; transform: translateY(20px) scale(0.94); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* Backdrop for tour-modalen får også en mykere fade-in */
        #tourModal {
            animation: tourBackdropIn 340ms ease-out;
        }
        @keyframes tourBackdropIn {
            from { background: rgba(0, 0, 0, 0); }
            to   { background: rgba(0, 0, 0, 0.42); }
        }
        .tour-card .modal-card-body {
            text-align: center;
            padding: 28px 28px 20px;
            /* Container for slide-transitions. Innholdet kan gli inn fra venstre
               eller høyre avhengig av navigasjonsretningen. */
            overflow: hidden;
            position: relative;
        }
        .tour-slide-content {
            animation-duration: 320ms;
            animation-timing-function: cubic-bezier(.22, .9, .28, 1);
            animation-fill-mode: both;
        }
        .tour-slide-content.slide-from-right {
            animation-name: tourSlideFromRight;
        }
        .tour-slide-content.slide-from-left {
            animation-name: tourSlideFromLeft;
        }
        @keyframes tourSlideFromRight {
            from { opacity: 0; transform: translateX(36px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes tourSlideFromLeft {
            from { opacity: 0; transform: translateX(-36px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .tour-card,
            #tourModal,
            .tour-slide-content { animation: none !important; }
        }
        .tour-emoji {
            font-size: 3rem;
            line-height: 1;
            margin: 4px 0 14px;
            display: block;
            transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
        }
        .tour-title {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 8px;
            letter-spacing: -0.2px;
        }
        .tour-body {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.55;
            margin: 0;
        }
        .tour-body code {
            background: var(--border);
            color: var(--text);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 0.86em;
            white-space: nowrap;
        }
        .tour-body ul {
            text-align: left;
            margin: 12px 0 0;
            padding: 0 0 0 4px;
            list-style: none;
        }
        .tour-body li {
            padding: 5px 0 5px 26px;
            position: relative;
        }
        .tour-body li::before {
            content: '✓';
            position: absolute;
            left: 4px;
            top: 5px;
            color: var(--accent);
            font-weight: 700;
        }
        .tour-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 20px;
            border-top: 1px solid var(--border);
            flex: 0 0 auto;
        }
        .tour-dots {
            display: flex;
            gap: 6px;
        }
        .tour-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: var(--border);
            transition: background 0.18s, transform 0.18s;
        }
        .tour-dot.active {
            background: var(--accent);
            transform: scale(1.3);
        }
        .tour-actions { display: flex; gap: 8px; }
        .tour-btn {
            padding: 8px 16px;
            font-size: 0.88rem;
            font-weight: 600;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
        }
        .tour-btn:hover:not(:disabled) {
            border-color: var(--accent);
            color: var(--accent);
        }
        .tour-btn:disabled { opacity: 0.4; cursor: default; }
        .tour-btn-primary {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        .tour-btn-primary:hover:not(:disabled) {
            background: var(--accent-hover);
            color: white;
            border-color: var(--accent-hover);
        }
        @media (max-width: 700px) {
            .tour-card .modal-card-body { padding: 22px 18px 14px; }
            .tour-emoji { font-size: 2.5rem; }
            .tour-title { font-size: 1.2rem; }
            .tour-body { font-size: 0.9rem; }
            .tour-footer { padding: 12px 14px; }
        }
        .feedback-link:disabled { opacity: 0.5; cursor: progress; transform: none; }

        /* ── Tilbakemeldings-skjema ── */
        .feedback-form {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .feedback-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
        }
        .feedback-field span { letter-spacing: 0.2px; }
        .feedback-field select,
        .feedback-field input[type="email"],
        .feedback-field textarea {
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 400;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--card-bg);
            color: var(--text);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .feedback-field select:focus,
        .feedback-field input:focus,
        .feedback-field textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(168, 50, 50, 0.15);
        }
        .feedback-field textarea {
            resize: vertical;
            min-height: 110px;
            line-height: 1.5;
        }
        .feedback-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 4px;
        }
        .feedback-status {
            font-size: 0.85rem;
            min-height: 1.2em;
            color: var(--text-muted);
        }
        .feedback-status.error { color: var(--error, #c0392b); }
        .feedback-status.ok { color: #2e7d32; }
        [data-theme="dark"] .feedback-status.ok { color: #5fbf6a; }
        .empty-state p { font-size: 0.95rem; line-height: 1.6; }

        /* Dagens vers — stille påminnelse om at Guds ord er sentralt */
        .daily-verse {
            max-width: 600px;
            margin: 28px auto 44px;
            padding: 28px 24px;
            text-align: center;
            animation: fadeInUp 600ms cubic-bezier(.2, .8, .2, 1);
        }
        .daily-verse-mark {
            color: var(--accent);
            font-size: 1.05rem;
            opacity: 0.55;
            margin-bottom: 18px;
            letter-spacing: 14px;
            padding-left: 14px;
        }
        .daily-verse-text {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 1.25rem;
            line-height: 1.65;
            color: var(--text);
            font-style: italic;
            margin-bottom: 12px;
        }
        .daily-verse-ref {
            font-size: 0.82rem;
            color: var(--text-muted);
            letter-spacing: 0.4px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .daily-verse-divider {
            width: 40px;
            height: 1px;
            background: var(--border);
            margin: 32px auto 24px;
            opacity: 0.6;
        }
        @media (max-width: 700px) {
            .daily-verse { padding: 18px 16px; margin: 16px auto 28px; }
            .daily-verse-text { font-size: 1.08rem; line-height: 1.55; }
            .daily-verse-mark { font-size: 0.9rem; margin-bottom: 14px; }
        }
        .empty-state code {
            background: var(--border);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
        }

        /* Toast */
        .toast {
            position: fixed; bottom: 24px; left: 50%;
            transform: translateX(-50%) translateY(80px);
            transition: opacity 200ms cubic-bezier(.2, .8, .2, 1), transform 200ms cubic-bezier(.2, .8, .2, 1);
            background: #333; color: white;
            padding: 10px 20px;
            border-radius: 999px;
            font-size: 0.9rem;
            opacity: 0;
            transition: all 0.3s;
            z-index: 1000;
            pointer-events: none;
            /* Defensive: lang toast-tekst skal ikke strikke utenfor viewport
               (ville utvidet html-bredden og trigget iOS zoom-out-glitch).
               Lange meldinger wrapper til neste linje innenfor toasten. */
            max-width: calc(100vw - 24px);
            box-sizing: border-box;
            text-align: center;
            word-break: break-word;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        .btn-ai {
            background: #f5f0e0;
            color: #8b6914;
            border: 1px solid #d4b44a;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .btn-ai:hover { background: #ede3c0; }
        .btn-ai:disabled { opacity: 0.6; cursor: wait; }
        [data-theme="dark"] .btn-ai { background: #3a3010; color: #d4a84b; border-color: #6b5520; }
        [data-theme="dark"] .btn-ai:hover { background: #4a3e14; }

        /* Compare card (side by side on PC, stacked on mobil) */
        .verse-card.compare-card {
            border-top: 3px solid var(--accent);
            animation: compareSlideInMobile 220ms cubic-bezier(.2, .8, .2, 1);
        }
        @media (min-width: 701px) {
            .verse-card.compare-card {
                border-top: none;
                border-left: 3px solid var(--accent);
                animation: compareSlideInDesktop 220ms cubic-bezier(.2, .8, .2, 1);
            }
        }
        .compare-card-header { flex-wrap: wrap; gap: 10px; }

        /* ── Animasjoner ── */
        /* Skeleton-loader: pulserende grå linjer mens KI analyserer */
        .skeleton-block { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
        .skeleton-line {
            height: 12px;
            border-radius: 4px;
            background: linear-gradient(90deg,
                var(--border) 0%,
                rgba(255,255,255,0.4) 50%,
                var(--border) 100%);
            background-size: 200% 100%;
            animation: skeletonShimmer 1.4s var(--ease-in-out) infinite;
        }
        [data-theme="dark"] .skeleton-line {
            background: linear-gradient(90deg,
                var(--border) 0%,
                rgba(255,255,255,0.08) 50%,
                var(--border) 100%);
            background-size: 200% 100%;
        }
        .skeleton-line.short { width: 62%; }
        .skeleton-line.medium { width: 85%; }
        @keyframes skeletonShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .skeleton-line { animation: none; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes compareSlideInDesktop {
            from { opacity: 0; transform: translateX(-16px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes compareSlideInMobile {
            from { opacity: 0; transform: translateY(-12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes popoverOpen {
            0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
            60%  { opacity: 1; }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes popoverClose {
            from { opacity: 1; transform: translateY(0) scale(1); }
            to   { opacity: 0; transform: translateY(6px) scale(0.96); }
        }
        @keyframes expandOpen {
            from { opacity: 0; transform: scaleY(0.92); }
            to   { opacity: 1; transform: scaleY(1); }
        }
        @keyframes panelOpen {
            from { opacity: 0; transform: translateY(-6px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* note-popover åpne/lukke-animasjon styres av .note-popover-collapse-wrapperen */
        .note-popover-collapse.closing { pointer-events: none; }
        .inline-verse-expand {
            animation: expandOpen 240ms cubic-bezier(.2, .8, .2, 1);
            transform-origin: top;
        }
        .version-picker-panel.open {
            animation: panelOpen 170ms cubic-bezier(.2, .8, .2, 1);
            transform-origin: top right;
        }
        /* Myke hover-transitions på klikkbare elementer */
        .note-marker, .xref-btn, .compare-version-btn, .card-action-btn,
        .btn, .btn-primary, .btn-secondary, .search-btn-inline,
        .copy-btn, .version-picker-trigger, .version-option,
        .book-group-header, .book-group-item, .search-result-item {
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }
        .book-group-header .chevron { transition: transform 0.2s cubic-bezier(.2, .8, .2, 1); }
        .note-marker:active, .xref-btn:active, .card-action-btn:active,
        .btn:active, .copy-btn:active, .compare-version-btn:active { transform: scale(0.96); }

        /* Kort-entré med liten stagger (maks 6 elementer) */
        .verse-card:not(.compare-card),
        .search-result-item,
        .all-versions-block,
        .book-group {
            animation: fadeInUp var(--dur-med) var(--ease-out) both;
            /* Stagger via --i CSS-variabel satt fra JS (cap: 14 × 24ms = 336ms) */
            animation-delay: calc(min(var(--i, 0), 14) * 24ms);
        }
        /* content-visibility sparer render-kost på store lister */
        .book-group {
            content-visibility: auto;
            contain-intrinsic-size: auto 140px;
        }
        .search-result-item {
            content-visibility: auto;
            contain-intrinsic-size: auto 64px;
        }

        /* ── Felles slide-down/up for bibelkart + statistikk ── */
        .search-viz-collapse {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            margin-top: 0;
            transition: grid-template-rows 0.32s cubic-bezier(.2, .8, .2, 1),
                        opacity 0.22s ease,
                        margin-top 0.32s cubic-bezier(.2, .8, .2, 1);
        }
        .search-viz-collapse.open {
            grid-template-rows: 1fr;
            opacity: 1;
            margin-top: 6px;
        }
        .search-viz-collapse > .search-viz-inner {
            overflow: hidden;
            min-height: 0;
        }
        /* Inni search-viz: drep doble animasjoner og fjern toppmargin —
           parent .search-viz-collapse styrer slide-down/up alene. */
        .search-viz-collapse .bible-map-wrap,
        .search-viz-collapse .stats-wrap {
            animation: none;
            margin-top: 0;
        }

        /* ── Søke-statistikk-panel ── */
        .stats-wrap {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 18px 20px;
            animation: fadeInUp 220ms cubic-bezier(.2, .8, .2, 1);
        }
        .stats-summary {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }
        .stats-summary .stat-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .stats-summary .stat-num {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--accent);
            line-height: 1;
        }
        .stats-summary .stat-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .stats-section-title {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--text-muted);
            margin: 10px 0 8px;
        }
        .stats-otnt-bar {
            display: flex;
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            margin: 6px 0 4px;
            background: var(--border);
        }
        .stats-otnt-bar .seg-ot { background: #a83232; }
        .stats-otnt-bar .seg-nt { background: #d4a84b; }
        [data-theme="dark"] .stats-otnt-bar .seg-ot { background: #c94444; }
        [data-theme="dark"] .stats-otnt-bar .seg-nt { background: #e0b860; }
        .stats-otnt-legend {
            display: flex;
            gap: 14px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        .stats-otnt-legend .dot {
            display: inline-block;
            width: 10px; height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            vertical-align: middle;
        }
        .stats-bookbars { display: flex; flex-direction: column; gap: 5px; }
        .stats-bookbar-row {
            display: grid;
            grid-template-columns: 120px 1fr 42px;
            gap: 10px;
            align-items: center;
            cursor: pointer;
            padding: 3px 2px;
            border-radius: 4px;
            transition: background 0.12s;
        }
        .stats-bookbar-row:hover { background: rgba(168, 50, 50, 0.06); }
        [data-theme="dark"] .stats-bookbar-row:hover { background: rgba(201, 68, 68, 0.1); }
        .stats-bookbar-name {
            font-size: 0.86rem;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .stats-bookbar-track {
            background: var(--border);
            height: 14px;
            border-radius: 7px;
            overflow: hidden;
            position: relative;
        }
        .stats-bookbar-fill {
            height: 100%;
            background: linear-gradient(90deg, #a83232, #c94444);
            border-radius: 7px;
            transition: width 0.3s ease;
        }
        .stats-bookbar-count {
            font-size: 0.82rem;
            color: var(--text-muted);
            font-weight: 600;
            text-align: right;
        }
        .stats-timeline {
            width: 100%;
            overflow-x: auto;
            padding: 6px 0;
        }
        .stats-timeline svg { display: block; width: 100%; min-width: 620px; height: 130px; }
        .stats-tl-bar { transition: opacity 0.15s; }
        .stats-tl-bar:hover { opacity: 0.72; cursor: pointer; }
        .stats-tl-axis { fill: var(--text-muted); font-size: 9px; font-family: inherit; }
        .stats-tl-divider { stroke: var(--border); stroke-width: 1; }

        /* Segmented toggle for xref-kartets fargemodus */
        .xref-mode-toggle {
            display: inline-flex;
            gap: 0;
            padding: 2px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            margin-bottom: 8px;
        }
        .xref-mode-btn {
            background: var(--card-bg);
            border: none;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 5px 14px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            letter-spacing: 0.2px;
        }
        .xref-mode-btn:hover:not(.active) { color: var(--text); }
        .xref-mode-btn.active {
            background: var(--accent);
            color: white;
        }
        [data-theme="dark"] .xref-mode-btn.active { background: var(--accent); color: white; }
        /* Grunntekst-modus-toggle: lengre, beskrivende etiketter
           ("Grunntekst-rekkefølge" / "Engelsk rekkefølge"). Tillat at de
           to knappene fyller bredden og wrapper til to linjer på smale
           skjermer i stedet for å overflyte drawer-en. */
        .strongs-mode-toggle {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: 2px;
        }
        .strongs-mode-toggle .xref-mode-btn {
            flex: 1 1 auto;
            padding: 6px 10px;
            font-size: 0.75rem;
            white-space: nowrap;
        }
        .timeline-controls-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        .timeline-zoom-btn {
            background: var(--card-bg);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            letter-spacing: 0.2px;
        }
        .timeline-zoom-btn:hover {
            color: var(--text);
            border-color: var(--accent);
        }

        /* ── Bibelkart ── */
        .bible-map-wrap {
            margin-top: 6px;
            padding: 16px 18px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 24px;
            animation: vizSpringIn 320ms cubic-bezier(.2, .85, .32, 1.05);
            transform-origin: top center;
        }
        @keyframes vizSpringIn {
            /* Kun opacity-fade — ingen transform i det hele tatt. Tidligere
               versjoner brukte translateY/scale, men det skapte synlige
               sub-pixel-hopp ved entry på mobil (etter swipe og refresh). */
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .bible-map-wrap .bible-map { margin-top: 0; }
        .bible-map-wrap.ai-host-wrap {
            padding: 0;
            background: transparent;
            border: none;
        }
        .bible-map-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: transparent;
            border: 1.5px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 600;
            transition: all 0.2s;
        }
        .bible-map-toggle:hover { border-color: var(--accent); color: var(--accent); }
        .bible-map-toggle.open { background: var(--accent); color: white; border-color: var(--accent); }

        .bible-map {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.35s cubic-bezier(.4, 0, .2, 1);
        }
        .bible-map-inner { overflow: hidden; min-height: 0; }
        .bible-map.open { grid-template-rows: 1fr; }

        /* ── BibleProject-video-host ──────────────────────────────────────
           Klikk-for-å-laste: nøytrale kort (ingen ekstern request) som
           byttes ut med en youtube-nocookie-iframe ved klikk. */
        .bp-video-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .bp-video { width: 100%; }
        .bp-video-card {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(168,50,50,0.10), rgba(168,50,50,0.04));
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            transition: background 140ms, border-color 140ms, transform 80ms;
            -webkit-tap-highlight-color: transparent;
        }
        .bp-video-card:hover,
        .bp-video-card:focus-visible {
            border-color: var(--accent);
            background: linear-gradient(135deg, rgba(168,50,50,0.16), rgba(168,50,50,0.06));
            outline: none;
        }
        .bp-video-card:active { transform: scale(0.99); }
        [data-theme="dark"] .bp-video-card {
            background: linear-gradient(135deg, rgba(201,68,68,0.16), rgba(201,68,68,0.06));
        }
        .bp-video-play {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
        }
        .bp-video-card-title {
            font-size: 0.98rem;
            font-weight: 600;
            line-height: 1.3;
        }
        /* 16:9-ramme for den innebygde spilleren etter klikk */
        .bp-video-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            overflow: hidden;
            background: #000;
        }
        .bp-video-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .bp-video-credit {
            margin-top: 10px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        .bible-map-body {
            margin-top: 12px;
            padding: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            opacity: 0;
            transition: opacity 0.28s ease 0.08s;
        }
        .bible-map.open .bible-map-body { opacity: 1; }
        .bible-map-section-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin: 4px 0 6px;
        }
        .bible-map-section-label:not(:first-child) { margin-top: 14px; }
        .bible-map-grid {
            display: grid;
            gap: 3px;
        }
        .bible-map-grid.ot { grid-template-columns: repeat(13, minmax(0, 1fr)); }
        .bible-map-grid.nt { grid-template-columns: repeat(9, minmax(0, 1fr)); }
        @media (max-width: 700px) {
            .bible-map-grid.ot { grid-template-columns: repeat(10, minmax(0, 1fr)); }
            .bible-map-grid.nt { grid-template-columns: repeat(7, minmax(0, 1fr)); }
            .bible-map-body { padding: 12px; border-radius: 16px; }
        }
        .bible-map-cell {
            position: relative;
            aspect-ratio: 1;
            border-radius: 6px;
            background: rgba(168, 50, 50, 0.05);
            color: var(--text);
            font-size: 0.66rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.12s cubic-bezier(.2,.8,.2,1);
            user-select: none;
            overflow: hidden;
        }
        [data-theme="dark"] .bible-map-cell { background: rgba(201, 68, 68, 0.08); }
        .bible-map-cell:hover { transform: scale(1.18); z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .bible-map-cell.empty { opacity: 0.32; cursor: default; }
        .bible-map-cell.empty:hover { transform: none; box-shadow: none; }
        .bible-map-cell-count {
            position: absolute;
            top: 1px;
            right: 2px;
            font-size: 0.55rem;
            font-weight: 600;
            color: rgba(255,255,255,0.85);
            text-shadow: 0 1px 1px rgba(0,0,0,0.3);
            pointer-events: none;
        }
        .bible-map-cell.strong { color: white; }
        .bible-map-cell.strong .bible-map-cell-count { color: rgba(255,255,255,0.9); }
        .bible-map-scale {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            font-size: 0.72rem;
            color: var(--text-muted);
        }
        .bible-map-scale-bar {
            flex: 0 0 100px;
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(to right, rgba(168,50,50,0.08), rgba(168,50,50,0.85));
        }

        /* AI-utheving av forskjeller i sammenligning */
        .ai-diff-highlight {
            background: rgba(251, 191, 36, 0.42);
            padding: 0 2px;
            border-radius: 3px;
            color: inherit;
            animation: highlightPulse 500ms cubic-bezier(.2, .8, .2, 1);
        }
        [data-theme="dark"] .ai-diff-highlight { background: rgba(251, 191, 36, 0.32); }
        @keyframes highlightPulse {
            from { background: rgba(251, 191, 36, 0); }
            to   { background: rgba(251, 191, 36, 0.42); }
        }

        /* AI-paneler (Kontekst, Tema-kart) — gul nyanse så det er tydelig KI-innhold */
        .ai-panel {
            padding: 16px 18px;
            background: linear-gradient(180deg, #fffbe6, #fff5cc);
            border: 1px solid rgba(217, 158, 10, 0.35);
            border-radius: 24px;
            animation: fadeInUp 220ms cubic-bezier(.2, .8, .2, 1);
            color: #6b4e0f;
        }
        [data-theme="dark"] .ai-panel {
            background: linear-gradient(180deg, #2a2110, #241c08);
            border-color: rgba(217, 158, 10, 0.35);
            color: #f2dc9a;
        }
        .ai-panel .ai-panel-title { color: #8b6914; }
        [data-theme="dark"] .ai-panel .ai-panel-title { color: #d4a84b; }
        .ai-panel .ai-panel-body { color: inherit; }
        .ai-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .ai-panel-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .ai-panel-body { font-size: 0.95rem; }

        .theme-section-header {
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 4px 0 4px 10px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        .theme-section-name {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--text);
        }
        .theme-section-meta {
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        .theme-section-searches {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            padding: 0 10px 8px;
            margin-top: -2px;
        }
        .theme-search-pill {
            padding: 2px 9px;
            font-size: 0.72rem;
            border-radius: 999px;
            background: rgba(168, 50, 50, 0.06);
            border: 1px solid var(--border);
            color: var(--text-muted);
            white-space: nowrap;
        }
        [data-theme="dark"] .theme-search-pill { background: rgba(201, 68, 68, 0.08); }

        .theme-mode-bar { margin-bottom: 10px; }
        .theme-mode-bar .xref-mode-toggle { margin-bottom: 0; }
        .theme-topic-toggle {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 14px;
        }
        .theme-topic-toggle .xref-mode-btn {
            border: 1px solid rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.42);
            color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.95);
            background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.06);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .theme-topic-toggle .xref-mode-btn:hover:not(.active) {
            border-color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.68);
            color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 1);
        }
        .theme-topic-toggle .xref-mode-btn.active {
            color: white;
            background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.88);
            border-color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.95);
        }
        .theme-topic-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.35);
        }
        .theme-topic-toggle .xref-mode-btn.active .theme-topic-dot { background: #fff; }

        /* Brødsmule-navigasjon i tema-hierarkiet */
        .topic-breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 2px;
            font-size: 0.82rem;
            margin-bottom: 8px;
            color: var(--text-muted);
        }
        .topic-breadcrumb-btn {
            background: none;
            border: none;
            padding: 2px 5px;
            border-radius: 6px;
            cursor: pointer;
            color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.9);
            font-size: 0.82rem;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .topic-breadcrumb-btn:hover { opacity: 0.75; }
        .topic-breadcrumb-sep { padding: 0 2px; opacity: 0.5; }
        .topic-breadcrumb-cur { padding: 2px 5px; font-weight: 600; color: var(--text); }
        .topic-pill-chevron { opacity: 0.6; margin-left: 1px; font-size: 0.9em; }

        /* Popover: vers i en bok for et tema */
        .theme-verse-popover {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.25);
            padding: 10px;
            z-index: 400;
            width: 300px;
            max-width: calc(100vw - 20px);
            max-height: 320px;
            overflow-y: auto;
            animation: popoverOpen 170ms cubic-bezier(.2, .8, .2, 1);
            transform-origin: top center;
        }
        .theme-verse-popover-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 4px 4px 10px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 6px;
        }
        .theme-verse-popover-title {
            padding-left: 8px;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.2px;
        }
        .theme-verse-popover-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.4rem;
            cursor: pointer;
            padding: 0 8px;
            line-height: 1;
        }
        .theme-verse-popover-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .theme-verse-item {
            padding: 8px 10px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .theme-verse-item:hover { background: rgba(168,50,50,0.07); }
        .theme-verse-item-ref {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.82rem;
            margin-bottom: 3px;
        }
        .theme-verse-item-text {
            font-size: 0.85rem;
            color: var(--text);
            line-height: 1.4;
        }

        /* 🔤 Grunntekst (Strong's interlinear) — BibleHub-stil flow:
           hvert "ord" er en vertikal kolonne med 4 stablede linjer
           (KJV → grunntekst → translit → Strong#). Ingen bokser; bare luft
           mellom kolonnene. Alle linjer i en rad starter på samme baseline
           takket være faste min-høyder per linje-type. Hvert element er sin
           egen klikkbar knapp — alle åpner samme popover for ordet. */
        .strongs-interlinear {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 4px 2px 6px;
        }
        .strongs-verse {
            display: flex;
            flex-direction: column;
            gap: 6px;
            /* Tynn skille-linje under hver vers-blokk så brukeren ser hvor
               neste vers begynner selv etter wrap. Hopper over siste vers. */
            padding-bottom: 10px;
        }
        .strongs-verse:not(:last-child) {
            border-bottom: 1px solid var(--border);
        }
        .strongs-verse-header {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--accent);
            letter-spacing: 0.3px;
        }
        /* ── Modus-toggel (enkel/dyp) øverst i grunntekst-elementet ───────── */
        .strongs-mode-toggle { margin-bottom: 10px; }
        /* ── Enkel/KJV-modus: løpende tekst med klikkbare Strong-tagger ───── */
        .strongs-kjv {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 4px 2px 6px;
        }
        .strongs-kjv-text {
            margin: 0;
            font-size: 1rem;
            line-height: 1.95;
            color: var(--text);
        }
        .strongs-kjv-word { font-family: inherit; }
        button.strongs-kjv-word {
            background: transparent;
            border: none;
            padding: 0 1px;
            margin: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.12s;
        }
        .strongs-kjv-tagged {
            text-decoration: underline dotted rgba(168, 50, 50, 0.4);
            text-underline-offset: 3px;
        }
        .strongs-kjv-tagged:hover { background: rgba(168, 50, 50, 0.12); }
        .strongs-kjv-num {
            font-size: 0.62em;
            font-weight: 600;
            margin-left: 1px;
            vertical-align: super;
            line-height: 0;
        }
        .strongs-kjv-gr .strongs-kjv-num { color: #2f6f9f; }
        .strongs-kjv-hb .strongs-kjv-num { color: #9f6b2f; }
        [data-theme="dark"] .strongs-kjv-gr .strongs-kjv-num { color: #6fb0d8; }
        [data-theme="dark"] .strongs-kjv-hb .strongs-kjv-num { color: #d8a96f; }
        /* Flow-rad: kolonnene flyter venstre-til-høyre og wrapper til ny rad
           ved viewport-bredde. På smal mobil tillates også horisontal scroll
           innen verseblokken så svært lange vers kan swipes som BibleHub.
           Brukeren ser fade-mask i kanten som hint. */
        .strongs-flow {
            display: flex;
            flex-wrap: wrap;
            row-gap: 12px;
            column-gap: 14px;
            align-items: flex-start;
        }
        /* Kolonne for ett ord — fire stablede linjer. align-items: flex-start
           gjør at toppen av kolonnene aligner med naboene. */
        .strongs-word-col {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            line-height: 1.15;
            min-width: 0;       /* så flex-children kan krympe */
        }
        /* Hver linje er enten <button> (klikkbar lemma) eller <span> (ren
           tekst). Basisstilen nullstiller button-styling så de ser ut som
           naturlig tekst, og legger kun interaksjons-stiler på
           .strongs-line-clickable (lemma). */
        .strongs-line {
            display: block;
            background: transparent;
            border: none;
            padding: 1px 2px;
            margin: 0;
            font-family: inherit;
            color: inherit;
            cursor: default;
            border-radius: 4px;
            white-space: nowrap;
        }
        /* Klikkbar lemma — primært klikkmål per ord. Subtil stiplet under-
           streking gjør det visuelt tydelig at det er interaktivt, både på
           mus-hover og på berøringsskjerm der det ikke finnes hover. */
        .strongs-line-clickable {
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
            text-decoration: underline dotted rgba(168, 50, 50, 0.45);
            text-underline-offset: 3px;
        }
        .strongs-line-clickable:hover {
            background: rgba(168, 50, 50, 0.10);
            color: var(--accent);
            text-decoration-color: var(--accent);
        }
        .strongs-line-clickable:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
            text-decoration: none;
        }
        [data-theme="dark"] .strongs-line-clickable {
            text-decoration-color: rgba(201, 68, 68, 0.55);
        }
        [data-theme="dark"] .strongs-line-clickable:hover {
            background: rgba(201, 68, 68, 0.16);
        }
        /* Linje-spesifikke størrelser. min-height holder linjene aligned på
           tvers av kolonnene selv når et ord mangler grunntekst eller translit. */
        .strongs-line-en {
            font-size: 0.96rem;
            font-weight: 500;
            color: var(--text);
            min-height: 1.3em;
        }
        /* KJV-konvensjon: kursiv = ord tilført av oversetterne (ikke i
           hebraisk/gresk grunntekst). Vi gjør det subtilt — italic + lett
           dempet farge — så studenten ser at "ordet er ikke i originalen". */
        .kjv-supplied {
            font-style: italic;
            opacity: 0.78;
        }
        .strongs-line-grunntekst {
            font-size: 1.05rem;
            font-weight: 500;
            color: var(--text);
            min-height: 1.4em;
        }
        .strongs-lang-gr {
            font-family: 'SBL BibLit', 'Cardo', 'Galatia SIL', 'Gentium Plus', 'Times New Roman', serif;
        }
        .strongs-lang-hb {
            font-family: 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
            font-size: 1.18rem; /* Hebraisk konsonantblokker ser visuelt mindre ut */
        }
        .strongs-line-translit {
            font-size: 0.78rem;
            font-style: italic;
            color: var(--text-muted);
            letter-spacing: 0.2px;
            min-height: 1.3em;
        }
        /* Engelsk gloss-linje (kort betydning) i grunntekst-interlinear. */
        /* Engelsk gloss — topp-etikett over hvert grunntekst-ord. Forklarer
           betydningen. Får brytes over inntil 2 linjer. Fast min-høyde (2,4em
           ≈ 2 linjer) så grunntekst-ordene under aligner på tvers av kolonnene
           selv når noen glosser er 1 linje og andre 2. */
        .strongs-line-gloss {
            font-size: 0.76rem;
            color: var(--text);
            font-weight: 500;
            min-height: 2.4em;
            max-width: 14ch;
            line-height: 1.2;
            white-space: normal;
            overflow-wrap: break-word;
            display: flex;
            align-items: flex-end;     /* bunn-juster så ord-grensa mot grunntekst er stabil */
            justify-content: center;
            margin-bottom: 2px;
        }
        .strongs-line-num {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
            min-height: 1.2em;
        }
        .strongs-line-empty {
            opacity: 0.2;
            cursor: default;
        }
        .strongs-line-empty:hover {
            background: transparent;
            color: var(--text-muted);
        }
        /* Ord uten Strong-tag i kilden — vis som passiv "lim"-tekst (hverken
           klikk-respons eller hover-feedback). En liten em-dash (—) på
           Strong#-linjen viser at det ikke finnes nummer for ordet. Hover
           gir kort tooltip ("Ikke i grunntekst — kun i KJV") via title-attr. */
        .strongs-word-col-glue {
            cursor: help;
        }
        .strongs-word-col-glue .strongs-line {
            cursor: help;
        }
        .strongs-word-col-glue .strongs-line:hover {
            background: transparent;
            color: var(--text);
        }
        .strongs-word-col-glue .strongs-line-en {
            opacity: 0.7;
            color: var(--text-muted);
        }
        .strongs-word-col-glue .strongs-line-num {
            opacity: 0.4;
            color: var(--text-muted);
        }
        .strongs-empty {
            color: var(--text-muted);
            font-style: italic;
            font-size: 0.88rem;
            padding: 12px 4px;
        }
        /* Smal mobil: tett opp luften mellom kolonner, og gi vers-blokken
           horisontal scroll med fade-mask når svært lange vers ikke får plass.
           Wrap virker fortsatt — scroll trigges kun hvis hele raden er for bred. */
        @media (max-width: 600px) {
            .strongs-flow {
                column-gap: 10px;
                row-gap: 10px;
            }
            .strongs-line-en      { font-size: 0.92rem; }
            .strongs-line-grunntekst { font-size: 1.0rem; }
            .strongs-lang-hb      { font-size: 1.12rem; }
            .strongs-line-translit{ font-size: 0.74rem; }
            .strongs-line-num     { font-size: 0.68rem; }
        }
        @media (max-width: 360px) {
            .strongs-flow {
                column-gap: 8px;
                row-gap: 9px;
            }
            .strongs-line-en      { font-size: 0.88rem; }
            .strongs-line-grunntekst { font-size: 0.95rem; }
            .strongs-lang-hb      { font-size: 1.05rem; }
        }

        /* 🔤 Strong's-popover: åpnes ved klikk på et ord i interlinear-panelet.
           Modellert på theme-verse-popover men med eget innholds-skjema (lemma
           + translit + definisjon + footer-knapp til forekomstlisten). */
        .strongs-popover {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.28);
            padding: 12px 14px 10px;
            z-index: 420;
            width: 340px;
            max-width: calc(100vw - 20px);
            max-height: 70vh;
            overflow-y: auto;
            animation: popoverOpen 170ms cubic-bezier(.2, .8, .2, 1);
            transform-origin: top center;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* Bottom-sheet på mobil: bredde fylles, festes nederst, slides opp.
           Brukeren ser verset over og popoveren under, ikke over hverandre.
           position: fixed sammen med left/right/bottom = 0 (med viewport-luft)
           overstyrer inline-styling fra JS-en (vi nullstiller .left/.top der). */
        .strongs-popover.strongs-popover-mobile {
            left: 8px !important;
            right: 8px !important;
            bottom: 8px !important;
            top: auto !important;
            width: auto;
            max-width: none;
            max-height: 65vh;
            border-radius: 16px;
            transform-origin: bottom center;
            animation: strongsPopoverSlideUp 220ms cubic-bezier(.2, .8, .2, 1);
            box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.32);
        }
        @keyframes strongsPopoverSlideUp {
            from { transform: translateY(20px); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }
        @media (max-width: 600px) {
            /* Større lemma + translit i bottom-sheet — bedre lesbarhet på mobil */
            .strongs-popover-mobile .strongs-popover-lemma { font-size: 1.55rem; }
            .strongs-popover-mobile .strongs-popover-translit { font-size: 0.95rem; }
        }
        .strongs-popover-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }
        .strongs-popover-headline {
            display: flex;
            align-items: baseline;
            gap: 10px;
            flex-wrap: wrap;
            flex: 1 1 auto;
            min-width: 0;
        }
        .strongs-popover-num {
            background: rgba(168, 50, 50, 0.12);
            color: var(--accent);
            font-weight: 700;
            font-size: 0.74rem;
            letter-spacing: 0.4px;
            padding: 2px 7px;
            border-radius: 999px;
            font-variant-numeric: tabular-nums;
            line-height: 1.4;
        }
        .strongs-popover-lemma {
            font-size: 1.45rem;
            font-weight: 600;
            line-height: 1.2;
            color: var(--text);
        }
        .strongs-popover-lemma-missing {
            color: var(--text-muted);
            font-style: italic;
            font-size: 0.9rem;
        }
        .strongs-popover-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0 6px;
            line-height: 1;
            border-radius: 6px;
            flex: 0 0 auto;
        }
        .strongs-popover-close:hover {
            color: var(--text);
            background: rgba(168, 50, 50, 0.07);
        }
        .strongs-popover-subline {
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 0.86rem;
        }
        .strongs-popover-translit {
            font-style: italic;
            color: var(--text);
            font-weight: 500;
        }
        .strongs-popover-pronounce {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-variant-numeric: tabular-nums;
        }
        /* Morfologi-linje i popover: bøyd form + grammatisk parsing for den
           konkrete forekomsten brukeren klikket på (fra interlinear). */
        .strongs-popover-morph {
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
            padding: 6px 9px;
            background: rgba(168, 50, 50, 0.06);
            border-radius: 8px;
            font-size: 0.82rem;
        }
        .strongs-popover-morph-surface {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text);
        }
        .strongs-popover-morph-parsing {
            color: var(--text-muted);
            font-style: italic;
        }
        [data-theme="dark"] .strongs-popover-morph {
            background: rgba(201, 68, 68, 0.10);
        }
        .strongs-popover-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 0.88rem;
            line-height: 1.5;
        }
        .strongs-popover-loading,
        .strongs-popover-empty {
            color: var(--text-muted);
            font-style: italic;
            padding: 4px 0;
            font-size: 0.86rem;
        }
        .strongs-source-block {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .strongs-source-block + .strongs-source-block {
            border-top: 1px dashed var(--border);
            padding-top: 9px;
            margin-top: 2px;
        }
        .strongs-source-tag {
            font-size: 0.7rem;
            color: var(--text-muted);
            letter-spacing: 0.3px;
            margin-top: 2px;
        }
        .strongs-def-row {
            display: flex;
            gap: 8px;
            align-items: baseline;
        }
        .strongs-def-label {
            flex: 0 0 auto;
            min-width: 68px;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
        }
        .strongs-def-value {
            flex: 1 1 auto;
            color: var(--text);
        }
        .strongs-def-block {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .strongs-def-block-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
        }
        .strongs-def-block-value {
            color: var(--text);
            white-space: pre-line;
        }
        /* Inline-lenker inni Strong's-definisjoner — bibel-refs (Mat.5:43)
           og cross-refs til andre Strong-numre (G5689). Subtil styling så
           teksten beholder leseflyt, men hover/focus gjør dem tydelig
           klikkbare. */
        .strongs-inline-link {
            display: inline;
            background: transparent;
            border: none;
            padding: 0 1px;
            margin: 0;
            font: inherit;
            color: var(--accent);
            cursor: pointer;
            text-decoration: underline dotted rgba(168, 50, 50, 0.5);
            text-underline-offset: 2px;
            border-radius: 3px;
            transition: background 0.1s, text-decoration-color 0.1s;
        }
        .strongs-inline-link:hover {
            background: rgba(168, 50, 50, 0.10);
            text-decoration: underline solid var(--accent);
            text-underline-offset: 2px;
        }
        .strongs-inline-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .strongs-link-cross {
            font-variant-numeric: tabular-nums;
            font-weight: 600;
        }
        .strongs-link-ref {
            white-space: nowrap;
        }
        [data-theme="dark"] .strongs-inline-link {
            text-decoration-color: rgba(201, 68, 68, 0.6);
        }
        [data-theme="dark"] .strongs-inline-link:hover {
            background: rgba(201, 68, 68, 0.18);
        }
        .strongs-popover-footer {
            padding-top: 9px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .strongs-popover-occ-btn {
            width: 100%;
            padding: 9px 12px;
            background: rgba(168, 50, 50, 0.08);
            border: 1px solid rgba(168, 50, 50, 0.28);
            color: var(--accent);
            border-radius: 9px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .strongs-popover-occ-btn:hover:not(:disabled) {
            background: rgba(168, 50, 50, 0.14);
            border-color: rgba(168, 50, 50, 0.45);
        }
        .strongs-popover-occ-btn:disabled {
            opacity: 0.55;
            cursor: default;
        }
        /* Sekundær footer-knapp: "Åpne i panel" — løfter brukeren til lexikon-
           panelet for dypere studie. Mer dempet styling. */
        .strongs-popover-panel-btn {
            width: 100%;
            padding: 7px 12px;
            background: transparent;
            border: 1px dashed var(--border);
            color: var(--text-muted);
            border-radius: 9px;
            font-weight: 500;
            font-size: 0.78rem;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .strongs-popover-panel-btn:hover {
            background: rgba(168, 50, 50, 0.05);
            border-color: rgba(168, 50, 50, 0.40);
            border-style: solid;
            color: var(--accent);
        }
        /* Back-knapp i popover-header — synlig kun ved chained cross-refs. */
        .strongs-popover-back-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1;
            padding: 2px 8px;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 4px;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .strongs-popover-back-btn:hover {
            background: rgba(168, 50, 50, 0.08);
            border-color: rgba(168, 50, 50, 0.40);
            color: var(--accent);
        }
        [data-theme="dark"] .strongs-popover-num {
            background: rgba(201, 68, 68, 0.16);
        }
        [data-theme="dark"] .strongs-popover-occ-btn {
            background: rgba(201, 68, 68, 0.12);
            border-color: rgba(201, 68, 68, 0.35);
            color: var(--accent);
        }
        [data-theme="dark"] .strongs-popover-occ-btn:hover:not(:disabled) {
            background: rgba(201, 68, 68, 0.20);
            border-color: rgba(201, 68, 68, 0.55);
        }
        [data-theme="dark"] .strongs-popover-panel-btn:hover {
            background: rgba(201, 68, 68, 0.10);
        }
        [data-theme="dark"] .strongs-popover-back-btn:hover {
            background: rgba(201, 68, 68, 0.16);
        }

        /* 📖 Lexikon-panel — dedikert studieelement for grundig Strong's-
           oppslag. Modellert på popover-stilen, men i full panel-bredde med
           navigasjons-historikk + breadcrumb. */
        .strongs-lex-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 4px 0 6px;
        }
        .strongs-lex-back-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 1.05rem;
            line-height: 1;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 8px;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            font-family: inherit;
        }
        .strongs-lex-back-btn:hover {
            background: rgba(168, 50, 50, 0.10);
            border-color: rgba(168, 50, 50, 0.40);
            color: var(--accent);
        }
        .strongs-lex-title-num {
            background: rgba(168, 50, 50, 0.12);
            color: var(--accent);
            font-weight: 700;
            font-size: 0.78rem;
            letter-spacing: 0.4px;
            padding: 2px 8px;
            border-radius: 999px;
            font-variant-numeric: tabular-nums;
            margin-right: 6px;
        }
        .strongs-lex-title-lemma {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text);
        }
        .strongs-lex-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            color: var(--text-muted);
            padding: 2px 0 4px;
        }
        .strongs-lex-crumb {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.74rem;
            padding: 1px 8px;
            border-radius: 999px;
            cursor: pointer;
            font-variant-numeric: tabular-nums;
            font-family: inherit;
        }
        .strongs-lex-crumb:hover {
            background: rgba(168, 50, 50, 0.08);
            color: var(--accent);
            border-color: rgba(168, 50, 50, 0.30);
        }
        .strongs-lex-crumb-current {
            background: rgba(168, 50, 50, 0.14);
            color: var(--accent);
            border: 1px solid rgba(168, 50, 50, 0.40);
            font-weight: 600;
            cursor: default;
        }
        .strongs-lex-crumb-sep {
            color: var(--text-muted);
            opacity: 0.5;
        }
        .strongs-lex-footer {
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }
        [data-theme="dark"] .strongs-lex-title-num {
            background: rgba(201, 68, 68, 0.16);
        }
        [data-theme="dark"] .strongs-lex-back-btn:hover {
            background: rgba(201, 68, 68, 0.16);
        }
        [data-theme="dark"] .strongs-lex-crumb:hover {
            background: rgba(201, 68, 68, 0.14);
        }
        [data-theme="dark"] .strongs-lex-crumb-current {
            background: rgba(201, 68, 68, 0.20);
            border-color: rgba(201, 68, 68, 0.55);
        }

        /* 🔤 Forekomst-resultatside — liste over alle KJV-vers der et Strong-
           nummer brukes. Åpnes fra popover-en sin footer-knapp. */
        .strongs-occ-num {
            background: rgba(168, 50, 50, 0.12);
            color: var(--accent);
            font-weight: 700;
            font-size: 0.72rem;
            letter-spacing: 0.4px;
            padding: 2px 8px;
            border-radius: 999px;
            font-variant-numeric: tabular-nums;
            margin-right: 4px;
        }
        .strongs-occ-lemma {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text);
            margin-right: 6px;
        }
        .strongs-occ-count {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: 4px;
        }
        .strongs-occ-count-extra {
            font-size: 0.72rem;
            opacity: 0.7;
        }
        /* Hint over heatmap-en — forklarer hvordan brukeren skal navigere */
        .strongs-occ-hint {
            font-size: 0.78rem;
            color: var(--text-muted);
            padding: 2px 4px 10px;
        }
        /* Popover som åpnes ved klikk på en bok i forekomst-heatmap-en.
           Bygger på .theme-verse-popover-strukturen, men med litt rikere
           innhold (matchede ord + KJV-tekst med highlight). */
        .strongs-occ-popover {
            width: 360px;
            max-height: 60vh;
        }
        .strongs-occ-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 8px 10px;
        }
        .strongs-occ-item-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .strongs-occ-item-words {
            display: inline-flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .strongs-occ-word {
            display: inline-block;
            padding: 1px 7px;
            background: rgba(168, 50, 50, 0.10);
            border-radius: 999px;
            font-size: 0.7rem;
            color: var(--accent);
            font-weight: 600;
            letter-spacing: 0.1px;
        }
        /* Marking av matchet ord i KJV-versteksten i popover-listen. */
        .strongs-occ-hit {
            background: rgba(168, 50, 50, 0.16);
            color: var(--text);
            padding: 0 2px;
            border-radius: 3px;
            font-weight: 600;
        }
        [data-theme="dark"] .strongs-occ-num {
            background: rgba(201, 68, 68, 0.16);
        }
        [data-theme="dark"] .strongs-occ-word {
            background: rgba(201, 68, 68, 0.16);
        }
        [data-theme="dark"] .strongs-occ-hit {
            background: rgba(201, 68, 68, 0.22);
        }

        /* Bibel-tidslinje (SVG-buer) */
        .bible-timeline-wrap {
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            border-radius: 12px;
            scroll-behavior: smooth;
        }
        @media (prefers-reduced-motion: reduce) { .bible-timeline-wrap { scroll-behavior: auto; } }
        /* Hover-popup med verstekst (på body-nivå med position:fixed så den
           kan flyte fritt utenfor selve studieelementet) */
        .tl-hover-popup {
            position: fixed;
            pointer-events: none;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 0.85rem;
            line-height: 1.45;
            max-width: 340px;
            min-width: 160px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.22);
            z-index: 400;
            transform: translate(-50%, calc(-100% - 14px));
            animation: fadeInUp 120ms ease-out;
        }
        .tl-hover-popup[hidden] { display: none; }
        .tl-hover-ref {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.78rem;
            letter-spacing: 0.4px;
            margin-bottom: 3px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .tl-hover-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(0,0,0,0.18);
            flex: 0 0 8px;
            display: none;
        }
        .tl-hover-dot.show { display: inline-block; }
        [data-theme="dark"] .tl-hover-dot {
            border-color: rgba(255,255,255,0.28);
        }
        .tl-hover-text {
            color: var(--text);
        }
        /* Hit-targets: usynlige men klikkbare/hoverbare */
        .bible-timeline .arc-hit,
        .bible-timeline .dot-hit { pointer-events: stroke; cursor: pointer; }
        .bible-timeline .dot-hit { pointer-events: all; }
        .bible-timeline .arc-group .arc,
        .bible-timeline .dot-group .target-dot { pointer-events: none; transition: stroke-opacity 0.15s, stroke-width 0.15s, r 0.15s; }
        /* Visuell hover-feedback når hit-target er hoveret */
        .bible-timeline .arc-group.hovered .arc { stroke-opacity: 1 !important; stroke-width: 3.2 !important; }
        .bible-timeline .dot-group.hovered .target-dot { r: 6; }
        .bible-timeline {
            width: 100%;
            height: auto;
            max-height: 260px;
            display: block;
        }
        @media (max-width: 700px) {
            .bible-timeline { min-width: 920px; max-height: none; height: 220px; }
            .bible-timeline-wrap {
                background:
                    linear-gradient(90deg, var(--card-bg), transparent 8px) right center / 40px 100% no-repeat,
                    linear-gradient(270deg, var(--card-bg), transparent 8px) left center / 40px 100% no-repeat;
                margin: 0 -4px;
            }
        }
        .bible-timeline .arc {
            cursor: pointer;
            transition: stroke-opacity 0.15s, stroke-width 0.15s;
        }
        .bible-timeline .arc:hover { stroke-opacity: 1 !important; stroke-width: 2.6; }
        .bible-timeline .target-dot {
            cursor: pointer;
            transition: r 0.15s;
        }
        .bible-timeline .target-dot:hover { r: 5.5; }
        .bible-timeline .source-dot { pointer-events: none; }
        .bible-timeline .book-tint { opacity: 0; transition: opacity 0.25s; pointer-events: none; }
        .bible-timeline-wrap.zoomed-1 .book-tint { opacity: 0.5; }
        .bible-timeline-wrap.zoomed-2 .book-tint { opacity: 1; }

        /* "📍 Kart"-knapp i tom-tilstand: dempet, men fortsatt klikkbar (viser toast) */
        .card-action-btn.place-map-btn-empty {
            opacity: 0.45;
            cursor: help;
        }
        .card-action-btn.place-map-btn-empty:hover { opacity: 0.65; }

        /* Stedskart (Leaflet) — chips + kartcontainer */
        .place-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 10px;
        }
        .place-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 600;
            font-family: inherit;
            transition: all 0.15s;
        }
        .place-chip.active {
            background: var(--card-bg);
            color: var(--text);
            border-color: var(--accent);
        }
        .place-chip:hover { color: var(--accent); border-color: var(--accent); }
        .place-chip-dot {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0;
        }
        .place-chip-dot.place-kind-landpoint  { background: #a83232; }
        .place-chip-dot.place-kind-waterpoint { background: #1f6feb; }
        .place-chip-dot.place-kind-water      { background: #1f6feb; border-radius: 0; height: 3px; width: 18px; }
        .place-chip-dot.place-kind-path       { background: linear-gradient(90deg, #666 50%, transparent 50%); border-radius: 0; height: 3px; width: 18px; background-size: 6px 3px; }
        .place-chip-dot.place-kind-region     { background: rgba(122, 76, 179, 0.3); border: 1.5px solid #7a4cb3; width: 13px; height: 13px; border-radius: 3px; }
        .place-chip-verses {
            font-weight: 500;
            font-size: 0.74rem;
            color: var(--text-muted);
            opacity: 0.85;
        }
        .place-chip.active .place-chip-verses { opacity: 0.7; }
        .place-chip-actions {
            display: inline-flex;
            gap: 2px;
            margin-left: 4px;
            opacity: 0.7;
        }
        .place-chip:hover .place-chip-actions,
        .place-chip:focus-within .place-chip-actions {
            opacity: 1;
        }
        .place-chip-action-btn {
            border: none;
            background: transparent;
            color: inherit;
            font: inherit;
            font-size: 0.78rem;
            line-height: 1;
            padding: 1px 4px;
            border-radius: 4px;
            cursor: pointer;
        }
        .place-chip-action-btn:hover {
            background: rgba(0,0,0,0.12);
        }
        [data-theme="dark"] .place-chip-action-btn:hover {
            background: rgba(255,255,255,0.18);
        }
        .place-chip-action-btn.is-marked {
            opacity: 1 !important;
        }
        .place-leaflet {
            width: 100%;
            /* Tving eget stacking-context slik at Leaflets interne z-indekser
               (zoom-kontroller: 1000, popups: 700, kart-lag: 400) ikke flyter
               over søkefelt og pill-elementer utenfor kartet. */
            isolation: isolate;
        }
        /* Leaflet popup-tema tilpasset app-stil (lyst og mørkt) */
        .leaflet-popup-content { font-family: inherit; font-size: 0.85rem; }
        [data-theme="dark"] .leaflet-popup-content-wrapper,
        [data-theme="dark"] .leaflet-popup-tip { background: var(--card-bg); color: var(--text); }
        [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.85) invert(0.95) hue-rotate(180deg) saturate(0.7); }

        /* Place-popup vers-knapper */
        .place-popup-verse-btn { transition: transform 120ms ease, box-shadow 120ms ease; }
        .place-popup-verse-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.18); }
        .place-popup-verse-btn:active { transform: translateY(0); }

        /* Place-popup layout — to-kolonner med bilde til høyre i full høyde,
           tekst (tittel, vers, knapper, konfidens) til venstre. Uten bilde
           brukes enkelt-kolonne (place-popup-info fyller bredden). */
        .place-popup-with-image {
            display: flex;
            gap: 12px;
            align-items: stretch;
        }
        .place-popup-with-image .place-popup-info {
            flex: 1 1 auto;
            min-width: 0;
        }
        .place-popup-image {
            flex: 0 0 auto;
            display: flex;
            align-items: stretch;
        }
        .place-popup-image img {
            width: 150px;
            height: 100%;
            min-height: 120px;
            max-height: 240px;
            object-fit: cover;
            border-radius: 6px;
            display: block;
            cursor: pointer;
        }
        @media (max-width: 480px) {
            .place-popup-image img { width: 110px; min-height: 100px; }
        }

        /* Hover-uthev av vers i hovedteksten når man holder over en vers-knapp i place-popup */
        .verse-span.place-hover-highlight .verse-content {
            background: var(--place-hover-color, rgba(255, 220, 120, 0.45));
            border-radius: 3px;
            transition: background 140ms ease;
        }
        /* AI-markering av selve stedordet (samme stil som AI-diff-highlights).
           Klikk på markeringen åpner en liten popover med "Slett"-knapp. */
        mark.place-word-highlight, mark.place-verse-highlight {
            background: var(--place-mark-color, rgba(168, 50, 50, 0.22));
            color: inherit;
            padding: 0 1px;
            border-radius: 2px;
            cursor: pointer;
        }
        mark.place-verse-highlight {
            padding: 0 3px;
            border-radius: 4px;
            box-shadow: inset 3px 0 0 var(--place-mark-border, var(--accent));
        }

        /* Pin-glow når en chip hovres */
        .leaflet-marker-icon.place-pin.glow svg {
            filter:
                drop-shadow(0 0 6px var(--accent))
                drop-shadow(0 0 14px var(--accent))
                drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.35));
            transform: scale(1.12);
            transition: filter 140ms ease, transform 140ms ease;
        }
        .leaflet-marker-icon.place-pin svg {
            transition: filter 140ms ease, transform 140ms ease;
        }

        /* "Vis alle / Vis færre"-pille i chip-listen */
        .place-chip.place-chip-more {
            background: transparent;
            border: 1px dashed var(--border);
            color: var(--text-muted);
            font-style: italic;
        }
        .place-chip.place-chip-more:hover { background: var(--bg-subtle, rgba(0,0,0,0.04)); }

        /* "Ingenting å vise"-tilstand for studieelementer — beholder hosten
           synlig men gråer den ut med en melding, slik at brukeren ikke mister
           panelet bare fordi neste vers/kap ikke har data. */
        .bible-map-wrap.is-empty {
            opacity: 0.55;
            filter: grayscale(0.6);
            transition: opacity 220ms ease, filter 220ms ease;
        }
        .bible-map-empty {
            padding: 22px 16px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.92rem;
            background: rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            border: 1px dashed var(--border);
            line-height: 1.5;
        }
        [data-theme="dark"] .bible-map-empty { background: rgba(255, 255, 255, 0.04); }

        /* Lukke-animasjon for viz-hosts (Kart, Tidslinje, Kontekst, Tema-kart) */
        .bible-map-wrap.closing {
            animation: vizSpringOut 260ms cubic-bezier(.4, 0, .35, 1) forwards;
            pointer-events: none;
            transform-origin: top center;
        }
        @keyframes vizSpringOut {
            /* Kun opacity-fade — ingen transform/max-height-kollaps. Speiler
               vizSpringIn så åpne/lukke ser likt ut. */
            from { opacity: 1; }
            to   { opacity: 0; }
        }

        /* Myk åpne/lukk-animasjon for bok-grupper (søkeresultater gruppert etter bok) */
        .book-group-items {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s cubic-bezier(.2, .8, .2, 1);
            border-top: 1px solid transparent;
        }
        .book-group-items-inner { overflow: hidden; min-height: 0; }
        .book-group-items.open {
            grid-template-rows: 1fr;
            border-top-color: var(--border);
        }

        /* Forrige/neste kapittel-knapper */
        .nav-btn {
            position: fixed;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            color: var(--accent);
            font-size: 1.9rem;
            font-weight: 600;
            line-height: 1;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            z-index: 90;
            user-select: none;
            transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s;
        }
        .nav-btn.visible { display: flex; }
        @media (hover: hover) {
            .nav-btn:hover:not(:disabled) { background: var(--accent); color: white; border-color: var(--accent); }
        }
        .nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
        .nav-btn:active:not(:disabled) { transform: scale(0.94); }
        @media (min-width: 701px) {
            /* PC: knappen dekker hele sidebandet ved siden av hovedinnholdet.
               Selve det synlige sirkel-elementet tegnes via ::before, holdt på plass
               midt på sidebandet. Hover/klikk-flaten er hele stripen. */
            .nav-prev, .nav-next {
                position: fixed;
                top: 60px;
                bottom: 0;
                width: auto;
                height: auto;
                background: transparent;
                border: none;
                border-radius: 0;
                box-shadow: none;
                padding: 0;
                /* Plasser ikonet på halvveis ned i hovedinnholdet (eller halvveis
                   ned i viewport, hva som er øverst). --nav-y settes fra JS. */
                padding-top: max(0px, calc(var(--nav-y, 50vh) - 60px));
                font-size: 0;
                display: none;
                align-items: flex-start;
                cursor: pointer;
                transition: padding-top 0.32s cubic-bezier(.22,.86,.24,1);
                z-index: 60;
                outline: none;
            }
            /* Fjern svart focus-outline ved klikk/programmatic focus, behold ved
               keyboard-tab. Pile-tastene trigger nav, men ved rask blaing fikk
               knappen kortvarig focus og en stygg sort strek. */
            .nav-prev:focus:not(:focus-visible),
            .nav-next:focus:not(:focus-visible),
            .expand-chapter-btn:focus:not(:focus-visible),
            .verse-tools-btn:focus:not(:focus-visible) { outline: none; }
            .nav-prev { left: 0; right: calc(50% + 440px); justify-content: flex-end; padding-right: 18px; }
            .nav-next { right: 0; left: calc(50% + 440px); justify-content: flex-start; padding-left: 18px; }
            body.compare-active .nav-prev { right: calc(50% + 650px); }
            body.compare-active .nav-next { left: calc(50% + 650px); }
            /* Split-modus: piler flankerer tekstkolonnen (som er sentrert i venstre del av viewport) */
            /* Split-modus: piler blir kompakte sirkler rett ved siden av tekstkolonnen.
               --col-left-px og --col-right-px oppdateres fra JS basert på faktisk kolonnebredde. */
            body.split-active .nav-prev,
            body.split-active .nav-next {
                top: var(--nav-y, 50%);
                bottom: auto;
                width: 52px;
                height: 52px;
                font-size: 1.9rem;
                padding: 0;
                background: var(--card-bg);
                border: 1.5px solid var(--border);
                color: var(--accent);
                border-radius: 50%;
                box-shadow: 0 4px 16px rgba(0,0,0,0.12);
                transform: translateY(-50%);
                transition: background 0.18s, color 0.18s, border-color 0.18s,
                            transform 0.18s, box-shadow 0.18s,
                            top 0.32s cubic-bezier(.22,.86,.24,1);
                justify-content: center;
                align-items: center;
                line-height: 1;
            }
            body.split-active .nav-prev::before,
            body.split-active .nav-next::before { display: none; }
            /* Klemme piler slik at de alltid er synlige: minimum 8px fra viewport-kant,
               maksimum 68px utenfor tekstkolonnen */
            body.split-active .nav-prev {
                left: max(8px, calc(var(--col-left-px, 68px) - 68px));
                right: auto;
            }
            body.split-active .nav-next {
                right: max(calc(var(--side-panel-width) + 8px), calc(var(--col-right-px, 68px) - 68px));
                left: auto;
            }
            body.split-active .nav-prev:hover:not(:disabled),
            body.split-active .nav-next:hover:not(:disabled) {
                background: var(--accent);
                color: white;
                border-color: var(--accent);
                transform: translateY(-50%) scale(1.08);
                box-shadow: 0 6px 22px rgba(168, 50, 50, 0.3);
            }
            body.split-active .nav-prev:active:not(:disabled),
            body.split-active .nav-next:active:not(:disabled) {
                transform: translateY(-50%) scale(0.94);
            }
            body.split-active .nav-prev:disabled,
            body.split-active .nav-next:disabled { opacity: 0.35; }

            .nav-btn.visible { display: flex; }

            .nav-prev::before, .nav-next::before {
                content: '\2039';
                display: flex;
                width: 52px;
                height: 52px;
                border-radius: 50%;
                background: var(--card-bg);
                border: 1.5px solid var(--border);
                color: var(--accent);
                font-size: 1.9rem;
                font-weight: 600;
                line-height: 1;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 16px rgba(0,0,0,0.12);
                transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
            }
            .nav-next::before { content: '\203A'; }

            .nav-prev:hover:not(:disabled)::before,
            .nav-next:hover:not(:disabled)::before {
                background: var(--accent);
                color: white;
                border-color: var(--accent);
                transform: scale(1.08);
                box-shadow: 0 6px 22px rgba(168, 50, 50, 0.3);
            }
            .nav-prev:active:not(:disabled)::before,
            .nav-next:active:not(:disabled)::before {
                transform: scale(0.94);
            }
            .nav-prev:disabled, .nav-next:disabled { cursor: not-allowed; }
            .nav-prev:disabled::before, .nav-next:disabled::before { opacity: 0.35; }

            /* Siden button-selv er font-size: 0 på PC, overstyr den vanlige
               .nav-btn:hover-regelen slik at det ikke blir hele stripen med
               rød bakgrunn. */
            .nav-prev:hover:not(:disabled),
            .nav-next:hover:not(:disabled) {
                background: transparent;
                color: transparent;
                border: none;
            }
        }
        @media (max-width: 700px) {
            /* På mobil bruker vi swipe i stedet for synlige chevroner. */
            .nav-prev, .nav-next { display: none !important; }
        }

        /* ── Førstegangs swipe-hint (kun mobil) ─────────────────────────── */
        .swipe-hint { display: none; }
        @media (max-width: 700px) {
            .swipe-hint {
                display: inline-flex;
                position: fixed;
                left: 50%;
                bottom: calc(20px + env(safe-area-inset-bottom, 0px));
                transform: translateX(-50%) translateY(8px);
                z-index: 90;
                align-items: center;
                gap: 10px;
                padding: 7px 16px;
                background: rgba(20, 20, 22, 0.72);
                color: rgba(245, 245, 245, 0.92);
                border-radius: 999px;
                font-size: 0.78rem;
                font-weight: 500;
                letter-spacing: 0.2px;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.4s ease, transform 0.4s ease;
                -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
            }
            [data-theme="dark"] .swipe-hint {
                background: rgba(245, 245, 245, 0.14);
                color: rgba(240, 240, 240, 0.95);
            }
            .swipe-hint.show {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
            .swipe-hint-arrow {
                display: inline-block;
                font-size: 1rem;
                line-height: 1;
                opacity: 0.55;
            }
            .swipe-hint.show .swipe-hint-arrow-left  { animation: swipeHintLeft  1.5s ease-in-out infinite; }
            .swipe-hint.show .swipe-hint-arrow-right { animation: swipeHintRight 1.5s ease-in-out infinite; }
            @keyframes swipeHintLeft {
                0%, 100% { transform: translateX(0);  opacity: 0.4; }
                50%      { transform: translateX(-4px); opacity: 1; }
            }
            @keyframes swipeHintRight {
                0%, 100% { transform: translateX(0);  opacity: 0.4; }
                50%      { transform: translateX(4px);  opacity: 1; }
            }
            @media (prefers-reduced-motion: reduce) {
                .swipe-hint.show .swipe-hint-arrow-left,
                .swipe-hint.show .swipe-hint-arrow-right { animation: none; opacity: 0.7; }
            }
        }

        /* ── Selection-popup (flyter over markert tekst) ── */
        .selection-popup {
            position: absolute;
            z-index: 300;
            display: flex;
            gap: 2px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.18);
            padding: 4px;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.12s ease, transform 0.12s ease;
            pointer-events: none;
            font-size: 0.85rem;
        }
        .selection-popup.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .selection-popup button {
            background: transparent;
            border: none;
            color: var(--text);
            padding: 6px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: background 0.15s;
        }
        .selection-popup button:hover { background: var(--bg-subtle, rgba(0,0,0,0.06)); }
        [data-theme="dark"] .selection-popup button:hover { background: rgba(255,255,255,0.08); }
        .selection-popup .vop-label {
            display: inline-flex;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0 4px 0 6px;
            user-select: none;
        }
        .selection-popup button[hidden] { display: none; }
        .user-highlight {
            background: rgba(255, 220, 80, 0.55);
            border-radius: 2px;
            padding: 0 1px;
            cursor: pointer;
        }
        [data-theme="dark"] .user-highlight { background: rgba(220, 175, 50, 0.4); }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-delay: 0ms !important;
                transition-duration: 0.01ms !important;
            }
        }
        .compare-version-inline {
            padding: 4px 10px;
            font-size: 0.88rem;
            font-weight: 600;
            border: 1.5px solid var(--border);
            border-radius: 999px;
            background: var(--card-bg);
            color: var(--text);
            cursor: pointer;
            outline: none;
        }
        .compare-version-inline:focus { border-color: var(--accent); }

        /* Compare version bar */
        .compare-version-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .compare-version-bar-label {
            font-size: 0.82rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .compare-version-btn {
            padding: 4px 14px;
            border-radius: 999px;
            border: 1.5px solid var(--border);
            background: var(--card-bg);
            color: var(--text);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 600;
            transition: all 0.15s;
        }
        .compare-version-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
        .compare-version-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

        /* Custom version picker */
        .version-picker { position: relative; flex-shrink: 0; display: flex; }
        .version-picker-trigger {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 14px;
            background: transparent;
            border: none;
            border-left: 1px solid var(--border);
            color: var(--text);
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            height: 100%;
            transition: background 0.15s;
        }
        .version-picker-trigger:hover { background: rgba(0,0,0,0.04); }
        [data-theme="dark"] .version-picker-trigger:hover { background: rgba(255,255,255,0.06); }
        .version-picker-arrow { font-size: 0.72rem; color: var(--text-muted); transition: transform 0.2s; }
        .version-picker.open .version-picker-arrow { transform: rotate(180deg); }
        .version-picker-panel {
            display: none;
            position: fixed;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.14);
            min-width: 150px;
            width: max-content;
            max-width: calc(100vw - 24px);
            max-height: calc(100dvh - 120px);
            overflow-y: auto;
            z-index: 400;
            padding: 4px;
        }
        .version-picker-panel.open {
            display: block;
            animation: vpPanelIn 0.16s ease forwards;
        }
        @keyframes vpPanelIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        /* Versjonsrad: navn øverst, langt navn under i mindre grå skrift */
        .version-option {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 6px 14px 7px 12px;
            cursor: pointer;
            border-radius: 10px;
            transition: background 0.1s;
        }
        .version-option:hover { background: rgba(168,50,50,0.07); }
        .version-option.selected { background: rgba(168,50,50,0.12); }
        [data-theme="dark"] .version-option:hover { background: rgba(201,68,68,0.1); }
        [data-theme="dark"] .version-option.selected { background: rgba(201,68,68,0.16); }
        .version-option-name { font-weight: 600; font-size: 0.88rem; color: var(--text); line-height: 1.15; }
        .version-option-desc {
            font-size: 0.7rem;
            color: var(--text-muted);
            line-height: 1.15;
            margin-top: 1px;
            white-space: nowrap;
        }
        .ai-diff-section {
            margin: -4px 0 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ai-diff-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .ai-diff-buttons .btn-diff { flex: 1; min-width: 140px; }
        @media (min-width: 701px) {
            .ai-diff-buttons { justify-content: flex-start; gap: 8px; }
            .ai-diff-buttons .btn-diff {
                flex: 0 0 auto;
                min-width: 0;
                padding: 6px 14px;
                font-size: 0.82rem;
            }
        }

        .btn-diff {
            padding: 8px 18px;
            font-size: 0.88rem;
            background: linear-gradient(180deg, #fff4c7, #fde199);
            color: #7a5b1a;
            border: 1px solid rgba(217, 158, 10, 0.55);
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
            letter-spacing: 0.1px;
            box-shadow: 0 1px 2px rgba(180, 130, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
            transition: background 0.18s, transform 0.12s, box-shadow 0.18s, color 0.18s, border-color 0.18s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        .btn-diff:hover:not(:disabled) {
            background: linear-gradient(180deg, #fff8d8, #fbd27d);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(217, 158, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        .btn-diff:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(180, 130, 20, 0.1); }
        .btn-diff.active {
            background: linear-gradient(180deg, #e9a10c, #c08400);
            color: #fff;
            border-color: #9a6a00;
            box-shadow: 0 2px 8px rgba(180, 130, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }
        .btn-diff.active:hover:not(:disabled) {
            background: linear-gradient(180deg, #f2ab12, #cc8e00);
        }
        .btn-diff:disabled { opacity: 0.55; cursor: wait; transform: none; }
        [data-theme="dark"] .btn-diff {
            background: linear-gradient(180deg, #3a2c10, #2a1f08);
            color: #fbbf24;
            border-color: rgba(217, 158, 10, 0.45);
            box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        [data-theme="dark"] .btn-diff:hover:not(:disabled) {
            background: linear-gradient(180deg, #4a3a14, #342408);
        }
        [data-theme="dark"] .btn-diff.active {
            background: linear-gradient(180deg, #c08400, #9a6a00);
            color: #fff7d6;
            border-color: #6b4900;
        }

        .diff-result-card {
            background: #fffbeb;
            border: 1px solid #fbbf24;
            border-radius: 24px;
            padding: 14px 18px;
            margin-top: 10px;
            font-size: 0.95rem;
            line-height: 1.6;
            color: #78350f;
        }
        [data-theme="dark"] .diff-result-card { background: #2d1a00; color: #fde68a; border-color: #7c4a00; }

        .controls-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Integrated search bar: input + version select + search btn in one row */
        .search-bar-wrap {
            display: flex;
            align-items: stretch;
            border: 1.5px solid var(--border);
            border-radius: 999px;  /* pilleformet som iOS Safari */
            background: var(--card-bg);
            overflow: hidden;
            transition: border-color 0.2s, box-shadow 220ms ease;
            flex: 1;
            min-width: 250px;
            /* Flytende skygge rundt hele pillen */
            box-shadow: 0 6px 26px -3px rgba(0,0,0,0.18), 0 2px 7px rgba(0,0,0,0.08);
        }
        .search-bar-wrap:focus-within {
            border-color: var(--accent);
            box-shadow: 0 6px 28px -2px rgba(168,50,50,0.24), 0 2px 8px rgba(168,50,50,0.10);
        }
        [data-theme="dark"] .search-bar-wrap {
            box-shadow: 0 6px 26px -3px rgba(0,0,0,0.52), 0 2px 7px rgba(0,0,0,0.24);
        }
        [data-theme="dark"] .search-bar-wrap:focus-within {
            box-shadow: 0 6px 28px -2px rgba(201,68,68,0.36), 0 2px 8px rgba(201,68,68,0.16);
        }
        .search-clear-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1rem;
            color: var(--text-muted);
            padding: 0 10px 0 4px;
            cursor: pointer;
            line-height: 1;
            flex: 0 0 auto;
            opacity: 0.6;
        }
        .search-clear-btn:hover { opacity: 1; color: var(--accent); }
        .search-bar-wrap.has-text .search-clear-btn { display: flex; align-items: center; }

        /* "Mente du å søke dette?"-boks rett under søkefeltet.
           Bruker grid-template-rows-trikset for myk gli-ned-animasjon
           fra null høyde til naturlig innholdshøyde. */
        .ai-suggest-bar {
            display: grid;
            grid-template-rows: 0fr;
            margin-top: 0;
            transition: grid-template-rows 280ms cubic-bezier(.22,.86,.24,1),
                        margin-top 240ms ease,
                        opacity 220ms ease;
            opacity: 0;
            pointer-events: none;
        }
        .ai-suggest-bar.open {
            grid-template-rows: 1fr;
            margin-top: 8px;
            opacity: 1;
            pointer-events: auto;
        }
        .ai-suggest-inner {
            overflow: hidden;
            min-height: 0;
        }
        .ai-suggest-bar .ai-did-you-mean { width: 100%; }
        /* Nøytralt, integrert forslag — bruker temaets flate/ramme i stedet for
           en egen "loud" farge, så det føles som en naturlig del av siden. */
        .ai-did-you-mean {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 11px 18px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.94rem;
            cursor: pointer;
            text-align: left;
            box-shadow: var(--shadow);
            transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
            max-width: 100%;
        }
        .ai-did-you-mean:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .ai-did-you-mean:active { transform: translateY(0); }
        .ai-did-you-mean-badge {
            font-size: 1.05rem;
            color: var(--accent);
            flex: 0 0 auto;
        }
        .ai-did-you-mean-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .ai-did-you-mean-label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .ai-did-you-mean-text {
            font-weight: 600;
            word-break: break-word;
        }
        /* Innloggings-CTA: samme nøytrale stil, men brand-rød ramme som diskret
           skiller den fra et vanlig "Mente du..."-forslag. */
        .ai-did-you-mean.ai-login-prompt { border-color: var(--accent); }
        .ai-did-you-mean.ai-login-prompt:hover { border-color: var(--accent-hover); }

        /* KI-reformulert-indikasjon */
        .search-bar-wrap .ai-badge {
            display: none;
            align-items: center;
            padding-left: 14px;
            font-size: 1.05rem;
            color: #d4a84b;
            pointer-events: none;
            flex: 0 0 auto;
        }
        .search-bar-wrap.ai-reformulated .ai-badge { display: flex; }
        .search-bar-wrap.ai-reformulated .search-ce { padding-left: 6px; }
        .search-bar-wrap.ai-glow {
            animation: aiGlow 2s ease-out forwards;
        }
        @keyframes aiGlow {
            0% {
                border-color: #fbbf24;
                box-shadow: 0 0 14px rgba(251, 191, 36, 0.75);
            }
            60% {
                border-color: #fbbf24;
                box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
            }
            100% {
                border-color: var(--border);
                box-shadow: none;
            }
        }
        .search-bar-wrap input,
        .search-bar-wrap .search-ce {
            flex: 1;
            padding: 12px 18px;  /* litt mer venstre-padding for pille-formen */
            font-size: 1rem;
            border: none;
            background: transparent;
            color: var(--text);
            outline: none;
            min-width: 0;
            white-space: nowrap;
            overflow-x: auto;
            font-family: inherit;
        }
        .search-bar-wrap input::placeholder { color: #aaa; }
        .search-bar-wrap .search-ce:empty::before {
            content: attr(data-placeholder);
            color: #aaa;
            pointer-events: none;
        }
        .search-bar-wrap .search-ce b {
            font-weight: 900;
            color: var(--accent);
        }
        .search-bar-wrap .search-version-select {
            padding: 8px 10px;
            font-size: 0.85rem;
            border: none;
            border-left: 1px solid var(--border);
            border-radius: 0;
            background: var(--card-bg);
            color: var(--text);
            cursor: pointer;
            outline: none;
            min-width: 80px;
        }
        .search-bar-wrap .search-btn-inline {
            padding: 10px 18px;
            font-size: 0.95rem;
            border: none;
            border-left: 1px solid var(--border);
            border-radius: 0;
            background: var(--accent);
            color: white;
            cursor: pointer;
            font-weight: 800;
            letter-spacing: 0.3px;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .search-bar-wrap .search-btn-inline:hover { background: var(--accent-hover); }
        .search-bar-wrap .search-btn-inline:active { transform: scale(0.97); }

        /* Sort/browse toggle button */
        .sort-toggle-btn {
            padding: 10px 14px;
            font-size: 1.1rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .sort-toggle-btn:hover, .sort-toggle-btn.active { border-color: var(--accent); color: var(--accent); }

        /* Highlighted verse when reading chapter:
           Pulser inn (~0.5s), holdes synlig (~1.3s), fader ut (~1.2s).
           Total 3s — etter det er bakgrunnen helt transparent (forwards). */
        .highlighted-verse {
            scroll-margin-top: 140px;
            background: rgba(168, 50, 50, 0.22);
            border-radius: 4px;
            padding: 2px 5px;
            color: inherit;          /* override <mark>-default svart i dark mode */
            animation: hlVerseFade 3s cubic-bezier(.4, 0, .2, 1) 1 forwards;
        }
        [data-theme="dark"] .highlighted-verse {
            background: rgba(201, 68, 68, 0.28);
        }
        @keyframes hlVerseFade {
            0%   { background: rgba(168, 50, 50, 0.55); }
            17%  { background: rgba(168, 50, 50, 0.22); }
            60%  { background: rgba(168, 50, 50, 0.22); }
            100% { background: rgba(168, 50, 50, 0); }
        }
        [data-theme="dark"] .highlighted-verse {
            animation-name: hlVerseFadeDark;
        }
        @keyframes hlVerseFadeDark {
            0%   { background: rgba(201, 68, 68, 0.55); }
            17%  { background: rgba(201, 68, 68, 0.28); }
            60%  { background: rgba(201, 68, 68, 0.28); }
            100% { background: rgba(201, 68, 68, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .highlighted-verse { animation: none; }
        }

        /* Inline verse expansion in text search */
        .inline-verse-expand {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--border);
        }
        .inline-verse-expand-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .search-result-item.expanded { border-color: var(--accent); background: var(--card-bg); }

        /* AI loading indicator */
        .ai-searching {
            display: inline-block;
            font-size: 0.82rem;
            color: var(--text-muted);
            padding: 4px 10px;
            background: var(--card-bg);
            border-radius: 6px;
            border: 1px solid var(--border);
            margin-left: 8px;
        }

        /* Søke-spinner: bibeldykk-logoen som vingler litt fra side til side
           mens et søk pågår (særlig for «Søk i alle versjoner» som kan ta
           noen sekunder). Bruker .search-loading-icon som klasse på et
           <svg><use href="#bibeldykk-logo"/></svg>. */
        .search-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 36px 16px 28px;
            color: var(--text-muted);
        }
        .search-loading-icon {
            width: 64px;
            height: 64px;
            color: var(--accent);
            --logo-bg: var(--bg);
            transform-origin: center;
            animation: searchWiggle 1.4s ease-in-out infinite;
            display: block;
        }
        .search-loading-text {
            font-size: 0.92rem;
            text-align: center;
        }
        @keyframes searchWiggle {
            0%, 100% { transform: rotate(-12deg); }
            50%      { transform: rotate(12deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .search-loading-icon { animation: none; }
        }

        /* ── Pull-to-refresh på mobil/PWA ─────────────────────────────────
           Bibeldykk-logoen vises under search bar når brukeren drar siden
           ned. Først roterer den med drag-avstanden (transform via JS),
           etter trigger-terskel vingler den i searchWiggle-animasjonen
           mens siden reloader. */
        .ptr-spinner-wrap {
            position: fixed;
            left: 50%;
            /* 140px = header (safe + 58) + søkebar-høyde (70) + 12px gap.
               Endelig synlig posisjon — JS translater wrappen oppover for å
               gjemme den bak søkefeltet til å starte med, og glir den ned
               til denne posisjonen ettersom brukeren drar. */
            top: calc(140px + env(safe-area-inset-top, 0px));
            /* --ptr-y styres av JS under drag: starter på -64px (skjult bak
               søkefeltet) og glir til 0px (synlig under) ved trigger-terskel.
               -50% holder horisontal sentrering. */
            transform: translate(-50%, var(--ptr-y, -64px));
            /* z-index UNDER søkefeltet (100) så pillen "klipper" spinneren
               bak seg når den emergerer fra under — gir illusjonen av at
               ikonet trekkes ut bak søkefeltet. */
            z-index: 95;
            opacity: 0;
            pointer-events: none;
            /* Egen transition: opacity alltid, transform kun ved snap-back
               (under aktiv drag setter JS transform direkte uten transition). */
            transition: opacity 180ms ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--card-bg);
            box-shadow: 0 4px 14px rgba(0,0,0,0.18);
        }
        .ptr-spinner-wrap.dragging,
        .ptr-spinner-wrap.refreshing { opacity: 1; }
        /* Under snap-back (slipp uten trigger): animer transform tilbake til
           -64px så ikonet glir opp igjen bak søkefeltet. */
        .ptr-spinner-wrap.ptr-snapback {
            transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,.86,.24,1);
        }
        /* Under refreshing: lås posisjonen til 0 (fullt synlig) mens
           searchWiggle-animasjonen vingler på ikonet inne. */
        .ptr-spinner-wrap.refreshing {
            --ptr-y: 0px;
            transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,.86,.24,1);
        }
        .ptr-spinner-wrap .ptr-spinner-icon {
            width: 28px;
            height: 28px;
            color: var(--accent);
            --logo-bg: var(--card-bg);
            display: block;
            transform-origin: center;
        }
        /* Roterer logoen aktivt med drag-avstand (JS setter --ptr-rot) */
        .ptr-spinner-wrap.dragging .ptr-spinner-icon {
            transform: rotate(var(--ptr-rot, 0deg));
        }
        /* Når terskel passert + refreshing aktiv: vingle som ved søk */
        .ptr-spinner-wrap.refreshing .ptr-spinner-icon {
            animation: searchWiggle 1.4s ease-in-out infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            .ptr-spinner-wrap.refreshing .ptr-spinner-icon { animation: none; }
        }
        /* Results-wrapper får translate via JS når brukeren drar — egen
           transition for smooth tilbake-snap når dragget ikke nådde terskel. */
        .results-wrapper.ptr-snapback {
            transition: transform 220ms cubic-bezier(.22,.86,.24,1);
        }
        /* På PC skjul PTR-spinneren — kun mobil/touch */
        @media (min-width: 701px) {
            .ptr-spinner-wrap { display: none !important; }
        }

        /* Suggestions dropdown */
        .suggestions-wrap {
            position: relative;
        }
        .suggestions {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 8px);     /* alltid under inputen — søkefeltet er øverst både på PC og mobil */
            background: var(--card-bg);
            border: 2px solid var(--border);
            border-radius: 24px;
            box-shadow: var(--shadow);
            max-height: 280px;
            overflow: hidden;
            overflow-y: auto;
            z-index: 110;
            display: none;
            /* Tynn, avrundet scrollbar som ikke bryter de runde hjørnene */
            scrollbar-width: thin;
            scrollbar-color: rgba(168, 50, 50, 0.28) transparent;
        }
        .suggestions::-webkit-scrollbar { width: 8px; }
        .suggestions::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
        .suggestions::-webkit-scrollbar-thumb {
            background: rgba(168, 50, 50, 0.28);
            border-radius: 999px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        .suggestions::-webkit-scrollbar-thumb:hover { background: rgba(168, 50, 50, 0.5); background-clip: padding-box; }
        [data-theme="dark"] .suggestions { scrollbar-color: rgba(201, 68, 68, 0.32) transparent; }
        [data-theme="dark"] .suggestions::-webkit-scrollbar-thumb { background: rgba(201, 68, 68, 0.32); background-clip: padding-box; }
        [data-theme="dark"] .suggestions::-webkit-scrollbar-thumb:hover { background: rgba(201, 68, 68, 0.55); background-clip: padding-box; }
        /* Første og siste item-rad skal også rundes av */
        .suggestions .suggestion-item:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
        .suggestions .suggestion-item:last-child { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
        .suggestions.open { display: block; }
        /* Skjuler de gamle gruppe-overskriftene; gruppene merkes nå med
           en liten hjørne-merkelapp på første rad i hver gruppe. */
        .suggestions-group-label { display: none; }
        .suggestion-corner-label {
            font-size: 0.62rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.55;
            margin-left: 10px;
            flex: 0 0 auto;
            align-self: center;
            white-space: nowrap;
        }
        /* Tynn separator mellom grupper, men ikke før første rad. */
        .suggestion-item.group-start { border-top: 1px solid var(--border); }
        .suggestion-item.group-start:first-child { border-top: none; }
        .suggestion-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            font-size: 0.92rem;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s;
        }
        .suggestion-item:last-child { border-bottom: none; }
        .suggestion-item:hover, .suggestion-item.hover {
            background: rgba(168, 50, 50, 0.06);
        }
        [data-theme="dark"] .suggestion-item:hover, [data-theme="dark"] .suggestion-item.hover {
            background: rgba(201, 68, 68, 0.1);
        }
        .suggestion-icon { flex: 0 0 auto; font-size: 1em; color: var(--text-muted); display: inline-flex; align-items: center; }
        /* Filter-chips (AVGRENS) — kompakt rad med klikkbare pill-knapper. */
        .suggestion-chips-row {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
            padding: 9px 14px;
        }
        .suggestion-chips-row.group-start { border-top: 1px solid var(--border); }
        .suggestion-chips-label {
            font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--text-muted); margin-right: 4px;
        }
        .suggestion-chip {
            font-family: inherit; font-size: 0.82rem;
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 11px; border-radius: 999px;
            border: 1px solid var(--border); background: var(--card-bg);
            color: var(--text); cursor: pointer;
            transition: border-color 120ms ease, background 120ms ease;
        }
        .suggestion-chip:hover { border-color: var(--accent); background: var(--bg); }
        .suggestion-chip .icon { color: var(--text-muted); }
        .suggestion-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .suggestion-text strong { color: var(--accent); }
        .suggestion-text .suggestion-subtext {
            font-size: 0.82rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .suggestion-text .suggestion-subtext mark {
            background: rgba(168, 50, 50, 0.18);
            color: inherit;
            padding: 0 1px;
            border-radius: 2px;
        }
        [data-theme="dark"] .suggestion-text .suggestion-subtext mark {
            background: rgba(201, 68, 68, 0.28);
        }
        .suggestion-hint {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-left: 8px;
            flex: 0 0 auto;
        }
        /* Tips-rad — visuelt mykere så den ikke konkurrerer med ekte handlinger */
        .suggestion-item.suggestion-tip {
            background: linear-gradient(0deg, rgba(168, 50, 50, 0.04), rgba(168, 50, 50, 0.04));
            font-size: 0.86rem;
            color: var(--text-muted);
        }
        .suggestion-item.suggestion-tip .suggestion-text strong { color: var(--text); }
        /* Litt mer plass når dropdown viser seksjoner */
        .suggestions { max-height: 420px; }
        /* Mobil: dropdown skal aldri presse seg utenfor viewporten. Begrens høyden
           til halvparten av skjermen og legg til litt mindre kant så seksjonene
           ikke vokser ut av bildet. */
        @media (max-width: 700px) {
            .suggestions {
                max-height: 55vh;
                border-radius: 18px;
            }
            /* Sørg for at .suggestions-wrap kan inneholde absolute-posisjonert
               dropdown uten å bli klippet av bottom-bar-padding. */
            .search-bottom-bar { overflow: visible; }
        }

        @media (max-width: 700px) {
            .controls { flex-direction: column; gap: 8px; }
            .search-bar-wrap { min-width: 100%; }
            .controls-actions { width: 100%; }
            .controls-actions select { flex: 1; min-width: 0; }
            .controls-actions .btn-primary,
            .controls-actions .btn-secondary { flex: 1; text-align: center; }
            .toggles { gap: 12px; }
            .verse-row { flex-direction: column; }
            .compare-columns-header { flex-direction: column; gap: 6px; }

            /* Sticky top search bar on mobile — flytende pille uten bakgrunn.
               Symmetrisk topp/bunn-padding (12px) så avstanden over og under
               pillen blir lik.
               top: 58 + safe matcher header-høyden (safe-area-top + 10 padding
               + 38 inner content + 10 padding = safe + 58), så bar-toppen
               flukter med header-bunnen og bar.padding-top (12px) skaper
               akkurat 12px gap fra header-bunn til pille-topp. */
            .search-bottom-bar {
                position: fixed;
                left: 0; right: 0;
                top: calc(58px + env(safe-area-inset-top, 0px));
                background: transparent;
                border-bottom: none;
                padding: 12px 14px;
                z-index: 100;
                display: flex;
                flex-direction: column;
                gap: 8px;
                box-shadow: none;
                /* Tving egen GPU-layer så søkefeltet ikke rister når søsken-
                   elementer (resultsWrapper / vizHosts) transformeres under swipe. */
                transform: translateZ(0);
                will-change: transform;
                backface-visibility: hidden;
            }
            .search-bottom-bar .search-bar-wrap { min-width: 0; }
            .search-bottom-bar .controls-actions-row {
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .controls.desktop-only { display: none; }
            /* Symmetrisk vertikal balanse rundt søkefelt-pillen:
               - 12px fra header-bunn til pille-topp (top-gap)
               - 12px fra pille-bunn til vers-kort-topp (bottom-gap)
               Beregning: body.padding-top (54) + results.margin-top (8)
               + results.padding-top = pille_bottom + 12
               Pille bottom = bar_top + bar.padding-top + pille_height
                            = (58 + safe) + 12 + 46 = 116 + safe
               Verse-card top should be 128 + safe ⇒ padding-top = 66 + safe */
            .results-wrapper { padding: calc(66px + env(safe-area-inset-top, 0px)) 16px 8px; }
            .verse-card { padding: 20px 18px; }
            /* Kompakt versjonvelger-panel på mobil — arver de fleste reglene
               fra desktop-versjonen (bare navn, max-content bredde) */
            .version-picker-panel {
                min-width: 130px;
            }
            .version-picker-panel .version-option-name { font-size: 0.85rem; }

            /* Referanse-etikett — vises på søkefeltets posisjon når feltet er bladd vekk.
               Posisjoneres ved samme top som .search-bottom-bar (58 + safe) så
               det visuelt sitter rett der søkefeltet var. */
            .search-bar-ref-label {
                display: flex;
                position: fixed;
                left: 0; right: 0;
                top: calc(58px + env(safe-area-inset-top, 0px));
                height: 60px;
                align-items: center;
                justify-content: center;
                pointer-events: none;
                z-index: 99;
                opacity: 0;
                transition: opacity 0.22s ease;
            }
            .search-bar-ref-label.visible { opacity: 1; }
            .sbrl-pill {
                background: var(--card-bg);
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 5px 14px 5px 16px;
                font-size: 0.82rem;
                font-weight: 600;
                color: var(--accent);
                box-shadow: 0 2px 10px rgba(0,0,0,0.12);
                white-space: nowrap;
                max-width: calc(100vw - 40px);
                overflow: hidden;
                text-overflow: ellipsis;
                /* Selve pillen er klikkbar selv om wrapperen har pointer-events:none.
                   Slik kan man tappe pillen for å hente fram bok/kapittel-velgeren
                   uten at den blokkerer klikk på vers/innhold når wrapperen er skjult.
                   Chevron ▾ signaliserer at det er en dropdown-trigger. */
                pointer-events: auto;
                cursor: pointer;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
            }
            .sbrl-pill::after {
                content: '\25BE'; /* ▾ */
                font-size: 0.75em;
                opacity: 0.7;
                flex-shrink: 0;
            }
            .sbrl-pill:active {
                transform: scale(0.96);
                background: rgba(168,50,50,0.10);
                border-color: var(--accent);
            }
            [data-theme="dark"] .sbrl-pill:active {
                background: rgba(201,68,68,0.16);
            }
        }
        @media (min-width: 701px) {
            .search-bottom-bar { display: none; }
            .search-bar-ref-label { display: none; }

            /* Sentrert oppstart: søkefelt midt på skjermen, fester seg
               70px fra viewport-toppen (10px gap under den 60px høye
               topp-baren) når brukeren scroller — alltid synlig på PC. */
            .search-area {
                position: sticky;
                top: 70px;
                z-index: 150;
                max-width: 640px;
                margin: 22vh auto 0;
                padding: 5px 24px 7px;
                background: transparent;
                transition: margin-top 0.6s cubic-bezier(.4, 0, .2, 1),
                            max-width 0.4s ease;
            }
            /* Ingen ::before-gap-filler — bakgrunnen er transparent */
            .search-area::before { display: none; }
            .page-center-mode .results-wrapper {
                max-width: 640px;
                transition: max-width 0.4s ease;
            }

            /* Toppstilling: etter første søk sitter søkefeltet et lite stykke
               under topp-baren med samme avstand til vers-/kapittel-kortet
               under (visuelt symmetrisk). Sticky-regelen over holder feltet
               synlig 10px under topp-baren også når brukeren scroller. */
            .page-top-mode .search-area {
                margin-top: 10px;
                max-width: 880px;
            }
            .page-top-mode .results-wrapper {
                /* 8px her + search-area padding-bottom 7px = 15px visuelt,
                   som matcher avstanden over søkefeltet (margin 10 + padding 5) */
                margin-top: 8px;
                max-width: 880px;
                transition: max-width 0.4s ease;
            }
            /* Sammenligningsvisning trenger bredere layout */
            .compare-active .search-area { max-width: 1300px; }
            .compare-active .results-wrapper { max-width: 1300px; }
        }
        @media (max-width: 700px) {
            .app-header-inner { padding: 10px 16px; }
            .app-header h1 { font-size: 1.1rem; }
            .header-logo { height: 30px; }
            body { padding-top: 54px; }
        }

        /* ── Touch-enheter: forhindre at :hover-stilen "låses" på siste tappede
              element. iOS Safari (og Chrome på Android) holder :hover-staten
              etter tap inntil bruker tapper et annet sted, så knappen forblir
              rød/uthevet. Vi nullstiller de viktigste hover-overstyringene
              for relevante interaktive elementer på enheter uten ekte hover. */
        @media (hover: none) {
            button:hover:not(.active),
            a:hover:not(.active),
            .card-action-btn:hover:not(.active):not(.vsel-active):not(:disabled),
            .nav-btn:hover:not(:disabled),
            .verse-card:hover,
            .commentary-src-btn:hover:not(.active),
            .lexicon-src-btn:hover:not(.active),
            .place-chip:hover,
            .topic-pill:hover:not(.active),
            .compare-version-btn:hover:not(.active),
            .copy-btn:hover,
            .note-marker:hover,
            .xref-btn:hover,
            .xref-entry:hover,
            .expand-chapter-btn:hover,
            .verse-tools-btn:hover:not(:disabled),
            .search-btn-inline:hover,
            .timeline-zoom-btn:hover,
            .lexicon-entry:hover,
            .commentary-entry:hover,
            .version-option:hover,
            .nav-tree-item:hover,
            .nav-drawer-action-btn:hover,
            .nav-chapter-btn:hover,
            .ai-suggestion-btn:hover,
            .recent-search-item:hover,
            .feedback-link:hover,
            .lexicon-src-btn:hover:not(.active),
            .xref-mode-btn:hover:not(.active) {
                background: var(--card-bg);
                color: var(--text);
                border-color: var(--border);
                transform: none;
                box-shadow: none;
                opacity: 1;
            }
            /* For knapper med transparent eller arvet bakgrunn: ikke endre den.
               (revert/inherit funker ikke alltid med !important). */
            .nav-btn:hover:not(:disabled),
            .copy-btn:hover,
            .note-marker:hover,
            .verse-tools-btn:hover:not(:disabled),
            .expand-chapter-btn:hover {
                background: transparent;
            }
            /* verse-tools-btn: gjenopprett translateY(-50%) som den store blokken
               tilbakestilte, og nullstill ::before-animasjonen */
            .verse-tools-btn:hover:not(:disabled) {
                transform: translateY(-50%);
                color: var(--text-muted);
            }
            .verse-tools-btn:hover:not(:disabled)::before {
                background: transparent;
                transform: none;
            }
        }