/* Warm frosted glass: one material for controls, pickers and sheets. */
:root {
  --glass: rgba(255, 255, 252, .7);
  --glass-border: rgba(255, 255, 255, .88);
  --glass-edge: rgba(88, 103, 77, .14);
  --control-shadow: 0 2px 4px rgba(44, 58, 37, .035), 0 7px 18px rgba(44, 58, 37, .055), inset 0 1px 0 rgba(255,255,255,.95);
  --sheet-shadow: 0 24px 65px rgba(40, 53, 35, .16), 0 4px 16px rgba(40,53,35,.06), inset 0 1px 0 rgba(255,255,255,.95);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
body {
  background: radial-gradient(ellipse at 8% 0, rgba(199,211,177,.3), transparent 42%), radial-gradient(ellipse at 96% 40%, rgba(236,213,183,.2), transparent 42%), var(--paper);
  background-attachment: fixed;
}
button, input, textarea, select, .export-link {
  border-radius: 14px;
  border-color: var(--glass-edge);
  background: linear-gradient(155deg, rgba(255,255,255,.75), rgba(255,253,246,.48));
  box-shadow: var(--control-shadow);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
button, .chip, .panel, .slot, .collection, .toolbar, .select-trigger {
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
button { font-weight: 500; }
button:hover { background: rgba(255,255,253,.93); border-color: rgba(83,104,63,.3); box-shadow: 0 4px 9px rgba(44,58,37,.06), 0 10px 24px rgba(44,58,37,.08), inset 0 1px 0 #fff; }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 4px rgba(44,58,37,.08); }
button.primary, .chip.active {
  background: linear-gradient(145deg, rgba(94,117,79,.94), rgba(64,86,53,.97));
  border-color: rgba(55,76,46,.22); color: #fff;
  box-shadow: 0 5px 14px rgba(58,82,43,.19), inset 0 1px 0 rgba(255,255,255,.28);
}
button.primary:hover, .chip.active:hover { background: linear-gradient(145deg, #667e56, #465d3a); }
button.quiet { background: rgba(255,255,255,.25); border-color: rgba(93,110,79,.08); box-shadow: 0 2px 7px rgba(44,58,37,.035), inset 0 1px 0 rgba(255,255,255,.6); }
button:disabled { cursor: default; box-shadow: none; }
:focus-visible { outline: 3px solid rgba(116,143,91,.55); outline-offset: 3px; }
input:not([type=checkbox]), textarea { padding: 12px 15px; }
input:hover, textarea:hover { border-color: rgba(83,104,63,.26); }
input:focus, textarea:focus { background: rgba(255,255,253,.94); }
select { appearance: none; padding: 12px 44px 12px 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2356684b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 17px center; }
label { font-weight: 500; gap: 8px; min-width: 0; }
input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0; flex: 0 0 22px;
  border-radius: 7px; border: 1px solid rgba(93,111,78,.3);
  display: inline-grid; place-content: center; cursor: pointer;
  background: rgba(255,255,255,.72); box-shadow: 0 2px 5px rgba(46,61,37,.07), inset 0 1px 0 #fff;
}
input[type=checkbox]::after { content: ''; width: 9px; height: 5px; border: solid white; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s; }
input[type=checkbox]:checked { background: linear-gradient(145deg, #738969, #49633b); border-color: #5b7449; box-shadow: 0 3px 7px rgba(65,91,48,.2), inset 0 1px 0 rgba(255,255,255,.28); }
input[type=checkbox]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
input[type=checkbox]:disabled { opacity: .5; cursor: default; }
input[type=file] { padding: 7px; font-size: 13px; color: var(--muted); cursor: pointer; overflow: hidden; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; color: var(--ink); border: 1px solid rgba(93,111,78,.16); border-radius: 10px; padding: 9px 14px; margin-right: 12px; background: linear-gradient(145deg, #fff, #edf0e7); box-shadow: 0 2px 5px rgba(44,58,37,.06), inset 0 1px 0 #fff; cursor: pointer; }
input[type=file]:hover::file-selector-button { background: #e8eedf; }
header { background: rgba(248,247,239,.74); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-bottom-color: rgba(113,124,99,.12); box-shadow: 0 3px 18px rgba(52,65,42,.035); }
nav button { border: 1px solid transparent; background: rgba(255,255,255,.25); }
nav button.active { background: rgba(225,233,211,.78); border-color: rgba(105,129,79,.16); box-shadow: var(--control-shadow); }
.toolbar { padding: 22px; border: 1px solid rgba(255,255,255,.85); border-radius: 24px; background: rgba(255,255,252,.4); box-shadow: 0 8px 28px rgba(55,66,44,.045), inset 0 0 0 1px rgba(93,111,78,.035); }
.chip { border-radius: 999px; }
.panel, .slot, .collection, .notice { border-radius: 22px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,251,.57); box-shadow: 0 7px 25px rgba(48,64,36,.055), inset 0 1px 0 #fff; }
.slot.locked { border-color: rgba(101,130,78,.45); background: rgba(232,239,221,.62); }
.empty { border-radius: 26px; background: rgba(244,246,235,.56); border: 1px dashed rgba(124,145,101,.34); box-shadow: 0 12px 38px rgba(44,58,37,.045), inset 0 1px 0 rgba(255,255,255,.85); }
.card-cover, .detail-cover { border-radius: 20px; }
.card-title, .card-title:hover { background: none; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.heart { border-radius: 50%; background: rgba(255,255,250,.78); }
.tabs { padding: 5px; border-radius: 17px; background: rgba(218,224,207,.4); box-shadow: inset 0 1px 3px rgba(55,66,44,.05); gap: 5px; }
.tabs button { border: 1px solid transparent; border-radius: 12px; box-shadow: none; }
.tabs button.active { border-color: rgba(255,255,255,.9); background: rgba(255,255,252,.88); box-shadow: 0 3px 10px rgba(44,58,37,.09); }
dialog { border: 1px solid rgba(255,255,255,.88); border-radius: 28px; padding: 30px; background: rgba(249,248,241,.94); box-shadow: var(--sheet-shadow); -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%); scrollbar-width: thin; scrollbar-color: #c0c9b4 transparent; }
dialog::backdrop { background: rgba(34,45,31,.28); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.dialog-head > button { border-radius: 50%; width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 40px; font-size: 23px; background: rgba(222,228,213,.55); }
#toast { border-radius: 18px; background: rgba(41,56,46,.93); box-shadow: 0 8px 30px rgba(30,45,30,.2); backdrop-filter: blur(16px); }
.glass-select { display: block; position: relative; min-width: 0; }
.select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; clip-path: inset(50%); overflow: hidden; opacity: 0; pointer-events: none; }
.select-trigger { width: 100%; min-height: 46px; padding: 12px 43px 12px 15px; text-align: left; position: relative; font-size: 14px; font-weight: 400; line-height: 1.5; }
.select-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-arrow { position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border: solid #647257; border-width: 0 1.7px 1.7px 0; transform: translateY(-70%) rotate(45deg); transition: transform .18s; }
.select-trigger[aria-expanded=true] { background: rgba(255,255,255,.95); border-color: rgba(112,141,83,.45); }
.select-trigger[aria-expanded=true] .select-arrow { transform: translateY(-20%) rotate(225deg); }
.select-menu { position: fixed; inset: auto; margin: 0; padding: 6px; border: 1px solid rgba(255,255,255,.95); border-radius: 18px; box-sizing: border-box; background: rgba(253,253,247,.94); color: var(--ink); box-shadow: var(--sheet-shadow), 0 0 0 1px rgba(70,90,51,.07); -webkit-backdrop-filter: blur(26px) saturate(135%); backdrop-filter: blur(26px) saturate(135%); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b8c5a9 transparent; }
.select-menu::backdrop { background: transparent; }
.select-option { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 40px; padding: 9px 12px; border-radius: 11px; font-size: 14px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.select-option > span:first-child { min-width: 0; }
.select-option:hover, .select-option.is-focused { background: rgba(220,230,204,.65); }
.select-option[aria-selected=true] { color: #38552c; background: rgba(225,233,211,.55); font-weight: 600; }
.option-check { opacity: 0; flex: 0 0 16px; font-size: 15px; }
.select-option[aria-selected=true] .option-check { opacity: 1; }
.select-option[aria-disabled=true] { opacity: .45; cursor: default; }
@media (max-width:700px) { .toolbar { padding: 16px; border-radius: 21px; } .filters { gap: 14px 10px; } .select-trigger { padding-left: 12px; } dialog { padding: 22px 18px; border-radius: 25px; } .hero > .actions { margin-top: 22px; } }
@media (prefers-reduced-transparency:reduce) { button, .toolbar, .select-menu, .panel, .slot, dialog, header { background-color: #fafaf3; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (forced-colors:active) { input[type=checkbox] { appearance: auto; } .select-trigger, .select-menu { border: 1px solid ButtonText; } .select-option.is-focused { outline: 1px solid Highlight; } }
@media print { body { background: white; } .toolbar, .select-menu { display: none !important; } .panel, .slot { box-shadow: none; backdrop-filter: none; } }

/* Full recipe cards: natural proportions, no cropping or overlay controls. */
.card-cover { aspect-ratio: auto; padding: 0; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: 20px; background: var(--glass); }
.card-cover img, .card-cover img.detail-cover { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 0; }
.card-cover:hover img { transform: none; }
.card-cover .placeholder { aspect-ratio: 1225 / 1284; }
.card-caption { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 7px; }
.card-caption h3 { flex: 1; min-width: 0; margin: 0; }
.card-caption .heart { position: static; order: 1; flex: 0 0 44px; height: 44px; }
@media (min-width: 1001px) { .grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: minmax(0,1fr); } }

/* Align recipe labels slightly inside the image edge. */
.card-caption h3, .card > .card-meta { padding-left: 12px; }

/* Recipe features share the warm glass material, with readable text labels. */
.recipe-badges { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; margin:7px 0 2px; max-width:100%; }
.recipe-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid rgba(255,255,255,.9); border-radius:999px; background:rgba(255,255,252,.72); color:#4b6541; box-shadow:0 2px 7px rgba(44,58,37,.065),inset 0 1px 0 #fff; backdrop-filter:blur(14px); font:500 11px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space:nowrap; letter-spacing:0; }
.recipe-badge svg,.feature-choice-title svg { width:16px; height:16px; flex:none; }
.feature-spicy { color:#9a4b32; background:rgba(255,236,222,.8); }
.feature-balanced { color:#49685a; background:rgba(230,241,231,.8); }
.feature-lenten { color:#647040; background:rgba(240,242,220,.8); }
.recipe-heading > .recipe-badges { margin:0 0 16px; }
.recipe-heading > .recipe-badges .recipe-badge { font-size:13px; padding:7px 11px; }
.card-caption h3 .recipe-badges { margin-left:0; display:flex; }
.feature-editor { min-width:0; border:1px solid var(--glass-edge); border-radius:20px; padding:16px; margin:0; background:rgba(255,255,255,.3); }
.feature-editor legend { padding:0 7px; font-size:14px; font-weight:600; }
.feature-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feature-choice { display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid var(--glass-edge); border-radius:16px; background:var(--glass); box-shadow:var(--control-shadow); cursor:pointer; }
.feature-choice:has(input:checked) { border-color:rgba(90,121,63,.45); background:rgba(230,239,218,.8); }
.feature-choice-copy { min-width:0; display:grid; gap:5px; }
.feature-choice-title { display:flex; align-items:center; gap:6px; font-size:13px; }
.feature-description { font-size:12px; line-height:1.45; font-weight:400; color:var(--muted); }
.feature-editor > p { margin:12px 0 0; }
@media(max-width:500px) { .feature-choices { grid-template-columns:1fr; } .recipe-badge { font-size:10px; padding:5px 8px; } }

/* Feature badges are also keyboard-accessible filter shortcuts. */
button.recipe-badge { min-height:30px; cursor:pointer; }
button.recipe-badge:hover { border-color:rgba(94,117,79,.42); background:rgba(240,245,231,.95); box-shadow:0 3px 10px rgba(44,58,37,.12),inset 0 1px 0 #fff; }
button.recipe-badge[aria-pressed=true] { border-color:rgba(83,109,65,.5); box-shadow:0 0 0 1px rgba(83,109,65,.18),var(--control-shadow); }
@media(pointer:coarse) { button.recipe-badge { min-height:44px; padding-inline:11px; } }
.menu-period{display:grid;grid-template-columns:minmax(130px,180px) 1fr;gap:20px;align-items:end}.menu-period p{margin:0 0 8px}.menu-day{margin:28px 0 36px}.menu-day>.title-row{gap:12px;align-items:center}.menu-day h2{margin:0;font-size:28px}.menu-reuse h3{font-size:25px}.reuse-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}.reuse-list li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:7px}.reuse-list small{white-space:nowrap;color:var(--muted)}.menu-reuse details{margin:14px 0}.menu-reuse summary{cursor:pointer;font-size:13px}.menu-reuse details p{margin-top:12px}.menu-layout>section,.menu-layout>aside{min-width:0}.menu-day .slot{margin-top:16px}.menu-layout aside .title-row h2{font-size:25px}.menu-layout .checkrow{display:flex;align-items:center;gap:10px}.menu-layout .checkrow input{flex-shrink:0}@media(max-width:600px){.menu-period{grid-template-columns:1fr;gap:10px}.menu-day>.title-row{flex-wrap:wrap}.menu-day h2{font-size:25px}.menu-layout .actions button{flex:1}.reuse-list li{flex-wrap:wrap;gap:4px}.menu-layout .slot-controls{grid-template-columns:minmax(0,1fr) 85px 44px;gap:8px}}@media print{.menu-reuse{display:none}}

.menu-style-filter{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:20px;align-items:end}.menu-style-filter p{margin:0 0 6px}.menu-style-choices{display:flex;flex-wrap:wrap;gap:12px 24px}.menu-style-choices .checkrow{display:flex;align-items:center;gap:8px}@media(max-width:600px){.menu-style-filter{grid-template-columns:1fr;gap:10px}}
.day-style-row{display:flex;align-items:end;gap:14px;margin:16px 0}.day-style-row>label{flex:1;min-width:0}.day-style-row>button{flex-shrink:0}.shopping-share .checkrow{display:flex;align-items:center;gap:10px}.shopping-share .checkrow input{width:auto}.shopping-share textarea{resize:vertical;font-size:14px;line-height:1.5}.shopping-share .actions{flex-wrap:wrap}.shopping-share .export-link{padding:12px 20px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:16px}#share-shopping{margin-bottom:18px}@media(max-width:600px){.day-style-row{align-items:stretch;flex-direction:column}.shopping-share .actions>*{flex:1;text-align:center;justify-content:center}}@media print{.day-style-row,#share-shopping{display:none}}