/* ===================== Theme System - Phase 5 ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===================== Base Variables ===================== */
:root {
    --font-family: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
    --radius: 0.5rem;
    /* Layout dimensions - using inset box-shadow for borders, no extra pixels */
    /* iOS safe areas (installed PWA, black-translucent status bar): the
       insets are 0 everywhere else, so every consumer below is a no-op in
       Safari and on desktop. --header-height INCLUDES the top inset so the
       sticky breadcrumbs, bounded shells and the header itself stay in
       agreement; the bar's own height is --header-bar-height. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-bar-height: 56px;
    --header-height: calc(var(--header-bar-height) + var(--safe-top));
    --breadcrumbs-height: 32px;
    --nav-height: 52px;
}

/* A double tap on a phone or tablet never zooms the app (Dennis 2026-10-14:
   "Dbclick på telefon/mobila enheter får inte zooma UIt"). manipulation keeps
   scrolling and pinch zoom, so the page can still be zoomed; it drops only the
   double tap's zoom (iOS Safari zooms on it even with width=device-width) and
   the tap's wait for a second one. Every element under html takes it with it. */
html { touch-action: manipulation; }

/* Status colours, HSL components like every palette token
   (hsl(var(--success))). Declared on body, not :root: --danger follows the
   palette's --destructive, which lives on body[data-theme]. They were used
   in ~50 places but never defined (2026-09-27). */
body {
    --success: 142 71% 36%;
    --warning: 38 92% 45%;
    --danger: var(--destructive);
}
body.dark {
    --success: 142 60% 52%;
    --warning: 38 92% 58%;
}

/* ===================== Theme: Default (Stone) ===================== */
[data-theme="default"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
}

    [data-theme="default"].dark {
        --background: 220 13% 10%;
        --foreground: 0 0% 98%;
        --card: 220 13% 12%;
        --card-foreground: 0 0% 98%;
        --popover: 220 13% 12%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 220 13% 10%;
        --secondary: 220 13% 18%;
        --secondary-foreground: 0 0% 98%;
        --muted: 220 13% 15%;
        --muted-foreground: 0 0% 65%;
        --accent: 220 13% 18%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 220 13% 20%;
        --input: 220 13% 18%;
        --ring: 0 0% 83.1%;
    }

/* ===================== Theme: Blue ===================== */
[data-theme="blue"] {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
}

    [data-theme="blue"].dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 12%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 224.3 76.3% 48%;
    }

/* ===================== Theme: Green ===================== */
[data-theme="green"] {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
}

    [data-theme="green"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 0 0% 95%;
        --card: 24 9.8% 10%;
        --card-foreground: 0 0% 95%;
        --popover: 0 0% 9%;
        --popover-foreground: 0 0% 95%;
        --primary: 142.1 70.6% 45.3%;
        --primary-foreground: 144.9 80.4% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 10%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 142.4 71.8% 29.2%;
    }

/* Stegvis palette: warm canvas/paper and pine/mint accents. */
[data-theme="stegvis"] {
    --background: 47 27% 94%;
    --foreground: 171 34% 15%;
    --card: 40 100% 98.8%;
    --card-foreground: 171 34% 15%;
    --popover: 40 100% 98.8%;
    --popover-foreground: 171 34% 15%;
    --primary: 171 64% 25%;
    --primary-foreground: 40 100% 98.8%;
    --secondary: 158 30% 89%;
    --secondary-foreground: 171 64% 25%;
    --muted: 158 30% 94%;
    --muted-foreground: 147 7% 40%;
    --accent: 158 30% 89%;
    --accent-foreground: 171 64% 25%;
    --destructive: 11 48% 44%;
    --destructive-foreground: 40 100% 98.8%;
    --border: 53 12% 85%;
    --input: 53 12% 85%;
    --ring: 171 64% 25%;
}
[data-theme="stegvis"].dark {
    --background: 166 24% 9%;
    --foreground: 150 20% 92%;
    --card: 166 20% 12%;
    --card-foreground: 150 20% 92%;
    --popover: 166 20% 12%;
    --popover-foreground: 150 20% 92%;
    --primary: 161 38% 65%;
    --primary-foreground: 166 30% 10%;
    --secondary: 166 20% 20%;
    --secondary-foreground: 155 25% 90%;
    --muted: 166 17% 17%;
    --muted-foreground: 155 12% 66%;
    --accent: 166 24% 22%;
    --accent-foreground: 155 25% 90%;
    --destructive: 11 55% 65%;
    --destructive-foreground: 11 35% 12%;
    --border: 166 16% 25%;
    --input: 166 16% 25%;
    --ring: 161 38% 65%;
}

/* ===================== Theme: Orange ===================== */
[data-theme="orange"] {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 24.6 95% 53.1%;
}

    [data-theme="orange"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 60 9.1% 97.8%;
        --card: 20 14.3% 4.1%;
        --card-foreground: 60 9.1% 97.8%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --primary: 20.5 90.2% 48.2%;
        --primary-foreground: 60 9.1% 97.8%;
        --secondary: 12 6.5% 15.1%;
        --secondary-foreground: 60 9.1% 97.8%;
        --muted: 12 6.5% 10%;
        --muted-foreground: 24 5.4% 63.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 60 9.1% 97.8%;
        --destructive: 0 72.2% 50.6%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 12 6.5% 15.1%;
        --input: 12 6.5% 15.1%;
        --ring: 20.5 90.2% 48.2%;
    }

/* ===================== Theme: Red ===================== */
[data-theme="red"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 72.2% 50.6%;
    --primary-foreground: 0 85.7% 97.3%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 72.2% 50.6%;
}

    [data-theme="red"].dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 72.2% 50.6%;
        --primary-foreground: 0 85.7% 97.3%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 10%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 72.2% 50.6%;
    }

/* ===================== Theme: Rose ===================== */
[data-theme="rose"] {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 346.8 77.2% 49.8%;
}

    [data-theme="rose"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 0 0% 95%;
        --card: 24 9.8% 10%;
        --card-foreground: 0 0% 95%;
        --popover: 0 0% 9%;
        --popover-foreground: 0 0% 95%;
        --primary: 346.8 77.2% 49.8%;
        --primary-foreground: 355.7 100% 97.3%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 10%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 346.8 77.2% 49.8%;
    }

/* ===================== Theme: Violet ===================== */
[data-theme="violet"] {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
}

    [data-theme="violet"].dark {
        --background: 224 71.4% 4.1%;
        --foreground: 210 20% 98%;
        --card: 224 71.4% 4.1%;
        --card-foreground: 210 20% 98%;
        --popover: 224 71.4% 4.1%;
        --popover-foreground: 210 20% 98%;
        --primary: 263.4 70% 50.4%;
        --primary-foreground: 210 20% 98%;
        --secondary: 215 27.9% 16.9%;
        --secondary-foreground: 210 20% 98%;
        --muted: 215 27.9% 12%;
        --muted-foreground: 217.9 10.6% 64.9%;
        --accent: 215 27.9% 16.9%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;
        --border: 215 27.9% 16.9%;
        --input: 215 27.9% 16.9%;
        --ring: 263.4 70% 50.4%;
    }

/* ===================== Theme: Yellow ===================== */
[data-theme="yellow"] {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
}

    [data-theme="yellow"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 60 9.1% 97.8%;
        --card: 20 14.3% 4.1%;
        --card-foreground: 60 9.1% 97.8%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --primary: 47.9 95.8% 53.1%;
        --primary-foreground: 26 83.3% 14.1%;
        --secondary: 12 6.5% 15.1%;
        --secondary-foreground: 60 9.1% 97.8%;
        --muted: 12 6.5% 10%;
        --muted-foreground: 24 5.4% 63.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 60 9.1% 97.8%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 12 6.5% 15.1%;
        --input: 12 6.5% 15.1%;
        --ring: 35.5 91.7% 32.9%;
    }

/* ===================== Theme: Code (VS Code-inspired dark + blue accent) ===================== */
[data-theme="code"] {
    --background: 210 14% 97%;
    --foreground: 210 12% 12%;
    --card: 210 14% 98.5%;
    --card-foreground: 210 12% 12%;
    --popover: 210 14% 98.5%;
    --popover-foreground: 210 12% 12%;
    --primary: 207 90% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 14% 93%;
    --secondary-foreground: 210 12% 12%;
    --muted: 210 14% 93%;
    --muted-foreground: 210 8% 46%;
    --accent: 210 14% 93%;
    --accent-foreground: 210 12% 12%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 12% 88%;
    --input: 210 12% 88%;
    --ring: 207 90% 40%;
}

    [data-theme="code"].dark {
        --background: 0 0% 12%;
        --foreground: 210 12% 88%;
        --card: 0 0% 14.5%;
        --card-foreground: 210 12% 88%;
        --popover: 0 0% 14.5%;
        --popover-foreground: 210 12% 88%;
        --primary: 207 90% 48%;
        --primary-foreground: 0 0% 100%;
        --secondary: 0 0% 20%;
        --secondary-foreground: 210 12% 88%;
        --muted: 0 0% 17%;
        --muted-foreground: 210 6% 58%;
        --accent: 0 0% 20%;
        --accent-foreground: 210 12% 88%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 22%;
        --input: 0 0% 20%;
        --ring: 207 90% 48%;
    }

/* ===================== Theme: Warm ===================== */
[data-theme="warm"] {
    --background: 43 20% 95.5%;
    --foreground: 30 10% 8%;
    --card: 42 18% 97%;
    --card-foreground: 30 10% 8%;
    --popover: 42 18% 97%;
    --popover-foreground: 30 10% 8%;
    --primary: 30 12% 22%;
    --primary-foreground: 40 20% 96%;
    --secondary: 40 14% 92%;
    --secondary-foreground: 30 10% 12%;
    --muted: 40 14% 92%;
    --muted-foreground: 30 6% 46%;
    --accent: 40 14% 92%;
    --accent-foreground: 30 10% 12%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 12% 86%;
    --input: 35 12% 86%;
    --ring: 30 12% 22%;
}

    [data-theme="warm"].dark {
        --background: 25 14% 9%;
        --foreground: 40 14% 92%;
        --card: 25 12% 12%;
        --card-foreground: 40 14% 92%;
        --popover: 25 12% 12%;
        --popover-foreground: 40 14% 92%;
        --primary: 40 18% 80%;
        --primary-foreground: 25 14% 9%;
        --secondary: 25 10% 17%;
        --secondary-foreground: 40 14% 92%;
        --muted: 25 10% 14%;
        --muted-foreground: 35 8% 60%;
        --accent: 25 10% 17%;
        --accent-foreground: 40 14% 92%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 40 14% 92%;
        --border: 25 10% 19%;
        --input: 25 10% 17%;
        --ring: 40 18% 60%;
    }

/* ===================== Theme: Dark Blue (deep navy plant-map UI) ===================== */
[data-theme="darkblue"] {
    --background: 220 25% 97%;
    --foreground: 220 40% 14%;
    --card: 0 0% 100%;
    --card-foreground: 220 40% 14%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 40% 14%;
    --primary: 224.3 76.3% 48%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 25% 94%;
    --secondary-foreground: 220 30% 20%;
    --muted: 220 25% 94%;
    --muted-foreground: 220 14% 46%;
    --accent: 220 30% 92%;
    --accent-foreground: 220 30% 20%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 20% 88%;
    --input: 220 20% 88%;
    --ring: 224.3 76.3% 48%;
}

    [data-theme="darkblue"].dark {
        --background: 217.9 42.2% 8.8%;
        --foreground: 214.3 31.8% 91.4%;
        --card: 217.5 38.7% 12.2%;
        --card-foreground: 214.3 31.8% 91.4%;
        --popover: 217.5 38.7% 12.2%;
        --popover-foreground: 214.3 31.8% 91.4%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 0 0% 100%;
        --secondary: 216 35% 16%;
        --secondary-foreground: 214.3 31.8% 91.4%;
        --muted: 216 35% 11%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 216 35% 16%;
        --accent-foreground: 214.3 31.8% 91.4%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217 32.3% 24.3%;
        --input: 217 32.3% 24.3%;
        --ring: 217.2 91.2% 59.8%;
    }

/* ===================== Apply Theme Colors ===================== */
* {
    border-color: hsl(var(--border));
}

body {
    font-family: var(--font-family);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===================== Theme Transition Glass Overlay ===================== */
.theme-transition-glass {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: opacity 0.6s ease-out;
    pointer-events: none;
}
body.dark .theme-transition-glass {
    background: rgba(0, 0, 0, 0.4);
}
.theme-transition-glass.fade-out {
    opacity: 0;
}
/* The icon morph: the outgoing mode's glyph and the incoming one occupy the
 * same cell, and `.is-swapped` (added by ThemeCustomizer.runModeTransition at
 * the crossover) rotates one out while the other rotates in. Stacking them in
 * a grid rather than absolutely positioning keeps the pair centred whatever
 * the glyph widths are. */
.theme-transition-morph {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
}
.theme-transition-icon {
    grid-area: 1 / 1;
    font-size: 32px;
    line-height: 1;
    color: hsl(var(--foreground));
    transition: transform 0.42s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.32s ease;
}
.theme-transition-icon.is-from {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
.theme-transition-icon.is-to {
    transform: scale(0.45) rotate(-110deg);
    opacity: 0;
}
.theme-transition-glass.is-swapped .theme-transition-icon.is-from {
    transform: scale(0.45) rotate(110deg);
    opacity: 0;
}
.theme-transition-glass.is-swapped .theme-transition-icon.is-to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Polaris is the one mode with its own chrome, so its glyph gets the accent
 * colour instead of plain foreground — the meteor should arrive lit. */
body.polaris .theme-transition-icon.is-to,
.theme-transition-glass.is-swapped .theme-transition-icon.is-to.fa-meteor {
    color: hsl(var(--primary));
}

/* Animations off: no morph, no overlay (runModeTransition returns early), but
 * keep the reduced-motion contract for anyone who lands here another way. */
@media (prefers-reduced-motion: reduce) {
    .theme-transition-icon { transition-duration: 0.01ms; }
}

/* ====================================
Toastr Custom Styles - Theme Aware
==================================== */

/* Base toast container styling */
#toast-container > div {
    opacity: 1 !important;
    box-shadow: none !important;
    border-radius: 3px;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--border));
    font-family: var(--font-family);
    background-color: hsl(var(--card)) !important;
    background-image: none !important;
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Force text color to be readable in both light and dark modes */
#toast-container > div,
#toast-container > div .toast-message,
#toast-container > div .toast-title {
    color: hsl(var(--foreground)) !important;
}

/* Hide Toastr's default background-image icons to prevent duplicate icons */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-info,
#toast-container > .toast-warning,
.dark #toast-container > .toast-success,
.dark #toast-container > .toast-error,
.dark #toast-container > .toast-info,
.dark #toast-container > .toast-warning,
body.dark #toast-container > .toast-success,
body.dark #toast-container > .toast-error,
body.dark #toast-container > .toast-info,
body.dark #toast-container > .toast-warning {
    background-image: none !important;
    padding-left: 1rem;
}

/* Left accent border per type */
#toast-container > .toast-success { border-left: 3px solid #16a34a; }
#toast-container > .toast-error   { border-left: 3px solid #dc2626; }
#toast-container > .toast-info    { border-left: 3px solid #2563eb; }
#toast-container > .toast-warning { border-left: 3px solid #d97706; }

/* Ensure Font Awesome icons from toastr are hidden (toastr may inject these) */
#toast-container .toast-success .toast-icon,
#toast-container .toast-error .toast-icon,
#toast-container .toast-info .toast-icon,
#toast-container .toast-warning .toast-icon,
#toast-container > div::before {
    display: none !important;
}

/* Inline icon per toast type — compact and subtle */
#toast-container > .toast-success .toast-message::before {
    content: "✓ ";
    color: #16a34a;
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3rem;
}

.dark #toast-container > .toast-success .toast-message::before {
    color: #22c55e;
}

#toast-container > .toast-error .toast-message::before {
    content: "✕ ";
    color: #dc2626;
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3rem;
}

.dark #toast-container > .toast-error .toast-message::before {
    color: #ef4444;
}

#toast-container > .toast-info .toast-message::before {
    content: "ⓘ ";
    color: #2563eb;
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3rem;
}

.dark #toast-container > .toast-info .toast-message::before {
    color: #3b82f6;
}

#toast-container > .toast-warning .toast-message::before {
    content: "⚠ ";
    color: #d97706;
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3rem;
}

.dark #toast-container > .toast-warning .toast-message::before {
    color: #f59e0b;
}

/* Close button styling */
.toast-close-button {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 0.6 !important;
    font-size: 14px;
    font-weight: 400;
    top: -4px;
}

.toast-close-button:hover {
    color: hsl(var(--foreground)) !important;
    opacity: 1 !important;
}

/* Hide progress bar */
#toast-container .toast-progress {
    display: none;
}

/* Position & spacing */
.toast-top-center {
    margin-top: 12px;
}

#toast-container > div {
    margin: 0 0 4px 0;
    width: 320px;
    max-width: 90vw;
}
/* ===================== iOS PWA safe area ===================== */
/* The app header extends up behind the status bar (clock, Wi-Fi, battery)
   with a transparent top border of the inset's height: the background
   paints under it, the padding stays whatever each app set, and the
   content keeps its 56px row. `body .app-header` outranks every plain
   .app-header rule, including the mobile padding shorthands. */
body .app-header {
    border-top: var(--safe-top) solid transparent;
}

/* Yoga is a visual style, independent of palette and light/dark appearance. */
body.yoga {
    /* No --radius or --font-family here: on body they shadowed the root
       values ThemeCustomizer sets, so HÖRN-RADIE and TYPSNITT did nothing
       under Yoga (2026-09-27). The old look is Soft (0.75rem) and System
       (Segoe UI). */
    background: radial-gradient(ellipse at 5% 0%, hsl(var(--primary) / .07), transparent 36rem),
                radial-gradient(ellipse at 95% 20%, hsl(11 48% 55% / .06), transparent 32rem), hsl(var(--background));
    font-family: var(--font-family);
}
body.yoga :is(h1, .ck-hero-title h2, .publication-card h2, .publication-info-modal h2) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.025em;
}
body.yoga :is(.view-card, .view-result-row, .publication-panel, .ck-card, .ck-hero, .view-detail-card, .modal-content, .publication-info-modal) {
    border-radius: 20px;
    box-shadow: 0 6px 24px hsl(var(--foreground) / .045);
}
body.yoga :is(.view-search-card, .publication-button, .view-card-action, .view-mode-toggle) { border-radius: 14px; }