/*
   Foodblog — adopted from the Claude Design "Foodblog" project.
   Warm cream paper, off-white cards, olive-green primary + tomato accents.
   Newsreader (serif headings), Hanken Grotesk (body), JetBrains Mono (eyebrow labels).
   Fonts are self-hosted (latin subset, variable weight) — see wwwroot/fonts.
*/

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/fonts/hanken-grotesk.woff2) format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/newsreader.woff2) format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/newsreader-italic.woff2) format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(/fonts/jetbrains-mono.woff2) format("woff2");
}

:root {
    color-scheme: light;

    /* Foodblog design tokens (light) */
    --bg: #f4eede;
    --surface: #fffefb;
    --inverse-bg: #2b2622;
    --inverse-fg: #cbbfab;
    --ink: #2b2622;
    --muted: #6f6557;
    --muted2: #8c8175;
    --excerpt: #5f564a;
    --faint: #9a8e76;
    --border: rgba(43, 38, 34, 0.1);
    --border-soft: rgba(43, 38, 34, 0.07);
    --border-input: rgba(43, 38, 34, 0.16);
    --border-tag: rgba(43, 38, 34, 0.14);
    --green: #5b7b53;
    --tomato: #c0533b;
    --on-green: #fffefb;
    --chip-hover: #efe7d4;
    --sel: #c9d8bd;
    --row-alt: #faf5e9;
    --field: #fffefb;
    --field-focus: #fff;
    --avatar-bg: #e7ddc7;
    --avatar-ink: #6f6557;
    --ph1: #ece3cf;
    --ph2: #e6dcc5;
    --ph-label-bg: rgba(255, 254, 251, 0.7);

    /* Fonts */
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 0 1px 2px rgba(43, 38, 34, 0.05);
    --shadow-hover: 0 12px 30px rgba(43, 38, 34, 0.12);

    /* Legacy aliases — keep older selectors working on the new palette. */
    --fg: var(--ink);
    --card: var(--surface);
    --line: var(--border);
    --danger: var(--tomato);
    --accent: var(--green);
    --accent-soft: var(--sel);
    --honey: #c98a3c;
    --warn: #c9971c;
    --bg-tint: var(--chip-hover);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #1b1712;
    --surface: #262018;
    --inverse-bg: #120f0b;
    --inverse-fg: #cbbfab;
    --ink: #f0e9da;
    --muted: #b3a890;
    --muted2: #9b9079;
    --excerpt: #c4b9a3;
    --faint: #8c8169;
    --border: rgba(240, 233, 218, 0.1);
    --border-soft: rgba(240, 233, 218, 0.07);
    --border-input: rgba(240, 233, 218, 0.18);
    --border-tag: rgba(240, 233, 218, 0.14);
    --green: #84a878;
    --tomato: #dd7257;
    --warn: #e3b341;
    --on-green: #15120f;
    --chip-hover: #322c22;
    --sel: #3c4d33;
    --row-alt: #2b241b;
    --field: #1f1a14;
    --field-focus: #241e17;
    --avatar-bg: #3a342a;
    --avatar-ink: #cbbfab;
    --ph1: #2f2920;
    --ph2: #2a241c;
    --ph-label-bg: rgba(18, 15, 11, 0.6);
    --honey: #d8a458;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    line-height: 1.65;
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease, color 0.25s ease;
}

::selection { background: var(--sel); color: var(--ink); }

/* ---- Chrome: utility bar, masthead, footer ------------------------------ */

.utility-bar {
    background: var(--inverse-bg);
    color: var(--inverse-fg);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
}

.utility-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 7px clamp(1rem, 4vw, 28px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.utility-meta { display: flex; gap: 14px; }
.utility-meta .dot { color: #8f8470; }

.masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: background .25s ease;
}

.masthead-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px clamp(1rem, 4vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; text-decoration: none; color: inherit; }

.brand-banner { display: block; height: auto; width: auto; max-width: min(60vw, 320px); }

.mast-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.mast-nav a {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}

.mast-nav a:hover { background: var(--chip-hover); color: var(--ink); }

.mast-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.mast-actions a { color: var(--muted); text-decoration: none; }
.mast-actions a:hover { color: var(--tomato); }

.mast-actions .theme-toggle {
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-input);
    background: var(--bg);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mast-actions .theme-toggle:hover { filter: none; border-color: var(--green); color: var(--green); }

.site-footer { background: var(--inverse-bg); color: var(--inverse-fg); margin-top: 4rem; }

.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px clamp(1rem, 4vw, 28px) 26px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
}

.footer-brand { font-family: var(--serif); font-size: 24px; font-weight: 600; color: #f4eede; margin-bottom: 12px; }
.footer-blurb { font-size: 13.5px; line-height: 1.6; color: var(--faint); margin: 0; max-width: 320px; }
.footer-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: #8f8470; margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-links a { color: var(--inverse-fg); text-decoration: none; }
.footer-links a:hover { color: #f4eede; }
.footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.footer-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px clamp(1rem, 4vw, 28px);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    color: #8f8470;
}

@media (max-width: 640px) {
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Layout -------------------------------------------------------------- */

main {
    width: min(920px, calc(100vw - 2rem));
    margin: 2.5rem auto 5rem;
}

/* ---- Typography ---------------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--ink);
}

h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 1.2rem; }
h2 { font-size: 1.45rem; margin: 0 0 .4rem; }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { color: var(--green); }
h3 { font-size: 1.2rem; margin: 0 0 .5rem; }

p { margin: .75rem 0; }

a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

a:hover { color: var(--tomato); }

/* Mono eyebrow label — the design's section/field labels. */
small, .eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
    margin-bottom: .6rem;
}

/* Breadcrumb trail — the design's mono eyebrow row above page titles. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted2);
    margin: 0 0 14px;
}

.breadcrumb a { color: var(--muted2); text-decoration: none; transition: color .15s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .crumb-current { color: var(--tomato); }
.breadcrumb .crumb-sep { color: var(--muted2); opacity: .55; }

/* ---- Cards: articles, forms, errors ------------------------------------- */

article, form.card, .card, .errors, form:not(.search-form):not(.lang-form):not(.theme-form):not(.inline-form):not(.recipe-form):not(.ingredient-form):not([style]) {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.7rem;
    margin: 1.25rem 0;
    box-shadow: var(--shadow);
    transition: background 0.25s ease, transform .18s ease, box-shadow .18s ease;
}

article { position: relative; overflow: hidden; }

article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.post-text { white-space: normal; }
.post-text p:first-child { margin-top: 0; }

/* A card section with a mono label + divider rule, per the design. */
.card-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.card-section-head h2, .card-section-head h3 { margin: 0; }
.card-section-head .rule { flex: 1; height: 1px; background: var(--border); }
.card-section-head .count { font-family: var(--mono); font-size: 11px; color: var(--muted2); }

/* ---- Images -------------------------------------------------------------- */

.cover-image {
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--radius);
    margin: .6rem 0 1.2rem;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}

.image-card { display: grid; gap: .4rem; justify-items: center; text-align: center; }

.image-card img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* Focal-point picker: clicking the framed image sets the crop centre (focal-point.js). */
.image-card .focal-form { width: 100%; margin: 0; }
.focal-pick { position: relative; display: block; cursor: crosshair; }
.focal-pick img { display: block; }
.focal-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.image-card .embed-snippet {
    font-family: var(--mono);
    font-size: .72rem;
    padding: .25rem .4rem;
    border-radius: var(--radius-sm);
    background: var(--row-alt);
}

.post-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: .6rem 0;
}

/* ---- Recipe image slider (CSS only) ------------------------------------- */

.slider { position: relative; margin: 1rem 0 1.5rem; }

/* Crossfade slideshow: slides are stacked and faded in turn by a generated keyframe animation
   (see RecipeViews.Slider). A single image uses the static slide and keeps the box height. */
.slider-stack {
    position: relative;
    height: 26rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.slider-stack .slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
/* height:100% is required so the lone static slide fills the fixed-height box; without it the img's
   percentage height collapses to auto and object-fit/object-position (the focal crop) do nothing. */
.slider-stack .slide.is-static { position: relative; opacity: 1; height: 100%; }
.slider-stack .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The per-image radios driving manual selection are visually hidden but stay keyboard-reachable. */
.slider-pick {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    /* Honour reduced-motion: stop the rotation and reveal the first image. */
    .slider-fade .slide { animation: none !important; opacity: 0; }
    .slider-fade .slide:first-child { opacity: 1; }
    .slider-fade .slider-dots label { animation: none !important; }
}

/* Synced progress dots overlaid on the image, bottom-right (per the design); also clickable to
   take over from the autoplay. */
.slider-dots { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 7px; }

.slider-dots label {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ph-label-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

/* No-image placeholder: diagonal stripes + a mono label, matching the design. */
.recipe-image-placeholder {
    position: relative;
    height: 26rem;
    margin: 1rem 0 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-image: repeating-linear-gradient(135deg, var(--ph1) 0 16px, var(--ph2) 16px 32px);
}

.recipe-image-label {
    position: absolute;
    left: 18px;
    bottom: 16px;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    background: var(--ph-label-bg);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--faint);
}

/* Existing-image editor (recipe form) */
.image-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-edit-item { display: grid; gap: .4rem; justify-items: start; }

.image-edit-thumb {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.image-edit-item label {
    margin: 0;
    font-weight: 500;
    font-size: .85rem;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: .35rem;
}

.image-edit-item label input { width: auto; }

/* ---- Blog index: four rotating card designs ----------------------------- */

.post-card { padding: 0; overflow: hidden; }
.post-card .card-body { padding: 1.5rem 1.7rem; }
.post-card .card-body h2 { margin-top: 0; }
.post-card .card-body p { margin-bottom: 0; }

.post-card .card-media { display: block; overflow: hidden; background: var(--chip-hover); }

.post-card .card-media img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.post-card:hover .card-media img { transform: scale(1.04); }

.design-1 .card-media img { height: 16rem; }
.design-1 .card-media { border-bottom: 3px solid var(--green); }

.design-2, .design-3 { display: grid; gap: 0; align-items: stretch; }
.design-2 .card-media img, .design-3 .card-media img { height: 100%; min-height: 14rem; }
.design-2 .card-body, .design-3 .card-body { align-self: center; }

.design-3 .card-body h2 { border-left: .3rem solid var(--tomato); padding-left: .7rem; }

@media (min-width: 720px) {
    .design-2 { grid-template-columns: 42% 1fr; }
    .design-3 { grid-template-columns: 1fr 42%; }
    .design-3 .card-media { order: 2; }
}

.design-4 { position: relative; display: grid; min-height: 19rem; }
.design-4 .card-media { position: absolute; inset: 0; }
.design-4 .card-media img { height: 100%; }

.design-4 .card-body {
    position: relative;
    align-self: end;
    padding-top: 4.5rem;
    color: #fff;
    background: linear-gradient(0deg, rgba(20, 12, 6, .85) 0%, rgba(20, 12, 6, .55) 55%, rgba(20, 12, 6, 0) 100%);
}

.design-4 .card-body a { color: #fff; }
.design-4 .card-body small { color: rgba(255, 255, 255, .82); }

.post-card.no-cover { display: block; min-height: 0; }

.design-4.no-cover .card-body {
    color: var(--ink);
    background: var(--row-alt);
    padding-top: 1.5rem;
}

.design-4.no-cover .card-body a { color: var(--green); }
.design-4.no-cover .card-body small { color: var(--muted2); }

/* ---- Forms --------------------------------------------------------------- */

label {
    display: grid;
    gap: .5rem;
    margin: 1.1rem 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

input, textarea, select {
    width: 100%;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--field);
    transition: border-color .15s ease, background .15s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--green);
    background: var(--field-focus);
}

textarea { resize: vertical; }

button, .btn {
    border: 0;
    border-radius: var(--radius-sm);
    padding: 13px 24px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: var(--on-green);
    background: var(--green);
    transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

button:hover, .btn:hover { filter: brightness(1.07); }

/* Outline / dashed-add / destructive button variants. */
.btn-secondary {
    background: none;
    color: var(--muted);
    border: 1px solid var(--border-input);
}

.btn-secondary:hover { filter: none; border-color: var(--tomato); color: var(--tomato); }

.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    color: var(--green);
    border: 1px dashed var(--border-tag);
    font-weight: 600;
}

.btn-add:hover { filter: none; border-color: var(--green); background: var(--row-alt); }

/* ---- Recipe ingredient editor ------------------------------------------- */

/* Column header above the ingredient rows; shares the row's grid template. */
.ingredient-head {
    display: grid;
    padding: 0 2px 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

.ingredient-row {
    display: grid;
    align-items: start;
    margin: .6rem 0;
}

.ingredient-head, .ingredient-row {
    grid-template-columns: 6.5rem 9rem minmax(0, 1fr) 44px;
    gap: .7rem;
}

.ingredient-row input, .ingredient-row select { margin: 0; }

.ingredient-combobox { position: relative; min-width: 0; }
.ingredient-name-input { width: 100%; }

@media (max-width: 560px) {
    .ingredient-head { display: none; }
    .ingredient-row { grid-template-columns: 5rem 1fr 44px; }
    .ingredient-row .ingredient-combobox { grid-column: 1 / -1; }
}

.ingredient-matches {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin-top: .25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.ingredient-matches:empty { display: none; }

.ingredient-match {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
    padding: .55rem .8rem;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    background: transparent;
}

.ingredient-match:hover { filter: none; background: var(--row-alt); }

.ingredient-create-hint {
    padding: .55rem .8rem;
    font-size: .9rem;
    color: var(--muted);
}

/* ---- Public ingredient pages ------------------------------------------- */

.ingredient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 1.25rem 0;
}

.ingredient-tile {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}

.ingredient-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--green);
    color: var(--green);
}

.ingredient-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ingredient-detail-head h1 { margin: 0; }

.ingredient-detail-media {
    margin: 1.25rem 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.ingredient-detail-media img { display: block; width: 100%; height: auto; }

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem 2rem;
}

.nutrition-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}

.nutrition-label { color: var(--muted); }

.nutrition-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Compact icon remove button (tomato outline → fill on hover), used by ingredient + step rows. */
.icon-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    color: var(--tomato);
    background: var(--field);
    border: 1px solid var(--border-input);
}

.icon-remove:hover {
    filter: none;
    background: var(--tomato);
    color: var(--on-green);
    border-color: var(--tomato);
}

/* ---- Units admin: inline-editable rows ---------------------------------- */

.unit-editor .card-section-head { margin-bottom: .4rem; }

.unit-head {
    display: grid;
    padding: 0 2px 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

.unit-row {
    display: grid;
    align-items: center;
    margin: .45rem 0;
}

.unit-head, .unit-row {
    grid-template-columns: minmax(0, 1.5fr) 7rem 9rem 6.5rem 90px;
    gap: .7rem;
}

.unit-row input, .unit-row select { margin: 0; }
.unit-cell { min-width: 0; overflow-wrap: anywhere; }
.unit-cell.mono { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.unit-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }

/* Square icon buttons shared by the unit rows (edit/save green, cancel muted). */
.icon-btn, .icon-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--field);
    border: 1px solid var(--border-input);
}

.unit-actions .icon-remove { width: 40px; }

.icon-btn { color: var(--green); }
.icon-btn:hover { filter: none; background: var(--green); color: var(--on-green); border-color: var(--green); }

.icon-cancel { color: var(--muted); }
.icon-cancel:hover { filter: none; background: var(--row-alt); color: var(--ink); border-color: var(--border-input); }

.unit-error { margin-bottom: .5rem; }
.unit-error:empty { display: none; }
.unit-error .errors { margin: 0; }

@media (max-width: 640px) {
    .unit-head { display: none; }
    .unit-row { grid-template-columns: 1fr 1fr; gap: .45rem .7rem; }
    .unit-row .unit-actions { grid-column: 1 / -1; }
}

/* Roles admin: reuses the unit-editor row styling with role-specific column counts (list = name +
   rule count; detail = action + resource), each with a trailing actions column. */
.role-editor .unit-head, .role-editor .unit-row { grid-template-columns: minmax(0, 1.6fr) 7rem 90px; }
.rule-editor .unit-head, .rule-editor .unit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px; }
.rule-editor .rule-add-row select { margin: 0; }

@media (max-width: 640px) {
    .role-editor .unit-head, .rule-editor .unit-head { display: none; }
    .role-editor .unit-row, .rule-editor .unit-row { grid-template-columns: 1fr 1fr; }
    .role-editor .unit-row .unit-actions, .rule-editor .unit-row .unit-actions { grid-column: 1 / -1; }
}

/* Ingredient overview — read-only rows in the unit-editor card style; editing happens on its own
   page. Incomplete rows get a yellow warning badge next to the name. */
.ingredient-editor .card-section-head { margin-bottom: .4rem; }

/* Scoped to .ingredient-editor so these read-only overview rows don't override the recipe form's
   own .ingredient-row layout (which has a fourth column for the remove button). */
.ingredient-editor .ingredient-head {
    display: grid;
    padding: 0 2px 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

.ingredient-editor .ingredient-row {
    display: grid;
    align-items: center;
    margin: .45rem 0;
}

.ingredient-editor .ingredient-head, .ingredient-editor .ingredient-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 90px;
    gap: .7rem;
}

.ingredient-cell { min-width: 0; overflow-wrap: anywhere; }

.warn-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: .4rem;
    color: var(--warn, #c9971c);
}

.admin-empty { color: var(--muted2); margin: .6rem 0; }

/* Nutrition fields on the dedicated ingredient page: a 4-up grid of stacked label + unit-input,
   like the recipe-edit basics row. */
.ingredient-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 720px) { .ingredient-edit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .ingredient-edit-grid { grid-template-columns: 1fr; } }

.ingredient-edit-grid label {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
}

/* Push the input to the bottom of its cell so a label that wraps to two lines never knocks the
   boxes in a row off the same baseline. */
.ingredient-edit-grid label > :last-child { margin-top: auto; }
.ingredient-edit-grid input { margin: 0; }

/* Number input with a unit shown inside the box on the right (borderless input + addon). */
.input-unit {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-input);
    background: var(--field);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}

.input-unit:focus-within { border-color: var(--green); background: var(--field-focus); }

.input-unit input {
    border: none;
    border-radius: 0;
    background: transparent;
    min-width: 0;
}

.input-unit input:focus { outline: none; background: transparent; }

.input-unit .unit-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    flex: none;
    background: var(--bg);
    color: var(--muted2);
    font-family: var(--mono);
    font-size: 11.5px;
    white-space: nowrap;
    border-left: 1px solid var(--border-input);
}

@media (max-width: 640px) {
    .ingredient-editor .ingredient-head { display: none; }
    .ingredient-editor .ingredient-row { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---- Admin dashboard: section cards ------------------------------------- */

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.1rem;
    margin: 1.25rem 0;
}

.admin-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    font-weight: 400;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--green);
    color: inherit;
}

.admin-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--chip-hover);
    color: var(--green);
}

.admin-card-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.admin-card-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.admin-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---- Admin users: roster styled like the units editor ------------------- */

.admin-user-head {
    display: grid;
    padding: 0 2px 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

.admin-user-row {
    display: grid;
    align-items: center;
    margin: .45rem 0;
    padding: .35rem 2px;
    border-top: 1px solid var(--border);
}

.admin-user-head, .admin-user-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) 56px;
    gap: .7rem;
}

.admin-user-cell { min-width: 0; overflow-wrap: anywhere; }
.admin-user-cell.mono { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.admin-user-cell.muted { color: var(--muted2); font-style: italic; }
.admin-user-empty { color: var(--muted); }

@media (max-width: 640px) {
    .admin-user-head { display: none; }
    .admin-user-row { grid-template-columns: 1fr 1fr; gap: .3rem .7rem; }
    .admin-user-row .unit-actions { grid-column: 1 / -1; }
}

/* ---- Recipe form: card sections, step rows, save bar -------------------- */

/* Form used purely as a layout wrapper around card sections — no card box of its own (the broad
   form rule above excludes these classes). */
.recipe-form, .ingredient-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field-grid-4 { grid-template-columns: repeat(4, 1fr); }

.field-grid label { margin: 0; }

@media (max-width: 760px) { .field-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .field-grid, .field-grid-4 { grid-template-columns: 1fr; } }

.step-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    gap: 14px;
    align-items: start;
    margin: .7rem 0;
}

.step-row label { margin: 0; }
.step-row textarea { min-height: 84px; }

.step-badge {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tomato);
    color: var(--on-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    margin-top: 4px;
}

.btn-add svg { width: 15px; height: 15px; }

.save-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--bg);
    border-top: 1px solid var(--border);
    /* Bleed the divider line past the cards (the buttons stay aligned via matching padding). The
       -1rem bleed equals the page gutter, so it never overflows on narrow screens; desktop gets the
       design's wider gutter. */
    margin-inline: -1rem;
    padding: 18px 1rem;
}

@media (min-width: 980px) {
    .save-bar { margin-inline: -1.75rem; padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* ---- Recipe detail ------------------------------------------------------ */

/* Form wrapping a single inline button (e.g. a delete trash icon) — no card box, sits inline in
   an actions row. */
.inline-form { display: inline-flex; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

.recipe-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted2); font-size: 14px; margin: 0 0 1rem; }
.recipe-meta .dot { color: var(--border-tag); }

/* Edit/delete pushed to the end of the meta row as round icon buttons. */
.recipe-meta-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.icon-round {
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-input);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.icon-round:hover { border-color: var(--green); color: var(--green); }
.icon-round-danger:hover { border-color: var(--tomato); color: var(--tomato); }

/* Recipe detail title row: name left, PDF action pinned top-right — even when the title wraps to
   several lines (the title shrinks and wraps; the button never drops to its own line). */
.recipe-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 1.2rem; }
.recipe-head-row h1 { margin: 0; flex: 1 1 auto; min-width: 0; }
.recipe-head-row .pdf-split { flex: none; }

/* PDF split button: tomato "print" action (left) + arrow that reveals the design dropdown (right),
   matching the recipe design's Print button. Pure-CSS hover/focus dropdown like the other menus. */
.pdf-split { display: inline-flex; align-items: stretch; height: 34px; position: relative; }

.pdf-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px 0 14px;
    background: var(--tomato);
    color: #fffefb;
    border-radius: 4px 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pdf-main:hover { filter: brightness(1.07); color: #fffefb; }

.pdf-menu { position: relative; display: inline-flex; }

/* The arrow is a <summary>: drop the native disclosure triangle and toggle on click. */
.pdf-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    padding: 0;
    background: var(--tomato);
    color: #fffefb;
    border-left: 1px solid rgba(255, 254, 251, 0.28);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    list-style: none;
}

.pdf-arrow::-webkit-details-marker { display: none; }
.pdf-arrow::marker { content: ""; }
.pdf-arrow:hover { filter: brightness(1.07); }

.pdf-dropdown { position: absolute; top: 100%; right: 0; padding-top: 8px; display: none; z-index: 40; }

.pdf-menu[open] .pdf-dropdown { display: block; }

.pdf-panel {
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    padding: .3rem 0;
}

.pdf-panel a { display: block; padding: .5rem .9rem; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.pdf-panel a:hover { background: var(--row-alt); color: var(--green); }

/* Serving-size selector: pill trigger + hover/focus dropdown of preset links. */
.portions-menu { position: relative; display: inline-flex; }

.portions-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-input);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13.5px;
    transition: border-color .15s ease, color .15s ease;
}

.portions-trigger:hover { border-color: var(--green); color: var(--green); }

.portions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 8px;
    display: none;
    z-index: 20;
}

.portions-menu:hover .portions-dropdown,
.portions-menu:focus-within .portions-dropdown { display: block; }

.portions-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    min-width: 132px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
}

.portions-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
}

.portions-option:hover { background: var(--chip-hover); }
.portions-option.is-active { background: var(--green); color: var(--on-green); }

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    margin-right: 8px;
}

/* Uploaded avatar: the image fills and is clipped to the existing circle. */
.avatar.avatar-img { padding: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.avatar-lg { width: 72px; height: 72px; font-size: 28px; margin-right: 0; }

/* Settings preview block for the profile picture. */
.avatar-settings { margin: 4px 0 12px; }

.difficulty-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 1.4rem; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    background: var(--green);
    color: var(--on-green);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--mono);
    font-size: 11.5px;
    text-decoration: none;
    transition: opacity .15s ease;
}

a.tag-chip:hover { opacity: .85; }

/* Full-width section title above the ingredients/steps grid: serif title, rule, step count. */
.recipe-section-head { display: flex; align-items: center; gap: 16px; margin-top: 2.5rem; }
.recipe-section-head h2 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 600; }
.recipe-section-head .rule { flex: 1; height: 1px; background: var(--border); }
.recipe-section-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }

.recipe-body {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 760px) { .recipe-body { grid-template-columns: 1fr; } }

.recipe-ingredients { position: sticky; top: 84px; padding: 0; overflow: hidden; }

.recipe-ingredients-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.recipe-ingredients-head h4 {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tomato);
}

.recipe-ingredients-head span { font-size: 12px; color: var(--muted2); }

.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ingredient-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--border-soft); }
.ingredient-list li:first-child { border-top: 0; }
.ingredient-list li:nth-child(even) { background: var(--row-alt); }
.ingredient-list .amount { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 64px; flex: none; }
.ingredient-list .name { font-size: 14px; color: var(--ink); }
.ingredient-list .ingredient-kcal { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }

.recipe-steps { display: flex; flex-direction: column; gap: 14px; }

.step-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
}

.step-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--excerpt); }

.difficulty-pill.diff-hard { border-color: var(--tomato); color: var(--tomato); }
.difficulty-pill.diff-medium { border-color: #b88a2e; color: #b88a2e; }

/* Hero stat strip: calories / preparation / cooking */
.recipe-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 1.5rem 0;
}

@media (max-width: 620px) { .recipe-stats { grid-template-columns: 1fr; } }

.recipe-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}

.recipe-stat-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.recipe-stat-text { display: flex; flex-direction: column; gap: 3px; }

.recipe-stat-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted2);
}

.recipe-stat-value { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1; }

/* Number input with a trailing unit suffix (min, kcal) */
.input-suffix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-input);
    background: var(--field);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.input-suffix input { border: none; border-radius: 0; background: transparent; flex: 1; min-width: 0; }
.input-suffix input:focus { background: transparent; }

.input-suffix-label {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bg);
    color: var(--muted2);
    font-size: 12.5px;
    border-left: 1px solid var(--border-input);
}

/* ---- Recipe list (card grid) -------------------------------------------- */

.page-head { margin-bottom: 1.2rem; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-row h1 { margin: 0; }
.page-head-blurb { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 520px; margin: .7rem 0 0; }
.eyebrow-accent { color: var(--tomato); }

/* ---- Users directory (community) ---------------------------------------- */

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 1.5rem;
}

.user-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.user-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.user-avatar {
    position: relative;
    height: 180px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg);
}

.user-avatar .initial { font-family: var(--serif); font-size: 54px; font-weight: 600; line-height: 1; color: var(--avatar-ink); }

.user-avatar .user-avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.user-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--tomato);
    color: #fffefb;
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .08em;
}

.user-card-body { padding: 16px 18px 0; }
.user-card-body h3 { font-size: 1.25rem; margin: 0 0 4px; }
.user-joined { font-size: 12.5px; color: var(--muted2); margin: 0 0 16px; }

.user-card-foot {
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--muted2);
}

.user-card-foot.is-author { color: var(--green); }
.user-recipes { font-weight: 600; }

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 1.5rem;
}

.recipe-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.recipe-card-media {
    position: relative;
    height: 150px;
    flex: none;
    background-image: repeating-linear-gradient(135deg, var(--chip-hover) 0 12px, var(--row-alt) 12px 24px);
}

.recipe-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recipe-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.recipe-card-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.recipe-card-body h3 { font-size: 1.15rem; margin: 0 0 12px; }

.recipe-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}

.recipe-card-author { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted2); }
.recipe-card-author .avatar { width: 20px; height: 20px; font-size: 10px; margin-right: 0; }

/* ---- Pagination --------------------------------------------------------- */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.page-link:hover { border-color: var(--tomato); color: var(--tomato); }

.page-link.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fffefb;
    cursor: default;
}

.page-link.is-disabled {
    color: var(--muted2);
    opacity: .5;
    cursor: default;
}

/* ---- Blog feed (home) --------------------------------------------------- */

.blog-media {
    position: relative;
    background-image: repeating-linear-gradient(135deg, var(--chip-hover) 0 14px, var(--row-alt) 14px 28px);
}

.blog-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    border-radius: 3px;
    padding: 7px 10px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    color: #fffefb;
    background: var(--tomato);
}

.date-badge .day { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.date-badge .month { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; margin-top: 3px; }

.blog-featured, .blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease;
}

.blog-featured:hover, .blog-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.blog-featured { margin-bottom: 28px; }
.blog-featured .blog-media { height: 300px; }
.blog-featured-body { padding: 26px 28px; }
.blog-featured-body h2 { font-size: 1.9rem; margin: 0 0 12px; }

.blog-excerpt { font-size: 15px; line-height: 1.65; color: var(--excerpt); margin: 0 0 18px; }

/* Lead-in teaser on the article detail page: italic and lightly emphasised so it reads apart
   from the body text. */
.blog-teaser { font-style: italic; font-size: 1.1rem; line-height: 1.7; color: var(--muted); margin: 0 0 1.2rem; }

.blog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--border-soft);
    padding-top: 16px;
    font-size: 13px;
    color: var(--muted2);
}

.blog-author { display: inline-flex; align-items: center; gap: 8px; }
.blog-author .avatar { width: 26px; height: 26px; margin-right: 0; }
.blog-readmore { color: var(--tomato); font-weight: 600; font-size: 13.5px; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

.blog-card .blog-media { height: 160px; flex: none; }
.blog-card .date-badge { background: var(--green); color: var(--on-green); box-shadow: none; padding: 6px 9px; }
.blog-card .date-badge .day { font-size: 17px; }
.blog-card .date-badge .month { font-size: 8.5px; }
.blog-card-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card-body h3 { font-size: 1.25rem; margin: 0 0 10px; }
.blog-card .blog-excerpt { font-size: 14px; color: var(--muted); flex: 1; margin-bottom: 16px; }

/* Two-column blog layout: feed + sidebar. */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 860px) { .blog-layout { grid-template-columns: 1fr; } }

.blog-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 84px; }

.sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 20px 18px;
    box-shadow: var(--shadow);
}

.sidebar-head {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tomato);
    margin: 0 0 14px;
}

.sidebar-recipes { list-style: none; margin: 0; padding: 0; }
.sidebar-recipes li { border-top: 1px solid var(--border-soft); }
.sidebar-recipes li:first-child { border-top: 0; }

.sidebar-recipes a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.35;
}

.sidebar-recipes a:hover { color: var(--green); }
.sidebar-recipes .num { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }

.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.sidebar-tag {
    font-family: var(--mono);
    font-size: 11.5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-tag);
    background: var(--bg);
    color: var(--muted);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.sidebar-tag:hover { border-color: var(--green); color: var(--green); }

/* ---- Inline nav forms (search / language / theme) ----------------------- */

.theme-form {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

/* Search: a rounded field with an embedded icon button, per the design tokens. */
.search-form {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px 4px 2px 14px;
    background: var(--field);
    border: 1px solid var(--border-input);
    border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.search-form:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--sel); }

.search-form input {
    width: 9rem;
    max-width: 38vw;
    margin: 0;
    padding: 6px 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
}

.search-form input::placeholder { color: var(--muted2); }

.search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.search-form button:hover { background: var(--chip-hover); color: var(--green); }

/* ---- Nav quicksearch dropdown ------------------------------------------- */

.search-box { position: relative; }

.quicksearch-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    margin-top: 8px;
}

.quicksearch-results:empty { display: none; }

.quicksearch-panel {
    min-width: 18rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    padding: .35rem 0;
}

.quicksearch-cat {
    padding: .4rem .9rem .2rem;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted2);
}

.quicksearch-group + .quicksearch-group { border-top: 1px solid var(--border); }

.quicksearch-item {
    display: block;
    padding: .5rem .9rem;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
}

a.quicksearch-item:hover { background: var(--row-alt); color: var(--green); }

.quicksearch-item.is-static { color: var(--muted); cursor: default; }

.quicksearch-empty {
    padding: .6rem .9rem;
    font-size: 14px;
    color: var(--muted);
}

/* ---- Masthead user menu: circular trigger + hover/focus dropdown -------- */

.user-menu { position: relative; display: inline-flex; }

.mast-actions .user-trigger {
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-input);
    background: var(--bg);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.mast-actions .user-trigger.is-auth { background: var(--avatar-bg); color: var(--avatar-ink); border-color: transparent; }
.mast-actions .user-trigger:hover { border-color: var(--green); color: var(--green); }
.mast-actions .user-trigger .user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* The dropdown's top padding bridges the gap to the trigger so hover doesn't drop. */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 8px;
    display: none;
    z-index: 20;
}

.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown { display: block; }

.user-panel {
    min-width: 200px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
}

.user-panel-name {
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
    color: var(--ink);
}

.user-panel a,
.user-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.user-panel a:hover,
.user-panel button:hover { background: var(--chip-hover); color: var(--ink); }

/* Language dropdown: the form is just a transparent wrapper for the menu buttons. */
.user-panel .lang-form { margin: 0; display: block; }
.user-panel button.is-current { color: var(--green); font-weight: 700; }

/* ---- Errors -------------------------------------------------------------- */

.errors {
    color: var(--tomato);
    border-color: color-mix(in srgb, var(--tomato) 40%, var(--border));
    background: color-mix(in srgb, var(--tomato) 8%, var(--surface));
}

.errors ul { margin: .25rem 0; padding-left: 1.2rem; }

ul { line-height: 1.7; }

/* In-flight feedback for htmx buttons: swap the label for a spinner while the request runs
   (htmx adds .htmx-request to the requesting element). The button is also disabled via
   hx-disabled-elt, so it greys out and can't be double-submitted. */
.btn-busy { display: none; align-items: center; gap: .5rem; }
.htmx-request .btn-label { display: none; }
.htmx-request .btn-busy { display: inline-flex; }

.spinner {
    width: .9em;
    height: .9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Admin dashboard overview: a strip of count tiles and a "needs attention" notice above the cards. */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}

.stat-tile:hover { border-color: var(--accent, var(--tomato)); }
.stat-num { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--muted); }

.attention {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .6rem .9rem;
    border: 1px solid color-mix(in srgb, var(--warn, #c9971c) 40%, var(--border));
    background: color-mix(in srgb, var(--warn, #c9971c) 10%, var(--surface));
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.attention:hover { border-color: var(--warn, #c9971c); }