/* ==========================================================================
   Vores Opskrifter – designsproget "Kogebogen"
   Reglerne står i docs/DESIGN.md. Alle værdier hentes fra tokens i :root –
   hex-, px- og rem-værdier hører kun hjemme her i toppen.
   ========================================================================== */

:root {
    /* Farver (DESIGN.md §2) */
    --color-bg: #F6EFE4;
    --color-surface: #FFFCF7;
    --color-surface-sunken: #EADFCF;
    --color-ink: #2A1F17;
    --color-ink-muted: #6B5B4D;
    --color-line: #E4D7C4;
    --color-line-soft: #EDE3D4;
    --color-control: #94826B;
    --color-brand: #7A4A2F;
    --color-brand-strong: #5C3620;
    --color-on-brand: #FFFCF7;
    --color-accent: #A24A24;
    --color-success: #2F6B3A;
    --color-success-bg: #E3EFE1;
    --color-danger: #A3322A;
    --color-danger-bg: #F8E3DE;
    --color-warning: #8A5300;
    --color-warning-bg: #FBEFD5;
    --color-overlay: rgba(42, 31, 23, 0.55);
    --color-scrim: rgba(255, 252, 247, 0.92);
    --color-lightbox: rgba(20, 15, 11, 0.94);

    /* Typografi (DESIGN.md §3) */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-md: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.3125rem;
    --text-2xl: 1.625rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;
    --leading-tight: 1.15;
    --leading-body: 1.5;
    --tracking-overline: 0.08em;

    /* Afstand (4-baseret skala, DESIGN.md §4) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Størrelser */
    --size-touch: 44px;
    --size-control: 48px;
    --size-bar-button: 52px;
    --size-chip: 36px;
    --size-fab: 56px;
    --size-check: 22px;
    --size-thumb: 44px;
    --card-image-height: 120px;
    --hero-height: 290px;
    --nav-height: 64px;
    --width-read: 720px;
    --width-wide: 1080px;
    --border: 1px;
    --border-strong: 2px;

    /* Skygger og bevægelse */
    --shadow-fab: 0 6px 16px rgba(92, 54, 32, 0.30);
    --shadow-sheet: 0 -8px 24px rgba(42, 31, 23, 0.12);
    --shadow-raised: 0 1px 2px rgba(42, 31, 23, 0.12);
    --duration: 200ms;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Skrifter (hostes selv, se assets/fonts/LICENS.txt) --- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/fraunces-600-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
}

/* ==========================================================================
   Grundlag
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--safe-top);
}
/* Android-appen går op under statuslinjen: en stribe i baggrundsfarven dækker den (0 høj i en browser) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 35;
    height: var(--safe-top);
    background: var(--color-bg);
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--color-ink);
}
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--color-brand); }
a:hover { color: var(--color-brand-strong); }

:focus-visible {
    outline: var(--border-strong) solid var(--color-brand);
    outline-offset: var(--border-strong);
}

[hidden] { display: none !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.text-muted { color: var(--color-ink-muted); }
.text-small { font-size: var(--text-xs); }

.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    max-width: var(--width-read);
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-12);
}
.container-wide { max-width: var(--width-wide); }

/* Sider med bundmenu skal have plads til den */
body.has-nav .container { padding-bottom: calc(var(--nav-height) + var(--space-12) + var(--safe-bottom)); }
/* Sider med fast handlingsbjælke ligeså */
body.has-action-bar .container { padding-bottom: calc(var(--size-bar-button) + var(--space-12) + var(--space-6) + var(--safe-bottom)); }

.page-header { margin-bottom: var(--space-5); }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.page-header-kicker { font-size: var(--text-sm); color: var(--color-ink-muted); }
.page-title { font-size: var(--text-4xl); line-height: 1.1; margin-top: var(--space-1); }
.page-lead { margin-top: var(--space-2); color: var(--color-ink-muted); }

.section { margin-top: var(--space-6); }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.section-title { font-size: var(--text-xl); }
.section-head a { font-size: var(--text-sm); font-weight: 600; text-decoration: none; }

.overline {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-accent);
}
.overline-muted { color: var(--color-ink-muted); }

.meta { font-size: var(--text-sm); color: var(--color-ink-muted); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-touch);
    margin-left: calc(-1 * var(--space-2));
    padding: 0 var(--space-2);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-ink);
}
.back-link .icon { width: 22px; height: 22px; }

/* ==========================================================================
   Hovednavigation – bundmenu på mobil, topbjælke på desktop (DESIGN.md §5)
   ========================================================================== */
.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding-top: var(--space-2);
    padding-bottom: var(--safe-bottom);
    background: var(--color-surface);
    border-top: var(--border) solid var(--color-line);
}
.app-nav-brand { display: none; }
.app-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: var(--size-touch);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-muted);
    text-decoration: none;
}
.app-nav-link[aria-current="page"] { color: var(--color-brand); font-weight: 700; }
.app-nav-link-icon { position: relative; display: inline-flex; }
/* Lille skråt mærke over ikonet på funktioner, der stadig er i beta (fx Madplan) */
.badge-beta {
    position: absolute;
    top: -7px;
    left: 14px;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-brand);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    transform: rotate(-14deg);
    pointer-events: none;
}
.app-nav-add { display: flex; justify-content: center; text-decoration: none; }
.app-nav-add-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-fab);
    height: var(--size-fab);
    margin-top: calc(-1 * var(--space-5));
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: var(--shadow-fab);
}
.app-nav-add-circle .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.app-nav-add-label { display: none; }

@media (min-width: 900px) {
    .app-nav {
        position: sticky;
        top: var(--safe-top);
        bottom: auto;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        height: auto;
        padding: var(--space-3) var(--space-6);
        border-top: none;
        border-bottom: var(--border) solid var(--color-line);
    }
    .app-nav-brand {
        display: block;
        margin-right: auto;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--text-xl);
        color: var(--color-ink);
        text-decoration: none;
    }
    .app-nav-link {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        padding: 0 var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-base);
    }
    .app-nav-link:hover { background: var(--color-bg); color: var(--color-ink); }
    .app-nav-link .icon { width: 20px; height: 20px; }
    .app-nav-add { order: 10; margin-left: var(--space-3); }
    .app-nav-add-circle {
        width: auto;
        height: var(--size-touch);
        margin-top: 0;
        padding: 0 var(--space-4);
        gap: var(--space-2);
        border-radius: var(--radius-md);
        box-shadow: none;
    }
    .app-nav-add-circle .icon { width: 20px; height: 20px; }
    .app-nav-add-label { display: inline; font-weight: 700; }
    body.has-nav .container { padding-bottom: var(--space-12); }
}

/* ==========================================================================
   Knapper (DESIGN.md §6)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-control);
    padding: 0 var(--space-5);
    border: var(--border) solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

.btn-primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn-primary:hover, .btn-primary:active { background: var(--color-brand-strong); color: var(--color-on-brand); }

.btn-secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.btn-secondary:hover { border-color: var(--color-control); color: var(--color-ink); }

.btn-ghost { background: transparent; color: var(--color-brand); padding: 0 var(--space-3); }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-brand-strong); }

.btn-danger { background: var(--color-danger); color: var(--color-on-brand); }
.btn-danger:hover { background: var(--color-danger); color: var(--color-on-brand); filter: brightness(0.92); }

.btn-sm { min-height: var(--size-chip); padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-pill); }
.btn-lg { min-height: var(--size-bar-button); font-size: 1.0625rem; }
.btn-block { width: 100%; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-touch);
    height: var(--size-touch);
    padding: 0;
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}
.btn-icon .icon { width: 22px; height: 22px; }
.btn-icon-lg { width: var(--size-bar-button); height: var(--size-bar-button); }
.btn-icon-round { border-radius: 50%; border: none; background: var(--color-scrim); }
.btn-icon-sunken { border-radius: 50%; border: none; background: var(--color-surface-sunken); width: 38px; height: 38px; }
.btn-icon-plain { border: none; background: transparent; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button-row > .btn { flex: 1 1 140px; }

/* ==========================================================================
   Chips og filtre
   ========================================================================== */
.chip-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-5));
    padding: var(--space-1) var(--space-5);
    scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row-wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    min-height: var(--size-chip);
    padding: 0 var(--space-4);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.chip:hover { color: var(--color-ink); border-color: var(--color-control); }
.chip.is-active,
.chip:has(input:checked) { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: var(--border-strong) solid var(--color-brand); outline-offset: var(--border-strong); }
.chip .icon { width: 16px; height: 16px; }
.chip-removable { padding-right: var(--space-2); }

/* ==========================================================================
   Felter
   ========================================================================== */
form { margin: 0; }
fieldset { margin: 0; padding: 0; border: none; min-width: 0; }
fieldset.card { padding: var(--space-4); border: var(--border) solid var(--color-line); }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field + .field, .field + .form-grid, .form-grid + .field, .form-grid + .form-grid { margin-top: var(--space-4); }
.field-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.field-hint { font-size: var(--text-xs); color: var(--color-ink-muted); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
    width: 100%;
    min-height: var(--size-control);
    padding: 0 var(--space-3);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}
textarea { padding: var(--space-3); resize: vertical; }
select { padding-right: var(--space-8); }
input::placeholder, textarea::placeholder { color: var(--color-ink-muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 var(--border-strong) var(--color-brand);
}
input[type="file"] { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-muted); max-width: 100%; }
input[type="file"]::file-selector-button {
    min-height: var(--size-chip);
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
}

/* Felter, AI er usikker på (DESIGN.md §6) */
.field.is-warning .field-label { color: var(--color-warning); }
.field.is-warning input, .field.is-warning select, .field.is-warning textarea {
    border: var(--border-strong) solid var(--color-warning);
    background: var(--color-warning-bg);
}

.form-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
    .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.form-grid-2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* To felter, der hører sammen, fx antal + enhed */
.input-pair { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-2); }

.choice { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); font-weight: 400; cursor: pointer; }
.choice input { width: var(--size-check); height: var(--size-check); accent-color: var(--color-brand); margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.search-field .icon { position: absolute; left: var(--space-3); width: 20px; height: 20px; color: var(--color-ink-muted); pointer-events: none; }
.search-field input { padding-left: calc(var(--space-3) + 20px + var(--space-2)); }
.search-bar { display: flex; gap: var(--space-2); }
.search-bar .btn-icon { width: var(--size-control); height: var(--size-control); }
/* Sortering lige under søgningen (fx Ugens tilbud) */
.search-bar + .segmented { margin-top: var(--space-3); }

/* ==========================================================================
   Kort, gitter og lister
   ========================================================================== */
.card {
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.card + .card { margin-top: var(--space-3); }

.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 560px) { .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .recipe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.recipe-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--color-ink);
    text-decoration: none;
}
.recipe-card:hover { color: var(--color-ink); border-color: var(--color-control); }
.recipe-card-img, .recipe-card-noimage {
    width: 100%;
    height: var(--card-image-height);
    object-fit: cover;
}
.recipe-card-noimage, .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
}
.recipe-card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.recipe-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.25em);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.25;
}
.recipe-card-meta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-muted); }

.carousel {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-5));
    padding: 0 var(--space-5) var(--space-1);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-5);
    scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.recipe-card-lg {
    flex: 0 0 272px;
    scroll-snap-align: start;
    color: var(--color-ink);
    text-decoration: none;
}
.recipe-card-lg:hover { color: var(--color-ink); }
.recipe-card-lg .recipe-card-lg-img {
    width: 272px;
    height: 168px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.recipe-card-lg-title { margin-top: var(--space-2); font-size: var(--text-lg); line-height: 1.2; }
.recipe-card-lg .meta { margin-top: 2px; }

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
}
.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: calc(var(--size-thumb) + var(--space-6));
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    text-decoration: none;
}
.list > li + li > .list-row, .list > li + li.list-row { border-top: var(--border) solid var(--color-line-soft); }
button.list-row {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
a.list-row:hover, button.list-row:hover { color: var(--color-ink); background: var(--color-bg); }
.list-row-danger:hover { color: var(--color-danger); }
.list > li:first-child > a.list-row { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.list > li:last-child > a.list-row { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.list-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-thumb);
    height: var(--size-thumb);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-brand);
    flex-shrink: 0;
    object-fit: cover;
}
.list-row-body { flex: 1; min-width: 0; }
.list-row-title { display: block; font-weight: 700; }
.list-row-sub { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); }
.list-row > .icon { color: var(--color-ink-muted); width: 20px; height: 20px; }
.list-row-danger, .list-row-danger:hover { color: var(--color-danger); }
.list-row-danger .list-row-icon { color: var(--color-danger); background: var(--color-danger-bg); }

/* ==========================================================================
   Beskeder, status og tomme tilstande (DESIGN.md §7)
   ========================================================================== */
.alert {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }

.toast-region {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-4) + var(--safe-bottom));
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}
body.has-nav .toast-region { bottom: calc(var(--nav-height) + var(--space-4) + var(--safe-bottom)); }
body.has-action-bar .toast-region { bottom: calc(var(--size-bar-button) + var(--space-8) + var(--safe-bottom)); }
@media (min-width: 900px) { body.has-nav .toast-region { bottom: var(--space-6); } }
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 440px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-ink);
    color: var(--color-surface);
    font-weight: 600;
    box-shadow: var(--shadow-sheet);
    pointer-events: auto;
    animation: toast-in var(--duration) var(--ease);
}
.toast .icon { width: 20px; height: 20px; color: var(--color-success-bg); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Status for AI-handlinger – sættes af setAiStatus() i app.js */
.ai-status-banner { display: none; }
.ai-status-banner.show {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.35;
}
.ai-status-banner.busy { background: var(--color-surface-sunken); color: var(--color-ink); }
.ai-status-banner.success { background: var(--color-success-bg); color: var(--color-success); }
.ai-status-banner.error { background: var(--color-danger-bg); color: var(--color-danger); }
.ai-status-banner .icon { width: 20px; height: 20px; }

.spinner, .ai-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 3px solid var(--color-line);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 5px; border-radius: 3px; background: var(--color-surface-sunken); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--color-accent); }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--color-ink-muted);
    background: var(--color-surface);
    border: var(--border) dashed var(--color-line);
    border-radius: var(--radius-lg);
}
.empty-state .icon { width: 32px; height: 32px; color: var(--color-control); }

@keyframes just-changed-flash {
    from { background: var(--color-warning-bg); }
    to { background: transparent; }
}
.just-changed { animation: just-changed-flash 4s ease-out; border-radius: var(--radius-sm); }

/* ==========================================================================
   Bundark og bekræftelser (DESIGN.md §6–7)
   ========================================================================== */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--color-overlay);
    animation: fade-in var(--duration) var(--ease);
}
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-3) var(--space-5) calc(var(--space-8) + var(--safe-bottom));
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-sheet);
    animation: sheet-in var(--duration) var(--ease);
}
@media (min-width: 640px) {
    .sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(520px, calc(100vw - var(--space-8)));
        transform: translate(-50%, -50%);
        padding-bottom: var(--space-6);
        border-radius: var(--radius-xl);
        animation: fade-in var(--duration) var(--ease);
    }
    .sheet-grabber { display: none; }
}
.sheet-grabber { width: 40px; height: 5px; margin: 0 auto var(--space-4); border-radius: 3px; background: var(--color-line); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.sheet-title { font-size: var(--text-2xl); }
.sheet-lead { margin-top: var(--space-1); color: var(--color-ink-muted); }
.sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.option-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 124px;
    padding: var(--space-4);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
}
.option-tile:hover { color: var(--color-ink); border-color: var(--color-control); }
.option-tile .icon { width: 28px; height: 28px; color: var(--color-brand); }
.option-tile-title { display: block; font-weight: 700; font-size: 1.0625rem; }
.option-tile-sub { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); }
.option-tile-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.option-tile-primary:hover { color: var(--color-on-brand); background: var(--color-brand-strong); }
.option-tile-primary .icon, .option-tile-primary .option-tile-sub { color: var(--color-on-brand); }

/* ==========================================================================
   Fast handlingsbjælke (detalje- og formularsider)
   ========================================================================== */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--color-bg);
    border-top: var(--border) solid var(--color-line);
    box-shadow: var(--shadow-sheet);
}
.action-bar-inner {
    display: flex;
    gap: var(--space-3);
    max-width: var(--width-read);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + var(--safe-bottom));
}
.action-bar-inner .btn-primary { flex: 1; min-height: var(--size-bar-button); }
.action-bar-inner .btn-icon { width: var(--size-bar-button); height: var(--size-bar-button); }

/* Formularsidernes topbjælke: Annullér · titel */
.form-topbar {
    position: sticky;
    top: var(--safe-top);
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 56px;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
    padding: 0 var(--space-2);
    background: var(--color-bg);
    border-bottom: var(--border) solid var(--color-line);
}
.form-topbar-title { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; text-align: center; }
.form-topbar .btn-ghost { justify-self: start; color: var(--color-ink-muted); }

/* ==========================================================================
   Opskrift (detalje)
   ========================================================================== */
.recipe-hero { position: relative; }
.recipe-hero-img, .recipe-hero .image-placeholder {
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
    cursor: zoom-in;
}
.recipe-hero .image-placeholder { cursor: default; }
.recipe-hero .image-placeholder .icon { width: 40px; height: 40px; }
.recipe-hero-actions {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.recipe-hero-actions > * { pointer-events: auto; }
.recipe-sheet {
    position: relative;
    max-width: var(--width-read);
    margin: calc(-1 * var(--space-6) - var(--space-1)) auto 0;
    padding: var(--space-6) var(--space-5) 0;
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@media (min-width: 900px) {
    .recipe-page .recipe-hero { max-width: var(--width-read); margin: var(--space-6) auto 0; }
    .recipe-hero-img { border-radius: var(--radius-xl); }
    .recipe-sheet { margin-top: 0; }
}
body.recipe-page .container { max-width: none; padding-top: 0; padding-left: 0; padding-right: 0; }
.recipe-title { margin-top: var(--space-1); font-size: var(--text-3xl); }
.recipe-byline { margin-top: var(--space-1); }
.recipe-description { margin-top: var(--space-3); white-space: pre-line; }

.stat-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-4);
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    text-align: center;
}
.stat + .stat { border-left: var(--border) solid var(--color-line); }
.stat-bar-1 { grid-template-columns: minmax(0, 1fr); }
.stat-bar-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-value { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--text-xs); color: var(--color-ink-muted); }
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper-btn {
    width: 32px;
    height: 32px;
    border: var(--border) solid var(--color-line);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
/* Usynlig udvidelse af trykfladen til 44px uden at gøre knappen visuelt større */
.stepper-btn::after { content: ''; position: absolute; inset: -6px; }
.stepper-btn .icon { width: 16px; height: 16px; stroke-width: 2.4; }

.meta-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.meta-item { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-muted); }
.meta-item .icon { width: 18px; height: 18px; }

.tabs {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-5);
    border-bottom: var(--border) solid var(--color-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab {
    min-height: var(--size-touch);
    padding: 0;
    border: none;
    border-bottom: var(--border-strong) solid transparent;
    margin-bottom: calc(-1 * var(--border));
    background: none;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-ink-muted);
    white-space: nowrap;
    cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--color-ink); font-weight: 700; border-bottom-color: var(--color-brand); }
/* Uden JS vises alle paneler under hinanden med overskrift; med JS bliver det faner */
.tabs { display: none; }
.js .tabs { display: flex; }
.tab-panel { padding-top: var(--space-4); }
.js .tab-panel[data-inactive] { display: none; }
.js .tab-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tab-panel-title { font-size: var(--text-xl); margin-bottom: var(--space-2); }

.section-heading {
    margin: var(--space-5) 0 var(--space-1);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-accent);
}
.tab-panel > .section-heading:first-child { margin-top: 0; }

.check-list { list-style: none; margin: 0; padding: 0; }
/* I et kort (fx indkøbslisten) skal rækkerne have kortets luft i siderne */
.check-list.card { padding: 0 var(--space-4); }
.check-item { border-bottom: var(--border) solid var(--color-line-soft); }
.check-item:last-child { border-bottom: none; }
.check-item label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--size-touch);
    padding: var(--space-2) 0;
    cursor: pointer;
}
.check-item input {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: var(--size-check);
    height: var(--size-check);
    margin: 0;
    border: 1.5px solid var(--color-control);
    border-radius: var(--radius-xs);
    background: var(--color-surface) no-repeat center / 14px;
    cursor: pointer;
}
.check-item input:checked {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.check-amount { flex: 0 0 76px; font-weight: 700; font-variant-numeric: tabular-nums; }
.check-item input:checked ~ span { color: var(--color-ink-muted); text-decoration: line-through; }
.check-note { color: var(--color-ink-muted); }

.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-list li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border) solid var(--color-line-soft);
}
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-brand-strong);
    font-weight: 700;
    font-size: var(--text-sm);
}
.step-list p { white-space: pre-line; }
.step-list img { margin-top: var(--space-2); border-radius: var(--radius-md); cursor: zoom-in; }

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
}
.nutrition-grid .stat + .stat { border-left: var(--border) solid var(--color-line); }
.nutrition-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-ink-muted); }

/* Tabel med tal, fx udregningen af næring */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { padding: var(--space-2) 0; text-align: left; vertical-align: top; border-bottom: var(--border) solid var(--color-line-soft); }
.data-table thead th { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-muted); }
.data-table .num { text-align: right; padding-left: var(--space-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tfoot th, .data-table tfoot td { font-weight: 700; border-bottom: none; }
.data-table-sub { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); }
.data-table tr.is-missing td { color: var(--color-warning); }

/* ==========================================================================
   Madlavningstilstand (fuldskærm)
   ========================================================================== */
.cook-mode {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    padding: calc(var(--space-4) + var(--safe-top)) var(--space-5) calc(var(--space-6) + var(--safe-bottom));
}
.cook-mode-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.cook-mode-progress { display: grid; grid-auto-flow: column; gap: var(--space-1); margin-top: var(--space-3); }
.cook-mode-progress span { height: 5px; border-radius: 3px; background: var(--color-surface-sunken); }
.cook-mode-progress span.is-done { background: var(--color-accent); }
.cook-mode-body { flex: 1; overflow-y: auto; padding-top: var(--space-8); max-width: var(--width-read); width: 100%; margin: 0 auto; }
.cook-mode-text { margin-top: var(--space-3); font-size: 1.5rem; line-height: 1.4; white-space: pre-line; }
.cook-mode-nav { display: flex; gap: var(--space-3); max-width: var(--width-read); width: 100%; margin: var(--space-4) auto 0; }
.cook-mode-nav .btn { min-height: 60px; font-size: 1.0625rem; }
.cook-mode-nav .btn-primary { flex: 1; }
.cook-mode-hint { margin-top: var(--space-3); text-align: center; font-size: var(--text-xs); color: var(--color-ink-muted); }

/* ==========================================================================
   Fuldskærms-galleri
   ========================================================================== */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-lightbox);
    overflow: hidden;
}
.image-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-xs);
    touch-action: none;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}
.image-lightbox img.zoomed { cursor: grab; }
.image-lightbox-close { position: absolute; top: calc(var(--space-4) + var(--safe-top)); right: var(--space-4); z-index: 1; }
.image-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.image-lightbox-prev { left: var(--space-3); }
.image-lightbox-next { right: var(--space-3); }
.image-lightbox-counter {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-scrim);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}
.image-lightbox-counter:empty { display: none; }

/* ==========================================================================
   Redigeringsformular
   ========================================================================== */
.form-section { margin-top: var(--space-4); }
.form-section-title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.form-section-lead { font-size: var(--text-sm); color: var(--color-ink-muted); margin-bottom: var(--space-3); }
.form-section > .card > .field:first-child { margin-top: 0; }

.ingredient-row {
    display: grid;
    grid-template-columns: 4.5rem 4.5rem minmax(0, 1.4fr) minmax(0, 1fr) var(--size-touch);
    gap: var(--space-2);
    align-items: center;
}
.ingredient-row + .ingredient-row { margin-top: var(--space-2); }
.ingredient-row input { padding: 0 var(--space-2); }
/* Smalle skærme: ingrediensnavnet får hele bredden, mængde og enhed står under */
@media (max-width: 479px) {
    .ingredient-row {
        grid-template-columns: 4rem 4rem minmax(0, 1fr) var(--size-touch);
        grid-template-areas: "name name name remove" "amount unit note .";
        padding-bottom: var(--space-3);
        border-bottom: var(--border) solid var(--color-line-soft);
    }
    .ingredient-row + .ingredient-row { margin-top: var(--space-3); }
    .ingredient-row input[name="ingredient_name[]"] { grid-area: name; }
    .ingredient-row input[name="ingredient_amount[]"] { grid-area: amount; }
    .ingredient-row input[name="ingredient_unit[]"] { grid-area: unit; }
    .ingredient-row input[name="ingredient_note[]"] { grid-area: note; }
    .ingredient-row .btn-remove-row { grid-area: remove; }
}

.step-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) var(--size-touch);
    gap: var(--space-2) var(--space-3);
    align-items: start;
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: var(--border) solid var(--color-line-soft);
}
.step-row:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: var(--space-2);
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-brand-strong);
    font-weight: 700;
    font-size: var(--text-sm);
}
.step-row textarea { min-height: 120px; }
.step-image-label {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}
.step-row .current-image { grid-column: 2 / 3; }

.section-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-touch);
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: var(--border-strong) solid var(--color-brand);
}
.section-row:first-child { margin-top: 0; }
.section-row + .ingredient-row, .section-row + .step-row { margin-top: var(--space-3); border-top: none; padding-top: 0; }
.section-name-input { font-weight: 700; color: var(--color-brand-strong); border-style: dashed !important; }

.btn-remove-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-touch);
    height: var(--size-touch);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
}
.btn-remove-row:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.btn-remove-row .icon { width: 20px; height: 20px; }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.current-image { max-width: 220px; border-radius: var(--radius-md); }
.current-image-small { max-width: 140px; margin-top: var(--space-2); }
.image-picker { display: flex; flex-direction: column; gap: var(--space-3); }

.image-gen-overlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-overlay);
}
.image-gen-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 320px;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    text-align: center;
}
.image-gen-box .ai-spinner { width: 36px; height: 36px; border-width: 4px; }

.voice-edit-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.voice-edit-row input { flex: 1; min-width: 0; }
#voiceEditBtn.listening { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-brand); }
.voice-edit-confirm { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border) solid var(--color-line-soft); }
.voice-edit-confirm .button-row { margin-top: var(--space-3); }

#macroNote:empty { display: none; }

/* Scan-siden */
.scan-dropzone {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-strong) dashed var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.scan-preview { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.scan-preview:empty { display: none; }
.scan-preview-item { position: relative; width: 88px; height: 112px; }
.scan-preview-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: var(--border) solid var(--color-line); }
.scan-preview-remove {
    position: absolute;
    top: calc(-1 * var(--space-2));
    right: calc(-1 * var(--space-2));
    width: 28px;
    height: 28px;
    border: var(--border-strong) solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}

/* ==========================================================================
   Log ind / opret bruger
   ========================================================================== */
.auth-page .container { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; max-width: 420px; }
.auth-brand { text-align: center; margin-bottom: var(--space-6); }
.auth-brand .icon { width: 40px; height: 40px; margin: 0 auto var(--space-3); color: var(--color-brand); }
.auth-brand h1 { font-size: var(--text-4xl); }
.auth-brand p { margin-top: var(--space-2); color: var(--color-ink-muted); }
.auth-card { padding: var(--space-6) var(--space-5); }
.auth-card .btn-primary { margin-top: var(--space-6); }
.auth-alt { margin-top: var(--space-5); text-align: center; color: var(--color-ink-muted); }

/* ==========================================================================
   Historik
   ========================================================================== */
.revision-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.revision-changes { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); }
.revision-changes li + li { margin-top: var(--space-1); }

/* ==========================================================================
   Kategorier
   ========================================================================== */
.category-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.category-row + .category-row { border-top: var(--border) solid var(--color-line-soft); }
.category-row form:first-child { display: flex; gap: var(--space-2); flex: 1; min-width: 0; }
.category-row input { flex: 1; min-width: 0; }

/* ==========================================================================
   Stilguide (styleguide.php)
   ========================================================================== */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: var(--border) solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); font-size: var(--text-xs); }
.sg-swatch-color { height: 56px; }
.sg-swatch p { padding: var(--space-2); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3); background: var(--color-surface); border: var(--border) solid var(--color-line); border-radius: var(--radius-md); font-size: var(--text-xs); }
.sg-color-bg { background: var(--color-bg); }
.sg-color-surface { background: var(--color-surface); }
.sg-color-surface-sunken { background: var(--color-surface-sunken); }
.sg-color-ink { background: var(--color-ink); }
.sg-color-ink-muted { background: var(--color-ink-muted); }
.sg-color-line { background: var(--color-line); }
.sg-color-line-soft { background: var(--color-line-soft); }
.sg-color-control { background: var(--color-control); }
.sg-color-brand { background: var(--color-brand); }
.sg-color-brand-strong { background: var(--color-brand-strong); }
.sg-color-accent { background: var(--color-accent); }
.sg-color-success { background: var(--color-success); }
.sg-color-danger { background: var(--color-danger); }
.sg-color-warning { background: var(--color-warning); }
.sg-progress-62 { width: 62%; }
.sg-demo-sheet { position: static; animation: none; transform: none; width: auto; box-shadow: none; border: var(--border) solid var(--color-line); }

/* ==========================================================================
   Madplan (beta)
   ========================================================================== */
/* Hvem spiser med (husstand.php): listen i kortet og tilføj-formularen under en skillelinje */
.eater-list { margin-top: var(--space-3); }
.eater-list .list-row { padding-right: var(--space-2); }
.eater-add { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border) solid var(--color-line-soft); display: flex; flex-direction: column; gap: var(--space-2); }
.eater-add .row-actions { margin-top: var(--space-2); }

.week-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.week-nav-label { font-weight: 700; text-align: center; }

.plan-days { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-day {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-surface);
    border: var(--border) solid var(--color-line);
    border-radius: var(--radius-lg);
}
.plan-day-date { flex: 0 0 40px; text-align: center; }
.plan-day-weekday { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-accent); }
.plan-day-number { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.1; }
.plan-day-img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.plan-day-body { flex: 1; min-width: 0; }
.plan-day-title { display: block; font-weight: 700; color: var(--color-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-day-meta { font-size: var(--text-xs); color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-day-note { font-size: var(--text-xs); font-weight: 600; color: var(--color-success); }
.plan-day-note.is-warning { color: var(--color-warning); }
.plan-day.is-free .plan-day-title { color: var(--color-ink-muted); font-weight: 600; }

.avatar-stack { display: flex; }
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: var(--border-strong) solid var(--color-bg);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 700;
    font-size: var(--text-sm);
}
.avatar + .avatar { margin-left: calc(-1 * var(--space-3)); background: var(--color-accent); }
.avatar-stack a { text-decoration: none; }

.shopping-group { margin-top: var(--space-5); }
.shopping-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.shopping-group-head h2 { font-size: var(--text-xl); }
.shopping-price { flex-shrink: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.shopping-price s { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-muted); }
.check-item .check-body { flex: 1; min-width: 0; }
.check-item.has-action { display: flex; align-items: center; gap: var(--space-2); }
.check-item.has-action label { flex: 1; min-width: 0; }
a.stat { color: inherit; text-decoration: none; }
.alert .icon { width: 20px; height: 20px; flex-shrink: 0; }
.check-item .check-sub { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); text-decoration: none; }

.offer-card { padding: var(--space-4); }
.offer-card + .offer-card { margin-top: var(--space-3); }
.offer-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.offer-price { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); white-space: nowrap; text-align: right; }
.offer-price s { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-muted); }
.offer-info { flex: 1; min-width: 0; }
.offer-title { margin: var(--space-1) 0 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.offer-price { flex-shrink: 0; }
.offer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border) solid var(--color-line-soft);
}

.invite-code { font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: 0.12em; }

/* ==========================================================================
   Idébank: skift mellem kogebogen og idébanken, mærke på opskrifter
   ========================================================================== */
.segmented {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    max-width: 420px;
}
.segmented-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
}
.segmented-item:hover { color: var(--color-ink); }
button.segmented-item { border: none; background: none; font-family: var(--font-body); cursor: pointer; }
.tab-panel > .segmented { margin-bottom: var(--space-2); }
.segmented-item[aria-pressed="true"],
.segmented-item[aria-current="page"] { background: var(--color-surface); color: var(--color-ink); font-weight: 700; box-shadow: var(--shadow-raised); }

.library-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--border) dashed var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}