:root{
  --bg:#fbf7f0; --card:#fffdf9; --ink:#211d16; --muted:#7a7062;
  --line:#e6dece; --accent:#b4541f; --accent-soft:#f6e6da;
  --ok:#3f6b4a; --shadow:0 1px 2px rgba(33,29,22,.06), 0 8px 24px rgba(33,29,22,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#17150f; --card:#211e17; --ink:#f2ece0; --muted:#a09681;
    --line:#332e24; --accent:#e88b4d; --accent-soft:#3a2417;
    --ok:#7fb98e; --shadow:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
header{padding:28px 0 18px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.2;margin:8px 0 14px;font-weight:600}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.pill.plain{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}
.card h2{font-family:Georgia,serif;font-size:19px;margin:0 0 2px;font-weight:600;line-height:1.25}
.slot{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px}
.meta{color:var(--muted);font-size:13px;margin-bottom:14px}
.meta b{color:var(--ink);font-weight:600}

.grp{margin-top:14px}
.grp-name{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
ul.ing{list-style:none;margin:0;padding:0}
ul.ing li{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line)}
ul.ing li:last-child{border-bottom:0}
ul.ing .q{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600;min-width:74px}
ul.ing .n{flex:1}
.spice{margin-top:12px;font-size:14px;color:var(--muted)}
.note{margin-top:12px;padding:11px 13px;background:var(--accent-soft);border-radius:11px;font-size:14px;line-height:1.5}
.note+.note{margin-top:8px}

/* ---------- summary table ---------- */
table.sum{width:100%;border-collapse:collapse;font-size:14px}
table.sum td{padding:9px 0;border-bottom:1px solid var(--line)}
table.sum tr:last-child td{border-bottom:0;font-weight:700}
table.sum td+td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}

/* ---------- steps ---------- */
.step{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0;padding-bottom:0}
.num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
@media (prefers-color-scheme:dark){.num{color:#17150f}}
.step h3{margin:4px 0 4px;font-size:16px;font-weight:650}
.step .t{color:var(--muted);font-size:13px;font-weight:600}
.step p{margin:0;font-size:15px}

/* ---------- shopping ---------- */
.sec-name{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:20px 0 4px}
.sec-name:first-child{margin-top:0}
label.item{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
label.item input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;border:1.5px solid var(--line);border-radius:6px;background:transparent;position:relative}
label.item input:checked{background:var(--ok);border-color:var(--ok)}
label.item input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
label.item .txt{flex:1;font-size:15px}
label.item .amt{color:var(--muted);font-size:13px;white-space:nowrap;padding-top:2px}
label.item input:checked ~ .txt,label.item input:checked ~ .amt{text-decoration:line-through;color:var(--muted)}

.actions{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
button,.btn{font:inherit;font-size:16px;font-weight:650;border-radius:12px;padding:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;display:block;text-align:center;text-decoration:none}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){button.primary,.btn.primary{color:#17150f}}
button:active,.btn:active{opacity:.75}
.hint{font-size:13px;color:var(--muted);margin:0 0 14px}
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:20}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- nav ---------- */
nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:10}
nav .inner{max-width:660px;margin:0 auto;display:flex}
nav button{flex:1;border:0;background:none;padding:9px 4px;border-radius:11px;font-size:13px;font-weight:600;color:var(--muted)}
nav button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
nav .ic{display:block;font-size:19px;line-height:1.3}

[hidden]{display:none!important}
footer{color:var(--muted);font-size:12px;text-align:center;padding:22px 0 8px}

@media print{
  nav,.actions,#toast{display:none!important}
  [hidden]{display:block!important}
  body{padding:0;background:#fff;color:#000}
  .card{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .panel{page-break-before:always}
  .panel:first-of-type{page-break-before:auto}
}

/* ---------- plain-text fallback ---------- */
.raw{margin-top:14px}
.raw summary{font-size:14px;font-weight:650;color:var(--accent);cursor:pointer;padding:6px 0}
.raw pre{white-space:pre-wrap;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px;margin:8px 0 0;-webkit-user-select:all;user-select:all}

/* ---------- no-JS: show everything, hide interactive bits ---------- */
html.nojs .panel[hidden]{display:block!important}
html.nojs nav,html.nojs #btn-copy,html.nojs .hint-js{display:none!important}
html.nojs .panel+.panel{border-top:2px solid var(--line);margin-top:26px;padding-top:6px}