/* the two main fonts live in the app now (they used to come from Google), so the look is the same with no signal */
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/YoungSerif-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/YoungSerif-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#fdf3dc; --card:#fffaf0; --ink:#14323a; --muted:#5f7c82; --line:#eadfc2; --line-strong:#b9c9c6;
  --accent:#e0334c; --accent-soft:#ffe3d8; --brass:#12706c; --danger:#b8283d;
  --surface:#fffaf0; --accent-hover:#c42a41; --err-bg:#fde6e3; --err-line:#e8a9a4; --tag-line:#9fd8d4; --desc:#37565d; --heart:#e0334c;
  --pop:#25b5b0; --onpop:#fff; --edge:#14323a; --offset:4px 4px 0 var(--edge); --offset-sm:2px 2px 0 var(--edge); --bw:2.5px; --rad:12px;
  --serif:"Young Serif",Georgia,"Times New Roman",serif; --sans:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
/* the `font:` shorthand silently resets numeral style, so this must be forced everywhere (Cormorant's default old-style digits look uneven) */
*,*::before,*::after{font-variant-numeric:lining-nums !important;font-feature-settings:"lnum" 1 !important}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
[hidden]{display:none!important}
.serif{font-family:var(--serif);font-weight:500}

/* masthead */
.masthead{text-align:center;padding:34px 16px 0;border-bottom:1px solid var(--line);background:var(--card)}
.brand h1{margin:0 0 14px;font:400 4.4rem/1.1 "Parisienne","Snell Roundhand","Apple Chancery",cursive;letter-spacing:0;color:var(--accent)}
.brand p{margin:0 0 18px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
nav{display:flex;justify-content:center;gap:34px}
nav button{white-space:nowrap;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);padding:10px 2px;font:500 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
@media (hover:hover){nav button:hover{color:var(--ink);background:none}}
nav button.active{color:var(--accent);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--brass);color:#fff;font-size:.68rem;letter-spacing:0;line-height:18px}

.notice{background:var(--accent-soft);border:1px solid var(--line-strong);border-left:3px solid var(--brass);padding:10px 16px;margin-bottom:20px;font-size:.9rem}
.notice .link{font-weight:600}
main{max-width:1120px;margin:0 auto;padding:28px 20px 60px}

/* controls */
input,select,button{font:inherit}
input[type=text],input[type=search],input[type=date],select{padding:11px 14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--card);color:var(--ink);min-width:0}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
button{padding:10px 20px;border:1px solid var(--accent);border-radius:2px;background:var(--accent);color:#fff;cursor:pointer;font-weight:500;letter-spacing:.04em}
@media (hover:hover){button:hover{background:var(--accent-hover)}}
button:disabled{opacity:.6;cursor:wait}
button.link{background:none;border:0;padding:6px 4px;color:var(--accent);letter-spacing:.04em}
@media (hover:hover){button.link:hover{background:none;text-decoration:underline}}
button.link.danger{color:var(--danger)}
button.ghost{background:transparent;color:var(--accent)}
@media (hover:hover){button.ghost:hover{background:var(--accent-soft)}}
.extract{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}.extract input{min-width:200px}.extract input{flex:1;font-size:1rem}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}.bar h2{margin:0;font-size:1.7rem;font-weight:600}.spacer{flex:1}
.page-title{font-size:2rem;margin:0 0 16px}
.muted{color:var(--muted)}
.error{background:var(--err-bg);border:1px solid var(--err-line);border-left:3px solid var(--danger);color:var(--danger);padding:11px 16px;margin-bottom:20px}

/* collection: a list with thumbnails */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.toolbar input{flex:1}
.sort{display:flex;align-items:center;gap:8px;flex:none}
.sort span{font:600 .65rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.sort select{padding:11px 12px}
@media (max-width:560px){.toolbar{flex-wrap:wrap}.sort{width:100%}.sort select{flex:1}}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:flex;gap:14px;align-items:center;padding:12px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.row:focus-visible{background:var(--accent-soft);outline:none}
@media (hover:hover){.row:hover{background:var(--accent-soft)}}
.row img,.row .thumb{width:64px;height:64px;object-fit:cover;background:var(--line);flex:none;border-radius:1px;display:block}
.row-body{min-width:0}
.row .t{font:600 1.3rem/1.15 var(--serif)}
.row small{display:block;margin-top:3px;color:var(--muted);font-size:.8rem}
.list .empty-list{color:var(--muted);font:italic 1.35rem var(--serif);padding:30px 6px;border-bottom:0}
.empty{color:var(--muted);font:italic 1.35rem var(--serif);padding:30px 6px}

/* the recipe card: an overlay above whichever tab is open */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(38,35,31,.5);overflow-y:auto;overscroll-behavior:contain;display:flex;justify-content:center;align-items:flex-start;padding:28px 16px 40px}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:860px}
.sheet-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;height:0}
.bar-actions{display:flex;gap:8px}
.close{position:relative;top:calc(10px + var(--inset-top, 0px));margin:0 10px;width:40px;height:40px;padding:0;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);font-size:1.5rem;line-height:1;box-shadow:0 2px 8px rgba(38,35,31,.15)}
.close:hover{background:var(--accent-soft)}
body.noscroll{overflow:hidden}
.overlay .recipe{min-height:0}
@media (max-width:760px){.overlay{padding:0;background:var(--card)}.overlay .recipe{border:0;min-height:100vh;padding-top:calc(22px + var(--inset-top, 0px));padding-bottom:calc(22px + var(--inset-bottom, 0px))}.overlay .recipe>.hero.bleed{width:calc(100% + 36px);margin:calc(-22px - var(--inset-top, 0px)) -18px 20px;max-height:340px}}

/* recipe */
.recipe{background:var(--card);border:1px solid var(--line);padding:34px 38px;min-height:260px}
.recipe h2{font:600 2.8rem/1.05 var(--serif);margin:0 0 8px;color:var(--ink)}
.byline{color:var(--muted);font-size:.85rem}.byline a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.hero{width:100%;max-height:380px;object-fit:cover;margin:22px 0 4px}
.recipe>.hero.bleed{width:calc(100% + 76px);max-width:none;max-height:440px;margin:-34px -38px 26px;display:block}
.form .hero{margin:8px 0}
.facts{display:flex;flex-wrap:wrap;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{flex:1;min-width:110px;padding:12px 14px;border-right:1px solid var(--line)}.facts div:last-child{border-right:0}
.facts dt{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}.facts dd{margin:2px 0 0;font:600 1.3rem var(--serif)}
.desc{font:italic 1.3rem/1.5 var(--serif);color:var(--desc);margin:0 0 6px}
.inline-more{display:inline;padding:0;margin:0;border:0;line-height:inherit;vertical-align:baseline;font:inherit;font-style:normal;font-size:.85rem;letter-spacing:.02em}
.units{display:inline-flex;margin-top:14px;border:1px solid var(--line-strong)}
.units button{background:none;color:var(--muted);border:0;padding:4px 14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.units button.on{background:var(--accent);color:#fff}
.cols{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:38px;margin-top:8px}
@media (max-width:1000px){.cols{grid-template-columns:1fr;gap:0}}
.recipe h3{margin:26px 0 12px;font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);padding-bottom:8px;border-bottom:1px solid var(--line)}
ul.ing{list-style:none;padding:0;margin:0}.ing li{padding:6px 0;border-bottom:1px dotted var(--line)}
.ing label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.ing input{margin-top:5px;accent-color:var(--accent)}
.ing input:checked+span{color:var(--muted);text-decoration:line-through}
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;font:500 2rem/1 var(--serif);color:var(--brass)}
dl.nut{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 24px;margin:0}
dl.nut div{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px dotted var(--line)}dl.nut dt{color:var(--muted)}dl.nut dd{margin:0;text-align:right}
@media (max-width:560px){dl.nut{grid-template-columns:1fr}}
.src{margin-top:24px;font-size:.78rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.actions .link{margin-left:auto}.actions .link+.link{margin-left:0}
.planpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* write / edit form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}.form h2{grid-column:1/-1;margin:0}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}.field.wide,.form .wide{grid-column:1/-1}
.field>span{font:600 .65rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.field input[type=text],.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;background:var(--card);color:var(--ink);font:inherit}
.field textarea{resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.form .actions{border:0;padding-top:4px;margin-top:0}
@media (max-width:760px){.form{grid-template-columns:1fr}}
.error .link{color:inherit;font-weight:600;text-decoration:underline;padding:0 4px}

/* settings */
.card{background:var(--card);border:1px solid var(--line);padding:6px 24px 14px;margin-bottom:18px;max-width:760px}
.card h3{margin:18px 0 6px;font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.card>p{margin:6px 0 4px}
.setting{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting:last-of-type{border-bottom:0}.setting p{margin:2px 0 0;font-size:.85rem}.setting strong{font-weight:600}
.stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}.check{font-size:.8rem;color:var(--muted);cursor:pointer}
.setting .units{margin-top:0;flex:none}
@media (max-width:600px){.setting{flex-direction:column;align-items:flex-start}.stack{align-items:flex-start}.card{padding:6px 16px 14px}}

/* planner */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
@media (max-width:1000px){.week{grid-template-columns:1fr 1fr}}@media (max-width:560px){.week{grid-template-columns:1fr}}
.day{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line-strong);padding:10px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.day.today{border-top-color:var(--brass)}
.day h4{margin:0;font:600 1.3rem var(--serif)}.day h4 small{font:400 .72rem var(--sans);color:var(--muted);letter-spacing:.08em}
.meal{border-left:2px solid var(--brass);padding:3px 4px 3px 8px;background:var(--paper);display:flex;justify-content:space-between;gap:4px;align-items:flex-start;line-height:1.3}
.meal a{cursor:pointer;font:600 1.1rem/1.15 var(--serif)}.meal a:hover{color:var(--accent)}
.meal .slot{display:block;font:500 .75rem var(--sans);letter-spacing:.03em;color:var(--brass)}
.meal button{background:none;border:0;color:var(--muted);padding:0 4px;font-size:1.1rem}.meal button:hover{background:none;color:var(--danger)}
.day form{margin-top:auto;display:grid;gap:4px}.day select{padding:6px;font-size:.78rem;width:100%}

/* shopping */

@media (max-width:760px){
  .split{grid-template-columns:1fr}.extract{flex-direction:column}.recipe{padding:22px 18px}.recipe h2{font-size:2rem}
  .brand h1{font-size:3.4rem}nav{gap:20px}
}
@media print{.masthead,main,.sheet-bar,.actions,.units{display:none}.overlay{position:static;background:none;padding:0;display:block}.recipe{border:0;padding:0}}

/* manual-entry toggle inside the form grid */
.form .units.wide{justify-self:start;margin:0 0 4px}

/* start cooking button */
.cookbtn{display:inline-flex;align-items:center;gap:8px;margin:14px 14px 4px 0;padding:12px 26px;font-size:1rem}

/* cooking mode */
.cook{position:fixed;inset:0;z-index:50;background:var(--paper);display:flex;flex-direction:column}
.cook[hidden]{display:none}
.cook-top{display:flex;align-items:center;gap:12px;padding:calc(12px + var(--inset-top, 0px)) 14px 12px;border-bottom:1px solid var(--line);background:var(--card)}
.cook-top .close{position:static;flex:none}
.cook-title{flex:1;min-width:0;font:600 1.2rem/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cook-body{flex:1;overflow-y:auto;padding:26px 22px 14px;display:flex;flex-direction:column;justify-content:flex-start;max-width:820px;width:100%;margin:0 auto}
/* centred when there is room, but never pushed off the top when there is not (a step with a long list of ingredients) */
.cook-body > :first-child{margin-top:auto}
.cook-body > :last-child{margin-bottom:auto}
.cook-step{font:500 clamp(1.7rem,4.6vw,2.6rem)/1.35 var(--serif);color:var(--ink)}
.cook-num{display:block;margin-bottom:10px;font:600 .75rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.cook-timerbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cook-timerbtns button{padding:12px 18px;font-size:1.05rem}
.cook-timers{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 8px;justify-content:center}
.chip-timer{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line-strong);padding:6px 6px 6px 14px;font-size:1rem}
.chip-timer b{font-variant-numeric:tabular-nums lining-nums;font-size:1.2rem}
.chip-timer button{background:none;border:0;color:var(--muted);padding:2px 10px;font-size:1.2rem}
.chip-timer.done{background:var(--brass);color:#fff;border-color:var(--brass);animation:pulse 1s infinite}
.chip-timer.done button{color:#fff}
@keyframes pulse{50%{opacity:.7}}
.cook-nav{display:flex;align-items:center;gap:12px;padding:12px 14px calc(14px + var(--inset-bottom, 0px));border-top:1px solid var(--line);background:var(--card)}
.cook-nav button{flex:1;padding:18px 10px;font-size:1.15rem}
.cook-progress{flex:none;min-width:84px;text-align:center;font-size:.85rem;color:var(--muted)}
.cook-panel{position:absolute;top:calc(61px + var(--inset-top, 0px));left:0;right:0;bottom:0;z-index:3;background:var(--card);overflow-y:auto;padding:18px 22px 30px}
.cook-panel[hidden]{display:none}
.cook-panel h3{margin:0 0 10px;font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.cook-panel li{padding:10px 0;font-size:1.15rem;list-style:none;border-bottom:1px dotted var(--line)}
.cook-panel ul{padding:0;margin:0;max-width:700px;margin:auto}
.cook-panel label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.cook-panel input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent)}
.cook-panel input:checked+span{color:var(--muted);text-decoration:line-through}

/* export shopping list */
.export{background:var(--card);border:1px solid var(--line);padding:14px 18px;margin-bottom:16px}
.export pre{margin:0 0 10px;white-space:pre-wrap;font:.95rem/1.6 var(--sans);max-height:260px;overflow:auto;user-select:text}
.export .actions{border:0;margin:0;padding:0}

@media (max-width:480px){nav{gap:12px}nav button{letter-spacing:.1em;font-size:.74rem}.badge{margin-left:3px}}

/* recipe list: filters, favourites, tags */
.filters{display:flex;gap:10px;align-items:center;margin:-6px 0 16px;flex-wrap:wrap}
.chip-btn{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);padding:7px 14px;font-size:.85rem;letter-spacing:.02em}
.chip-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.filters select{padding:8px 10px;font-size:.85rem}
.fav{color:var(--heart);font-size:.9em}
.row-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--tag-line);padding:2px 10px;font-size:.8rem;border-radius:999px}
.tag.small{padding:0 8px;font-size:.7rem}
.tag button{background:none;border:0;color:var(--accent);padding:0 0 0 2px;font-size:1rem;line-height:1}
@media (hover:hover){.tag button:hover{background:none;color:var(--danger)}}

/* on the card: favourite, stars, tags, notes */
.usermeta{margin:6px 0 4px}
.usermeta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.heart{background:none;border:1px solid var(--line-strong);color:var(--muted);padding:5px 14px;font-size:.85rem}
.heart.on{color:var(--heart);border-color:var(--heart)}
@media (hover:hover){.heart:hover{background:var(--accent-soft)}}
.stars{display:flex}
.star{background:none;border:0;padding:2px 3px;font-size:1.5rem;line-height:1;color:var(--line-strong)}
.star.on{color:var(--brass)}
@media (hover:hover){.star:hover{background:none;color:var(--brass)}}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.tag-input{border:1px dashed var(--line-strong);background:transparent;padding:3px 10px;font-size:.8rem;border-radius:999px;width:110px;color:var(--ink)}
.tag-input:focus{outline:none;border-color:var(--accent);background:var(--card)}
.notes textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;background:var(--card);color:var(--ink);font:inherit;line-height:1.5;resize:vertical}
.notes-status{font-size:.8rem}

/* scale servings */
.scaler{display:inline-flex;align-items:center;gap:8px}
.scaler .n{min-width:1.6ch;text-align:center}
.scaler .step{width:30px;height:30px;padding:0;border-radius:50%;background:var(--card);color:var(--accent);border:1px solid var(--line-strong);font-size:1.15rem;line-height:1}
@media (hover:hover){.scaler .step:hover{background:var(--accent-soft)}}
.scaler .reset{font-size:.8rem;padding:0 4px}

/* shopping list groups + import */
.export textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);font:inherit;margin-bottom:10px;resize:vertical}

.thumb.ph{display:flex;align-items:center;justify-content:center;font:600 1.6rem var(--serif);color:var(--brass);background:var(--accent-soft)}

.tag-ideas{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.tag-idea{background:none;border:1px dashed var(--line-strong);border-radius:999px;padding:2px 10px;font-size:.85rem;color:var(--muted);cursor:pointer}
@media (hover:hover){.tag-idea:hover{border-color:var(--brass);color:var(--ink);background:none}}

/* grid view of the recipe archive */
.view-toggle{margin-left:auto}
.list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(140px,calc((100% - 48px) / 4)),1fr));gap:18px 16px;padding-top:4px}   /* never more than four across, until there is a wide web layout */
.list.grid .row{flex-direction:column;align-items:stretch;gap:8px;padding:0;border:0;background:none}
.list.grid .row img,.list.grid .row .thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:2px}
.list.grid .row .thumb.ph{font-size:2.4rem}
.list.grid .row .t{font-size:1.2rem}
.list.grid .row-body{padding:0 2px}
.list.grid .empty-list{grid-column:1/-1}
@media (hover:hover){.list.grid .row:hover{background:none}.list.grid .row:hover .t{color:var(--accent)}}

.close.heart-btn{font-size:1.4rem;color:var(--muted)}
.close.heart-btn.on{color:var(--heart);border-color:var(--heart)}
.close.del-btn{color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.bar-actions .close{margin:0 0 0 0}.bar-actions{margin-right:10px}
@media (hover:hover){.close.del-btn:hover{color:var(--heart);border-color:var(--heart)}}

/* options tray: on a phone the card's actions slide up from the bottom behind one "Options" button */
.options-fab,.tray-backdrop,.tray-title,.tray{display:none}
@media (max-width:760px){
  .options-fab{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(16px + var(--inset-bottom, 0px));z-index:36;width:56px;height:56px;padding:0;background:var(--accent);color:#fff;border:0;border-radius:50%;box-shadow:0 4px 16px rgba(38,35,31,.3);transition:opacity .18s,transform .18s}
  .options-fab.away{opacity:0;pointer-events:none;transform:scale(.6)}
  .tray-backdrop{display:block;position:fixed;inset:0;z-index:37;background:rgba(38,35,31,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  .tray-backdrop.open{opacity:1;pointer-events:auto}
  .tray{display:block;position:fixed;left:0;right:0;bottom:0;z-index:38;background:var(--card);border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(38,35,31,.25);padding:14px 16px calc(18px + var(--inset-bottom, 0px));max-height:80vh;overflow-y:auto;transform:translateY(105%);transition:transform .22s ease;visibility:hidden}
  .tray.open{transform:none;visibility:visible}
  .tray-title{display:block;font:600 .75rem var(--sans, inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:8px}
  .tray .actions{flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:0;border:0}
  .tray .actions button,.tray .actions .link{width:100%;margin:0;text-align:center;padding:13px 14px;font-size:1rem}
  .tray .actions .link{background:none;border:1px solid var(--line-strong);text-decoration:none;color:var(--ink)}
  .tray .planpick{margin-top:10px;display:flex;flex-direction:column;gap:8px}
  .tray .planpick>*{width:100%}
  .tray .planpick[hidden]{display:none}
}
@media print{.options-fab,.tray-backdrop,.tray{display:none}}

/* ingredients / method tabs, at every width */
.rtabs{display:flex;margin:18px 0 6px;border-bottom:1px solid var(--line-strong);position:sticky;top:calc(58px + var(--inset-top, 0px));z-index:1;background:var(--card)}
.rtabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;padding:12px 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rtabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.cols[data-show]{display:block}
.cols[data-show="ing"] .col-met,.cols[data-show="met"] .col-ing{display:none}
.cols .col-ing>h3:first-child,.cols .col-met>h3:first-child{display:none}
@media print{.rtabs{display:none}.cols .col-ing,.cols .col-met{display:block!important}.cols .col-ing>h3:first-child,.cols .col-met>h3:first-child{display:block!important}}

/* ⋯ menu in the card's top corner: edit, re-fetch, print */
.close.more-btn{color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.card-menu{position:absolute;right:10px;top:calc(58px + var(--inset-top, 0px));min-width:170px;background:var(--card);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 8px 24px rgba(38,35,31,.25);padding:6px;display:flex;flex-direction:column;z-index:5}
.card-menu[hidden]{display:none}
.card-menu button{background:none;border:0;border-radius:6px;text-align:left;padding:11px 14px;font-size:.95rem;color:var(--ink);width:100%}
@media (hover:hover){.card-menu button:hover{background:var(--accent-soft)}}

/* top buttons float over the photo: see-through with a thin ring; ink flips light/dark with the picture behind them */
#card{--ink-l:var(--ink);--ink-r:var(--ink)}
#card[data-tone-left="light"]{--ink-l:#fff}
#card[data-tone-right="light"]{--ink-r:#fff}
.sheet-bar .close{background:transparent;border:1.5px solid currentColor;box-shadow:none;transition:color .2s}
#card-close{color:var(--ink-l)}
.bar-actions .close,.close.heart-btn,.close.del-btn,.close.more-btn{color:var(--ink-r)}
#card[data-tone-left="light"] #card-close,#card[data-tone-right="light"] .bar-actions .close{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.bar-actions .close.heart-btn.on{color:var(--heart)}
#card[data-tone-right="light"] .bar-actions .close.heart-btn.on{color:#fff}
@media (hover:hover){.sheet-bar .close:hover{background:rgba(127,127,127,.22)}.close.del-btn:hover{border-color:currentColor}}

.cookrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:14px}
.cookrow .cookbtn{margin:0}
.cookrow .units{margin:0 0 0 auto}

/* recipes as individual rounded cards */
.list{display:flex;flex-direction:column;gap:12px}
.list .row{background:var(--card);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:0 2px 6px rgba(38,35,31,.10),0 1px 2px rgba(38,35,31,.08);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.list .row img,.list .row .thumb{width:76px;height:76px;border-radius:10px}
.list .empty-list{background:none;border:0;box-shadow:none}
@media (hover:hover){.list .row:hover{background:var(--card);border-color:var(--brass);box-shadow:0 8px 20px rgba(38,35,31,.16)}}
.list .row:focus-visible{background:var(--card);border-color:var(--accent)}
.list.grid{display:grid}
.list.grid .row{padding:0;gap:0;align-items:stretch}
.list.grid .row img,.list.grid .row .thumb{border-radius:0;width:100%;height:auto;aspect-ratio:4/3}
.list.grid .row-body{padding:10px 12px 12px}
@media (hover:hover){.list.grid .row:hover{background:var(--card)}.list.grid .row:hover .t{color:var(--accent)}}

/* simpler card type, time + serves with icons along the bottom, white cards */
.list .row{background:var(--surface)}
.list .row .t{font:600 1.02rem/1.3 var(--sans);letter-spacing:.005em;color:var(--ink)}
.list .row small{font-size:.8rem;margin-top:2px}
.list .row-body{flex:1;align-self:stretch;display:flex;flex-direction:column}
.row-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:8px;color:var(--muted);font-size:.8rem}
.meta-item{display:inline-flex;align-items:center;gap:5px;line-height:1}
.meta-item svg{flex:none}
.list.grid .row .t{font-size:.98rem}
@media (hover:hover){.list .row:hover{background:var(--surface)}.list.grid .row:hover{background:var(--surface)}}
.list .row:focus-visible{background:var(--surface)}
.row-meta .fav{margin-left:auto;color:var(--heart);font-size:1rem;line-height:1}

/* search + filters: one search bar, then a single tidy row of pills */
.toolbar{margin-bottom:10px}
.toolbar input{width:100%;padding:13px 18px;border-radius:12px;background:var(--surface);font-size:1rem}
.filters{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin:0 0 16px}
.filters .chip-btn,.filters select{height:38px;border-radius:999px;padding:0 14px;font-size:.84rem;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);box-sizing:border-box}
.filters .chip-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.filters select{flex:1 1 0;min-width:0;padding:0 10px;text-overflow:ellipsis}
.filters #fav-filter{flex:none}
.filters .view-toggle{flex:none;width:38px;padding:0;margin-left:0;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.filters .chip-btn:hover,.filters select:hover{border-color:var(--brass)}.filters .chip-btn.on:hover{border-color:var(--accent)}}
/* favourite heart: a small badge over the photo, top left */
.thumb-wrap{position:relative;flex:none;display:block}
.list.grid .thumb-wrap{width:100%}
.fav-badge{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--heart);display:flex;align-items:center;justify-content:center;font-size:.72rem;line-height:1;box-shadow:0 1px 4px rgba(38,35,31,.3)}
.list.grid .fav-badge{top:8px;left:8px;width:26px;height:26px;font-size:.85rem}
.fav-badge,.list.grid .fav-badge{background:none;box-shadow:none;width:auto;height:auto;color:#d0463a;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.fav-badge{top:6px;left:7px;font-size:1.05rem}
.list.grid .fav-badge{top:9px;left:10px;font-size:1.3rem}

/* add a recipe: one rounded bar with the button inside, and a quiet link for manual entry */
.extract{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:22px;flex-wrap:nowrap}
.extract-bar{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:5px 5px 5px 6px;transition:border-color .15s,box-shadow .15s}
.extract-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.extract .extract-bar input{flex:1;min-width:0;border:0;background:transparent;padding:10px 12px;font-size:1rem;outline:none;box-shadow:none}
.extract .extract-bar input:focus{outline:none;border:0}
.extract-bar button{flex:none;border-radius:8px;padding:10px 20px;font-size:.92rem;margin:0}

.filters .icon-btn{flex:none;width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#search-row{margin:-4px 0 14px}
#search-row[hidden]{display:none}

@media (max-width:480px){.filters #fav-filter{width:38px;padding:0}.filters #fav-filter .lbl{display:none}.filters{gap:6px}}


/* shopping list: add bar, one quiet toolbar row, and each group as a rounded card */
.shop-bar{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.shop-bar #shop-summary{flex:1;min-width:0;font-size:.9rem}
.pill-select{height:38px;border-radius:999px;padding:0 12px;font-size:.84rem;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);box-sizing:border-box;flex:none}
.menu-wrap{position:relative;flex:none}
.menu-wrap .icon-btn{height:38px;border-radius:999px;background:var(--surface)}
.pop-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:8;min-width:170px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 24px rgba(38,35,31,.2);padding:6px;display:flex;flex-direction:column}
.pop-menu[hidden]{display:none}
.pop-menu button{background:none;border:0;border-radius:6px;text-align:left;padding:11px 14px;font-size:.95rem;color:var(--ink);width:100%}
.pop-menu button.danger{color:var(--danger)}
@media (hover:hover){.pop-menu button:hover{background:var(--accent-soft)}}
.shop-groups{display:flex;flex-direction:column;gap:14px}
.shop-group{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 2px 6px rgba(38,35,31,.08);overflow:hidden}
.shop-group header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 6px;font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.shop-group header .count{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 9px;letter-spacing:0;font-size:.72rem}
.shop-group ul{list-style:none;margin:0;padding:0}
.shop-group li{display:flex;gap:14px;align-items:center;padding:11px 12px 11px 16px;border-top:1px solid var(--line)}
.shop-group li:first-child{border-top:0}
.shop-group header + ul li:first-child{border-top:0}
.shop-group .item{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shop-group .txt{line-height:1.35}
.shop-group .from{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-group li.done .txt{text-decoration:line-through;color:var(--muted)}
.shop-group li.done .from{opacity:.6}
.shop-group li>button{background:none;border:0;color:var(--muted);padding:2px 8px;font-size:1.2rem;line-height:1}
@media (hover:hover){.shop-group li>button:hover{background:none;color:var(--danger)}}
.shop-group input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface);display:grid;place-content:center;cursor:pointer}
.shop-group input[type=checkbox]::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.shop-group input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.shop-group input[type=checkbox]:checked::after{opacity:1}
#import-panel,#export-panel{border-radius:14px;background:var(--surface)}

/* planner: tidy week navigation, and each day as a rounded card with a + to add a meal */
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.week-label{margin:0;font:600 1.5rem var(--serif);text-align:center;flex:1}
.week-nav .icon-btn{flex:none;width:38px;height:38px;padding:0;border-radius:50%;background:var(--surface);font-size:1.3rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.week-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}
.week-actions .chip-btn{height:38px;border-radius:999px;padding:0 16px;background:var(--surface);font-size:.84rem}
.week-actions #plan-to-shop{border-radius:999px;padding:0 18px;height:38px;font-size:.85rem}
.week{gap:14px}
.day{background:var(--surface);border:1px solid var(--line-strong);border-top:1px solid var(--line-strong);border-radius:14px;box-shadow:0 2px 6px rgba(38,35,31,.08);padding:12px 12px 12px;min-height:0;gap:8px}
.day.today{border-color:var(--brass);box-shadow:0 2px 8px rgba(150,115,60,.18)}
.day-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.day h4{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.today-tag{font:600 .6rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--brass);border-radius:999px;padding:2px 8px;align-self:center}
.day-add{flex:none;width:30px;height:30px;padding:0;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font-size:1.2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.day-add[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.meal{border:0;border-radius:10px;background:var(--paper);padding:8px 6px 8px 12px;align-items:center}
.meal a{flex:1;min-width:0}
.meal .slot{font:600 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:2px}
.day .day-picker{margin-top:2px;display:grid;gap:6px}
.day-picker[hidden]{display:none}
.day-picker select{padding:9px 10px;font-size:.85rem;border-radius:8px}
/* forms (add manually / edit): start below the floating back button */
.recipe .form h2{margin-top:calc(46px + var(--inset-top, 0px))}
@media (min-width:761px){.recipe .form h2{margin-top:34px}}

/* About: collapsed until tapped */
.card.about{padding:0;border-radius:14px;background:var(--surface);overflow:hidden}
.about summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);-webkit-tap-highlight-color:transparent}
.about summary::-webkit-details-marker{display:none}
.about summary:focus-visible{outline:2px solid var(--accent-soft);outline-offset:-2px}
.about .chev{font-size:1.4rem;letter-spacing:0;line-height:1;color:var(--muted);transition:transform .2s}
.about[open] .chev{transform:rotate(90deg)}
.about-body{padding:0 24px 18px;border-top:1px solid var(--line)}
.about-sec{padding:14px 0 2px}
.about-sec h4{margin:0 0 4px;font:600 .95rem var(--sans);color:var(--ink)}
.about-sec p{margin:0 0 6px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.about-foot{margin:14px 0 0;font-size:.78rem;text-align:center}
@media (max-width:600px){.about summary{padding:16px}.about-body{padding:0 16px 16px}}
/* settings cards: rounded and white like the rest */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 2px 6px rgba(38,35,31,.08)}
.card.about{box-shadow:0 2px 6px rgba(38,35,31,.08);border-color:var(--line-strong)}

/* planner header: the date range is one bubble with the arrows inside it */
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:4px;margin:0 0 12px;box-shadow:0 2px 6px rgba(38,35,31,.06)}
.week-nav .nav-arrow{flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.5rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.week-nav .nav-arrow:hover{background:var(--accent-soft)}}
.week-nav .week-label{flex:1;margin:0;text-align:center;font:600 1.35rem var(--serif);white-space:nowrap}
.week-actions{flex-wrap:nowrap}
.week-actions .chip-btn{flex:none}
.week-actions #plan-to-shop{white-space:nowrap;flex:0 1 auto;min-width:0}
@media (max-width:420px){.week-actions #plan-to-shop{padding:0 12px;font-size:.8rem}.week-nav .week-label{font-size:1.2rem}}
@media (max-width:360px){.week-actions #plan-to-shop .opt{display:none}}
@media (max-width:360px){nav{gap:8px}nav button{letter-spacing:.06em;font-size:.7rem}}
/* planner: the plain sans font everywhere except the page title */
#view-planner .week-nav .week-label{font:600 1rem var(--sans);letter-spacing:.01em}
#view-planner .day h4{font:600 1rem var(--sans)}
#view-planner .day h4 small{font:400 .75rem var(--sans)}
#view-planner .meal a{font:600 .92rem/1.25 var(--sans)}
@media (max-width:420px){#view-planner .week-nav .week-label{font-size:.95rem}}

/* planned meals: a very small thumbnail on the left */
.meal img,.meal .thumb{flex:none;width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--line);display:block}
.meal .thumb.ph{font:600 .95rem var(--sans);color:var(--brass);background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.meal{gap:10px;padding-left:8px}

/* made it */
.made-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:.85rem}
.made-btn{height:34px;border-radius:999px;padding:0 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-size:.84rem}
@media (hover:hover){.made-btn:hover{border-color:var(--accent);background:var(--accent-soft)}}
.made-row .link{font-size:.8rem;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0}
/* toast */
#toast{position:fixed;left:50%;bottom:calc(24px + var(--inset-bottom, 0px));transform:translate(-50%,20px);z-index:60;max-width:min(92vw,480px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;line-height:1.35;box-shadow:0 8px 24px rgba(38,35,31,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* pantry */
details.pantry-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
details.pantry-group summary::-webkit-details-marker{display:none}
details.pantry-group summary .count{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 9px;letter-spacing:0;font-size:.72rem}
details.pantry-group[open] summary{border-bottom:1px solid var(--line)}
details.pantry-group li{opacity:.85}
.shop-group li>button.need-it{border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--ink);line-height:1.2}
@media (hover:hover){.shop-group li>button.need-it:hover{background:var(--accent-soft);color:var(--ink)}}
.pantry-tags{margin:6px 0 4px}

/* ---- dark mode: Settings → Appearance (Auto follows the phone) ---- */
:root[data-theme="dark"]{  color-scheme:dark;
  --paper:#10232b; --card:#183440; --surface:#183440; --ink:#fdf3dc; --muted:#8fb3b8; --line:#244652; --line-strong:#3a6572;
  --accent:#ff5d73; --accent-soft:#2a3d49; --accent-hover:#ff7b8d; --brass:#3fd0c9; --danger:#ff8a98;
  --err-bg:#3a1f26; --err-line:#6e3340; --tag-line:#2f6a6c; --desc:#cfe3e1; --heart:#ff5d73;
  --pop:#3fd0c9; --onpop:#10232b; --edge:#fdf3dc; --offset:4px 4px 0 rgba(255,93,115,.45); --offset-sm:2px 2px 0 rgba(255,93,115,.45);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){  color-scheme:dark;
  --paper:#10232b; --card:#183440; --surface:#183440; --ink:#fdf3dc; --muted:#8fb3b8; --line:#244652; --line-strong:#3a6572;
  --accent:#ff5d73; --accent-soft:#2a3d49; --accent-hover:#ff7b8d; --brass:#3fd0c9; --danger:#ff8a98;
  --err-bg:#3a1f26; --err-line:#6e3340; --tag-line:#2f6a6c; --desc:#cfe3e1; --heart:#ff5d73;
  --pop:#3fd0c9; --onpop:#10232b; --edge:#fdf3dc; --offset:4px 4px 0 rgba(255,93,115,.45); --offset-sm:2px 2px 0 rgba(255,93,115,.45);
}}
:root[data-theme="dark"] .hero,:root[data-theme="dark"] .thumb img{filter:brightness(.92)}

/* planned meal servings */
.meal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.meal-main a{flex:none}
.meal-serves{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.meal-serves b{min-width:1.2em;text-align:center;color:var(--ink);font-weight:600}
.meal-serves button{width:24px;height:24px;padding:0;border-radius:50%;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.meal-serves button:disabled{opacity:.4}
@media (hover:hover){.meal-serves button:not(:disabled):hover{background:var(--accent-soft)}}
/* clear ticks, custom timers, named timer chips, voice */
.clear-ticks{display:block;margin:2px 0 6px auto;font-size:.8rem;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0}
.custom-timer{margin-top:14px;text-align:center}
.custom-timer summary{cursor:pointer;color:var(--muted);font-size:.9rem;list-style:none}
.custom-timer summary::-webkit-details-marker{display:none}
.custom-timer form{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.custom-timer input[type=text]{width:9.5em}.custom-timer input[type=number]{width:5em}
.chip-timer small{display:block;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* tags on the recipe card: chips and one "＋ Tag" button; the rest opens only when asked */
.tag-add{background:none;border:1px dashed var(--line-strong);border-radius:999px;padding:2px 12px;font-size:.8rem;color:var(--muted);cursor:pointer}
.tag-add.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
@media (hover:hover){.tag-add:hover{border-color:var(--brass);color:var(--ink);background:none}.tag-add.on:hover{background:var(--accent-soft)}}
.tag-panel{margin-top:8px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.tag-panel[hidden]{display:none}
.tag-panel .tag-input{width:100%;border-style:solid;border-radius:8px;padding:8px 10px;font-size:.9rem;background:var(--card)}
.tag-panel .tag-ideas{margin:0}
.made-on{color:var(--muted);font-size:.85rem}
/* pantry staples: a long list, shown only when opened */
.pantry-intro{margin:12px 0 4px;font-size:.88rem}
.pantry-count{margin-left:auto;margin-right:12px;font:400 .8rem var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.pantry-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 4px}
.pantry-chip{background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;font-size:.82rem;color:var(--ink);line-height:1.2}
.pantry-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (hover:hover){.pantry-chip:not(.on):hover{background:var(--accent-soft);border-color:var(--accent)}.pantry-chip.on:hover{background:var(--accent-hover)}}
.pantry .tag-input{margin-top:6px;width:100%;max-width:300px;border-style:solid;border-radius:8px;padding:8px 10px;font-size:.9rem;background:var(--card)}

/* "Pantry" badge beside ingredients you always have */
.ing label{align-items:baseline}
.ing .ing-text{flex:1;min-width:0}
.pantry-badge{flex:none;align-self:center;margin-left:auto;background:var(--accent-soft);color:var(--accent);border:1px solid var(--tag-line);border-radius:999px;padding:1px 9px;font:600 .62rem var(--sans);letter-spacing:.1em;text-transform:uppercase}

.site-footer{max-width:760px;margin:8px auto 0;padding:18px 16px calc(28px + var(--inset-bottom, 0px));text-align:center;font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
@media print{.site-footer{display:none}}
.meal-serves{font-size:.78rem;color:var(--muted)}

/* ✓ on recipe cards you've made, top right of the photo */
.made-badge{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.list.grid .made-badge{top:9px;right:9px;width:24px;height:24px;font-size:.8rem}
.made-badge,.list.grid .made-badge{background:transparent;box-shadow:none;color:var(--accent);border:1.5px solid var(--accent);font-weight:700;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.8))}
/* heart badge: ring like the made-it tick, same size */
.fav-badge,.list.grid .fav-badge{top:6px;left:6px;width:20px;height:20px;border:1.5px solid var(--heart);border-radius:50%;background:transparent;box-shadow:none;color:var(--heart);display:flex;align-items:center;justify-content:center;font-size:.68rem;line-height:1;padding-top:1px;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.8))}
.list.grid .fav-badge{top:9px;left:9px;width:24px;height:24px;font-size:.8rem}
.col-ing .clear-ticks{margin:10px 0 0 auto}

/* phones: times share the first row; serves sits centred on its own row under a line */
@media (max-width:600px){
  .facts div{min-width:0;padding:12px 10px}
  .facts dd{font-size:1.15rem}
  .facts div:has(+ .serves-cell){border-right:0}
  .facts .serves-cell:not(:only-child){flex:1 1 100%;text-align:center;border-right:0;border-top:1px solid var(--line)}
  .facts .serves-cell .scaler{justify-content:center}
}
/* phones: Start cooking and the Metric/Original toggle stay on one row */
@media (max-width:600px){
  .cookrow{flex-wrap:nowrap;gap:8px}
  .cookrow .cookbtn{padding:11px 16px;font-size:.95rem;white-space:nowrap}
  .cookrow .units{flex:none}
  .cookrow .units button{padding:5px 9px;font-size:.62rem;letter-spacing:.08em}
}
@media (max-width:350px){.cookrow .cookbtn{padding:10px 12px;font-size:.88rem}.cookrow .units button{padding:5px 7px;font-size:.58rem}}
@media (max-width:350px){.facts dd{font-size:1.02rem}.facts div{padding:12px 6px}}

/* once you've scrolled past the photo, the button row gets a solid bar so the ingredients/method tabs don't run under it */
.sheet-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(58px + var(--inset-top, 0px));background:var(--card);border-bottom:1px solid var(--line);opacity:0;transition:opacity .15s;pointer-events:none}
#card[data-stuck="1"] .sheet-bar::before{opacity:1}
/* rounded buttons on the recipe card */
.recipe .cookbtn,.recipe .form button,.bottom-actions .actions button,.tray .actions button,.tray .planpick button{border-radius:999px}
.recipe .units,.cookrow .units{border-radius:999px;overflow:hidden}
.bottom-actions .planpick select,.tray .planpick select,.bottom-actions .planpick input,.tray .planpick input{border-radius:999px;padding-left:16px}
.bottom-actions .planpick button{border-radius:999px}
#card-close{display:inline-flex;align-items:center;justify-content:center}

/* the two actions under a recipe: one adds to the shopping list (all, or what's left), one plans it; icons keep them short */
.bottom-actions .actions,.tray .actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:stretch}
.bottom-actions .actions button,.tray .actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;white-space:nowrap;padding:12px 14px;font-size:.95rem}
.bottom-actions .act-main,.tray .act-main{flex:1.7 1 0}
.bottom-actions .actions .ghost,.tray .actions .ghost{flex:1 1 0}
.act-main .ico,.ghost .ico{display:inline-flex;flex:none}
.act-main .lbl,.actions .lbl{overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.bottom-actions .actions button,.tray .actions button{padding:12px 10px;font-size:.88rem;gap:6px}}

/* import / export panels on the shopping page can be closed */
.export{position:relative;padding-top:46px;border-radius:14px}
.panel-close{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;border-radius:50%;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-size:1.2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;z-index:1}
@media (hover:hover){.panel-close:hover{background:var(--accent-soft)}}

#tabs button[hidden]{display:none}

/* the tick in the top corner: outline until the recipe has been made, then filled green */
.sheet-bar .close.made-top{display:inline-flex;align-items:center;justify-content:center}
.sheet-bar .close.made-top.on{background:var(--accent);color:#fff;border-color:var(--accent);filter:none}
.card-menu button.danger{color:var(--danger)}
.made-row[hidden]{display:none}
/* made: green tick and ring, transparent inside (same as the badge on the recipe list) */
#card .sheet-bar .close.made-top.on,#card[data-tone-right="light"] .bar-actions .close.made-top.on{background:transparent;color:var(--accent);border-color:var(--accent);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.8))}
/* favourited heart stays red over dark photos (brighter, with a thin light edge so it shows) */
#card[data-tone-right="light"] .bar-actions .close.heart-btn.on{color:#ff6a58;border-color:#ff6a58;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.75))}

/* cooking mode: every button is a pill (the × is a circle) */
#cook button,#cook .custom-timer input,#cook .custom-timer summary{border-radius:999px}
#cook .chip-timer button{border-radius:50%}
.cook-done{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:10px 0}
.cook-done h2{margin:0;font:600 2.4rem var(--serif)}
.cook-done p{margin:0 0 6px;font-size:1.05rem}
.cook-done button{min-width:min(280px,100%);padding:16px 22px;font-size:1.1rem}
.cook-done .link{background:none;border:0;min-width:0;padding:6px;font-size:.9rem;color:var(--muted);text-decoration:underline}

/* running timers show at the top of the app when you're out of cooking mode */
.timer-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.timer-bar[hidden]{display:none}
.chip-timer{border-radius:999px}
.timer-bar .timer-open{cursor:pointer}
.timer-bar .chip-timer small{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* timers float at the bottom-left on every page and over the recipe card, clear of the + button */
.timer-bar{position:fixed;left:12px;right:84px;bottom:calc(16px + var(--inset-bottom, 0px));z-index:35;padding:0;background:none;border:0;justify-content:flex-start;flex-direction:column;align-items:flex-start;pointer-events:none}
.timer-bar .chip-timer{pointer-events:auto;box-shadow:0 4px 14px rgba(38,35,31,.25);background:var(--card)}
.timer-bar .chip-timer.done{background:var(--brass)}

/* notes: a list of separate notes with a centred rounded "Add note" button */
.notes .note{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px}
.notes .note p{margin:0;white-space:pre-wrap;line-height:1.55}
.notes .note-actions{display:flex;gap:14px;margin-top:8px}
.notes .note-actions .link{font-size:.8rem;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0}
.notes .note-editor{margin:0 0 10px}
.notes .note-editor textarea{border-radius:14px;padding:12px 14px}
.notes .note-editor-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.notes .note-editor-actions button{border-radius:999px;padding:10px 22px}
.add-note-row{display:flex;justify-content:center;margin:14px 0 6px}
.add-note{border-radius:999px;padding:11px 26px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-size:.95rem}
@media (hover:hover){.add-note:hover{border-color:var(--accent);background:var(--accent-soft)}}

/* note card: text on the left, pencil + bin on the right */
.notes .note{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.notes .note p{flex:1;min-width:0}
.notes .note-actions{display:flex;gap:2px;margin:-4px -6px 0 0;align-items:center}
.notes .note-ico{background:none;border:0;border-radius:999px;padding:7px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1;min-width:32px;height:32px}
.notes .note-ico.armed{background:var(--danger);color:#fff;padding:7px 12px;font-weight:600}
@media (hover:hover){.notes .note-ico:hover{background:var(--accent-soft);color:var(--ink)}.notes .note-ico.armed:hover{background:var(--danger);color:#fff}}
/* segmented toggles (Settings and elsewhere) are pills */
.units{border-radius:999px;overflow:hidden}
.units button{border-radius:0}

/* shopping-list section titles: bigger, bolder, tinted band, an icon each */
.shop-group header,details.pantry-group summary{padding:12px 16px;background:var(--accent-soft);color:var(--accent);font:700 .86rem var(--sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.gh{display:inline-flex;align-items:center;gap:10px}
.gh-ico{display:inline-flex;color:var(--accent)}
.shop-group header .count,details.pantry-group summary .count{background:var(--surface);color:var(--accent);font-size:.78rem;font-weight:700;padding:2px 10px;border:1px solid var(--tag-line)}
.shop-group header + ul li:first-child{border-top:0}

/* grouping by course on the Recipes page */
.course-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 2px 2px;padding:0 2px 8px;border-bottom:2px solid var(--accent);font:700 .95rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);list-style:none;cursor:default}
.list > .course-head:first-child{margin-top:14px}
.course-head .count{background:var(--accent-soft);border-radius:999px;padding:1px 10px;font-size:.76rem;letter-spacing:0}
.course-pick{margin-top:8px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);padding:5px 12px;font-size:.8rem;max-width:100%}

.pantry-badge.bar{background:var(--surface);border-color:var(--brass);color:var(--brass)}

/* a small dot on the Settings tab when a backup is due */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--heart);margin-left:6px;vertical-align:super}
.dot[hidden]{display:none}
.backup-notice{margin-bottom:16px}


/* ================= Retro Diner look: cream and teal, cherry accents, thick outlines, offset shadows ================= */
*,*::before,*::after{font-synthesis:none}
body{font-family:var(--sans);font-size:16px;line-height:1.55}
.serif{font-weight:400}
/* masthead: a teal band, big cherry wordmark */
.masthead{background:var(--pop);border-bottom:var(--bw) solid var(--edge);padding-top:calc(26px + var(--inset-top,0px))}
.brand h1{font:400 4.3rem/1.05 var(--serif);color:var(--accent);margin:0 0 10px;-webkit-text-stroke:1.6px var(--accent);paint-order:stroke fill;text-shadow:1px 1px 0 var(--edge),2px 2px 0 var(--edge),3px 3px 0 var(--edge),4px 4px 0 var(--edge)}
nav button{color:rgba(20,50,58,.62);font:600 .8rem var(--sans);letter-spacing:.1em}
:root[data-theme="dark"] nav button{color:var(--muted)}
nav button.active{color:var(--edge);border-bottom:4px solid var(--accent)}
:root[data-theme="dark"] .masthead,:root[data-theme="dark"] .brand h1{}
:root[data-theme="dark"] .masthead{background:var(--card)}
:root[data-theme="dark"] nav button.active{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .masthead{background:var(--card)}:root:not([data-theme="light"]) nav button{color:var(--muted)}:root:not([data-theme="light"]) nav button.active{color:var(--ink)}}
@media (max-width:760px){.brand h1{font-size:3.6rem}}
.badge{background:var(--accent);color:#fff;border:2px solid var(--edge);line-height:15px}
.dot{border:2px solid var(--edge);width:10px;height:10px}
/* buttons: chunky with an offset shadow that presses in */
button{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset-sm);font-weight:600;letter-spacing:.02em;transition:transform .08s,box-shadow .08s,background .15s}
button:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--edge)}
button.link,button.link.danger,.tag button,.meal button,.shop-group li>button,.chip-timer button,.note-ico,.pop-menu button,.card-menu button,.nav-arrow,.clear-ticks,.made-row .link,.notes .note-actions .link,.tabs button,nav button,.rtabs button,.units button,.cook-done .link,.custom-timer summary,.panel-close,.inline-more,.day-add,.meal-serves button{box-shadow:none;border-width:0}
button.link:active,nav button:active,.rtabs button:active{transform:none}
.rtabs button{border-bottom:3px solid transparent}.rtabs button.on{border-bottom-color:var(--accent);color:var(--accent)}
button.ghost{background:var(--card);color:var(--ink)}
input[type=text],input[type=search],input[type=date],select,.field input[type=text],.field textarea,.notes textarea,.export textarea{border:2px solid var(--edge);border-radius:var(--rad);background:var(--card)}
input:focus,select:focus,.field input:focus,.field textarea:focus{outline:3px solid var(--pop);outline-offset:0;border-color:var(--edge)}
/* the add bar */
.extract-bar{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);background:var(--card)}
.extract-bar:focus-within{border-color:var(--edge);box-shadow:var(--offset),0 0 0 3px var(--pop)}
.extract-bar button{border-radius:8px;border-width:2px}
.toolbar input{border-radius:var(--rad)}
/* filter pills */
.filters .chip-btn,.filters select,.pill-select,.chip-btn,.week-actions .chip-btn{border:2px solid var(--edge);background:var(--card);color:var(--ink);box-shadow:none;font-weight:600}
.filters .chip-btn.on,.chip-btn.on{background:var(--pop);color:var(--onpop);border-color:var(--edge)}
:root[data-theme="dark"] .filters .chip-btn.on{color:var(--onpop)}
@media (hover:hover){.filters .chip-btn:hover,.filters select:hover{border-color:var(--edge);background:var(--accent-soft)}.filters .chip-btn.on:hover{background:var(--pop);border-color:var(--edge)}}
/* recipe cards on the list */
.list .row,.list .row:hover,.list.grid .row{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);background:var(--card)}
@media (hover:hover){.list .row:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--edge);border-color:var(--edge)}:root[data-theme="dark"] .list .row:hover{box-shadow:5px 5px 0 rgba(255,93,115,.6)}}
.list .row:focus-visible{border-color:var(--edge);outline:3px solid var(--pop)}
.list .row img,.list .row .thumb{border-radius:8px;border:2px solid var(--edge)}
.list.grid .row img,.list.grid .row .thumb{border-radius:0;border:0;border-bottom:var(--bw) solid var(--edge)}
.list .row .t{font:400 1.06rem/1.25 var(--serif);color:var(--ink)}
.list.grid .row .t{font-size:1.02rem}
.row-meta{color:var(--muted);font-weight:500}
.thumb.ph{background:var(--pop);color:#fff;font-family:var(--serif)}
.fav-badge,.list.grid .fav-badge{color:#fff;background:var(--accent);border:2px solid var(--edge);filter:none;width:24px;height:24px;font-size:.8rem;top:7px;left:7px}
.made-badge,.list.grid .made-badge{color:#fff;background:var(--pop);border:2px solid var(--edge);filter:none;width:24px;height:24px;font-size:.8rem;top:7px;right:7px}
.list.grid .fav-badge{top:9px;left:9px}.list.grid .made-badge{top:9px;right:9px}
/* course headings and counters */
.course-head{border-bottom:var(--bw) solid var(--edge);color:var(--accent);font:400 1.05rem var(--serif);letter-spacing:.06em}
.course-head .count,.shop-group header .count,details.pantry-group summary .count{background:var(--pop);color:var(--onpop);border:2px solid var(--edge);font:700 .74rem var(--sans)}
/* tags */
.tag,.pantry-badge{background:#d7f1ee;color:#0f625e;border:1.5px solid #12706c;font-weight:600}
:root[data-theme="dark"] .tag,:root[data-theme="dark"] .pantry-badge{background:#1f4a54;color:#8fe8e2;border-color:#3fd0c9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag,:root:not([data-theme="light"]) .pantry-badge{background:#1f4a54;color:#8fe8e2;border-color:#3fd0c9}}
.pantry-badge.bar{background:var(--card);color:var(--accent);border-color:var(--accent)}
.tag button{color:inherit}
.tag-add,.tag-idea,.tag-input{border-width:2px;border-color:var(--muted)}
.tag-panel,.notes .note,.export{border:2px solid var(--edge);border-radius:var(--rad);background:var(--card)}
/* the open recipe */
.recipe{border:0;background:var(--card)}
.recipe h2{font:400 2.5rem/1.08 var(--serif);color:var(--ink)}
.overlay .recipe{background:var(--card)}
.recipe h3,.card h3,.cook-panel h3,.field>span,.facts dt,.sort span{color:var(--brass);font:700 .74rem var(--sans);letter-spacing:.16em}
:root[data-theme="light"] .recipe h3{color:var(--brass)}
.facts{border-top:var(--bw) solid var(--edge);border-bottom:var(--bw) solid var(--edge)}
.facts div{border-right:2px solid var(--edge)}
.facts dd{font:400 1.25rem var(--serif)}
.desc{font:400 1.05rem/1.6 var(--sans);font-style:normal;color:var(--desc)}
.steps li::before{font:400 1.9rem/1 var(--serif);color:var(--accent)}
.ing li,dl.nut div,.cook-panel li{border-bottom:2px dotted var(--line-strong)}
.ing input,.cook-panel input{accent-color:var(--accent)}
.units{border:2px solid var(--edge);border-radius:999px;box-shadow:var(--offset-sm);background:var(--card)}
.units button.on{background:var(--accent);color:#fff}
.scaler .step{border:2px solid var(--edge);background:var(--card);color:var(--ink);box-shadow:none}
.cookbtn{box-shadow:var(--offset);font-size:1.02rem;padding:12px 26px}
.sheet-bar .close{border-width:2px}
.sheet-bar::before{border-bottom:var(--bw) solid var(--edge)}
.rtabs{border-bottom:var(--bw) solid var(--edge)}
.card-menu,.pop-menu{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset)}
.tray{border:var(--bw) solid var(--edge);border-bottom:0;border-radius:18px 18px 0 0}
.options-fab{border:var(--bw) solid var(--edge)!important;box-shadow:var(--offset)!important;background:var(--accent)!important}
.close{border:2px solid var(--edge)}
/* settings, planner, shopping cards */
.card,.card.about,.shop-group,.day,#import-panel,#export-panel{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);background:var(--card)}
.day.today{border-color:var(--edge);background:var(--accent-soft)}
.today-tag{background:var(--accent);color:#fff;border:2px solid var(--edge)}
.shop-group header,details.pantry-group summary{background:var(--pop);color:var(--onpop);border-bottom:var(--bw) solid var(--edge);font:400 .98rem var(--serif);letter-spacing:.05em}
.gh-ico{color:var(--onpop)}
.shop-group header .count,details.pantry-group summary .count{background:var(--card);color:var(--ink)}
.shop-group li,.setting{border-color:var(--line)}
.shop-group input[type=checkbox]{border:2px solid var(--edge);background:var(--card)}
.shop-group input[type=checkbox]:checked{background:var(--accent);border-color:var(--edge)}
.shop-group li>button.need-it,.pantry-chip,.course-pick,.made-btn,.add-note,.day-add,.meal-serves button{border:2px solid var(--edge);background:var(--card);color:var(--ink)}
.pantry-chip.on{background:var(--pop);color:var(--onpop);border-color:var(--edge)}
.day-add[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--edge)}
.meal{background:var(--paper);border:2px solid var(--edge);border-radius:10px}
.meal img,.meal .thumb{border:2px solid var(--edge)}
.week-nav{border:var(--bw) solid var(--edge);box-shadow:var(--offset-sm);background:var(--card)}
.week-nav .nav-arrow{background:var(--pop);color:var(--onpop);border:2px solid var(--edge)}
.about summary{font:400 1rem var(--serif);letter-spacing:.04em;color:var(--accent)}
.about-body{border-top:var(--bw) solid var(--edge)}
.notice,.error{border-radius:var(--rad);border-width:2px;border-left-width:6px}
.empty,.list .empty-list{font:400 1.2rem var(--serif);font-style:normal}
#toast{border:2px solid var(--edge);border-radius:var(--rad);background:var(--ink);color:var(--paper);box-shadow:var(--offset)}
/* cooking mode */
.cook-top,.cook-nav{border-color:var(--edge);border-width:var(--bw)}
.cook-step{font:400 clamp(1.5rem,4.4vw,2.3rem)/1.4 var(--serif)}
.cook-title{font:400 1.1rem var(--serif)}
.chip-timer{border:2px solid var(--edge);box-shadow:var(--offset-sm)}
.chip-timer.done{background:var(--accent);border-color:var(--edge)}
.timer-bar .chip-timer.done{background:var(--accent)}
.cook-done h2,.week-label{font-family:var(--serif);font-weight:400}
.site-footer{color:var(--muted)}
@media (max-width:480px){nav{gap:10px}nav button{letter-spacing:.06em;font-size:.74rem;padding-left:1px;padding-right:1px}.masthead{padding-left:10px;padding-right:10px}}
.tag-add,.tag-idea,.course-pick,.made-btn,.pantry-chip,.shop-group li>button.need-it,.add-note,.day-add,.meal-serves button,.scaler .step,.close,.panel-close,.chip-btn,.week-nav .nav-arrow{box-shadow:none}
.tag-add{border-style:dashed}
.course-pick{border:2px solid var(--edge);color:var(--ink)}
/* ingredient + cooking checklist ticks: same round tick as the shopping list */
.ing input[type=checkbox],.cook-panel input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:2px 0 0;border:2px solid var(--edge);border-radius:50%;background:var(--card);display:inline-grid;place-items:center;cursor:pointer}
.ing input[type=checkbox]{margin-top:3px}
.ing input[type=checkbox]::after,.cook-panel input[type=checkbox]::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ing input[type=checkbox]:checked,.cook-panel input[type=checkbox]:checked{background:var(--accent)}
.ing input[type=checkbox]:checked::after,.cook-panel input[type=checkbox]:checked::after{opacity:1}
.ing input[type=checkbox]:focus-visible,.cook-panel input[type=checkbox]:focus-visible{outline:3px solid var(--pop);outline-offset:1px}
.cook-panel input[type=checkbox]{width:24px;height:24px}
/* shopping list: amount in regular type, ingredient bold */
.shop-group .txt .q{font-weight:400;color:var(--muted)}
.shop-group .txt .nm{font-weight:700;color:var(--ink);font-size:1.02rem}
.shop-group li.done .txt .nm,.shop-group li.done .txt .q{font-weight:500;color:var(--muted)}
/* toast: teal with a thick outline, like the cards */
#toast{background:var(--pop);color:#14323a;border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);font-weight:600;padding:12px 18px}
:root[data-theme="dark"] #toast{color:#10232b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #toast{color:#10232b}}
#toast{width:max-content;max-width:min(92vw,480px);text-align:center}
/* recipe facts: every divider the same thick outline (including the line above Serves on phones) */
.facts div{border-right:var(--bw) solid var(--edge)}
.facts div:last-child{border-right:0}
@media (max-width:600px){.facts .serves-cell:not(:only-child){border-top:var(--bw) solid var(--edge);border-right:0}}
/* the backup dot sits beside the Settings label without nudging it down */
.dot{vertical-align:middle;position:relative;top:-5px;margin-left:5px;line-height:0}
nav button{border-bottom:4px solid transparent}nav button.active{border-bottom-color:var(--accent)}
.badge{vertical-align:middle;margin-top:-6px;margin-bottom:-6px}
/* notices and errors: same thick outline and offset shadow as the cards */
.notice,.error{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset-sm);padding:12px 16px}
.notice{background:var(--accent-soft);color:var(--ink)}
.notice .link{color:var(--accent);font-weight:700}
.error{background:var(--err-bg)}
/* over a bright photo the buttons use dark ink in both themes (the page's own ink is cream in dark mode); on the solid bar they follow the theme */
#card:not([data-stuck="1"])[data-tone-left="dark"]{--ink-l:#14323a}
#card:not([data-stuck="1"])[data-tone-right="dark"]{--ink-r:#14323a}
.about-quip{margin:18px 0 0;text-align:center;font-style:italic;font-size:.9rem;color:var(--muted)}
.about-quip+.about-foot{margin-top:6px}
.about-quip{font-synthesis:style}
/* top bar: the drawn heart sits like the other icons; "made it" is teal (the made colour), never cherry */
.close.heart-btn{display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
#card .sheet-bar .close.made-top.on,#card[data-tone-right="light"] .bar-actions .close.made-top.on,#card[data-tone-right="dark"] .bar-actions .close.made-top.on{background:transparent;color:var(--pop);border-color:var(--pop)}
#card[data-tone-right="light"] .bar-actions .close.made-top.on{filter:drop-shadow(0 0 1px #14323a) drop-shadow(0 0 3px rgba(0,0,0,.45))}
/* drawn hearts and arrows (text symbols draw thin or low on some phones) */
.fav-badge svg{display:block}
.filters #fav-filter{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.filters #fav-filter .ico{display:inline-flex}
.week-nav .nav-arrow{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
/* pantry + bar staples: teal band with a shadowed title, like the shopping-list section headers */
.about.pantry summary{background:var(--pop);color:#fffaf0;font:400 1.05rem var(--serif);letter-spacing:.06em;text-shadow:2px 2px 0 #14323a;padding:15px 20px}
.about.pantry summary .pantry-count{color:#14323a;font-weight:600;text-shadow:none}
.about.pantry summary .chev{color:#14323a;text-shadow:none}
.about.pantry[open] summary{border-bottom:var(--bw) solid var(--edge)}
.about.pantry .about-body{border-top:0}
:root[data-theme="dark"] .about.pantry summary .pantry-count,:root[data-theme="dark"] .about.pantry summary .chev{color:#10232b}
/* the main tabs: a touch bigger */
nav button{font-size:.92rem}
@media (max-width:480px){nav{gap:10px}nav button{font-size:.82rem;letter-spacing:.05em}}
@media (max-width:360px){nav{gap:8px}nav button{font-size:.76rem;letter-spacing:.04em}}
/* empty shopping list: the hint sits in a box like a list would */
.shop-empty li{padding:18px 18px}
.shop-empty .txt{color:var(--muted);font-weight:400;line-height:1.5}
/* items that came from someone else's shared list carry their name */
.by-badge{flex:none;background:var(--accent);color:#fff;border:2px solid var(--edge);border-radius:999px;padding:0 9px;font:700 .7rem/1.5 var(--sans);letter-spacing:.02em;max-width:7.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-group .sub{display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px}
.shop-group .sub .from{flex:1;min-width:0}
.shop-group .sub .by-badge{font-size:.68rem;line-height:1.4;padding:0 8px}
/* sender initial: a small circle, no longer a name pill */
.shop-group li>button.by-badge{flex:none;width:26px;height:26px;min-width:26px;padding:0;margin:0;border-radius:50%;background:var(--accent);color:#fff;border:2px solid var(--edge);box-shadow:none;font:700 .74rem/1 var(--sans);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;max-width:none;overflow:visible}
@media (hover:hover){.shop-group li>button.by-badge:hover{background:var(--accent-hover);color:#fff}}
/* sender initial: teal circle with dark lettering */
.shop-group li>button.by-badge{background:var(--pop);color:#14323a}
:root[data-theme="dark"] .shop-group li>button.by-badge{color:#10232b}
@media (hover:hover){.shop-group li>button.by-badge:hover{background:var(--pop);color:#14323a;filter:brightness(1.06)}}
/* sender initial: see-through circle (outline + lettering only) */
.shop-group li>button.by-badge{background:transparent;color:var(--ink)}
:root[data-theme="dark"] .shop-group li>button.by-badge{color:var(--ink)}
@media (hover:hover){.shop-group li>button.by-badge:hover{background:var(--accent-soft);color:var(--ink);filter:none}}
.fav-badge svg{transform:translateY(-.5px)}
/* made line: how many times, with a small - and + */
.made-row{justify-content:space-between;gap:8px 12px}
.made-steps{display:inline-flex;gap:8px;flex:none}
.made-step{width:30px;height:30px;padding:0;border-radius:50%;background:var(--card);color:var(--ink);border:2px solid var(--edge);box-shadow:none;font-size:1.15rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.made-step:hover{background:var(--accent-soft);color:var(--ink)}}
.made-row .made-on{flex:1;min-width:0;line-height:1.35}
/* made line + "how did it go?" notes */
.made-row{display:block}
.made-line{display:flex;align-items:center;justify-content:space-between;gap:8px 12px}
.made-add-note{display:block;margin-top:4px;font-size:.82rem;color:var(--accent);text-decoration:none;font-weight:600}
.made-ask{margin-top:8px;padding:10px;border:2px solid var(--edge);border-radius:var(--rad);background:var(--card);display:flex;flex-direction:column;gap:8px}
.made-ask-day{font:700 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.made-note-input{width:100%}
.made-ask-actions{display:flex;gap:8px}
.made-ask-actions button{padding:7px 16px;font-size:.85rem;border-radius:999px}
.made-diary{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.made-diary-row{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border:2px solid var(--edge);border-radius:var(--rad);background:var(--card);font-size:.88rem;line-height:1.4}
.made-diary-day{flex:none;font-weight:700;color:var(--brass)}
.made-diary-text{flex:1;min-width:0;overflow-wrap:anywhere}
.made-diary-edit{flex:none;background:none;border:0;box-shadow:none;color:var(--muted);text-decoration:underline;padding:0 2px;font-size:.78rem;font-weight:500}
/* "How it went": under the recipe, above Notes */
.made-diary-box{margin:22px 0 4px}
.made-diary-box[hidden]{display:none}
.made-diary-box>h3{margin:0 0 10px}
.made-diary-box .made-diary-row{margin-bottom:8px}
.made-diary-box .made-ask{margin:0 0 8px}
.made-diary{margin-top:0}
/* What can I make? */
.cookfrom-btn{display:inline-flex;align-items:center;gap:8px;margin:-8px 0 16px;padding:8px 16px;border:2px solid var(--edge);border-radius:999px;background:var(--pop);color:#14323a;box-shadow:var(--offset-sm);font:700 .88rem var(--sans);letter-spacing:.02em}
:root[data-theme="dark"] .cookfrom-btn{color:#10232b}
.cf-staples{display:block;margin:10px 0 4px;font-size:.88rem}
.cf-results h3{margin-top:22px}
.cf-card{display:flex;gap:12px;padding:10px;margin-bottom:10px;border:2px solid var(--edge);border-radius:var(--rad);background:var(--card);box-shadow:var(--offset-sm)}
.cf-thumb{flex:none;width:64px;height:64px;border-radius:8px;overflow:hidden;border:2px solid var(--edge);background:var(--line)}
.cf-thumb img,.cf-thumb .thumb{width:100%;height:100%;object-fit:cover;display:block}
.cf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cf-title{align-self:flex-start;text-align:left;background:none;border:0;box-shadow:none;padding:0;color:var(--ink);font:400 1.02rem/1.25 var(--serif);letter-spacing:0}
.cf-have{font-weight:700;font-size:.86rem;color:var(--brass)}
.cf-miss{font-size:.8rem;color:var(--muted);line-height:1.35}
.cf-add{align-self:flex-start;margin-top:4px;padding:5px 14px;font-size:.8rem;border-radius:999px}
.cf-input{width:100%;max-width:none;margin-top:8px;border-style:solid;border-radius:10px;padding:9px 12px}
.recipe .panel-h2{margin-top:calc(46px + var(--inset-top, 0px))}
@media (min-width:761px){.recipe .panel-h2{margin-top:34px}}
/* the two pills under the add bar */
.quick-row{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 16px}
.quick-row .cookfrom-btn{margin:0}
/* Menus */
.menu-new{display:flex;gap:8px;margin:12px 0 16px}
.menu-new input{flex:1;margin:0}
.menu-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin-bottom:12px;padding:12px 14px;text-align:left;background:var(--card);color:var(--ink);border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset)}
.menu-name{font:400 1.15rem var(--serif)}
.menu-meta{font-size:.82rem;color:var(--muted);font-weight:500}
.menu-thumbs{display:flex;gap:6px;margin-top:6px}
.menu-thumbs .cf-thumb{width:44px;height:44px}
.menu-h2{margin:6px 0 4px}
.menu-picker{margin:14px 0}
.menu-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
/* Suggest a week */
.suggest-btn{margin:0 0 14px}
.sw-day{margin-bottom:10px}
.sw-label{font:700 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 4px}
.sw-fixed{padding:8px 12px;border:2px dashed var(--line-strong);border-radius:var(--rad);color:var(--muted);font-size:.88rem}
.sw-fixed .sw-label{margin:0 0 2px}
.sw-actions{display:flex;gap:10px;align-items:center;margin-top:4px}
.sw-day .cf-card{margin-bottom:0}
.cf-toggle{margin:2px 0 10px}
/* labelled tick boxes (Count my pantry and bar staples, Include photos): the same round tick as the lists */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink);font-weight:500}
.check input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:2px solid var(--edge);border-radius:50%;background:var(--card);display:inline-grid;place-items:center;cursor:pointer}
.check input[type=checkbox]::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input[type=checkbox]:checked{background:var(--accent)}
.check input[type=checkbox]:checked::after{opacity:1}
.check input[type=checkbox]:focus-visible{outline:3px solid var(--pop);outline-offset:1px}
.cf-staples{display:flex;margin:12px 0 6px;font-size:.92rem}
/* one tick for every round checkbox: the same stroke as the made-it tick, white on cherry */
.check input[type=checkbox]::after,.ing input[type=checkbox]::after,.cook-panel input[type=checkbox]::after,.shop-group input[type=checkbox]::after{display:none!important}
.check input[type=checkbox]:checked,.ing input[type=checkbox]:checked,.cook-panel input[type=checkbox]:checked,.shop-group input[type=checkbox]:checked{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:72%;border-color:var(--edge)}
/* Menu cards: a teal title band, then the total time and photos that scale to fill the width */
.menu-card{padding:0;overflow:hidden;gap:0;align-items:stretch}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--pop);border-bottom:var(--bw) solid var(--edge)}
.menu-card .menu-name{font:400 1.12rem/1.2 var(--serif);color:#fffaf0;text-shadow:2px 2px 0 #14323a;letter-spacing:.03em}
.menu-count{flex:none;min-width:26px;height:26px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);font:700 .78rem var(--sans)}
.menu-body{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.menu-card .menu-meta{font-size:.88rem;font-weight:600;color:var(--muted)}
.menu-thumbs{display:grid;gap:8px;margin:0}
.menu-thumb{display:block;aspect-ratio:1;border:2px solid var(--edge);border-radius:10px;overflow:hidden;background:var(--line)}
.menu-thumb img,.menu-thumb .thumb{width:100%;height:100%;object-fit:cover;display:block}
.menu-more{display:grid;place-items:center;background:var(--accent-soft);color:var(--ink);font:700 1rem var(--sans)}
/* menus: small fixed thumbnails for every menu, and no red hover on the cards and title buttons */
.menu-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.menu-thumb{width:48px;height:48px;aspect-ratio:auto;border-radius:9px}
.menu-manage{align-items:center}
.menu-manage .cf-input{flex:1 1 180px;margin:0;width:auto}
.danger-btn{background:var(--danger);border-color:var(--edge);color:#fff}
@media (hover:hover){
  .menu-card:hover{background:var(--card);color:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--edge)}
  .cf-title:hover,.made-diary-edit:hover,.cf-add.link:hover{background:none;color:var(--ink)}
  .cf-title:hover{text-decoration:underline}
  .pantry-chip:not(.on):hover{background:var(--accent-soft);color:var(--ink)}
  .danger-btn:hover{background:var(--danger);filter:brightness(1.08)}
}
.quick-row{justify-content:space-between}
/* planner: Suggest a week and Add week to shopping list share one row */
.suggest-btn{margin:0;flex:none;padding:0 14px;height:38px;font-size:.84rem}
.week-actions{gap:8px}
@media (max-width:480px){.week-actions #plan-to-shop .opt{display:none}}
/* reordering a menu */
.cf-move{display:flex;gap:8px;margin-top:6px}
.cf-move button{width:40px;height:34px;padding:0;border-radius:10px;font-size:.9rem;line-height:1}
.cf-move button:disabled{opacity:.35;cursor:default}
/* menu pages sit a little lower under the top bar */
.recipe .panel-h2{margin-top:calc(64px + var(--inset-top, 0px))}
@media (min-width:761px){.recipe .panel-h2{margin-top:44px}}
.recipe .menu-back{display:inline-block;margin-top:calc(60px + var(--inset-top, 0px));padding-left:0}
@media (min-width:761px){.recipe .menu-back{margin-top:40px}}
.cook-done .cook-done-note{width:min(280px,100%);box-sizing:border-box;text-align:left;padding:12px 14px;font-size:1rem}

.shop-archive{margin-top:26px;border:2px solid var(--edge);border-radius:14px;background:var(--card,#fff);padding:4px 14px}
.shop-archive>summary{cursor:pointer;padding:12px 0;font-weight:600}
.archive-item{border-top:2px dashed color-mix(in srgb,var(--edge) 25%,transparent);padding:12px 0}
.archive-head{display:flex;justify-content:space-between;gap:10px}
.archive-names{margin:4px 0 8px;font-size:.92rem}
.archive-actions{display:flex;gap:14px;align-items:center}
input[type=file]{font:500 .9rem var(--sans);color:var(--muted,inherit);max-width:100%}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 16px;border:2px solid var(--edge);border-radius:999px;background:var(--pop);color:#14323a;box-shadow:var(--offset-sm);font:700 .88rem var(--sans);letter-spacing:.02em;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--pop);filter:brightness(1.06)}
input[type=file]{overflow:visible;padding:2px 6px 6px 2px;box-sizing:border-box}

.ing li.ing-group,.cook-panel li.ing-group{padding:14px 0 4px;border-bottom:0;font:700 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pop-deep,#0c7f7b)}
.ing li.ing-group:first-child,.cook-panel li.ing-group:first-child{padding-top:2px}
.list .empty-list{border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);background:var(--card);padding:18px;margin-top:6px;color:var(--muted);font:400 1rem/1.5 var(--sans);font-style:normal}

.steps li.step-group{display:block;margin:16px 0 4px;padding:0;list-style:none;font:700 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pop-deep,#0c7f7b)}
.steps li.step-group:first-child{margin-top:0}
.steps li.step-group{counter-increment:none}
.steps li.step-group::before{content:none}

.cook-parts{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card);overflow-x:auto;display:flex;justify-content:center}
.cook-parts[hidden]{display:none}
.cook-parts .units{flex-wrap:nowrap;max-width:none;margin:0}
.cook-parts .units button{white-space:nowrap}

.shop-group li>button.store-search{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border-radius:50%;color:var(--ink);background:none;border:0;box-shadow:none}
.shop-group li>button.store-search:hover{background:var(--accent-soft);color:var(--ink)}
.store-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.store-links[hidden]{display:none}
.store-links a{padding:3px 12px;border:2px solid var(--edge);border-radius:999px;background:var(--pop);color:#14323a;font:700 .78rem var(--sans);text-decoration:none;box-shadow:var(--offset-sm)}

.cook-panel .cook-parts{padding:0 0 14px;border:0;background:none;overflow-x:auto;display:flex;justify-content:center}
.cook-panel .cook-parts .units{flex-wrap:wrap}

/* course headings: a bullet in front, and the count bubble centred on the capitals */
.course-head{line-height:1}
.course-head > span:first-child{display:inline-flex;align-items:center;gap:10px}
.course-head > span:first-child::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--pop);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge);margin-right:2px;transform:translateY(-1px)}
.course-head .count{line-height:1.25;padding:2px 10px;margin-top:0}
.course-head{text-transform:none;letter-spacing:.03em}
.course-head{font:400 1.1rem var(--serif);letter-spacing:.03em}
.course-head{color:var(--ink)}
.course-head > span:first-child{-webkit-text-stroke:.55px var(--ink)}      /* the serif has one weight, so thicken it with a hairline outline in its own red */
.course-head{text-transform:uppercase;letter-spacing:.07em;font-size:1.02rem}
/* the rule runs between the name and the count, with a gap at both ends, instead of underneath */
.course-head{border-bottom:0;gap:12px;padding-bottom:10px}
.course-head::after{content:"";order:2;flex:1;height:var(--bw,2px);background:var(--edge);border-radius:2px}
.course-head .count{order:3}

/* planner: nutrition for the week */
.nutrition{margin-top:22px;border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset);background:var(--card);padding:16px 16px 14px}
.nutrition[hidden]{display:none}
.nut-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nut-head h3{margin:0;font:400 1.2rem var(--serif)}
.nut-head .units{margin:0}
.nut-sub,.nut-note{font-size:.84rem;margin:6px 0 12px;line-height:1.4}
.nut-note{margin:12px 0 8px}
.nut-empty{margin:10px 0 4px;color:var(--muted);line-height:1.5}
.nut-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nut-tile{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border:2px solid var(--edge);border-radius:12px;background:var(--paper)}
.nut-val{font:700 1.25rem/1.15 var(--sans);color:var(--ink)}
.nut-lbl{font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.nut-hint{font-size:.74rem;color:var(--muted)}
.nut-split{margin:14px 0 4px}
.nut-bar{display:flex;height:14px;border:2px solid var(--edge);border-radius:999px;overflow:hidden;background:var(--paper)}
.nut-bar span,.nut-legend i{display:block}
.nb-p{background:var(--pop)}.nb-c{background:var(--accent)}.nb-f{background:#f2b84b}
.nut-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.8rem;color:var(--ink)}
.nut-legend span{display:inline-flex;align-items:center;gap:6px}
.nut-legend i{width:10px;height:10px;border-radius:50%;border:2px solid var(--edge)}
.nut-days{margin-top:14px}
.nut-days h4{margin:0 0 6px;font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nut-day{display:grid;grid-template-columns:42px auto 1fr;gap:2px 10px;align-items:baseline;padding:7px 0;border-top:1px dotted var(--line-strong)}
.nut-day:first-of-type{border-top:0}
.nut-day .nd-e{font-weight:700}
.nut-day .nd-m{color:var(--muted);font-size:.84rem}
.nut-day small{grid-column:2/-1}
.nut-more,.nut-learn{margin-top:10px;border-top:1px dotted var(--line-strong);padding-top:8px}
.nut-more summary,.nut-learn summary{cursor:pointer;font-weight:600;font-size:.9rem}
.nut-table{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px 10px;margin-top:8px;font-size:.88rem}
.nut-table b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nut-learn ul{margin:8px 0 0;padding-left:18px;font-size:.86rem;line-height:1.5}
.nut-learn li{margin-bottom:6px}

/* typing in a full-screen page: extra scroll room so the last fields can rise above the phone keyboard */
body.typing .overlay .recipe{padding-bottom:calc(55vh + var(--inset-bottom, 0px))}

/* made-it notes: photo */
.note-photo{margin:10px 0 2px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.note-photo-actions{display:flex;flex-wrap:wrap;gap:8px}
.note-photo-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:.88rem}
.note-photo-btn svg{flex:none}
.note-photo-preview{display:flex;align-items:center;gap:12px}
.note-photo-preview:empty{display:none}
.note-photo-preview img{width:72px;height:72px;object-fit:cover;border:2px solid var(--edge);border-radius:12px;box-shadow:var(--offset-sm)}
.cook-done .note-photo{align-items:center}
.made-diary-row{flex-wrap:wrap}
.diary-photo{flex:none;padding:0;border:2px solid var(--edge);border-radius:10px;overflow:hidden;width:56px;height:56px;background:var(--paper);box-shadow:var(--offset-sm);cursor:pointer}
.diary-photo img{display:block;width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,24,28,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.lightbox-x{position:absolute;top:calc(14px + var(--inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;font-size:1.6rem;line-height:1;padding:0}
.made-diary-row{align-items:center}
.made-diary-row .made-diary-text{flex:1;min-width:0}

#shop-menu button{display:flex;align-items:center;gap:12px}
#shop-menu button svg{flex:none}

/* the made-it tick on a card: a round button like the ones in the recipe's top bar (cream disc, dark outline, drawn tick) */
.made-badge,.list.grid .made-badge{background:var(--card);color:var(--pop);border:2px solid var(--edge);width:26px;height:26px;padding:0;top:7px;right:7px;filter:none;box-shadow:none;font-size:0;line-height:0}
.list.grid .made-badge{top:9px;right:9px}
.made-badge svg{display:block}
/* the made-it tick: teal disc, dark outline, white drawn tick */
.made-badge,.list.grid .made-badge{background:var(--pop);color:#fff}

.card-menu button{display:flex;align-items:center;gap:12px}
.card-menu button svg{flex:none}

.shared-by{margin:-4px 0 8px;font-size:.88rem;color:var(--muted)}
.shared-by b{color:var(--ink)}

/* Cooked this year */
.cooked-row{margin:57px 0 -29px;display:flex;justify-content:center}   /* the pill sits halfway between the last card and the footer text (57px each side); the page keeps its height */
.cooked-row[hidden]{display:none!important}
.cooked-row .cookfrom-btn{margin:0;justify-content:center}
.cy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.cy-stat{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border:2px solid var(--edge);border-radius:12px;background:var(--card);text-align:center}
.cy-stat b{font:700 1.5rem/1.1 var(--sans);color:var(--ink)}
.cy-stat span{font-size:.74rem;color:var(--muted)}
.cy-month{margin:18px 0 8px;font:700 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cy-item{display:flex;gap:12px;align-items:center;width:100%;padding:8px;margin-bottom:8px;border:2px solid var(--edge);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;box-shadow:var(--offset-sm)}
.cy-thumb{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--edge);background:var(--pop)}
.cy-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cy-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cy-body b{font-weight:700;line-height:1.25}
.cy-note{font-size:.88rem;line-height:1.35;color:var(--ink)}

/* week templates */
.tpl-card{margin:0 0 12px;padding:12px 14px;border:2px solid var(--edge);border-radius:14px;background:var(--card);box-shadow:var(--offset-sm)}
.tpl-name{font:400 1.1rem var(--serif)}
.tpl-meta{margin:2px 0 8px;font-size:.84rem;line-height:1.35}
.tpl-days{display:flex;gap:6px;margin:0 0 10px}
.tpl-day{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:34px;height:26px;padding:0 6px;border:2px solid var(--line-strong);border-radius:999px;font-size:.72rem;color:var(--muted)}
.tpl-day.on{border-color:var(--edge);background:var(--pop);color:#14323a;font-weight:700}
.tpl-day b{font-size:.72rem}
.tpl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tpl-actions .muted{flex-basis:100%;font-size:.88rem}
.danger-btn{background:var(--danger,#b3261e);color:#fff;border:2px solid var(--edge)}

/* prep ahead */
.prep-note{margin:10px 0;padding:10px 14px;border:2px solid var(--edge);border-radius:12px;background:var(--accent-soft);font-size:.92rem;line-height:1.4}
.meal-prep{margin-top:3px;font-size:.78rem;font-weight:600;color:var(--accent)}

.week-actions-top{margin-bottom:10px}
.week-actions-top button{flex:1;justify-content:center;text-align:center}

.stash-title{display:inline-flex;align-items:center;gap:10px}
.stash-ico{display:inline-flex}
.about.pantry summary{justify-content:flex-start}
.about.pantry summary .pantry-count{margin-left:auto;margin-right:10px}

/* collapsible courses */
.course-head.foldable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.course-head .chev{order:4;font-size:1.4rem;line-height:1;transition:transform .15s;color:var(--ink);margin-left:2px}
.course-head .chev.open{transform:rotate(90deg)}
.collapse-note{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:4px 10px;margin:6px 0 4px}
.collapse-note[hidden]{display:none!important}
.prep-x-note{background:none;border:0;box-shadow:none;font-size:1.4rem;line-height:1;padding:0 6px;color:var(--ink)}

/* duplicate finder */
.dup-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.dup-card{border:var(--bw,2px) solid var(--edge);border-radius:var(--rad,12px);padding:10px;background:var(--card);display:flex;flex-direction:column;gap:6px;min-width:0}
.dup-thumb{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--accent-soft)}
.dup-thumb img,.dup-thumb .thumb{width:100%;height:100%;object-fit:cover}
.dup-title{font:400 1rem var(--serif);line-height:1.2;overflow-wrap:anywhere}
.dup-info{font-size:.8rem}
.dup-open{align-self:flex-start;padding:0}
.dup-act{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.dup-act button{width:100%}
.dup-q{font-size:.8rem;margin:0}
.dup-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* cooked this year: a gallery */
.cy-stats{margin:12px 0 0}
.cy-masonry{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.cy-col{flex:1 1 0;min-width:0}
.cy-tile{position:relative;isolation:isolate;display:block;width:100%;margin:0 0 10px;padding:0;break-inside:avoid;overflow:hidden;border:var(--bw,2px) solid var(--edge);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;box-shadow:var(--offset-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cy-photo img{display:block;width:100%;height:auto;min-height:190px;object-fit:cover;background:var(--accent-soft)}
.cy-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(20,50,58,.82),rgba(20,50,58,0));pointer-events:none}
.cy-cap{display:flex;flex-direction:column;gap:1px}
.cy-photo .cy-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 10px 9px;color:#fffaf0}
.cy-cap b{font:400 .98rem/1.15 var(--serif);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cy-cap small{font-size:.72rem;opacity:.85}
.cy-bubble{position:absolute;z-index:2;left:8px;top:8px;max-width:86%;padding:7px 11px;border:2px solid var(--edge);border-radius:16px 16px 16px 4px;background:var(--card);color:var(--ink);font-size:.8rem;line-height:1.3;box-shadow:2px 2px 0 var(--edge);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cy-plain{padding:14px 12px 12px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.cy-c0{background:var(--pop);color:var(--onpop,#fff)}
.cy-c1{background:var(--accent-soft)}
.cy-c2{background:var(--card)}
.cy-quote{font:400 1.05rem/1.3 var(--serif)}
.cy-initial{font:400 2.6rem/1 var(--serif);opacity:.9}
.cy-plain .cy-cap{color:inherit}
.cy-c0 .cy-cap{color:#14323a}
.cy-c0 .cy-quote,.cy-c0 .cy-initial{color:#fffaf0;text-shadow:2px 2px 0 #14323a}

.cy-stat{font:inherit;cursor:pointer;color:var(--ink);box-shadow:none}
.cy-stat.on{background:var(--pop);border-color:var(--edge);box-shadow:var(--offset-sm)}
.cy-stat.on b,.cy-stat.on span{color:#14323a}
.week-nav.cy-years{width:fit-content;min-width:180px;margin:6px auto 14px;padding:3px;gap:4px}
#recipe .week-nav.cy-years .week-label{flex:1;font-size:1.25rem;line-height:1;color:var(--ink);letter-spacing:0;text-align:center;padding:0 8px;border:0}
.cy-years .nav-arrow{width:34px;height:34px}
.cy-years .nav-arrow:disabled{opacity:.3;cursor:default}
.cy-notes-toggle{display:flex;align-items:center;gap:8px;margin:14px 2px 14px;font-size:.9rem}

.cy-list{margin-top:12px}

/* the photo wall: tiles touch, no gaps; the whole wall carries the outline */
.cy-masonry{gap:0;border:var(--bw,2px) solid var(--edge);border-radius:14px;overflow:hidden;box-shadow:var(--offset-sm);background:var(--edge)}
.cy-masonry .cy-tile{margin:0;border:0;border-radius:0;box-shadow:none}
.cy-masonry{align-items:stretch}
.cy-masonry .cy-col{display:flex;flex-direction:column}
.cy-masonry .cy-col > .cy-tile:last-child{flex:1 1 auto;display:flex}      /* the shorter column's last picture stretches, so the bottom edge of the wall is straight */
.cy-masonry .cy-col > .cy-photo:last-child img{flex:1 1 auto;min-width:0}
.cy-masonry .cy-col > .cy-plain:last-child{flex-direction:column;justify-content:space-between}

/* wall styles for the gallery: "wall" (flush photos), "polaroid" (pinned prints), "plates" (round plates on the counter) */
.cy-polaroid .cy-cap,.cy-plates .cy-cap{display:none}
.cy-polaroid .cy-photo::after,.cy-plates .cy-photo::after{display:none}
.cy-polaroid{position:relative;gap:14px;padding:84px 12px 22px;background:var(--card);border:var(--bw,2px) solid var(--edge);border-radius:14px;box-shadow:var(--offset-sm);overflow:hidden}
.cy-polaroid .cy-col{gap:20px}
.cy-polaroid .cy-col:nth-child(even){margin-top:26px}
.cy-polaroid .cy-tile,.cy-polaroid .cy-col > .cy-tile:last-child{flex:none;display:block;margin:0;padding:7px 7px 30px;background:#fff;border:0;border-radius:3px;box-shadow:0 4px 10px rgba(20,50,58,.45);transform:rotate(var(--r,0deg))}
.cy-polaroid .cy-tile{overflow:visible}
.cy-polaroid .cy-photo img,.cy-polaroid .cy-col > .cy-photo:last-child img{height:auto;min-height:150px;flex:none}
.cy-polaroid .cy-plain{min-height:150px}
.cy-plates{gap:12px;border:0;box-shadow:none;background:none;border-radius:0;overflow:visible;padding:6px 2px 10px}
.cy-plates .cy-col{gap:12px}
.cy-plates .cy-col:nth-child(even){margin-top:44px}
.cy-plates .cy-tile,.cy-plates .cy-col > .cy-tile:last-child{flex:none;display:block;margin:0;aspect-ratio:1;border:var(--bw,2.5px) solid var(--edge);border-radius:50%;box-shadow:var(--offset-sm)}
.cy-plates .cy-photo img,.cy-plates .cy-col > .cy-photo:last-child img{width:100%;height:100%;min-height:0;flex:none}
.cy-plates .cy-plain{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;min-height:0}
.cy-plates .cy-bubble{left:50%;top:auto;bottom:6px;transform:translateX(-50%);max-width:80%;text-align:center;font-size:.7rem;-webkit-line-clamp:2}

/* the name, written on the white strip of a polaroid with a marker */
.cy-marker{display:none}
.cy-polaroid .cy-marker{display:flex;align-items:center;justify-content:center;position:absolute;left:3px;right:3px;bottom:3px;height:52px;z-index:2;text-wrap:balance;text-align:center;white-space:normal;overflow:hidden;font:400 1rem/1.02 var(--marker,"Reenie Beanie"),"Segoe Script","Bradley Hand","Marker Felt",cursive;color:#1d2f4a;opacity:.88;letter-spacing:0;transform:none;overflow-wrap:anywhere}
.cy-polaroid .cy-tile,.cy-polaroid .cy-col > .cy-tile:last-child{padding-bottom:60px}

/* the handwriting for polaroid captions is bundled with the app, so it looks the same on every phone and works offline */
@font-face{font-family:"Reenie Beanie";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ReenieBeanie.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}

/* the year, pressed into the board at the top left */
.cy-stamp{position:absolute;left:50%;top:18px;z-index:2;padding:2px 24px 3px;transform:translateX(-50%) rotate(-2.5deg);white-space:nowrap;
  font:400 2.7rem/1 var(--marker,"Reenie Beanie"),"Segoe Script","Bradley Hand",cursive;letter-spacing:.04em;color:#1d2f4a;
  /* a strip of masking tape: pale, a little see-through, with torn ends and a faint grain */
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,rgba(0,0,0,0) 2px 5px),linear-gradient(180deg,rgba(236,218,170,.97),rgba(221,198,143,.97));
  clip-path:polygon(3% 0,97% 0,100% 12%,97% 24%,100% 36%,97% 50%,100% 62%,97% 76%,100% 88%,97% 100%,3% 100%,0 88%,3% 76%,0 62%,3% 50%,0 36%,3% 24%,0 12%);
  filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.3));pointer-events:none;user-select:none;-webkit-user-select:none}
.cy-polaroid .cy-col{position:relative;z-index:1}

#recipe .week-nav.cy-years .cy-year-btn{background:none;box-shadow:none;cursor:pointer;margin:0;-webkit-tap-highlight-color:transparent}
#recipe .week-nav.cy-years .cy-year-btn:active{opacity:.6}

/* cooked this year: white boxes on the cream page; the date sits to the left in three lines */
.cy-item .cy-body{flex:1}
.cy-date{flex:none;width:42px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1;color:var(--ink)}
.cy-date small{font:600 .68rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cy-date b{font:400 1.7rem/1.05 var(--serif);color:var(--ink)}
.cy-item-photos .cy-thumb-mine{margin-left:auto}
.cy-list > .course-head{margin:22px 2px 10px}
.cy-list > .course-head:first-child{margin-top:12px}
/* these are buttons, so keep the app's red hover from flooding them */
/* notes in the lists look like the scrapbook's speech bubbles */
.cy-item .cy-body{gap:6px;align-items:flex-start}
.cy-item .cy-note{align-self:flex-start;max-width:100%;padding:6px 11px;border:2px solid var(--edge);border-radius:16px 16px 16px 4px;background:var(--card);color:var(--ink);font-size:.82rem;line-height:1.3;box-shadow:2px 2px 0 var(--edge)}

/* white year pill and white (unchecked) Show notes box */
.week-nav.cy-years{background:var(--card)}
.cy-notes-toggle input:not(:checked){background-color:var(--card)}

/* the Cooked this year page sits on the main page's paper colour, with cream card-coloured boxes */
#card.cy-page .recipe{background:var(--paper)}
#card.cy-page .sheet-bar::before{background:var(--card);opacity:1}
.cy-polaroid{isolation:isolate}

/* the page title is centred, above the year pill */
#card.cy-page .recipe .panel-h2{text-align:center}

/* hover: the slight lift the main page cards have, not the red wash */
.cy-item,.cy-stat{transition:transform .12s,box-shadow .12s}
.cy-item,.cy-stat:not(.on){box-shadow:var(--offset-sm,2px 2px 0 var(--edge))}
.cy-item:hover,.cy-item:active,.cy-item:focus-visible,.cy-stat:not(.on):hover,.cy-stat:not(.on):focus-visible{background:var(--card);color:var(--ink);border-color:var(--edge)}
@media (hover:hover){.cy-item:hover,.cy-stat:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--edge)}.cy-stat.on:hover{background:var(--pop);color:#14323a}}
:root[data-theme="dark"] .cy-item:hover,:root[data-theme="dark"] .cy-stat:hover{box-shadow:5px 5px 0 rgba(255,93,115,.6)}

/* the note editor, laid out for a right thumb: actions low and to the right, Save largest and furthest right */
.made-ask-date{position:relative;display:flex;justify-content:flex-end}
.made-date-input{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.made-date-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px}
.made-ask-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.made-ask-actions .link.danger{margin-right:auto;padding:10px 4px}
.made-ask-actions .ghost{min-height:44px;padding:8px 16px}
.made-ask-actions .made-save{min-height:48px;min-width:132px;padding:10px 26px;font-size:1rem;font-weight:700;border-radius:999px}
.made-ask .note-photo-actions{justify-content:flex-start}
.made-ask .made-note-input{min-height:46px}

body.noting .options-fab{display:none}

/* Change date is one of the photo-style buttons, in the same row when there is room */
.made-ask .note-photo-actions .made-date-btn{min-height:0;padding:8px 14px;border-radius:var(--rad,12px);font-size:.88rem;gap:7px}
.made-ask .made-date-input{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.made-ask .note-photo-actions{position:relative}

/* bulk import */
.bulk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.about-sec textarea{width:100%;padding:10px 12px;border:2px solid var(--edge);border-radius:var(--rad,12px);background:var(--card);color:var(--ink);font:inherit;line-height:1.4;resize:vertical}
.bulk-status{margin-top:14px}
.bulk-bar{height:12px;border:2px solid var(--edge);border-radius:999px;background:var(--card);overflow:hidden;margin:8px 0 10px}
.bulk-bar span{display:block;height:100%;background:var(--pop)}
.bulk-failed h4{margin:12px 0 6px}
.bulk-failed ul{margin:0 0 10px;padding-left:18px;font-size:.88rem;overflow-wrap:anywhere}

/* cooking mode: the ingredients a step uses, as tick boxes under the step */
.cook-uses{margin:14px 0 4px;padding:12px 14px;border:2px solid var(--edge);border-radius:var(--rad,12px);background:var(--card)}
.cook-uses h4{margin:0 0 6px;font:700 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.cook-use{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:1.02rem;line-height:1.35;cursor:pointer}
.cook-use input{flex:none;width:22px;height:22px;margin-top:1px}
.cook-use input:checked + span{text-decoration:line-through;opacity:.6}

.cook-uses-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cook-uses-head .link{padding:6px 2px;font-size:.85rem}
.cook-use-row{display:flex;align-items:center;gap:8px}
.cook-use-row .cook-use{flex:1;min-width:0}
.cook-use-x{flex:none;width:40px;height:40px;border-radius:999px;background:none;border:1.5px solid var(--edge);color:var(--ink);font-size:1.3rem;line-height:1;box-shadow:none}
.cook-use-add{width:100%;margin-top:8px;min-height:44px;padding:8px 10px;border:2px solid var(--edge);border-radius:var(--rad,12px);background:var(--card);color:var(--ink);font:inherit}
.cook-uses-note{margin:8px 0 0;font-size:.74rem;color:var(--muted)}
.cook-use-open{display:block;margin:14px 0 0;padding:8px 0;font-size:.88rem}

.cook-top #cook-ings{flex:none;white-space:nowrap;min-height:44px;padding:8px 16px}
.cook-top{gap:10px}

.cook-use-x{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.cook-use-x svg{display:block}
/* All done page: the two photo buttons sit side by side, centred under the note box */
.cook-done .note-photo{align-self:stretch;align-items:center}
.cook-done .note-photo-actions{justify-content:center}
.cook-done .note-photo-btn{min-width:0;padding:10px 16px;font-size:.98rem}

/* the All done page has no Next: Back takes the whole bar, as it did before, and the "Finished" text goes */
.cook-nav:has(#cook-next[hidden]) #cook-prev{flex:1}
.cook-nav:has(#cook-next[hidden]) #cook-progress{display:none}

/* tag colours: six to pick from, tucked at the bottom right of the tag menu */
.tag[data-hue],.tag.small[data-hue]{background:color-mix(in srgb,var(--th,var(--accent)) 16%,var(--card));border-color:var(--th,var(--accent));color:color-mix(in srgb,var(--th,var(--accent)) 72%,var(--ink))}
.tag[data-hue="0"]{--th:#d9483f}.tag[data-hue="1"]{--th:#e8832a}.tag[data-hue="2"]{--th:#d9a514}.tag[data-hue="3"]{--th:#3f9b5a}.tag[data-hue="4"]{--th:#3b7bd1}.tag[data-hue="5"]{--th:#8e5bc4}
.tags .tag{cursor:pointer}.tags .tag.aimed{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--brass)}
.tag-colours{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:2px}
.tag-colours-for{margin-right:auto;font-size:.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tag-swatch{flex:none;width:26px;height:26px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--sw) 16%,var(--card));border:1px solid var(--sw);box-shadow:none;letter-spacing:0}   /* the same pale fill and thin edge the coloured tag itself gets */
.tag-swatch.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.tag-swatch:disabled{opacity:.35;cursor:default}

/* a suggestion that already has a colour shows it, and keeps it once added */
.tag-idea[data-hue]{--th:var(--accent);border-style:solid;border-color:var(--th);background:color-mix(in srgb,var(--th) 14%,var(--card));color:color-mix(in srgb,var(--th) 72%,var(--ink))}
.tag-idea[data-hue="0"]{--th:#d9483f}.tag-idea[data-hue="1"]{--th:#e8832a}.tag-idea[data-hue="2"]{--th:#d9a514}.tag-idea[data-hue="3"]{--th:#3f9b5a}.tag-idea[data-hue="4"]{--th:#3b7bd1}.tag-idea[data-hue="5"]{--th:#8e5bc4}

/* close button on top of the tag menu */
.tag-panel{position:relative}
.tag-panel-close{align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;margin:-2px -2px -4px 0;border-radius:50%;background:transparent;color:var(--muted);border:0;box-shadow:none}
.tag-panel-close:active{transform:none}
@media (hover:hover){.tag-panel-close:hover{background:var(--surface);color:var(--ink)}}

/* tags on the recipe are not editable; the colour is picked in the + Tag menu */
.tags .tag{cursor:default}
.tag-swatch:disabled.on{opacity:1}
.tag-swatch:disabled:not(.on){opacity:.35}

.tag-swatch:disabled{opacity:.35}.tag-swatch:disabled.on{opacity:1}

/* the small tags on the cards take the colour too (their own rule used to win over the six colour values) */
.tag.small[data-hue="0"]{--th:#d9483f}.tag.small[data-hue="1"]{--th:#e8832a}.tag.small[data-hue="2"]{--th:#d9a514}.tag.small[data-hue="3"]{--th:#3f9b5a}.tag.small[data-hue="4"]{--th:#3b7bd1}.tag.small[data-hue="5"]{--th:#8e5bc4}

/* bottom of the tag menu: colours on the left, Add on the right */
.tag-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag-bottom .tag-colours{margin:0;justify-content:flex-start;flex-wrap:nowrap;gap:7px}
.tag-add-go{flex:none;padding:7px 18px;font-size:.9rem}

/* your own staples: a × inside the pill, there only while the "Add your own" box is in use */
.pantry-own{display:inline-flex}
.pantry-own .pantry-chip{display:inline-flex;align-items:center;gap:6px}
.pantry-own-x{display:none;align-items:center;justify-content:center;width:18px;height:18px;margin-right:-6px;border-radius:50%;opacity:.75;cursor:pointer}
.pantry-own-x svg{width:11px;height:11px}
.pantry-mine.editing .pantry-own-x{display:inline-flex}
@media (hover:hover){.pantry-own-x:hover{opacity:1;background:rgba(0,0,0,.12)}}
.pantry-add{display:flex;gap:8px;align-items:center;margin-top:8px}
.pantry-add .tag-input{flex:1;min-width:0;width:auto}

/* every page that isn't a recipe has a solid top bar from the start (no list showing through above it) */
#card.bar-solid .sheet-bar::before{background:var(--card);opacity:1}

/* Suggest a week: options that narrow or re-rank what is suggested */
.sw-opts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.sw-opt{padding:6px 14px;font-size:.85rem;background:var(--card);color:var(--ink);border:2px solid var(--edge);border-radius:999px;box-shadow:none}
.sw-opt.on{background:var(--pop);color:var(--onpop)}
.sw-opt:active{transform:none}
.sw-tag{font:inherit;font-size:.85rem;padding:6px 10px;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);max-width:100%}
.sw-note{margin:2px 0 8px;font-size:.88rem}
.sw-note:empty{display:none}

.sw-slot{margin-left:8px;padding:0 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}

/* Suggest a week: grouped options, word boxes, summary */
.sw-group{margin:14px 0 4px}
.sw-sub{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 6px}
.sw-group .sw-opts{margin:0 0 8px}
.sw-wordbox{margin:10px 0 4px}
.sw-words{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sw-words:empty{display:none}
.sw-word{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 12px;border:2px solid var(--edge);border-radius:999px;background:var(--card);font-size:.85rem}
.sw-word button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);box-shadow:none}
.sw-word button svg{width:11px;height:11px}
.sw-word button:active{transform:none}
.sw-sum{margin:6px 2px 0;font-size:.88rem;color:var(--desc)}
.sw-sum:empty{display:none}

/* allergy and dislike flags */
.allergy-alert{margin:14px 0 6px;padding:10px 14px;border:2px solid #b3261e;border-radius:var(--rad,10px);background:color-mix(in srgb,#d9483f 10%,var(--card));color:var(--ink);font-size:.9rem;line-height:1.45}
.allergy-alert.maybe{border-color:#c77c0a;background:color-mix(in srgb,#e8a317 12%,var(--card))}
.allergy-alert.soft{border-color:var(--muted);background:var(--card)}
.allergy-alert p{margin:4px 0}
.allergy-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#b3261e;letter-spacing:.02em}
.allergy-alert.maybe .allergy-head{color:#9a5b00}
.allergy-alert.soft .allergy-head{color:var(--ink)}
.allergy-ico{display:inline-flex}
.allergy-note{font-size:.78rem;color:var(--muted);margin-top:6px}
.flag-badge{flex:none;margin-left:8px;padding:0 8px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor}
.flag-badge.allergy{color:#b3261e;background:color-mix(in srgb,#d9483f 12%,var(--card))}
.flag-badge.maybe{color:#9a5b00;background:color-mix(in srgb,#e8a317 14%,var(--card))}
.flag-badge.dislike{color:var(--muted)}
.allergy-flag{display:inline-block;margin-top:4px;padding:1px 9px;border-radius:999px;font-size:.72rem;font-weight:700;color:#b3261e;border:1px solid #b3261e;background:color-mix(in srgb,#d9483f 10%,var(--card))}
.allergy-flag.maybe{color:#9a5b00;border-color:#c77c0a;background:color-mix(in srgb,#e8a317 12%,var(--card))}
.allergy-flag.soft{color:var(--muted);border-color:var(--muted);background:none;font-weight:600}
.allergy-warn{margin:0 0 14px;padding:12px 14px;border:2px solid #b3261e;border-radius:var(--rad,10px);background:color-mix(in srgb,#d9483f 8%,var(--card));font-size:.9rem}
.allergy-warn p{margin:6px 0 0}
.allergy-warn b{color:#b3261e}
#cook-panel .allergy-alert,.cook-body .allergy-alert{margin:0 0 12px}

/* delete a logged time from How it went */
.made-diary-del{color:var(--danger)}
.made-diary-row.confirm{flex-wrap:wrap;align-items:center}
.made-diary-row.confirm .made-diary-text{flex:1 1 100%}

/* menus you have made */
.made-menus{margin-top:22px}
.made-menus h3{margin:0 0 8px}
.mm-card{margin:0 0 10px;padding:12px 14px;border:2px solid var(--edge);border-radius:var(--rad);background:var(--card)}
.mm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mm-name{font-family:var(--serif);font-weight:400;font-size:1.05rem}
.mm-date{font-size:.8rem;color:var(--muted);white-space:nowrap}
.mm-body{display:flex;gap:12px;align-items:flex-start;margin-top:6px}
.mm-text{flex:1;min-width:0}
.mm-recipes{font-size:.82rem;line-height:1.4}
.mm-note{margin-top:6px;padding:6px 11px;border:2px solid var(--edge);border-radius:16px 16px 16px 4px;background:var(--paper);font-size:.85rem;line-height:1.35;display:inline-block;max-width:100%}
.mm-photo{flex:none;width:64px;height:64px;padding:0;border:2px solid var(--edge);border-radius:6px;overflow:hidden;background:none;box-shadow:none}
.mm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mm-actions{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:10px}
.mm-q{margin:8px 0 0;font-size:.88rem}
.menu-madeline{margin:-4px 0 10px;font-size:.88rem}
.menu-madeline .link{padding:0 2px}
.mm-card .made-note-input{width:100%;margin-top:8px}

/* past menus: the card opens the menu, like the cards above */
.mm-card.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.mm-card.clickable:hover{transform:translateY(-1px);box-shadow:var(--offset)}}

/* past menus: real buttons, the page for one made menu, and the menu chip on a recipe's note */
.mm-btn{padding:6px 14px;font-size:.85rem}
.mm-chip{display:inline-block;margin-left:8px;padding:0 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--tag-line);font-size:.7rem;font-weight:600;letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.mm-note .mm-chip{margin:0 0 0 8px}
.pm-entry{margin:6px 0 16px}
.pm-recipe{align-items:flex-start}
.pm-recipe .mm-actions{margin-top:8px}
.pm-recipe-edit .made-note-input{width:100%}

/* an event's photos: up to ten, with a × on each */
.pm-photos{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.pm-ph{position:relative;width:76px;height:76px}
.pm-ph-img{display:block;width:100%;height:100%;padding:0;border:2px solid var(--edge);border-radius:6px;overflow:hidden;background:var(--surface);box-shadow:none}
.pm-ph-img img{width:100%;height:100%;object-fit:cover;display:block}
.pm-ph-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--edge);background:var(--card);color:var(--ink);box-shadow:none}
.pm-ph-x svg{width:11px;height:11px}
.pm-ph-x:active{transform:none}
.pm-count{margin:4px 0 0;font-size:.8rem}
.pm-chooser{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.pm-chooser[hidden]{display:none}
.pm-entry .made-date-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

.pm-done{margin-top:18px}
.pm-done button{flex:1}

/* the menu pages (list, one menu, one made instance) sit on the main page's paper colour, with the cards in the main page's card cream */
#card.menu-page .recipe{background:var(--paper)}
#card.menu-page .sheet-bar::before{background:var(--card);opacity:1}
#card.menu-page .menu-card,#card.menu-page .cf-card,#card.menu-page .mm-card,#card.menu-page .menu-picker{background:var(--card)}

/* past menus: a red title band like the menu cards' teal one, with the date as its chip */
.mm-card{padding:0;overflow:hidden}
.mm-card .mm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--accent);border-bottom:var(--bw) solid var(--edge)}
.mm-card .mm-name{font:400 1.12rem/1.2 var(--serif);color:#fffaf0;text-shadow:2px 2px 0 #14323a;letter-spacing:.03em;min-width:0}
.mm-card .mm-date{flex:none;min-width:26px;height:26px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);font:700 .78rem var(--sans);white-space:nowrap}
.mm-main{padding:12px 14px 14px}
.mm-main .mm-body{margin-top:0}

/* a title you can rename, and the tappable date on a made menu */
.menu-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.menu-titlerow .menu-h2{margin:0;flex:1 1 auto;min-width:0}
.menu-titlerow .cf-input{flex:1 1 200px;margin:0;width:auto}
.menu-rename{flex:none;padding:5px 12px;font-size:.8rem}
.pm-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pm-datechip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);font:600 .85rem var(--sans);box-shadow:none;letter-spacing:0}
.pm-datechip:active{transform:none}
.pm-datechip svg{width:16px;height:16px}
.pm-datechip-edit{font-weight:500;font-size:.72rem;color:var(--accent);text-decoration:underline}

/* menu title bands: honey for your menus, butter for the past ones (dark text, since both are light) */
:root{--honey:#e6a92e;--butter:#f7e3a1}
:root[data-theme="dark"]{--honey:#d8a233;--butter:#e9d58e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--honey:#d8a233;--butter:#e9d58e}}
.menu-card .menu-head{background:var(--honey)}
.menu-card .menu-name{color:#14323a;text-shadow:none}
.mm-card .mm-head{background:var(--butter)}
.mm-card .mm-name{color:#14323a;text-shadow:none}
.menu-card .menu-count,.mm-card .mm-date{background:#fffaf0;color:#14323a;border-color:#14323a}

/* future menus get sage title bands (the past ones stay butter), under their own heading */
:root{--sage:#8aa889}
:root[data-theme="dark"]{--sage:#7f9d7e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sage:#7f9d7e}}
.menu-card .menu-head{background:var(--sage)}
.future-menus{margin-top:6px}
.future-menus h3{margin:0 0 8px}

/* trying the brand teals for the menu bands: teal for future menus, deep teal for past ones (cream titles again) */
:root{--band-future:var(--pop);--band-past:#12706c}
:root[data-theme="dark"]{--band-past:#2a8d88}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-past:#2a8d88}}
.menu-card .menu-head{background:var(--band-future)}
.mm-card .mm-head{background:var(--band-past)}
.menu-card .menu-name,.mm-card .mm-name{color:#fffaf0;text-shadow:2px 2px 0 #14323a}

/* past menus: the muted grey-teal band (cream title) */
:root{--band-past:#5f7c82}
:root[data-theme="dark"]{--band-past:#4d7378}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-past:#4d7378}}

/* past menus: the pale teal tint band (dark title); dark theme keeps a deep tint with a cream title */
:root{--band-past:#9fd8d4}
:root[data-theme="dark"]{--band-past:#2f6a6c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-past:#2f6a6c}}
.mm-card .mm-name{color:#14323a;text-shadow:none}
:root[data-theme="dark"] .mm-card .mm-name{color:#fffaf0;text-shadow:2px 2px 0 #0b1a20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mm-card .mm-name{color:#fffaf0;text-shadow:2px 2px 0 #0b1a20}}

/* the two section headings use the main page's course heading (dot, title, line, count) */
.future-menus .course-head,.made-menus .course-head{margin:18px 0 12px}
.made-menus{margin-top:14px}

/* the menu pages' note, photo and make-it-again buttons: coloured, each with its icon */
.mm-btn{display:inline-flex;align-items:center;gap:7px;border:var(--bw) solid var(--edge);border-radius:var(--rad);box-shadow:var(--offset-sm);font-weight:600}
.mm-btn svg{flex:none}
.mm-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--edge)}
.mmb-note{background:var(--pop);color:#fff}
.mmb-photo,.mmb-camera{background:var(--honey);color:#14323a}
.mmb-again{background:var(--accent);color:#fff}
.mm-btn:disabled{opacity:.55;box-shadow:none}
@media (hover:hover){.mmb-note:hover{background:var(--pop);filter:brightness(1.07)}.mmb-photo:hover,.mmb-camera:hover{background:var(--honey);filter:brightness(1.06)}.mmb-again:hover{background:var(--accent);filter:brightness(1.07)}}
.menu-rename{background:var(--card);color:var(--ink)}

/* each recipe's own Add photo is cherry; the event's photos button stays honey */
.pm-recipe .mmb-photo{background:var(--accent);color:#fff}
@media (hover:hover){.pm-recipe .mmb-photo:hover{background:var(--accent);filter:brightness(1.07)}}

/* every Add photo button is the cherry of the Done button */
.mmb-photo,.mmb-camera{background:var(--accent);color:#fff}
@media (hover:hover){.mmb-photo:hover,.mmb-camera:hover{background:var(--accent);filter:brightness(1.07)}}

/* wider screens: each recipe's Add note / Add photo start at the left edge of the card, under the photo, not beside the title */
@media (min-width: 700px){
  .pm-recipe{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"thumb title" "thumb meta" "actions actions";column-gap:12px;row-gap:2px;align-items:start}
  .pm-recipe .cf-body{display:contents}
  .pm-recipe .cf-thumb{grid-area:thumb}
  .pm-recipe .cf-title{grid-area:title;justify-self:start}
  .pm-recipe .cf-miss{grid-area:meta}
  .pm-recipe .pm-recipe-edit{grid-area:actions;margin-top:8px}
}

/* event photo buttons are honey again; each recipe's own Add photo stays cherry */
.mmb-photo,.mmb-camera{background:var(--honey);color:#14323a}
@media (hover:hover){.mmb-photo:hover,.mmb-camera:hover{background:var(--honey);filter:brightness(1.06)}}
.pm-recipe .mmb-photo{background:var(--accent);color:#fff}
@media (hover:hover){.pm-recipe .mmb-photo:hover{background:var(--accent);filter:brightness(1.07)}}
/* wider screens: each recipe's two buttons sit at the right of its card */
@media (min-width: 700px){
  .pm-recipe .pm-recipe-edit .mm-actions{justify-content:flex-end}
  .pm-recipe .pm-recipe-edit .mm-body{justify-content:flex-end}
}

/* notes on the menu pages: room between the text box and its Cancel / Save pills */
.pm-entry .made-ask-actions,.pm-recipe-edit .made-ask-actions,.mm-card .made-ask-actions{margin-top:14px}
.pm-entry .made-note-input,.pm-recipe-edit .made-note-input,.mm-card .made-note-input{margin-bottom:0}

/* a recipe's own photos at an event: up to three, smaller than the event's */
.pm-photos.small .pm-ph{width:60px;height:60px}
.pm-recipe-edit .pm-photos{margin:8px 0 2px}
@media (min-width: 700px){.pm-recipe .pm-recipe-edit .pm-photos,.pm-recipe .pm-recipe-edit .pm-chooser{justify-content:flex-end}}

/* up to three photos on one made time (the note editor) */
.note-photo-preview.multi{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.cp-item{position:relative;width:84px;height:84px}
.cp-item img{width:100%;height:100%;object-fit:cover;border:2px solid var(--edge);border-radius:8px;display:block}
.cp-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--edge);background:var(--card);color:var(--ink);box-shadow:none}
.cp-x svg{width:11px;height:11px}
.cp-x:active{transform:none}
.cp-count{margin:0 0 6px;font-size:.8rem}
.cp-count:empty{display:none}
.diary-photos{display:inline-flex;gap:6px;flex-wrap:wrap}

/* the menu pages' note and photo buttons read like the main page's What can I make? and Menus buttons: dark text, white-filled icons */
.mm-btn,.mmb-note,.mmb-photo,.mmb-camera,.mmb-again,.pm-recipe .mmb-photo{color:#14323a}
.mm-btn svg{stroke:#14323a}

/* every note and photo button is the teal of the main page's buttons; only Make it again stays cherry */
.mmb-photo,.mmb-camera,.pm-recipe .mmb-photo{background:var(--pop);color:#14323a}
@media (hover:hover){.mmb-photo:hover,.mmb-camera:hover,.pm-recipe .mmb-photo:hover{background:var(--pop);filter:brightness(1.07)}}

/* the event's own photo buttons are honey (the instance page's top row and chooser, and the Past Menus cards); each recipe's stay teal */
.pm-entry .mmb-photo,.pm-entry .mmb-camera,.mm-card .mmb-photo{background:var(--honey);color:#14323a}
@media (hover:hover){.pm-entry .mmb-photo:hover,.pm-entry .mmb-camera:hover,.mm-card .mmb-photo:hover{background:var(--honey);filter:brightness(1.06)}}

/* Make it again: white text (the icon keeps its dark outline and white fill) */
.mmb-again{color:#fff}

/* Show notes / Show photos sit side by side; photos appear on the right of each row in the times and recipes lists */
.cy-toggles{display:flex;flex-wrap:wrap;gap:4px 22px}
.cy-photostrip{flex:none;display:inline-flex;gap:6px;margin-left:auto;align-self:center}
.cy-photostrip img{width:48px;height:48px;object-fit:cover;border:2px solid var(--edge);border-radius:6px;display:block}

/* Show notes and Show photos sit at the right */
.cy-toggles{justify-content:flex-end}
.cy-toggles .cy-notes-toggle{margin-right:2px}

/* the Display card's settings, grouped under small headings */
.set-group{margin:20px 0 4px;padding-top:12px;border-top:1px solid var(--line);font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.set-group:first-of-type{margin-top:4px;padding-top:0;border-top:0}

/* Allergies & dislikes inside the Recipes card: a settings-style row that opens in place */
.allergy-inline{border-top:1px solid var(--line);padding-top:4px}
.allergy-inline-sum{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer}
.allergy-inline-sum::-webkit-details-marker{display:none}
.allergy-inline-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.allergy-inline-text b{font-weight:600}
.allergy-inline-text .muted{font-size:.85rem}
.allergy-inline .pantry-count{flex:none;font-size:.8rem;color:var(--muted)}
.allergy-inline .chev{flex:none;font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .15s}
.allergy-inline[open] .chev{transform:rotate(90deg)}
.allergy-inline .about-body{padding:0 0 8px}

/* Allergies & dislikes: a plain note (no red box), no line above the row, and a boxed Add on the closed row */
.allergy-inline{border-top:0}
.allergy-plain{margin:0 0 6px;font-size:.88rem;line-height:1.5}
.allergy-more-label{margin-top:12px}
.allergy-quick-add{flex:none;padding:6px 16px;font-size:.85rem}
.allergy-inline[open] .allergy-quick-add{display:none}
/* each recipe's Add note / Add photo on the instance page are white; the EVENT note and photo buttons are separate (teal note, honey photos) */
.pm-recipe .mmb-note,.pm-recipe .mmb-photo,.pm-recipe .mmb-camera{background:#fff;color:#14323a}
@media (hover:hover){.pm-recipe .mmb-note:hover,.pm-recipe .mmb-photo:hover,.pm-recipe .mmb-camera:hover{background:#fff;filter:brightness(.96)}}

/* no black line between the Allergies & dislikes row and what opens under it */
.allergy-inline .about-body{border-top:0;padding-top:0}

/* the "!" on a recipe card's photo: red for a possible allergen, grey for a dislike */
.allergy-mark{position:absolute;left:9px;bottom:5px;z-index:2;font:800 1.7rem/1 var(--sans);pointer-events:auto;text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 4px rgba(255,255,255,.9)}
.allergy-mark.red{color:#d0201a}
.allergy-mark.grey{color:#6f7f83}
/* the "n set" count on the Allergies & dislikes row is a pill */
.allergy-inline .pantry-count{padding:2px 12px;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);font-size:.78rem;font-weight:700;white-space:nowrap}

/* the allergy box's heading stays on one or two lines, never three */
.allergy-head{align-items:flex-start;font-size:.95rem;line-height:1.3;text-wrap:balance}
.allergy-head .allergy-ico{margin-top:1px}

/* the card's allergy mark: a small plain stroke-and-dot "!", not a cartoon one */
.allergy-mark{left:9px;bottom:7px;font:inherit;display:inline-flex;text-shadow:none;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.85))}
.allergy-mark svg{display:block}

.allergy-mark{left:7px;bottom:5px}

/* the card's allergy mark: a white circle badge, the size of the heart and made badges, red-bordered with a red ! (grey for a dislike) */
.allergy-mark{left:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid currentColor;display:inline-grid;place-items:center;filter:none;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.allergy-mark svg{width:12px;height:12px}

.allergy-mark.yellow{color:#d9a514}

/* a dislike is black */
.allergy-mark.grey{color:#14323a}

/* Past Menus title bars are the card white (same as the cards), with dark titles; Make it again has dark text again */
.mm-card .mm-head{background:var(--card)}
.mm-card .mm-name{color:var(--ink);text-shadow:none}
.mmb-again{color:#14323a}

/* Make it again rests at what used to be its hover colour (the cherry, one step brighter) */
.mmb-again,.mm-card .mmb-again,.pm-entry .mmb-again{background:#f03751}
@media (hover:hover){.mmb-again:hover,.mm-card .mmb-again:hover,.pm-entry .mmb-again:hover{background:#f03751;filter:none}}

/* Supermarket search: the country sits on the same line as On / Off; "Search in" is a row of chips underneath */
.search-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.setting.search-in{flex-direction:column;align-items:flex-start;gap:8px;padding-top:0;border-bottom:0}

/* shop logos on the chips, and the shopping list's shop links sit at the right */
.shop-chip{display:inline-flex;align-items:center;gap:7px}
.shop-dot{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:700 .68rem/1 var(--sans);letter-spacing:0}
.store-links{justify-content:flex-end}
.store-links a{display:inline-flex;align-items:center;gap:6px}

/* "Include my photo" tick at the top of the recipe's ⋯ menu */
.card-menu .menu-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;font-size:.95rem;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);margin-bottom:4px}
.card-menu .menu-opt input{flex:none;width:19px;height:19px;margin:0;accent-color:var(--accent)}

/* optional event date on a future menu */
.menu-right{display:inline-flex;align-items:center;gap:8px;flex:none}
.menu-card .menu-date{flex:none;height:26px;padding:0 10px;display:inline-flex;align-items:center;border:2px solid #14323a;border-radius:999px;background:#fffaf0;color:#14323a;font:700 .78rem var(--sans);white-space:nowrap}
.menu-event{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;position:relative}
.menu-event .pm-datechip .ico{display:inline-flex}

/* menu page: bigger, easier-to-tap event date */
.menu-event{gap:12px;margin:8px 0 12px}
.menu-event .pm-datechip{min-height:46px;padding:8px 18px;font-size:1rem;gap:9px}
.menu-event .pm-datechip svg{width:20px;height:20px}
.menu-event .pm-datechip-edit{font-size:.85rem}
.menu-event button.ghost{min-height:46px;padding:8px 18px}
.menu-event button.link{min-height:44px;padding:0 10px}
/* Made this menu: a themed sheet that slides up from the bottom over a dimmed page */
.ms-wrap{position:fixed;inset:0;z-index:70}
.ms-wrap[hidden]{display:none}
.ms-backdrop{position:absolute;inset:0;background:rgba(20,50,58,.6);opacity:0;transition:opacity .2s}
.ms-sheet{position:absolute;left:50%;bottom:0;width:min(100%,520px);transform:translate(-50%,105%);transition:transform .24s ease;background:var(--card);border:var(--bw) solid var(--edge);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 0 rgba(20,50,58,.15);overflow:hidden;padding-bottom:var(--inset-bottom, 0px)}
.ms-wrap.open .ms-backdrop{opacity:1}
.ms-wrap.open .ms-sheet{transform:translate(-50%,0)}
.ms-title{padding:14px 18px;background:var(--pop);border-bottom:var(--bw) solid var(--edge);color:#fffaf0;text-shadow:2px 2px 0 #14323a;font:400 1.25rem/1.2 var(--serif);letter-spacing:.03em}
.ms-body{padding:18px}
.ms-opts{display:flex;gap:10px}
.ms-opts .mp-opt{flex:1;min-height:50px;padding:10px 14px;border:2px solid var(--edge);border-radius:999px;background:var(--card);color:var(--ink);font:600 1rem var(--sans);box-shadow:none}
.ms-opts .mp-opt.on{background:var(--pop);color:#fffaf0;text-shadow:1px 1px 0 #14323a}
.ms-body .mp-date{display:block;width:100%;margin:12px 0 0;min-height:50px;padding:10px 14px;font:inherit;border:2px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--ink)}
.ms-body .mp-date[hidden]{display:none}
.ms-actions{display:flex;gap:10px;margin-top:18px}
.ms-go{flex:1;min-height:50px}
.ms-cancel{min-height:50px;padding:0 20px;background:var(--card);color:var(--ink);border:2px solid var(--edge)}
.menu-sort{align-items:center;margin:6px 0 10px}
/* menu card title bars (Future and Past): the body sans, bold; the offset shadow stays */
.menu-card .menu-name,.mm-card .mm-name{font:700 1.08rem/1.2 var(--sans);letter-spacing:.01em}
/* Made this menu sheet title: same sans bold as the menu card titles */
.ms-title{font:700 1.15rem/1.2 var(--sans);letter-spacing:.01em}
/* menu card titles (Future and Past): bigger, no shadow */
.menu-card .menu-name,.mm-card .mm-name{font-size:1.32rem;text-shadow:none}
:root[data-theme="dark"] .mm-card .mm-name{text-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mm-card .mm-name{text-shadow:none}}
/* Made this menu sheet title: same size and no shadow, like the menu card titles */
.ms-title{font-size:1.32rem;text-shadow:none}
/* Made this menu sheet title: dark ink on the teal band */
.ms-title{color:#14323a}

/* iPhone (testing): a paste button beside the add box */
.ios-paste{display:block;margin:8px 0 0 auto;white-space:nowrap}
/* the alcohol switch inside the Bar / Minuman card */
.stash-alcohol{margin:4px 0 14px}

.translate-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;margin:10px 0}
.translate-row .translate-btn{font-size:.82rem}
.translate-note{font-size:.78rem;color:var(--muted)}

/* first-run version chooser */

/* in-app confirmation sheet */
.ask-wrap{position:fixed;inset:0;z-index:10000;background:rgba(20,50,58,.55);display:grid;place-items:end center;padding:0}
.ask-sheet{width:100%;max-width:520px;background:var(--card,#fff);border:2.5px solid var(--edge);border-bottom:0;border-radius:18px 18px 0 0;padding:20px 18px calc(18px + var(--inset-bottom,0px));box-shadow:0 -4px 0 var(--edge)}
.ask-sheet p{margin:0 0 16px;line-height:1.45}
.ask-actions{display:flex;gap:10px;justify-content:flex-end}

/* a recipe without a photo: start the page below the solid top bar so the title isn't hidden under it */
#recipe.no-hero{padding-top:calc(78px + var(--inset-top, 0px))}

/* free-version recipe meter (Settings > Your data) */
.limit-meter{margin:6px 0 12px}
.limit-bar{height:12px;border:2px solid var(--edge);border-radius:999px;background:var(--card);overflow:hidden;margin-bottom:6px}
.limit-bar span{display:block;height:100%;background:var(--teal,#25b5b0)}
.limit-bar span.near{background:#e6a92e}
.limit-bar span.full{background:var(--accent,#e0334c)}

/* working: a spinner and a moving stripe on a button while it fetches or translates */
button:disabled.working{opacity:1;cursor:progress}
button.working{position:relative;overflow:hidden;background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:working-sweep 1.3s linear infinite}
button.working::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.55em;vertical-align:-.12em;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:working-spin .8s linear infinite}
@keyframes working-spin{to{transform:rotate(360deg)}}
@keyframes working-sweep{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){button.working{animation:none}button.working::before{animation-duration:2.4s}}

.version-choose{position:fixed;inset:0;z-index:9999;background:var(--bg,#fdf3dc);overflow:auto;display:flex;flex-direction:column}
.version-band{background:var(--teal,#25b5b0);border-bottom:2.5px solid var(--edge);padding:calc(28px + var(--inset-top,0px)) 20px 26px;text-align:center}
.version-icon{width:72px;height:72px;border-radius:18px;border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--edge);display:block;margin:0 auto 12px;background:var(--card,#fff)}
.version-word{font:400 3.6rem/1.05 var(--serif);color:var(--accent);margin:0;-webkit-text-stroke:1.4px var(--accent);paint-order:stroke fill;text-shadow:1px 1px 0 var(--edge),2px 2px 0 var(--edge),3px 3px 0 var(--edge),4px 4px 0 var(--edge)}
.version-box{width:100%;max-width:440px;margin:0 auto;padding:26px 20px calc(30px + var(--inset-bottom,0px));text-align:center}
.version-box h2{margin:0;font-size:1.5rem}
.version-alt{margin:2px 0 22px;color:var(--muted);font-size:1.05rem}
.version-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:0 0 16px;padding:16px;border:2.5px solid var(--edge);border-radius:16px;background:var(--card,#fff);color:inherit;box-shadow:5px 5px 0 var(--edge);cursor:pointer;font:inherit}
.version-badge{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;border:2.5px solid var(--edge)}
.version-badge svg{display:block;width:100%;height:100%}
.version-text{flex:1;min-width:0}
.version-opt strong{display:block;font:400 1.3rem/1.2 var(--serif)}
.version-opt .version-text span{display:block;margin-top:3px;font-size:.86rem;line-height:1.35;color:var(--muted)}
.version-go{flex:none;font:400 2rem/1 var(--serif);color:var(--accent)}
.version-opt:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--edge)}
.version-note{margin:22px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.version-note span{display:block;margin-top:8px}