/* The Butchers' Wives · Thanksgiving planner
   Layout: an onyx band with the wordmark and a notch, over an airy alabaster pantry.
   Recipe cards with drawers that open, ruled ledger rows, kraft tags. Clean lines, quiet texture,
   small details that turn up once you start opening things. */
:root {
  /* The Final 7 (BW brand palette) */
  --onyx: #0C1713;          /* dark anchor: headlines, hard cards, footer */
  --mauve: #A23E48;         /* brand accent: buttons, wordmark details, hearts */
  --green: #4A7A55;         /* throughline: links, saves, checks, cellar */
  --almond: #D4956A;        /* warm mid: key borders, CTA hairlines */
  --peach: #CC7A5B;         /* warm accent: food, illustrations */
  --alabaster: #E5E5E5;     /* light anchor: page, surfaces */

  --page: #E5E5E5;
  --card: #F5F3EE;          /* warm linen card, layered over alabaster */
  --card-2: #FBFAF7;
  --ink: #0C1713;
  --ink-2: #4F5B55;
  --line: #CBC8C0;
  --rule: #DEDBD3;
  --band: #0C1713;
  --band-ink: #EEEBE4;
  --link: #3E6B49;
  --peach-ink: #A65A3C;     /* peach dark enough for text */
  --almond-ink: #95602F;
  --kraft: #E6CDB4;
  --kraft-ink: #3A2A1E;
  --hl: #F1E4D7;
  --ok: #3E6B49; --bad: #A23E48; --soon: #95602F;
  --on-accent: #FBFAF7;
  --shadow: 0 1px 0 rgb(12 23 19 / .04), 0 18px 34px -26px rgb(12 23 19 / .45);
  /* task types, all from the palette family */
  --t-plan: #5E6B64; --t-shop: #4A7A55; --t-prep: #B07A43; --t-cook: #C0603E;
  --t-store: #3E5C66; --t-defrost: #6C8FA3; --t-decor: #7A8B4F; --t-hosting: #A23E48;

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Caveat", "Bradley Hand", cursive;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --grain-mix: rgba(229, 229, 229, 0.94);
  --card-grain-mix: rgba(245, 243, 238, 0.95);
  /* pantry textures */
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.16 -0.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --inkmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --plank: 96px;
  --groove-dark: rgb(12 23 19 / .075);
  --groove-light: rgb(255 255 255 / .55);
  --crease-dark: rgb(12 23 19 / .06);
  --crease-light: rgb(255 255 255 / .7);
  --crease-shade: rgb(12 23 19 / .018);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #0C1713; --card: #14211C; --card-2: #1A2A24; --ink: #ECE9E2; --ink-2: #A6B0AA; --line: #2B3B34; --rule: #1F2D27;
  --band: #070F0C; --band-ink: #ECE9E2; --link: #8DBB95; --peach-ink: #E39A7C; --almond-ink: #E0AE88;
  --mauve: #CC6F7A; --green: #8DBB95; --kraft: #C9AE92; --kraft-ink: #2A1E14; --hl: #2A231B;
  --ok: #8DBB95; --bad: #E58A93; --soon: #E0AE88; --on-accent: #0C1713;
  --shadow: 0 1px 0 rgb(0 0 0 / .2), 0 18px 34px -24px rgb(0 0 0 / .8);
  --t-plan: #A6B0AA; --t-shop: #8DBB95; --t-prep: #DDB27F; --t-cook: #E39A7C;
  --t-store: #8FB3BD; --t-defrost: #9DC0D3; --t-decor: #B6C584; --t-hosting: #E58A93;
  --grain-mix: rgba(12, 23, 19, 0.95); --card-grain-mix: rgba(20, 33, 28, 0.96);
  --groove-dark: rgb(0 0 0 / .38); --groove-light: rgb(255 255 255 / .035); --crease-dark: rgb(0 0 0 / .35); --crease-light: rgb(255 255 255 / .05); --crease-shade: rgb(0 0 0 / .08);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --page: #0C1713; --card: #14211C; --card-2: #1A2A24; --ink: #ECE9E2; --ink-2: #A6B0AA; --line: #2B3B34; --rule: #1F2D27;
  --band: #070F0C; --band-ink: #ECE9E2; --link: #8DBB95; --peach-ink: #E39A7C; --almond-ink: #E0AE88;
  --mauve: #CC6F7A; --green: #8DBB95; --kraft: #C9AE92; --kraft-ink: #2A1E14; --hl: #2A231B;
  --ok: #8DBB95; --bad: #E58A93; --soon: #E0AE88; --on-accent: #0C1713;
  --shadow: 0 1px 0 rgb(0 0 0 / .2), 0 18px 34px -24px rgb(0 0 0 / .8);
  --t-plan: #A6B0AA; --t-shop: #8DBB95; --t-prep: #DDB27F; --t-cook: #E39A7C;
  --t-store: #8FB3BD; --t-defrost: #9DC0D3; --t-decor: #B6C584; --t-hosting: #E58A93;
  --grain-mix: rgba(12, 23, 19, 0.95); --card-grain-mix: rgba(20, 33, 28, 0.96);
  --groove-dark: rgb(0 0 0 / .38); --groove-light: rgb(255 255 255 / .035); --crease-dark: rgb(0 0 0 / .35); --crease-light: rgb(255 255 255 / .05); --crease-shade: rgb(0 0 0 / .08);
  color-scheme: dark; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 15px/1.55 var(--f-body);
  background-color: var(--page); background-image: linear-gradient(var(--grain-mix), var(--grain-mix)), var(--grain); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -0.005em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 0; padding: 7px 10px; max-width: 100%; }
textarea { font-family: var(--f-hand); font-size: 1.2rem; line-height: 1.3; }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-2); } .small { font-size: .86rem; } .bad { color: var(--bad); } .ok { color: var(--ok); } .soon { color: var(--soon); }
.warn { color: var(--soon); }
.spacer { flex: 1; }
.loading, .locked, .picker { padding-block: 96px; padding-inline: 16px; text-align: center; }
.locked h1, .picker h1 { font-size: 2.6rem; }
.locked p, .picker p { margin-top: 12px; color: var(--ink-2); }

/* small caps label voice (apothecary labels) */
.eyebrow, .k, .tabs button, .btn, .pill, .seg button, .toolbar label, .rc-label, .tt, .lanehead, .quick button,
.fld > label, .fld > legend, .map th, .panel h3, .dlabel span, details summary, .stamp {
  font-family: var(--f-body); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- illustrations (swap files in /illustrations, same names) ---------- */
.illo { display: inline-block; background-color: var(--illo, var(--peach)); -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; flex: none; }
.illo-vine { --src: url(illustrations/rosemary.svg); }
.illo-sprig { --src: url(illustrations/sprig.svg); }
.illo-orange { --src: url(illustrations/orange.svg); }
.illo-flourish { --src: url(illustrations/bundle.svg); }

/* ---------- buttons + links ---------- */
.btn { background: var(--mauve); color: var(--on-accent); border: 1px solid var(--mauve); border-radius: 0; padding: 10px 18px; transition: background .15s, transform .15s; }
.btn:hover { background: color-mix(in srgb, var(--mauve) 85%, var(--onyx)); }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 7px 12px; font-size: .62rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--almond); }
.btn.ghost:hover { background: color-mix(in srgb, var(--almond) 14%, transparent); }
.btn.danger { background: transparent; color: var(--bad); border-color: currentColor; }
.link { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.link.strong { font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.x { background: none; border: 0; color: var(--ink-2); font-size: 1.15rem; line-height: 1; padding: 0 4px; }
.x:hover { color: var(--bad); }
.pill { display: inline-block; font-size: .58rem; border: 1px solid currentColor; padding: 2px 8px; color: var(--ink-2); }
.pill.host { color: var(--almond); }
.pill.soonp { color: var(--soon); }
.count { font-family: var(--f-mono); background: var(--mauve); color: var(--on-accent); border-radius: 99px; font-size: .6rem; padding: 1px 6px; margin-left: 3px; letter-spacing: 0; }
.chk { display: inline-flex; gap: 8px; align-items: center; }
input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; margin: 0; }

/* ---------- onyx band ---------- */
.demobar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .84rem; background: var(--hl); padding-block: 8px; padding-inline: 16px; }
.demobar select { padding: 2px 6px; }
.band { position: relative; background: var(--band); color: var(--band-ink); text-align: center; padding-inline: 16px; padding-block: 46px 52px; margin-bottom: 18px; }
.band::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; }
.band::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: min(420px, 70%); transform: translateX(-50%); border-top: 1px solid color-mix(in srgb, var(--almond) 55%, transparent); }
.band-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.band .eyebrow { color: color-mix(in srgb, var(--band-ink) 62%, transparent); }
.wordmark { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 7.5vw, 4.6rem); line-height: 1; letter-spacing: .005em; margin-top: 12px; color: var(--band-ink); }
.band h1 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 400; color: var(--almond); margin-top: 10px; letter-spacing: .02em; }
.band h1 em { font-style: italic; }
.band .who { margin-top: 16px; font-size: .86rem; color: color-mix(in srgb, var(--band-ink) 75%, transparent); }
.band .link { color: var(--almond); text-decoration-color: color-mix(in srgb, var(--almond) 50%, transparent); }
.newpill { color: var(--almond); font-weight: 600; }
.notch { position: absolute; left: 50%; bottom: -13px; width: 26px; height: 14px; transform: translateX(-50%); background: var(--band); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.band .illo-vine { position: absolute; z-index: 0; --illo: color-mix(in srgb, var(--peach) 45%, transparent); width: min(38vw, 380px); aspect-ratio: 500 / 120; left: -40px; top: 26px; transform: rotate(-8deg); }
/* the countdown seal: a wax-stamp moment */
.seal { position: absolute; z-index: 1; right: max(16px, calc(50% - 560px)); top: 50%; translate: 0 -50%; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; color: var(--band-ink);
  border: 1px solid color-mix(in srgb, var(--almond) 70%, transparent); outline: 1px solid color-mix(in srgb, var(--almond) 30%, transparent); outline-offset: 4px; rotate: -8deg; }
.seal b { font-family: var(--f-display); font-weight: 500; font-size: 2.6rem; line-height: .9; }
.seal span { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--almond); margin-top: 2px; }
.seal i { font-family: var(--f-display); font-size: .9rem; color: color-mix(in srgb, var(--band-ink) 65%, transparent); margin-top: 2px; }
@media (max-width: 760px) {
  .band { padding-block: 34px 44px; }
  .seal { position: relative; right: auto; top: auto; translate: none; margin: 18px auto 0; width: 86px; height: 86px; }
  .seal b { font-size: 2rem; }
  .band .illo-vine { width: 220px; left: -60px; top: 10px; opacity: .7; }
}

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; }
.foot { background: var(--band); color: color-mix(in srgb, var(--band-ink) 70%, transparent); text-align: center; padding-inline: 16px; padding-block: 34px 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .86rem; }
.foot .illo-flourish { width: 150px; height: 34px; --illo: color-mix(in srgb, var(--peach) 75%, transparent); margin-bottom: 6px; }
.wordmark.small { font-size: 1.6rem; margin: 0; }

/* ---------- nav ---------- */
.tabs { display: flex; justify-content: center; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-bottom: 30px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--page); background-image: linear-gradient(var(--grain-mix), var(--grain-mix)), var(--grain); border-bottom: 1px solid var(--line); padding-block: 14px 0; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px 12px; white-space: nowrap; color: var(--ink-2); margin-bottom: -1px; transition: color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--mauve); }
@media (max-width: 760px) { .tabs { justify-content: flex-start; } }

/* ---------- toolbars ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 18px; }
.toolbar label { color: var(--ink-2); }
.hint { font-family: var(--f-hand); font-size: 1.15rem; color: var(--ink-2); margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--card-2); }
.seg button { background: none; border: 0; padding: 9px 15px; color: var(--ink-2); }
.seg button.on { background: var(--onyx); color: var(--band-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ---------- surfaces: linen cards layered on alabaster ---------- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px; margin-bottom: 22px; }
.span2 { grid-column: 1 / -1; }
.panel, .card { position: relative; background-color: var(--card); background-image: linear-gradient(var(--card-grain-mix), var(--card-grain-mix)), var(--grain);
  border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.panel { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
main > .panel { margin-bottom: 22px; }
.panel h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.panel h2 .muted { font-family: var(--f-body); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.panel h3 { color: var(--ink-2); margin-top: 8px; }
.empty { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.empty .illo-sprig { width: 30px; height: 60px; --illo: var(--green); opacity: .7; }
.empty p { font-family: var(--f-hand); font-size: 1.25rem; }

/* ---------- task types ---------- */
.tt { display: inline-flex; align-items: center; gap: 6px; font-size: .58rem; color: var(--c); white-space: nowrap; vertical-align: 1px; }
.tt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent); }
.tt-plan { --c: var(--t-plan); } .tt-shop { --c: var(--t-shop); } .tt-prep { --c: var(--t-prep); } .tt-cook { --c: var(--t-cook); }
.tt-store { --c: var(--t-store); } .tt-defrost { --c: var(--t-defrost); } .tt-decor { --c: var(--t-decor); } .tt-hosting { --c: var(--t-hosting); }

.tlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tline { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.tline:last-child { border-bottom: 0; }
.tline.done { opacity: .5; }
.tline.done .link { text-decoration: line-through; }
.tline .link { color: var(--ink); text-decoration-color: var(--line); }
.tdate { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2); min-width: 9em; font-variant-numeric: tabular-nums; }
.whotag { font-family: var(--f-hand); font-size: 1.12rem; color: var(--mauve); line-height: 1; }
.decmini { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.decmini span { font-family: var(--f-mono); font-size: .7rem; }

/* ---------- comments: pencil notes in the margin ---------- */
.comments { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cmt { padding: 2px 0 2px 12px; border-left: 1px solid var(--almond); }
.cmt.new { border-left: 2px solid var(--mauve); background: linear-gradient(90deg, var(--hl), transparent 80%); }
.cmeta { font-size: .64rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cmeta b { color: var(--ink); font-weight: 600; }
.cmeta .link { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 400; }
.ctext { font-family: var(--f-hand); font-size: 1.3rem; line-height: 1.2; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.swap { color: var(--mauve); }
.cform { display: flex; flex-direction: column; gap: 6px; }
.cform textarea { width: 100%; resize: vertical; background-image: repeating-linear-gradient(transparent 0 calc(1.3em - 1px), var(--rule) calc(1.3em - 1px) 1.3em); background-attachment: local; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mauve); vertical-align: 1px; }

/* ---------- menu: recipe cards ---------- */
.menucat { margin-bottom: 40px; }
.menucat > h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 2.1rem; }
.menucat > h2 .illo-flourish { width: 84px; height: 20px; --illo: var(--peach); opacity: .8; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; align-items: start; }
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.card { padding: 0 22px 16px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.card.recipe:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(12 23 19 / .04), 0 26px 40px -28px rgb(12 23 19 / .55); }
.card.recipe::after { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--almond) 28%, transparent); pointer-events: none; }
.rc-label { display: flex; justify-content: space-between; gap: 8px; margin: 0 -22px 4px; padding: 10px 22px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .6rem; }
.card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card:not(.recipe) header { padding-top: 16px; }
.card header h3 { font-size: 1.45rem; line-height: 1.08; }
.card header .link, .card header > span { font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; padding-top: 6px; }
.card footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.card footer > .link { font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.card footer .comments { flex-basis: 100%; }
.card.dim { opacity: .36; }
.card.hiddenish { border-style: dashed; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .86rem; }
.safe { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .78rem; }
.safe .yes { color: var(--ok); } .safe .no { color: var(--bad); }
.safe small { font-size: .7rem; opacity: .85; }
.note { font-family: var(--f-hand); font-size: 1.22rem; line-height: 1.22; color: var(--ink); }
/* drawers: the pantry doors */
.drawers { display: flex; flex-direction: column; }
details { border-top: 1px solid var(--rule); }
details summary { list-style: none; cursor: pointer; padding: 9px 0; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--peach); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .2s; }
details[open] summary::before { transform: rotate(90deg); }
details summary:hover { color: var(--ink); }
details summary .n { font-family: var(--f-mono); color: var(--peach-ink); letter-spacing: 0; }
.det { padding: 0 0 12px 13px; font-size: .88rem; display: flex; flex-direction: column; gap: 4px; }
.det ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.det .k { display: inline-block; min-width: 6.5em; color: var(--ink-2); font-size: .6rem; }
.heart { background: none; border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; color: var(--ink-2); font-size: .82rem; transition: all .15s; }
.heart:hover { border-color: var(--mauve); color: var(--mauve); }
.heart.on { color: var(--on-accent); background: var(--mauve); border-color: var(--mauve); }
.hrow { display: flex; align-items: center; gap: 8px; }
.hearts-names { font-family: var(--f-hand); font-size: 1.12rem; color: var(--mauve); }

/* ---------- decisions: onyx hard cards ---------- */
.dec { background: var(--onyx); background-image: none; color: #ECE9E2; border-color: var(--onyx); padding-top: 18px; --ink: #ECE9E2; --ink-2: #A6B0AA; --rule: #24332D; --line: #2F3F38; --link: #9CC4A3; --hl: #2A231B; }
.dec header > span { font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--almond); padding-top: 6px; }
.dec .note { color: #D9D4CA; }
.dec input { background: #14211C; color: #ECE9E2; border-color: #2F3F38; }
.dec .heart { border-color: #3A4B44; color: #A6B0AA; }
.dec .heart.on, .dec .heart:hover { background: var(--mauve); border-color: var(--mauve); color: #FBFAF7; }
.dec .hearts-names { color: #E7A6AD; }
.dec .ctext { color: #ECE9E2; }
.opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.opts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--rule); }
.opts li.chosen .olabel { color: var(--almond); }
.olabel { font-family: var(--f-display); font-size: 1.18rem; font-weight: 500; }
.oacts { display: flex; gap: 10px; align-items: center; }
.oacts .link { font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.stamp { position: absolute; top: -22px; right: -14px; z-index: 2; width: 78px; height: 78px; background: var(--onyx); border-radius: 50%; display: grid; place-items: center; font-size: .56rem; color: var(--mauve);
  border: 1.5px solid var(--mauve); outline: 1px dashed color-mix(in srgb, var(--mauve) 60%, transparent); outline-offset: -7px; rotate: 12deg; opacity: .9; pointer-events: none; }
.dec.decided header > span { visibility: hidden; }
form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
form.inline input:not(.qtyin) { flex: 1; min-width: 0; }
.qtyin { width: 5.5em; }

/* ---------- weeks: the ledger ---------- */
.week { margin-bottom: 36px; }
.week > h2 { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 1.9rem; }
.week > h2 > .muted { font-family: var(--f-body); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.illo-orange { width: 22px; height: 22px; --illo: var(--peach); }
.spans { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.spanchip { background: var(--card-2); border: 1px dashed var(--almond); padding: 6px 12px; text-align: left; display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.spanchip .muted { font-family: var(--f-mono); font-size: .68rem; }
.days { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.dayrow { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid var(--rule); min-height: 46px; }
.dayrow:first-child { border-top: 0; }
.dayrow.empty { min-height: 32px; }
.dayrow.today { box-shadow: inset 3px 0 0 var(--mauve); }
.dayrow.today .dlabel b { color: var(--mauve); }
.dayrow.event { background: linear-gradient(90deg, var(--hl), transparent 75%); }
.dayrow.over { outline: 1px dashed var(--mauve); outline-offset: -3px; }
.dlabel { background: none; border: 0; border-right: 1px solid color-mix(in srgb, var(--almond) 45%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-2); padding: 4px; }
.dlabel span { font-size: .56rem; }
.dlabel b { font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; color: var(--ink); line-height: 1; }
.dayrow.empty .dlabel { flex-direction: row; gap: 6px; }
.dayrow.empty .dlabel b { font-size: 1rem; }
.dlabel:hover b { color: var(--mauve); }
.chips { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px; min-width: 0; }
.chip { display: flex; gap: 8px; align-items: center; min-width: 0; }
.chip.done { opacity: .45; }
.chip.done .chipbtn { text-decoration: line-through; }
.chip.clash .chipbtn { color: var(--bad); }
.chip.dragging { opacity: .25; }
.chipbtn { background: none; border: 0; padding: 3px 0; text-align: left; min-width: 0; overflow-wrap: anywhere; display: inline-flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.chipbtn:hover { color: var(--link); }
.ctime { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 4.4em; }
.grip { cursor: grab; color: var(--line); touch-action: none; user-select: none; padding: 2px; letter-spacing: -2px; }
.chip:hover .grip { color: var(--ink-2); }
.ghost { position: fixed; z-index: 50; pointer-events: none; background: var(--card-2); border: 1px solid var(--almond); padding: 5px 12px; box-shadow: 0 12px 28px rgb(0 0 0 / .2); transform: rotate(-1.5deg); }
.earlier { margin-bottom: 20px; }
.earlier summary { border: 0; }

/* ---------- day view ---------- */
.daynav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; }
.quick button { font-size: .58rem; background: var(--card-2); border: 1px solid var(--line); padding: 6px 10px; color: var(--ink-2); }
.quick button.on { border-color: var(--mauve); color: var(--mauve); }
.dayh { margin-bottom: 8px; font-size: 2.4rem; }
.clashes { border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--card)); padding: 12px 16px; margin-bottom: 14px; color: var(--bad); }
.clashes b { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.clashes ul { margin: 6px 0 0; padding-left: 18px; }
p.ok.small { font-family: var(--f-hand); font-size: 1.2rem; margin-bottom: 12px; }
.anytime { margin-bottom: 16px; }
.anytime h3 { font-family: var(--f-body); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.daygrid-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.daygrid { display: grid; grid-template-columns: 58px repeat(4, minmax(140px, 1fr)); min-width: 620px; }
.lanehead { position: sticky; top: 0; height: 40px; display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--ink-2); border-bottom: 1px solid color-mix(in srgb, var(--almond) 45%, transparent); background: var(--card); z-index: 2; }
.lane { border-left: 1px solid var(--rule); }
.lanebody { position: relative; background-image: linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 100% 78px; }
.hours .lanebody { background: none; }
.hours span { position: absolute; right: 8px; transform: translateY(-50%); font-family: var(--f-mono); font-size: .62rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours span:first-child { transform: none; }
.blk { position: absolute; padding: 4px 8px; font-size: .8rem; line-height: 1.25; overflow: hidden; color: var(--ink);
  background: color-mix(in srgb, var(--c, var(--ink-2)) 12%, var(--card-2)); border: 1px solid color-mix(in srgb, var(--c, var(--ink-2)) 30%, transparent); border-left: 3px solid var(--c, var(--ink-2)); }
.blk.drag { cursor: grab; touch-action: none; user-select: none; }
.blk.drag:hover { border-color: var(--c); }
.blk.dragging { cursor: grabbing; z-index: 10; box-shadow: 0 12px 26px rgb(0 0 0 / .22); transform: rotate(-.6deg); }
.blk.clash { border-color: var(--bad); border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, var(--card-2)); }
.blk.done { opacity: .45; }
.btime { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.btitle { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; line-height: 1.05; }
.bpan { font-family: var(--f-hand); font-size: 1rem; color: var(--ink-2); line-height: 1.05; }
.blk.short { display: flex; flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap; gap: 0 6px; align-items: baseline; padding-block: 2px; }
.blk.short .bpan { display: none; }
.rs { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.tt-bg-plan { --c: var(--t-plan); } .tt-bg-shop { --c: var(--t-shop); } .tt-bg-prep { --c: var(--t-prep); } .tt-bg-cook { --c: var(--t-cook); }
.tt-bg-store { --c: var(--t-store); } .tt-bg-defrost { --c: var(--t-defrost); } .tt-bg-decor { --c: var(--t-decor); } .tt-bg-hosting { --c: var(--t-hosting); }

/* ---------- pans ---------- */
.tablewrap { overflow-x: auto; }
table.map { border-collapse: collapse; width: 100%; min-width: 580px; font-size: .9rem; }
.map th { color: var(--ink-2); text-align: left; padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--almond) 45%, transparent); font-size: .6rem; }
.map td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.map td:first-child { font-family: var(--f-display); font-size: 1.08rem; font-weight: 500; }
.map select, .map input { width: 100%; }
.panlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.panlist li { padding: 10px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; }
.panlist li.clash b { color: var(--bad); }
.prow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.prow b { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; }
.prow .muted { font-family: var(--f-mono); font-size: .68rem; }
.prow .link { margin-left: auto; font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
/* kraft gift tags on twine */
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 18px; padding: 18px 4px 6px; }
.label { position: relative; background: var(--kraft); color: var(--kraft-ink); padding: 32px 16px 16px; min-height: 118px; display: flex; flex-direction: column; gap: 4px;
  clip-path: polygon(16% 0, 84% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); font-size: .82rem; line-height: 1.3; filter: drop-shadow(0 8px 10px rgb(12 23 19 / .18)); }
.label::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .18; pointer-events: none; }
.label .hole { position: absolute; top: 12px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kraft-ink) 25%, transparent); }
.label b { font-family: var(--f-display); font-weight: 600; font-size: 1.22rem; line-height: 1.05; }
.label .ut { font-family: var(--f-hand); font-size: 1.15rem; }
.label:nth-child(3n+1) { rotate: -1.5deg; } .label:nth-child(3n+2) { rotate: 1deg; } .label:nth-child(3n) { rotate: -.4deg; }

/* ---------- shopping ---------- */
.shop { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.shop li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.shop li > span:first-child { grid-column: 1 / 3; }
.shop li.got label, .shop li.got > span:first-child { text-decoration: line-through; text-decoration-color: var(--peach); color: var(--ink-2); }
.qty { font-family: var(--f-hand); font-size: 1.15rem; color: var(--ink-2); text-align: right; line-height: 1; }
.for { grid-column: 2 / -1; font-size: .7rem; color: var(--ink-2); }

/* ---------- guests ---------- */
.guests { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.guests li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.guests li b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; }
.guests .link { margin-left: auto; font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.diets { display: flex; gap: 4px; flex-wrap: wrap; }
.diet { font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--green); border: 1px solid currentColor; padding: 1px 7px; }
.copyrow { display: flex; gap: 6px; } .copyrow input { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: .8rem; }
.picker .pickgrid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pickbtn { font-family: var(--f-display); font-size: 1.35rem; background: var(--card); border: 1px solid var(--line); padding: 16px 28px; box-shadow: var(--shadow); }
.pickbtn:hover { border-color: var(--mauve); color: var(--mauve); }

/* ---------- modal ---------- */
.overlay { position: fixed; inset: 0; background: rgb(12 23 19 / .5); z-index: 40; }
.modal { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); padding: 26px; box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
.modal form, .modal > div { display: flex; flex-direction: column; gap: 12px; }
.modal h2 { font-size: 1.9rem; }
.fld { display: flex; flex-direction: column; gap: 4px; border: 0; padding: 0; margin: 0; min-width: 0; flex: 1; }
.fld > label, .fld > legend { color: var(--ink-2); font-size: .6rem; }
.frow { display: flex; flex-wrap: wrap; gap: 12px; }
.frow .fld { min-width: 140px; }
.checks { display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow-y: auto; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--line); }
.checks.row { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; max-height: none; border: 0; padding: 0; }
.mbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.mcomments { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--onyx); color: #ECE9E2; font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 11px 20px; transition: .2s; pointer-events: none; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad { background: var(--mauve); }

@media (max-width: 560px) {
  .tdate { min-width: 0; }
  .panel { padding: 18px; }
  .card { padding-inline: 18px; }
  .rc-label { margin-inline: -18px; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .label, .ghost, .blk.dragging, .seal, .stamp { rotate: none !important; transform: none !important; } }
@media print {
  body { background: #fff; }
  body.printing-labels .band, body.printing-labels .tabs, body.printing-labels .foot, body.printing-labels .demobar,
  body.printing-labels main > *:not(.panel:last-child) { display: none !important; }
  body.printing-labels .panel:last-child { border: 0; box-shadow: none; background: none; }
  body.printing-labels .panel:last-child > *:not(.labels) { display: none !important; }
  body.printing-labels .label { filter: none; rotate: none; break-inside: avoid; border: 1px solid #999; }
}


/* ================= pantry texture pass ================= */
/* painted shiplap: planks with grooves and a whisper of wood grain under the paper grain */
body { background-image:
  repeating-linear-gradient(to bottom, transparent 0 calc(var(--plank) - 2px), var(--groove-dark) calc(var(--plank) - 2px) calc(var(--plank) - 1px), var(--groove-light) calc(var(--plank) - 1px) var(--plank)),
  var(--wood),
  linear-gradient(var(--grain-mix), var(--grain-mix)), var(--grain);
  background-size: auto, 1600px 400px, auto, 220px 220px; background-attachment: fixed, fixed, scroll, scroll; }
.tabs { background-image: linear-gradient(var(--grain-mix), var(--grain-mix)), var(--grain); }

/* folded paper: each surface carries a crease or two, lit from above */
.panel { background-image:
  linear-gradient(to right, transparent calc(50% - 1px), var(--crease-dark) calc(50% - 1px) 50%, var(--crease-light) 50% calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(to right, var(--crease-shade) 0 50%, transparent 50%),
  linear-gradient(var(--card-grain-mix), var(--card-grain-mix)), var(--grain); }
.card { background-image:
  linear-gradient(to bottom, transparent calc(36% - 1px), var(--crease-dark) calc(36% - 1px) 36%, var(--crease-light) 36% calc(36% + 1px), transparent calc(36% + 1px)),
  linear-gradient(to bottom, var(--crease-shade) 0 36%, transparent 36%),
  linear-gradient(115deg, transparent 0 78%, var(--crease-shade) 78% 100%),
  linear-gradient(var(--card-grain-mix), var(--card-grain-mix)), var(--grain); }
.days, .daygrid-wrap { background-image:
  linear-gradient(to right, transparent calc(62% - 1px), var(--crease-dark) calc(62% - 1px) 62%, var(--crease-light) 62% calc(62% + 1px), transparent calc(62% + 1px)),
  linear-gradient(var(--card-grain-mix), var(--card-grain-mix)), var(--grain); }
.dec { background-image:
  linear-gradient(to bottom, transparent calc(40% - 1px), rgb(0 0 0 / .45) calc(40% - 1px) 40%, rgb(255 255 255 / .05) 40% calc(40% + 1px), transparent calc(40% + 1px)),
  linear-gradient(var(--grain-mix), var(--grain-mix)), var(--grain); background-blend-mode: normal; }
.dec { --grain-mix: rgba(12, 23, 19, 0.93); }

/* letterpress frame inside the onyx band */
.band { box-shadow: inset 0 0 0 14px var(--band), inset 0 0 0 15px color-mix(in srgb, var(--almond) 38%, transparent), inset 0 0 0 19px var(--band), inset 0 0 0 20px color-mix(in srgb, var(--almond) 18%, transparent); }
.band::after { border-top: 0; height: 9px; background:
  linear-gradient(color-mix(in srgb, var(--almond) 55%, transparent), color-mix(in srgb, var(--almond) 55%, transparent)) left 50% / calc(50% - 16px) 1px no-repeat,
  linear-gradient(color-mix(in srgb, var(--almond) 55%, transparent), color-mix(in srgb, var(--almond) 55%, transparent)) right 50% / calc(50% - 16px) 1px no-repeat,
  radial-gradient(circle, color-mix(in srgb, var(--almond) 80%, transparent) 2.5px, transparent 3px) center / 9px 9px no-repeat; }
.band .illo-vine { --illo: color-mix(in srgb, var(--almond) 42%, transparent); width: min(30vw, 380px); aspect-ratio: 600 / 170; left: -24px; top: auto; bottom: 26px; transform: rotate(-4deg); }
@media (max-width: 760px) { .band .illo-vine { width: 260px; left: -70px; bottom: auto; top: 18px; opacity: .6; } }

/* rubber-stamp ink: uneven, slightly worn */
.stamp, .seal, .rc-label .no, .stampbox { -webkit-mask-image: var(--inkmask); mask-image: var(--inkmask); -webkit-mask-size: 160px; mask-size: 160px; }
.seal { border-width: 1.5px; outline-style: dashed; }
.seal::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px dotted color-mix(in srgb, var(--almond) 40%, transparent); }
.stamp { border-width: 2px; font-weight: 600; }
.rc-label { align-items: center; }
.rc-label .no { display: inline-block; color: var(--peach-ink); border: 1.5px solid currentColor; padding: 3px 7px 2px; rotate: -2.5deg; font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; }

/* double rules: printed-stamp line work */
.card.recipe::after { border: 3px double color-mix(in srgb, var(--almond) 34%, transparent); inset: 6px; }
.rc-label { border-bottom: 3px double var(--line); }
.tabs { border-bottom: 3px double var(--line); }
.tabs button.on { border-bottom: 3px double var(--mauve); }
.menucat > h2, .week > h2 { gap: 14px; }
.menucat > h2::after { content: ""; flex: 1; height: 5px; border-top: 1px solid color-mix(in srgb, var(--almond) 55%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--almond) 55%, var(--line)); }
.menucat > h2 .illo-flourish { width: 104px; height: 44px; --illo: var(--green); opacity: .75; }
.card footer, details { border-top-style: dashed; }
.lanehead, .map th { border-bottom: 3px double color-mix(in srgb, var(--almond) 45%, transparent); }
.foot { box-shadow: inset 0 14px 0 0 var(--band), inset 0 15px 0 0 color-mix(in srgb, var(--almond) 30%, transparent); }
.foot .illo-flourish { width: 150px; height: 64px; --illo: color-mix(in srgb, var(--almond) 70%, transparent); }
.empty .illo-sprig { width: 30px; height: 66px; }
.label { background-image: linear-gradient(to bottom, transparent 58%, rgb(58 42 30 / .08) 58% calc(58% + 1px), rgb(255 255 255 / .25) calc(58% + 1px) calc(58% + 2px), transparent calc(58% + 2px)); }

/* light / dark switch, top-left of the band */
.theme-toggle { position: absolute; z-index: 2; top: 26px; left: 30px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--almond); border: 1px solid color-mix(in srgb, var(--almond) 45%, transparent); font-size: .95rem; line-height: 1; transition: background .15s, color .15s; }
.theme-toggle:hover { background: color-mix(in srgb, var(--almond) 16%, transparent); color: var(--band-ink); }
@media (max-width: 760px) { .theme-toggle { top: 22px; left: 22px; width: 30px; height: 30px; } }

/* show / hide switch on recipe cards (host only) */
.switch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 34px; height: 18px; border-radius: 99px; background: var(--line); transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card-2); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .2s; }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--mauve); outline-offset: 2px; }
.switch .slbl { font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.card footer .comments { order: 3; }
.card.hiddenish { opacity: .62; border-style: dashed; }
.card.hiddenish:hover { opacity: .9; }

/* ---------- Kate's hand-drawn rosemary bundle (portrait, 210 × 270) ---------- */
.band .illo-vine { width: clamp(96px, 13vw, 160px); height: auto; aspect-ratio: 210 / 270; left: clamp(10px, 4vw, 56px); top: auto; bottom: 30px; transform: rotate(-7deg); opacity: 1; }
@media (max-width: 760px) { .band .illo-vine { width: 74px; left: 6px; top: 12px; bottom: auto; opacity: .7; } }
.menucat > h2 .illo-flourish { width: 36px; height: 46px; }
.foot .illo-flourish { width: 54px; height: 70px; }
.empty .illo-sprig { width: 46px; height: 60px; }
.band .illo-vine { width: clamp(80px, 9vw, 124px); left: clamp(70px, 7vw, 110px); bottom: 26px; }
@media (max-width: 760px) { .band .illo-vine { width: 54px; left: 8px; top: auto; bottom: 14px; opacity: .55; } }