/* Rezepte - one stylesheet, mobile first.
   Every colour is a token here; the dark theme is the same list with other values. */
:root {
    --bg: #fbf7f2;
    --panel: #ffffff;
    --panel-alt: #f6f1ea;
    --field: #ffffff;
    --ink: #2a2520;
    --muted: #7a6f66;
    --line: #e8dfd5;
    --accent: #c2410c;
    --accent-ink: #ffffff;
    --accent-soft: #fdebe1;
    --ok: #15803d;
    --ok-soft: #ecfdf3;
    --warn: #b45309;
    --warn-soft: #fff4e5;
    --err: #b42318;
    --err-soft: #fef3f2;
    --soft: #f1ebe4;
    /* The bar along the bottom in portrait: lighter than the page in the light theme, lighter
       than the page in the dark one too, so it reads as a thing of its own. */
    --bar: #ffffff;
    --bar-shadow: 0 -4px 16px rgba(60, 40, 20, 0.10);
    --shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 0 4px 14px rgba(60, 40, 20, 0.06);
    --radius: 14px;
    --radius-s: 8px;
    --nav-h: 3.6rem;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #1a1917;
    --panel: #232120;
    --panel-alt: #2a2725;
    --field: #1d1b1a;
    --ink: #ece6df;
    --muted: #a39a90;
    --line: #353230;
    --accent: #f08a4b;
    --accent-ink: #1d130c;
    --accent-soft: #3a2a20;
    --ok: #4ade80;
    --ok-soft: #142a1d;
    --warn: #fbbf24;
    --warn-soft: #2f2514;
    --err: #f87171;
    --err-soft: #311b1b;
    --soft: #2d2a27;
    --bar: #2d2a27;
    --bar-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    min-height: 100dvh;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; }
p { margin: 0.4rem 0; }
.meta { color: var(--muted); font-size: 0.85rem; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }

/* --- header ------------------------------------------------------------- */

header.site {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: env(safe-area-inset-top);
}
header.site .bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 1rem; max-width: 1200px; margin: 0 auto; gap: 1rem;
}
.brand {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
}
.brand-mark { width: 1.35rem; height: 1.35rem; color: var(--accent); }
.session { display: flex; align-items: center; gap: 0.6rem; }
.who { color: var(--muted); text-decoration: none; font-size: 0.9rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- the two menus: the person top right, the admin bottom right ---------- */

details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.user-menu > summary .avatar { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.user-menu > summary:hover .avatar { border-color: var(--accent); }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; min-width: 16rem; max-width: calc(100vw - 2rem);
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.menu-panel.up { top: auto; bottom: calc(100% + 0.6rem); }
.menu-panel form { margin: 0; }
.menu-who { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; }
.menu-who strong { display: block; }
.menu-who .meta { font-size: 0.78rem; }
.menu-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font: inherit; font-size: 0.92rem;
    font-weight: 500; padding: 0.55rem 0.6rem; border: 0; border-radius: var(--radius-s); background: transparent;
    color: var(--ink); text-decoration: none; cursor: pointer; min-height: 0;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--soft); filter: none; }
.menu-item.here { background: var(--accent-soft); color: var(--accent); }
.menu-item svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; }
.menu-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding: 0.3rem 0.6rem 0.1rem; }


/* People: a round picture, or their initial on the accent colour where one would be. */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.9rem;
    border: 1px solid var(--line); vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.tiny { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
.avatar.small { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }
.avatar.medium { width: 3rem; height: 3rem; font-size: 1.3rem; }
.avatar.large { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
.account-head { justify-content: flex-start; align-items: center; }
.account-head h1 { margin-bottom: 0.1rem; }
.user-ident { display: flex; align-items: center; gap: 0.7rem; }
.user-ident .meta a { color: var(--muted); }
.member-list li { padding-left: 0.25rem; gap: 0.35rem; }

.icon-btn {
    width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
    font: inherit; font-size: 1.1rem; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
/* The bin next to Edit: button-sized, quiet until hovered, red when it is. */
.icon-btn.big { width: 2.5rem; height: 2.5rem; }
.icon-btn.danger { color: var(--muted); }
.icon-btn.danger:hover, .icon-btn.danger:focus-visible { color: var(--err); border-color: var(--err); background: var(--err-soft); }
.btn-icon { width: 1rem; height: 1rem; fill: currentColor; }
.lang-switch { font-size: 0.9rem; color: var(--muted); display: inline-flex; gap: 0.5rem; }
.gate-lang { text-align: center; margin: 1rem 0 0; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a.here { color: var(--accent); font-weight: 600; }
.lang-switch a:hover { color: var(--accent); }
:root[data-theme="dark"] .in-light { display: none; }
:root[data-theme="light"] .in-dark { display: none; }

/* --- shell: sidebar + content ------------------------------------------- */
/* The sidebar holds the "go to" group and the page's own actions. Held upright, a phone gets it
   as a bar along the bottom; turned sideways, and on any monitor, it is a column on the left. */

.shell { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; }
.content { flex: 1; min-width: 0; padding: 1rem 1rem 3rem; }
.content.narrow { max-width: 46rem; }

/* Links and buttons alike: every browser default a <button> brings (margin, appearance, its own
   font and line box) is set here, so the two kinds of item measure the same to the pixel. */
.nav-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; margin: 0;
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.25;
    padding: 0.55rem 0.75rem; border: 1px solid transparent; border-radius: var(--radius-s);
    background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; min-height: 0;
}
/* Every icon in the accent, whatever the item does; the label says what it is. */
.nav-item svg { width: 1.2rem; height: 1.2rem; fill: var(--accent); flex: none; display: block; }
.nav-item > span { display: block; line-height: 1.25; }
.nav-item:hover, .nav-item:focus-visible { background: var(--soft); filter: none; }
.nav-item.here { background: var(--accent-soft); color: var(--accent); }
.nav-item.danger { color: var(--err); }
.nav-item.danger:hover { background: var(--err-soft); }
.nav-group form { margin: 0; }
/* The screen lock: label and icon both go green while it holds, and back when it lets go. */
#wake .wake-on { display: none; }
#wake.on .wake-on { display: inline; }
#wake.on .wake-off { display: none; }
#wake.on, #wake.on:hover, #wake.on:focus { color: var(--ok); }
#wake.on svg { fill: var(--ok); }

@media (orientation: landscape) {
    .shell { gap: 1.5rem; padding: 0 1.25rem; }
    .content { padding: 1.5rem 0 3rem; }
    .sidemenu {
        width: 12.5rem; flex: none; position: sticky; top: 4.2rem;
        display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 0 0;
    }
    .nav-group {
        display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem;
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    }
    .nav-title {
        font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
        color: var(--muted); padding: 0.25rem 0.75rem 0.4rem;
    }
}

@media (orientation: portrait) {
    .content { padding-bottom: calc(var(--nav-h) + 1.5rem + env(safe-area-inset-bottom)); }
    /* One bar, one row of identical boxes. The groups are still there in the markup (the column
       in landscape needs them) but here they are plain flex rows with no edge of their own, so
       "go to" and the page's actions are told apart by nothing - exactly as asked. */
    .sidemenu {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        display: flex; align-items: flex-start; justify-content: center;
        background: var(--bar); border-top: 2px solid var(--line); box-shadow: var(--bar-shadow);
        padding: 0 0.25rem env(safe-area-inset-bottom);
        overflow-x: auto; overflow-y: hidden;
    }
    /* Groups, forms and items are all exactly one bar high and start at its top, so there is no
       height anywhere for an item to sit higher or lower than its neighbour. */
    .nav-group { display: flex; flex: 0 1 auto; align-items: flex-start; min-width: 0; height: var(--nav-h); }
    .nav-group form { display: flex; align-items: flex-start; margin: 0; height: var(--nav-h); }
    .nav-title { display: none; }
    /* Every item the same box: the same width, the same height, the icon in the same place, the
       label on the same line - whatever the element, the group or the word. */
    .nav-item {
        flex: 0 0 4.4rem; width: 4.4rem; height: var(--nav-h); min-height: 0; min-width: 0;
        flex-direction: column; justify-content: center; align-items: center; gap: 0;
        padding: 0 0.15rem; border: 0; border-radius: 0; margin: 0;
        font-size: 0.66rem; font-weight: 600; color: var(--muted); text-align: center;
    }
    .nav-item svg { width: 1.3rem; height: 1.3rem; margin: 0 0 0.25rem; }
    .nav-item > span {
        display: block; width: 100%; height: 0.9rem; line-height: 0.9rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* No hover or focus colour in the bar: a finger leaves the button focused, and a label that
       changes shade after a tap looks like a state the button does not have. */
    /* One colour for every label - the current page and the primary action included; in the bar
       the accent is the icons', and only theirs. */
    .nav-item:hover, .nav-item:focus, .nav-item:focus-visible { background: transparent; color: var(--muted); }
    .nav-item.here, .nav-item.danger { background: transparent; color: var(--muted); }
    .nav-item.danger:hover { background: transparent; }
    .sticky-actions { bottom: calc(var(--nav-h) + 0.5rem + env(safe-area-inset-bottom)); }
}

/* A hidden item is hidden, whatever display the rules above gave it. */
.nav-item[hidden] { display: none !important; }

/* --- panels, forms, buttons --------------------------------------------- */

.panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem; margin: 0 0 1rem; box-shadow: var(--shadow);
}
.panel.empty { text-align: center; padding: 2rem 1.25rem; }
.panel.empty p { color: var(--muted); max-width: 36rem; margin: 0.4rem auto 0.9rem; }
.panel.danger-zone { border-color: color-mix(in srgb, var(--err) 35%, var(--line)); }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; min-height: 2.5rem; }
.page-head h1 { margin-bottom: 0.1rem; }
.page-head > .meta, .page-head p.meta { margin: 0.2rem 0 0; }
.crumbs { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.35rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

label { display: block; font-size: 0.86rem; font-weight: 600; margin: 0.8rem 0 0.25rem; }
label:first-child { margin-top: 0; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"],
select, textarea {
    width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-s);
    font: inherit; font-size: 1rem; background: var(--field); color: var(--ink);
}
textarea { resize: vertical; line-height: 1.45; }
textarea.list-editor { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.92rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid label { margin-top: 0.8rem; }
@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

label.inline { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; font-size: 0.9rem; margin-top: 0.8rem; }
label.inline input { width: auto; margin-top: 0.25rem; }
label.check-big { padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-alt); }
label.check-big input { width: 1.2rem; height: 1.2rem; }

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.actions form { margin: 0; }
.sticky-actions { position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom)); background: var(--panel); padding: 0.6rem 0 0; }

button, .btn {
    font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 2.5rem; line-height: 1.2;
}
button.secondary, .btn.secondary { background: transparent; color: var(--accent); }
button.ghost, .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
button.danger, .btn.danger { background: transparent; border-color: var(--err); color: var(--err); }
button.tiny, .btn.tiny { padding: 0.3rem 0.7rem; font-size: 0.8rem; min-height: 2rem; }
button.wide, .btn.wide { width: 100%; justify-content: center; }
button:hover, .btn:hover { filter: brightness(0.95); }
button[disabled] { opacity: 0.6; cursor: wait; }

.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
.row-actions form { margin: 0; }
.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; flex: 1; min-width: 8rem; }
.inline-form label.inline { margin: 0; }

.notice { border-left: 4px solid var(--accent); padding: 0.65rem 0.9rem; background: var(--accent-soft); border-radius: var(--radius-s); margin-bottom: 1rem; font-size: 0.92rem; }
.notice.bad { border-color: var(--err); background: var(--err-soft); }
.notice.good { border-color: var(--ok); background: var(--ok-soft); }
.notice ul.plain li + li { margin-top: 0.2rem; }

.badge {
    display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--soft); color: var(--muted); vertical-align: middle;
}
.badge.admin { background: var(--accent-soft); color: var(--accent); }
.badge.draft { background: var(--warn-soft); color: var(--warn); }

/* --- gate pages (login, setup, error) ----------------------------------- */

.gate-page { display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.gate { width: 100%; max-width: 24rem; }
.gate-brand { text-align: center; margin-bottom: 1.25rem; }
.gate-brand svg { width: 3rem; height: 3rem; color: var(--accent); }
.gate-brand h1 { margin: 0.25rem 0 0; }
.gate .panel { padding: 1.4rem; }

/* --- the shelf ---------------------------------------------------------- */

.searchbar { display: flex; gap: 0.5rem; margin: 0 0 1.25rem; }
.searchbar input { flex: 1; }
.searchbar button { flex: none; }
.filter { margin: 0 0 1rem; }

/* Online or not: a dot in the top bar. Green while the server answers, red while the device's
   copy is being shown, pulsing while it is being checked. The title says it in words. */
.net {
    position: absolute; top: calc(0.2rem + env(safe-area-inset-top)); left: 0.2rem; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; width: 0.9rem; height: 0.9rem;
}
.net-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--muted); transition: background 0.2s ease; }
.net.online .net-dot { background: var(--ok); }
.net.offline .net-dot { background: var(--err); }
.net.checking .net-dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .net.checking .net-dot { animation: none; } }

.shelf { margin-bottom: 1.5rem; }
.shelf-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.6rem; }

/* A book on the shelf looks like a recipe under "recently changed": a small collage of its
   newest photos above, the name and the count below, in the same grid. */
.book-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.book-card {
    display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.12s ease;
}
.book-card:hover { transform: translateY(-2px); border-color: var(--accent); }

/* The cover: one photo fills it, two split it, three give the first the left half, four make a
   grid; the book's initial while there are none. Always the 4:3 of a recipe card's picture. */
.book-cover {
    display: grid; aspect-ratio: 4 / 3; gap: 2px; background: var(--line); overflow: hidden;
    grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; min-width: 0; }
.book-cover.n0, .book-cover.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.book-cover.n2 { grid-template-rows: 1fr; }
.book-cover.n3 img:first-child { grid-row: 1 / span 2; }
.book-blank {
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700;
    color: var(--accent); background: var(--accent-soft);
}
.book-body { padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.book-body strong { font-size: 0.95rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-body .meta { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-body .count { margin-top: 0.1rem; }

/* --- recipe cards ------------------------------------------------------- */

.recipe-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.recipe-grid.compact { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.recipe-card {
    display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.12s ease;
}
.recipe-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.recipe-card[hidden] { display: none; }
.recipe-thumb { display: block; aspect-ratio: 4 / 3; background: var(--soft); position: relative; }
.recipe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-blank {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 700; color: var(--accent); background: var(--accent-soft);
}
.recipe-card-text { padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.recipe-card-text strong { font-size: 0.95rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.recipe-card .badge { align-self: flex-start; margin-top: 0.2rem; }
.recipe-card.draft .recipe-thumb::after {
    content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,0.04) 10px 20px);
}

/* --- the recipe page ---------------------------------------------------- */

.recipe { max-width: 64rem; }
.recipe-hero { margin: 0 -1rem 1rem; }
.recipe-hero img { width: 100%; max-height: 42vh; min-height: 12rem; object-fit: cover; display: block; }
@media (min-width: 600px) {
    .recipe-hero { margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
}
.recipe-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.recipe-title h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 60ch; margin: 0.35rem 0 0.8rem; }

.facts { list-style: none; padding: 0; margin: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.facts li { display: flex; flex-direction: column; font-size: 0.95rem; font-weight: 600; }
.fact-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts a { text-decoration: none; }

.recipe-body { margin-top: 1.5rem; }
@media (min-width: 820px) {
    .recipe-body { display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 2rem; align-items: start; }
    .recipe-body .ingredients { position: sticky; top: 4.5rem; }
}
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.section-head h2 { margin: 0; }
.scaler { display: inline-flex; align-items: center; gap: 0.5rem; }
.scaler .icon-btn { width: 2rem; height: 2rem; font-size: 1.15rem; }
.scaler strong { font-size: 1.05rem; }

.ingredient-list { list-style: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ingredient-list li { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.ingredient-list li:last-child { border-bottom: 0; }
.ingredient-list li.group { background: var(--panel-alt); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding: 0.45rem 0.9rem; }
.ingredient-list .qty { font-weight: 700; color: var(--accent); }

.steps h2 { margin-bottom: 0; }
.tap-hint { margin: 0 0 0.6rem; }
.step-list { list-style: none; padding: 0; margin: 0; counter-reset: step; display: flex; flex-direction: column; gap: 0.6rem; }
.step-list li {
    position: relative; counter-increment: step; padding: 0.8rem 0.9rem 0.8rem 3.2rem; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); font-size: 1.02rem; cursor: pointer; user-select: none;
}
.step-list li::before {
    content: counter(step); position: absolute; left: 0.85rem; top: 0.75rem; width: 1.7rem; height: 1.7rem;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.85rem;
}
.step-list li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); background: var(--panel-alt); }
.step-list li.done::before { content: "\2713"; background: var(--ok-soft); color: var(--ok); }
.step-list li.group { counter-increment: none; padding: 0.3rem 0; background: transparent; border: 0; cursor: default; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-top: 0.4rem; }
.step-list li.group::before { display: none; }

.notes { margin-top: 1.75rem; background: var(--warn-soft); border-radius: var(--radius); padding: 1rem 1.1rem; }
.notes h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn); }
.recipe-foot { margin-top: 1.5rem; }
.more { margin-top: 0.75rem; }
.more summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.more-body { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding: 0.75rem 0; }
.more-body form { margin: 0; }

/* --- editor, import ----------------------------------------------------- */

.recipe-editor { padding: 1.1rem; }
.photo-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.photo-current { width: 6rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); }
input[type="file"] { font: inherit; font-size: 0.9rem; max-width: 100%; }
.parser-hints { list-style: none; padding: 0; margin: 0.4rem 0 0; min-height: 1.4rem; }

/* --- admin cards -------------------------------------------------------- */

.card-list .panel { padding: 0.9rem 1rem; }
.user-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.user-head strong { font-size: 1.05rem; }
.user-head .rename input { max-width: 14rem; }
.member-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.member-list li { display: inline-flex; align-items: center; gap: 0.2rem; background: var(--soft); border-radius: 999px; padding: 0.15rem 0.35rem 0.15rem 0.75rem; font-size: 0.88rem; }
.member-list li form { margin: 0; }
.member-list .ghost.tiny { border: 0; min-height: 0; padding: 0.15rem 0.45rem; color: var(--muted); font-weight: 500; }
.member-list .ghost.tiny:hover { color: var(--err); filter: none; }
.member-list li.meta { background: transparent; padding-left: 0; }

footer.site { display: none; }

@media print {
    header.site, .sidemenu, .more, .tap-hint, .scaler, .crumbs { display: none !important; }
    .content { padding: 0; }
    .step-list li { break-inside: avoid; }
}