/* Simmerbee. Light by default, dark by system setting or the toggle (data-theme). */
:root {
  --bg: #fbf6ee; --surface: #fffdf9; --surface-2: #f4eadc; --ink: #2b2118; --muted: #6b5a4a; --line: #e6d8c5;
  --accent: #a94a14; --accent-hover: #8a3a0f; --on-accent: #fff; --link: #963f0e; --honey: #e9a43b; --honey-soft: #fbe7c2;
  --herb: #3f6f42; --herb-soft: #e1eedb; --warn-soft: #fdf0d5; --bad: #a3261b; --bad-soft: #fbe1dc; --star: #c77c00; --star-empty: #93806b;
  --focus: #a94a14; --field-line: #93806b;
  --shadow: 0 1px 2px rgba(60, 35, 10, .06), 0 6px 18px rgba(60, 35, 10, .08);
  --radius: 16px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1c1f; --surface: #242528; --surface-2: #2d2e32; --ink: #f3eadf; --muted: #c4b8aa; --line: #3f4146;
    --accent: #f58a45; --accent-hover: #f9a35e; --on-accent: #1b1c1f; --link: #f7aa6a; --honey: #f0b553; --honey-soft: #3d3020;
    --herb: #9ccf98; --herb-soft: #24331f; --warn-soft: #3a2f1a; --bad: #ff9c8f; --bad-soft: #3d201b; --star: #f0b553; --star-empty: #8a7b6c; --focus: #f0b553; --field-line: #8f7f6f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1c1f; --surface: #242528; --surface-2: #2d2e32; --ink: #f3eadf; --muted: #c4b8aa; --line: #3f4146;
  --accent: #f58a45; --accent-hover: #f9a35e; --on-accent: #1b1c1f; --link: #f7aa6a; --honey: #f0b553; --honey-soft: #3d3020;
  --herb: #9ccf98; --herb-soft: #24331f; --warn-soft: #3a2f1a; --bad: #ff9c8f; --bad-soft: #3d201b; --star: #f0b553; --star-empty: #8a7b6c; --focus: #f0b553; --field-line: #8f7f6f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, .display { font-family: var(--serif); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
h3 { font-size: 1.2rem; }
.display { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--accent); margin: 0 0 .3em; }
.eyebrow a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 560px; }
.section { padding-block: 28px; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { left: -10000px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.js .js-hide { display: none; }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }

/* The mark (src/logo.js; BRAND.logo picks the concept) */
.logo-mark { width: 38px; height: 38px; flex: none; display: block; }

/* Buttons and chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: .55em 1.2em; border-radius: 999px; border: 2px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--link); }
.btn.ghost:hover { background: var(--surface-2); color: var(--link); }
.btn.small { min-height: 36px; padding: .35em .9em; font-size: .9rem; }
.btn.big { min-height: 54px; padding: .7em 1.6em; font-size: 1.1rem; }
.btn.full { width: 100%; }
.btn.warn { background: var(--honey); border-color: var(--honey); color: #2b2118; }
.btn.bad { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.btn:disabled { opacity: .45; cursor: default; }
.icon-btn { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--surface-2); }
.link-btn { background: none; border: 0; padding: 6px 2px; color: var(--link); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 32px; }
.link-btn[aria-pressed="true"] { font-weight: 700; }
.chip { display: inline-flex; align-items: center; padding: .2em .75em; border-radius: 999px; background: var(--honey-soft); color: var(--ink); font-size: .85rem; text-decoration: none; border: 1px solid transparent; }
.chip.soft { background: var(--surface-2); color: var(--muted); }
.chip.on { background: var(--accent); color: var(--on-accent); }
.chip.warn { background: var(--warn-soft); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
a.chip:hover { border-color: var(--accent); color: var(--ink); }
a.chip.on:hover { color: var(--on-accent); }
.chips, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip-row { margin: 8px 0 0; }
.badge { position: absolute; top: 12px; left: 12px; background: var(--surface); color: var(--ink); border-radius: 999px; padding: .15em .7em; font-size: .8rem; font-weight: 700; box-shadow: var(--shadow); }
.dot { color: var(--muted); margin: 0 .35em; }

/* Header and footer */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.main-nav { display: flex; gap: 0; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 8px 9px; white-space: nowrap; border-radius: 8px; font-weight: 500; }
.main-nav a:hover { background: var(--surface-2); }
.header-search { flex: 1; max-width: 300px; margin-left: auto; }
.header-search input, .hero-search input, .search-bar input, .search-bar select { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.me-link { font-weight: 600; text-decoration: none; padding: 8px 4px; }
a.icon-btn.saved-link { color: var(--accent); flex: none; }
a.icon-btn.saved-link[aria-current="page"] { background: var(--honey-soft); border-color: var(--accent); }
.header-actions .me-link:last-child { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-link { color: var(--herb); }
.site-footer { margin-top: 48px; background: var(--surface-2); border-top: 1px solid var(--line); padding: 36px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.footer-grid nav { display: flex; flex-direction: column; gap: 6px; }
.foot-h { font: 700 .85rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.foot-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; }
.disclosure { color: var(--muted); font-size: .9rem; }

/* Forms */
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-line); border-radius: 10px; padding: .55em .75em; min-height: 44px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus); }
textarea { width: 100%; resize: vertical; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
input[type="checkbox"], input[type="radio"] { min-height: auto; width: 20px; height: 20px; accent-color: var(--accent); }
fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
legend { font: 700 1.25rem var(--serif); padding: 0; margin-bottom: 6px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.flash { background: var(--herb-soft); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; }
.flash.warn { background: var(--warn-soft); }
.flash.error { background: var(--bad-soft); }
.flash.error ul { margin: 0; }

/* Hero */
.hero { background: radial-gradient(circle at 85% 30%, var(--honey-soft), transparent 45%), linear-gradient(180deg, var(--surface-2), var(--bg)); padding: 48px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.hero-search { display: flex; gap: 10px; max-width: 560px; margin-top: 18px; }
.hero-search input { flex: 1; min-height: 54px; border-radius: 999px; padding-left: 1.2em; font-size: 1.05rem; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-pot-art { width: min(340px, 80%); height: auto; overflow: visible; }
.hero-pot-art .hp-glow { fill: var(--honey-soft); }
.hero-pot-art .hp-pot { fill: var(--honey); }
.hero-pot-art .hp-shine { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 6; stroke-linecap: round; }
.hero-pot-art .hp-steam { fill: none; stroke: var(--accent); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.hero-pot-art .hp-wisp { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; opacity: .35; }
.hero-pot-art .hp-spoon { fill: var(--star); }
.hero-pot-art .hp-spoon-in { fill: rgba(0, 0, 0, .12); }
.hero-pot-art .hp-carrot { fill: #e0702a; }
.hero-pot-art .hp-carrot-in { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.hero-pot-art .hp-leaf { fill: var(--herb); }
.hero-pot-art .hp-leaf-vein { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-linecap: round; }
.hero-pot-art .hp-flame { fill: var(--accent); }
.hero-pot-art .hp-flame-in { fill: var(--honey); }
@media (prefers-reduced-motion: no-preference) {
  .hero-pot-art .hp-wisp { animation: hp-rise 4s ease-in-out infinite alternate; }
  .hero-pot-art .hp-wisp + .hp-wisp { animation-delay: -2s; }
}
@keyframes hp-rise { from { transform: translateY(4px); opacity: .25; } to { transform: translateY(-6px); opacity: .45; } }

/* Cards and grids */
.section-head, .page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2, .page-head h1, .page-head h2 { margin: 0; }
.more { font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .18s, box-shadow .18s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(60, 35, 10, .08), 0 14px 28px rgba(60, 35, 10, .14); }
.card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.card-art { position: relative; }

/* Art blocks (no photos): a warm palette pair per category (5 tints), a texture (4), a line icon at a tilt (5), type on the
   big ones. Every pair keeps white text at 4.5:1 with up to 18% white on top (highlight + texture); test/art.test.mjs checks. */
.art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff;
  --pat: radial-gradient(rgba(255, 255, 255, .13) 1.4px, transparent 1.6px) 0 0 / 22px 22px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .1), transparent 58%), var(--pat), linear-gradient(135deg, var(--a), var(--b)); }
.art.x1 { --pat: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 18px); }
.art.x2 { --pat: linear-gradient(90deg, rgba(255, 255, 255, .045) 50%, transparent 0) 0 0 / 28px 28px, linear-gradient(rgba(255, 255, 255, .045) 50%, transparent 0) 0 0 / 28px 28px; }
.art.x3 { --pat: repeating-radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .07) 0 3px, transparent 3px 16px); }
.r1 .art-icon { transform: rotate(-9deg); } .r2 .art-icon { transform: rotate(7deg) translateY(-3%); } .r3 .art-icon { transform: rotate(-4deg) translateX(-4%); } .r4 .art-icon { transform: rotate(12deg); }
.art-baking{--a:#964507;--b:#7c2d12}.art-baking.t1{--a:#91461a;--b:#5a2a10}.art-baking.t2{--a:#7c5019;--b:#4e300c}.art-baking.t3{--a:#9e3c28;--b:#622013}.art-baking.t4{--a:#764e35;--b:#45291a}
.art-dinner{--a:#a43a19;--b:#6d2a14}.art-dinner.t1{--a:#9b2c4a;--b:#5a1730}.art-dinner.t2{--a:#545e19;--b:#363e0c}.art-dinner.t3{--a:#96420c;--b:#632a06}.art-dinner.t4{--a:#7a4a2a;--b:#432612}
.art-breakfast{--a:#824f06;--b:#713f12}.art-breakfast.t1{--a:#97401a;--b:#6d2a0e}.art-breakfast.t2{--a:#7a500e;--b:#523208}.art-breakfast.t3{--a:#973d3d;--b:#5c2020}.art-breakfast.t4{--a:#625915;--b:#3f380a}
.art-lunch{--a:#844d1b;--b:#5c3212}.art-lunch.t1{--a:#406322;--b:#2c4a16}.art-lunch.t2{--a:#9c3c2b;--b:#5f2216}.art-lunch.t3{--a:#73550f;--b:#46320a}.art-lunch.t4{--a:#2a625e;--b:#1a4440}
.art-snacks{--a:#3e640c;--b:#365314}.art-snacks.t1{--a:#934614;--b:#5e2a0a}.art-snacks.t2{--a:#73540d;--b:#4d3808}.art-snacks.t3{--a:#9a3434;--b:#581b1b}.art-snacks.t4{--a:#515f1b;--b:#343d10}
.art-sides{--a:#38623a;--b:#24452a}.art-sides.t1{--a:#5b5b16;--b:#3c3c0c}.art-sides.t2{--a:#2b6152;--b:#1a4036}.art-sides.t3{--a:#7a501c;--b:#4e3210}.art-sides.t4{--a:#4c5f24;--b:#323f16}
.art-desserts{--a:#9c3756;--b:#6b1f3a}.art-desserts.t1{--a:#8f3a7a;--b:#521e46}.art-desserts.t2{--a:#a13935;--b:#6a1f1c}.art-desserts.t3{--a:#7a4a6a;--b:#45263c}.art-desserts.t4{--a:#914628;--b:#582612}
.art-drinks{--a:#285f6c;--b:#1d4651}.art-drinks.t1{--a:#2c644d;--b:#1a3f30}.art-drinks.t2{--a:#824664;--b:#4e263c}.art-drinks.t3{--a:#844d16;--b:#5a320c}.art-drinks.t4{--a:#5a4f8a;--b:#332b52}
.art-holidays{--a:#8f2d1b;--b:#4f170c}.art-holidays.t1{--a:#2c643c;--b:#1a3f24}.art-holidays.t2{--a:#844d0f;--b:#5a3208}.art-holidays.t3{--a:#7a2a4a;--b:#45162a}.art-holidays.t4{--a:#6a3a8a;--b:#3c1f50}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.art-icon { width: 30%; max-width: 120px; height: auto; opacity: .92; }
.art-card { aspect-ratio: 3 / 2; }
.art-wide { flex-direction: column; gap: 6px; min-height: 160px; height: 100%; padding: 16px; }
.art-wide .art-icon { width: 34%; max-width: 76px; }
.art-wide .art-title { font: italic 700 1.25rem/1.15 var(--serif); text-align: center; }
.art-poster { aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: var(--shadow); flex-direction: column; align-items: flex-start; justify-content: space-between; padding: clamp(20px, 4vw, 36px); }
.art-poster .art-icon { align-self: flex-end; width: 32%; max-width: 160px; }
.art-type { display: flex; flex-direction: column; gap: 6px; }
.art-kicker { font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .14em; opacity: .95; }
.art-poster .art-title { font: italic 700 clamp(2.2rem, 5.5vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.02em; }
.card-body { padding: 14px 16px 18px; }
.card-title { font-size: 1.2rem; margin: 0 0 6px; color: var(--ink); }
.card-meta, .meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; color: var(--muted); font-size: .92rem; margin: 0; }
.meta-row { gap: 6px; margin: 8px 0; }
.card-blurb { color: var(--muted); font-size: .92rem; margin: 6px 0 0; }
.stars { display: inline-flex; align-items: center; gap: 1px; font-size: 1.05rem; }
.stars.small { font-size: .92rem; }
.st { color: var(--star-empty); line-height: 1; }
.st.st-none { color: transparent; -webkit-text-stroke: 1.2px var(--star-empty); }
.st.st-full { color: var(--star); }
.st.st-half { background: linear-gradient(90deg, var(--star) 50%, var(--star-empty) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-num { font-weight: 700; color: var(--ink); margin-left: 5px; }
.st-count { color: var(--muted); margin-left: 3px; }
.st-new { display: inline-block; padding: .05em .6em; border-radius: 999px; background: var(--honey-soft); color: var(--ink); font-size: .78em; font-weight: 700; letter-spacing: .04em; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.cat-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: #fff; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.cat-tile .art { height: 100%; align-items: flex-start; justify-content: flex-end; }
.cat-tile .art-icon { width: 22%; margin: 12px 16px 0 0; }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(30, 15, 5, .72)); }
.cat-name, .cat-count { position: absolute; left: 14px; z-index: 1; }
.cat-name { bottom: 30px; font: 700 1.3rem var(--serif); }
.cat-count { bottom: 10px; font-size: .85rem; opacity: .95; }
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.sub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.share-cta { display: flex; align-items: center; gap: 24px; background: var(--honey-soft); border-radius: var(--radius); padding: 28px; margin-top: 24px; }
.share-cta .logo-mark { width: 84px; height: 84px; }
.share-cta div { flex: 1; }
.share-cta h2 { margin-bottom: 4px; }
.share-cta p { margin: 0; }
.pantry-cta { display: flex; align-items: center; gap: 24px; background: var(--herb-soft); border-radius: var(--radius); padding: 22px 28px; }
.pantry-cta div { flex: 1; }
.pantry-cta h2 { margin-bottom: 4px; }
.pantry-cta p { margin: 0; }
.empty { text-align: center; padding: 40px 20px; }
.empty .logo-mark { width: 84px; height: 84px; margin: 0 auto 12px; }
.big-empty .hero-search { margin: 18px auto; }
.sort { display: flex; align-items: center; gap: 8px; }
.sort label { margin: 0; font-weight: 500; color: var(--muted); }
/* Category paging (task 823.13) */
.page-count { margin: -6px 0 12px; }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.pager ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pg { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--link); font-weight: 700; text-decoration: none; }
.pg:hover { background: var(--surface-2); }
.pg.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager .gap { align-self: center; color: var(--muted); }
.pager .btn.off { color: var(--muted); border-color: var(--line); cursor: default; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: .9rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }

/* Dish page */
.dish-hero { position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow); }
.dish-hero .art { aspect-ratio: 3 / 1; flex-direction: row; align-items: flex-start; justify-content: flex-end; padding: 3% 5%; }
.dish-hero .art-icon { width: 13%; max-width: 150px; }
.dish-hero-text { position: absolute; inset: auto 0 0 0; padding: 28px; background: linear-gradient(180deg, transparent, rgba(25, 14, 5, .78)); color: #fff; }
.dish-hero-text .lede, .dish-hero-text .meta-row, .dish-hero-text .st-num, .dish-hero-text .st-count { color: #fbefe1; }
.variations { list-style: none; padding: 0; display: grid; gap: 16px; }
.variation-link { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.variation-link:hover { border-color: var(--accent); }

.variation-body { padding: 16px 18px 16px 0; }
.variation-body h3 { margin: 0 0 4px; font-size: 1.35rem; }
.variation-body p.muted { margin: 0; }
.add-variation { text-align: center; margin-top: 18px; }

/* Recipe page */
.recipe-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.facts { display: grid; grid-template-columns: repeat(5, auto); gap: 8px 22px; margin: 16px 0; padding: 14px 0; border-block: 1px solid var(--line); justify-content: start; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; font-weight: 600; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.variation-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 24px 0 0; }
.recipe-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 24px; margin-top: 28px; align-items: start; }
.ingredients { position: sticky; top: 88px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.1rem; }
.seg { display: inline-flex; border: 1.5px solid var(--field-line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); color: var(--ink); padding: 0 14px; min-height: 40px; font: 600 .9rem var(--sans); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ing-list { list-style: none; padding: 0; margin: 14px 0 0; }
.ing-list li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ing-list .qty { font-weight: 700; }
.ing-list .note { color: var(--muted); }
.ing-group { font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border-bottom: 0 !important; padding-top: 16px !important; }
.safe-temp { margin: 14px 0 0; padding: 10px 12px; background: var(--herb-soft); border-radius: 10px; font-size: .95rem; }
.step-list { padding-left: 0; list-style: none; counter-reset: s; }
.step-list li { counter-increment: s; position: relative; padding: 0 0 18px 52px; }
.step-list li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--honey-soft); color: var(--ink); font: 700 1rem/36px var(--serif); text-align: center; }
.step-list p { margin: 0 0 6px; font-size: 1.05rem; }
.badge-inline { display: inline-block; margin: 0 8px 0 0; padding: .15em .65em; border-radius: 999px; background: var(--surface-2); font-size: .85rem; font-weight: 600; }
.tips { padding-left: 1.2em; }
.gear-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.gear-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.gear-item p { margin: 2px 0; }
.gear-name { font: 700 1.05rem var(--sans); margin: 0 0 2px; }
.gear-name a { color: inherit; }
.gear-name a:hover { color: var(--accent-hover); }
.btn.amazon { flex: none; background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn.amazon:hover { border-color: var(--accent); color: var(--ink); background: var(--honey-soft); }
.reviews { border-top: 1px solid var(--line); margin-top: 24px; }
.review-form { margin-bottom: 22px; max-width: 720px; }
.review-form h3 { margin-top: 0; }
.form-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; }
.star-input legend { float: left; width: 100%; font: 600 1rem var(--sans); margin-bottom: 4px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { margin: 0; font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--star-empty); cursor: pointer; padding: 4px; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--star); -webkit-text-stroke-color: var(--star); }
.star-input input:focus-visible + label { outline: 3px solid var(--focus); border-radius: 6px; }
.review-list { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.reviewer { font-weight: 700; }
.review-body p { margin: 0 0 .5em; }
.tweaks { font-size: .95rem; color: var(--muted); }
.review-actions { display: flex; gap: 16px; }
.signin-prompt { margin: 10px 0 22px; }

/* Auth, submit, me */
.auth-card { text-align: center; }
.auth-card form { text-align: left; }
.auth-card .logo-mark { width: 60px; height: 60px; margin: 0 auto 10px; }
.auth-card input { width: 100%; }
.auth-card .btn { margin-top: 16px; }
.code-input { font-size: 1.8rem !important; letter-spacing: .4em; text-align: center; }
.recipe-form input:not([type="checkbox"]):not([type="file"]), .recipe-form select { width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
.row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.rows { display: grid; gap: 8px; margin: 8px 0; }
.ing-row { display: grid; grid-template-columns: 90px 110px 2fr 1.4fr 1fr; gap: 8px; }
.step-row { padding: 8px 0 12px; border-bottom: 1px dashed var(--line); }
.gear-pick summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; }
.agree { margin: 10px 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.inline-form label { width: 100%; margin: 0; }
.inline-form input { flex: 1; min-width: 200px; }
.inline-form p { width: 100%; margin: 6px 0 0; }
.my-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.acctdel-zone { border-top: 1px solid var(--line); margin-top: 28px; scroll-margin-top: 180px; }
.acctdel-zone h2 { color: var(--bad); }
.acctdel-start { border-color: var(--bad); color: var(--bad); }
.acctdel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.acctdel-list h2 { font-size: 1.1rem; margin: 0 0 8px; }
.acctdel-list ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.acctdel-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acctdel-form p { width: 100%; margin: 0 0 4px; }
.acctdel-page .auth-card label { margin-top: 14px; }
.acctdel-resend { text-align: center !important; margin-top: 6px; }
.acctdel-resend .link-btn { color: var(--link); }
.acctdel-admin { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.acctdel-admin input { width: 9em; }
@media (max-width: 640px) { .acctdel-cols { grid-template-columns: 1fr; } }
.profile-head { display: flex; gap: 16px; align-items: center; }
.profile-head .logo-mark { width: 64px; height: 64px; }
.prose { font-size: 1.02rem; }
.prose h2 { margin-top: 1.4em; font-size: 1.35rem; }

/* Admin */
.admin h2 { margin-top: 28px; }
.queue-item { margin-bottom: 16px; }
.queue-head { display: flex; gap: 14px; align-items: center; }
.queue-head h3 { margin: 0; }
.queue-head p { margin: 2px 0 0; }
.score { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 700 1.3rem var(--sans); color: #fff; }
.score.good { background: #2f6a35; }
.score.mid { background: #9a6200; }
.score.low { background: #a3261b; }
.notes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; font-size: .93rem; }
.notes li { padding: 4px 10px; border-left: 4px solid var(--line); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.notes .note-good { border-color: var(--herb); }
.notes .note-warn { border-color: var(--honey); }
.notes .note-bad { border-color: var(--bad); background: var(--bad-soft); }
.note-kind { font: 700 .72rem var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.preview { margin: 8px 0 12px; }
.preview summary { cursor: pointer; font-weight: 600; }
.preview-grid { display: flex; gap: 14px; margin: 10px 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.reject-form input { min-height: 36px; padding: .3em .6em; width: 230px; }
.table-wrap { overflow-x: auto; }
table.members { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; }
table.members th, table.members td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }

/* Cook mode */
body.cook-mode { background: var(--bg); }
.cook-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.cook-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--surface); }
.cook-title { flex: 1; min-width: 0; }
.cook-title h1 { font-size: 1.15rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cook-title .eyebrow { margin: 0; }
.cook-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.exit { text-decoration: none; }
.cook-progress { height: 6px; background: var(--surface-2); }
.cook-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--honey), var(--accent)); transition: width .3s ease; }
.wake { text-align: center; margin: 6px 0 0; }
.cook-stage { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 24px 150px; }
.cook-step { padding-bottom: 32px; }
.js .cook-step { animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step-count { font: 700 .95rem var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; }
.step-text { font-family: var(--serif); font-size: clamp(1.7rem, 4.4vw, 2.8rem); line-height: 1.3; margin: 0 0 22px; font-weight: 500; }
.step-text:focus { outline: none; }
.size-2 .step-text { font-size: clamp(2rem, 5.4vw, 3.4rem); }
.size-3 .step-text { font-size: clamp(2.4rem, 6.6vw, 4.2rem); }
.size-2 .checklist { font-size: 1.45rem; }
.size-3 .checklist { font-size: 1.7rem; }
.step-badges .badge-inline { font-size: 1.1rem; padding: .3em .9em; }
.timer-btn { margin-top: 12px; font-size: 1.25rem; }
.checklist { list-style: none; padding: 0; margin: 0; font-size: 1.25rem; display: grid; gap: 4px; }
.checklist label { display: flex; gap: 14px; align-items: center; font-weight: 500; margin: 0; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.checklist label:hover { background: var(--surface-2); }
.checklist input { width: 28px; height: 28px; flex: none; }
.checklist .qty { font-weight: 700; }
.checklist .note { color: var(--muted); }
.checklist li.got .item, .checklist li.got .qty { text-decoration: line-through; color: var(--muted); }
.done-step .logo-mark { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.12em; }
.made-form { max-width: 560px; }
.made-form .star-input label { font-size: 2.6rem; }
.made-form .btn { margin-top: 14px; }
.cook-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.cook-nav .btn { min-width: 140px; }
.timer-tray { position: fixed; right: 16px; bottom: 96px; display: grid; gap: 8px; z-index: 30; }
.timer-tray[hidden] { display: none; }
.timer-chip { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: var(--shadow); font-weight: 600; }
.timer-chip .timer-time { font: 700 1.5rem var(--sans); font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }
.timer-chip .icon-btn { min-width: 40px; min-height: 40px; background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); font-size: .95rem; }
.timer-chip.paused { opacity: .75; }
.timer-chip.done { background: var(--accent); color: var(--on-accent); animation: pulse 1s ease-in-out infinite; }
.timer-chip.done .icon-btn { color: var(--on-accent); }
@keyframes pulse { 50% { transform: scale(1.05); } }
.ing-drawer { border: 0; border-radius: 20px; padding: 0; width: min(560px, 94vw); max-height: 86vh; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ing-drawer::backdrop { background: rgba(20, 10, 0, .5); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.drawer-head h2 { margin: 0; }
.ing-drawer .checklist { padding: 10px; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Small screens */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .header-search { max-width: none; }
  .recipe-head, .recipe-grid, .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .ingredients { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-row { flex-wrap: wrap; gap: 10px; padding-block: 8px; }
  .header-search { order: 3; flex-basis: 100%; }
  .header-actions .btn { display: none; }
  .header-actions { margin-left: auto; }
  .facts { grid-template-columns: repeat(3, auto); }
  .variation-link { grid-template-columns: 1fr; }
  .variation-link .art { aspect-ratio: 3 / 1; min-height: 0; }
  .variation-body { padding: 0 16px 16px; }
  .dish-hero .art { aspect-ratio: 4 / 3; }
  .recipe-head .art-poster { aspect-ratio: 16 / 9; }
  .row5 { grid-template-columns: 1fr 1fr; }
  .ing-row { grid-template-columns: 70px 90px 1fr; }
  .ing-row .note { grid-column: 1 / 3; }
  .ing-row .grp { grid-column: 3; }
  .share-cta, .pantry-cta { flex-direction: column; text-align: center; }
  .cook-bar { flex-wrap: wrap; gap: 8px 10px; padding-inline: 12px; }
  .cook-title { flex-basis: calc(100% - 58px); }
  .cook-title .eyebrow { display: none; }
  .cook-tools { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
  .cook-tools .icon-btn { min-width: 40px; min-height: 40px; }
  .cook-tools [data-fullscreen] { display: none; }
  .seg button { padding: 0 10px; }
  .cook-nav .hint { display: none; }
  .cook-nav .btn { flex: 1; min-width: 0; }
  .timer-tray { left: 12px; right: 12px; bottom: 90px; }
  .gear-item { flex-direction: column; align-items: start; }
  .gear-list { grid-template-columns: 1fr; }
}

/* Admin stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; }
.stat-n { font: 700 1.8rem var(--serif); }
.stat-l { color: var(--muted); font-size: .9rem; }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.stat-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; margin-bottom: 18px; }
.stat-table caption { text-align: left; font: 700 1.1rem var(--serif); padding: 0 0 8px; }
.stat-table th, .stat-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.stat-table th { font-weight: 500; }
.stat-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-table .bar { width: 40%; }
.stat-table meter { width: 100%; height: 12px; }

/* Recipes A to Z */
.az-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 20px; }
.az-group { margin-top: 18px; scroll-margin-top: 80px; }
.az-group h2 { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.az-list { list-style: none; padding: 0; columns: 2 300px; column-gap: 32px; }
.az-list li { break-inside: avoid; padding: 4px 0; }

/* Meal plan: the add/edit sheet and the toast (recipe and dish pages too; /plan itself: plan.css) */
.plan-link-sm { display: none; }
.variation-plan { margin: 8px 0 0; text-align: right; }
.sheet { border: 0; border-radius: 20px; padding: 0; width: min(520px, 94vw); max-height: 88vh; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sheet::backdrop { background: rgba(20, 10, 0, .5); }
.sheet-body { padding: 6px 18px 4px; }
.sheet-recipe { font: 600 1.15rem/1.3 var(--serif); margin: 10px 0 0; }
.sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-row select { width: 100%; }
.sheet-serv { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; font-weight: 600; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 18px; }
.plan-toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%); max-width: min(560px, 92vw); margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); z-index: 40; transition: transform .2s; }
.plan-toast.on { transform: translate(-50%, 0); }
.plan-toast a { color: inherit; font-weight: 700; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .plan-link-sm { display: inline-block; } }
.holiday-band { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--honey-soft); }
/* Offline banner (task 823.11, pwa.js) */
.offline-bar { background: var(--warn-soft); border-bottom: 1px solid var(--line); }
.offline-bar p { max-width: 1180px; margin: 0 auto; padding: 8px 20px; font-size: .95rem; }
.offline-bar[data-kind="online"] { background: var(--herb-soft); }
.offline-bar .link-btn, .offline-bar a { margin-left: 4px; }
.cook-mode .offline-bar p { padding: 4px 16px; font-size: .85rem; }
/* Recipe photos (task 833): card covers, the recipe page's lead photo and strip. */
.card-photo { aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; }
.card-photo img, .variation-link .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.variation-link .card-photo { height: 100%; min-height: 160px; }
.recipe-photo { margin: 0; }
.recipe-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); background: var(--surface-2); display: block; }
.recipe-photo figcaption, .strip-photo figcaption { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 4px; }
.strip-photo { margin: 0; }
.strip-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); display: block; }
.notices .unread { font-weight: 600; }