[hidden] { display: none !important; }
/* Pantry to Pan brand: tomato, cast iron, basil, butter. Fonts are served from /fonts (SIL OFL). */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
:root {
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #fbf7f0;
  --surface: #ffffff;
  --surface-2: #f3ece1;
  --ink: #1d1b18;
  --ink-2: #5c564e;
  --line: #e7ddcf;
  --accent: #c8371d;
  --accent-ink: #ffffff;
  --accent-soft: #f9e0d9;
  --good: #2f6b4f;
  --good-soft: #e0eee6;
  --warn: #a8660b;
  --warn-soft: #f8ebd3;
  --bad: #a83a32;
  --bad-soft: #f6dedb;
  --star: #f2b33d;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 4px 14px rgba(60, 40, 20, .06);
  --tabs-h: 64px;
  color-scheme: light;
}
/* dark: follows the phone unless Settings → Appearance says Light or Dark (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171512; --surface: #221f1b; --surface-2: #2b2723; --ink: #f4eee6; --ink-2: #b9afa3;
    --line: #38322c; --accent: #f0735a; --accent-ink: #171512; --accent-soft: #40211a;
    --good: #7cc49a; --good-soft: #1f3329; --warn: #e3a94a; --warn-soft: #3a2d17;
    --bad: #ec8a80; --bad-soft: #3d2320; --star: #f2b33d;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171512; --surface: #221f1b; --surface-2: #2b2723; --ink: #f4eee6; --ink-2: #b9afa3;
  --line: #38322c; --accent: #f0735a; --accent-ink: #171512; --accent-soft: #40211a;
  --good: #7cc49a; --good-soft: #1f3329; --warn: #e3a94a; --warn-soft: #3a2d17;
  --bad: #ec8a80; --bad-soft: #3d2320; --star: #f2b33d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.45 var(--font-body);
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.2em; }
h3 { font-size: 1rem; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.hidden { display: none !important; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: block;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.toprow { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800;
  font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
.brand .to { color: var(--accent); font-weight: 600; }
.logo-mark { flex: none; display: block; }
.topbar-actions { display: flex; gap: 4px; }
.iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  text-decoration: none;
}
.iconbtn:hover { background: var(--surface-2); }
.badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
main { padding: 12px 16px 24px; max-width: 760px; margin: 0 auto; outline: none; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-2); text-decoration: none; font-size: 11.5px; font-weight: 600;
}
.tabs a .ti { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .75; }
.tabs a.active { color: var(--accent); }
.tabs a.active .ti { filter: none; opacity: 1; }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: none; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: .9rem; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btnrow.end { justify-content: flex-end; }
input[type=text], input[type=email], input[type=search], input[type=number], input[type=url], input[type=date],
input[type=datetime-local], input[type=password], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); outline: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label.field { display: block; margin: 10px 0; }
label.field > span { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: .9rem;
  color: var(--ink-2); cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 17px;
  border: 1px solid var(--line); background: var(--surface); font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--ink); white-space: nowrap;
}
.chip .n { color: var(--ink-2); font-weight: 500; font-size: .8rem; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.on .n { color: inherit; opacity: .7; }
.chip.add { border-style: dashed; color: var(--ink-2); }
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 14px; }
.stack > * + * { margin-top: 10px; }
.banner { padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-size: .95rem; }
.banner.warn { background: var(--warn-soft); color: var(--ink); }
.banner.info { background: var(--accent-soft); color: var(--ink); }
.banner.good { background: var(--good-soft); color: var(--ink); }
.banner.bad { background: var(--bad-soft); color: var(--ink); }

/* recipes list */
.searchrow { display: flex; gap: 8px; margin-bottom: 8px; }
.searchrow input { flex: 1; }
.searchrow { position: relative; }
.searchwrap { flex: 1; min-width: 0; }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.sugg button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line); }
.sugg button:last-child { border-bottom: 0; }
.sugg button:hover { background: var(--surface-2); }
.sugg .k { flex: none; width: 76px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.sugg .l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sugg .n { color: var(--ink-2); font-size: .8rem; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rcard { overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.rcard .thumb { aspect-ratio: 4/5; background: var(--surface-2) center/cover no-repeat; position: relative; }
.rcard .thumb.noimg { aspect-ratio: 16/10; }
.rcard .thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 42px; opacity: .5; }
.rcard .thumb .flag { position: absolute; top: 8px; left: 8px; }
.rcard .body { padding: 8px 10px 10px; }
.rcard .t { font-weight: 700; font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard .meta { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
.stars { color: var(--star); letter-spacing: 1px; }
.stars .off { color: var(--line); }
.empty { text-align: center; padding: 40px 16px; color: var(--ink-2); }
.empty .big { font-size: 44px; }
.fab {
  position: fixed; right: 16px; bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); z-index: 25;
  width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--accent); color: var(--accent-ink);
  font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgba(180, 83, 42, .35); cursor: pointer;
}

/* recipe detail */
.hero { margin: -12px -16px 12px; aspect-ratio: 16/10; background: var(--surface-2) center/cover no-repeat; }
.titlebar { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.src { font-size: .85rem; color: var(--ink-2); }
.statrow { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; color: var(--ink-2); margin: 6px 0 10px; }
.statrow b { color: var(--ink); }
.controls { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 12px 0; }
.stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.stepper button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--surface); font-size: 18px; font-weight: 700; cursor: pointer; }
.stepper span { min-width: 74px; text-align: center; font-weight: 700; font-size: .9rem; }
ul.ings { list-style: none; padding: 0; margin: 0; }
ul.ings li { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
ul.ings li .q { flex: none; min-width: 78px; font-weight: 700; }
ul.ings li.got { opacity: .45; text-decoration: line-through; }
ul.ings li .hint { display: block; font-size: .8rem; color: var(--warn); }
ul.ings .grp { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); padding: 12px 2px 4px; cursor: default; border: 0; }
ol.steps { padding-left: 0; list-style: none; counter-reset: s; margin: 0; }
ol.steps li { counter-increment: s; position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--line); }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center;
}
.timerbtn { margin-top: 6px; }
.history li { padding: 8px 0; border-bottom: 1px solid var(--line); list-style: none; }
.history { padding: 0; margin: 0; }
.starpick { display: flex; gap: 4px; font-size: 32px; }
.starpick button { background: none; border: 0; cursor: pointer; color: var(--line); padding: 0 2px; }
.starpick button.on { color: var(--star); }

/* cook mode */
.cook { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom)); }
.cook .step { flex: 1; display: flex; align-items: center; font-size: 1.6rem; line-height: 1.35; font-weight: 600; overflow-y: auto; }
.cook .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cook .nav .btn { min-height: 60px; font-size: 1.1rem; }
.cook .top { display: flex; justify-content: space-between; align-items: center; }
.cook .ingpeek { font-size: .95rem; color: var(--ink-2); max-height: 30vh; overflow-y: auto; }

/* timers: a slim strip in the sticky header, so they never cover the recipe */
.timers { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
/* each chip: name on a small first line, time left big underneath; two chips per row */
.timer, .ctimer { display: grid !important; grid-template-columns: 1fr auto; column-gap: 4px; align-items: center;
  flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); min-width: 0; border-radius: 12px !important; }
.timer > span, .ctimer > span { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; line-height: 1.25; opacity: .85; }
.timer > b, .ctimer > b { grid-column: 1; grid-row: 2; font-size: 1.05rem !important; line-height: 1.2; }
.timer > button, .ctimer > button { grid-column: 2; grid-row: 1 / span 2; }
.timers .timer:only-child, .ctimers .ctimer:only-child { max-width: 100%; }
.timers::-webkit-scrollbar { display: none; }
.timers:empty { display: none; }
.timer { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); font-size: .85rem; font-weight: 600; }
.timer b { font-variant-numeric: tabular-nums; font-size: .95rem; }
.timer.done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: pulse 1s infinite; }
.timer button { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: .9rem; padding: 0 4px; }
@keyframes pulse { 50% { opacity: .7; } }

/* lists (shopping, pantry, plan) */
.list { padding: 0; margin: 0; list-style: none; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.list > li .grow { flex: 1; min-width: 0; }
.list > li .sub { font-size: .8rem; color: var(--ink-2); }
.aisle { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 18px 4px 2px; }
.check {
  flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; font-weight: 900;
}
.check.on { background: var(--good); border-color: var(--good); color: #fff; }
.list li.done .grow { text-decoration: line-through; opacity: .5; }
details.fold { margin-top: 16px; }
details.fold summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 8px 4px; }
.day { margin-bottom: 14px; }
.day h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.day h3 .d { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.day.today h3 { color: var(--accent); }
.entry { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px; }
.entry .img { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2) center/cover; flex: none; }
.entry .grow { flex: 1; min-width: 0; }
.entry .t { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .sub { font-size: .78rem; color: var(--ink-2); }
.weeknav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* timeline */
.tl { list-style: none; padding: 0; margin: 0; }
.tl li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tl li .clk { font-weight: 800; font-variant-numeric: tabular-nums; }
.tl li.k-oven .txt { color: var(--accent); font-weight: 700; }
.tl li.k-serve .txt { font-weight: 800; }
.tl li.now { background: var(--accent-soft); border-radius: 10px; }
.tl li.past { opacity: .45; }
.gantt { position: relative; margin: 10px 0 4px; }
.gantt .row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; height: 30px; }
.gantt .row .nm { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt .track { position: relative; height: 20px; background: var(--surface-2); border-radius: 6px; }
.gantt .bar { position: absolute; top: 0; height: 20px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: .7rem; font-weight: 700; padding: 0 5px; line-height: 20px; overflow: hidden; white-space: nowrap; }
.gantt .bar.stove { background: var(--good); color: #fff; }
.gantt .bar.early { background: var(--warn); }
.gantt .bar.rest { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--line) 4px, var(--line) 8px); color: var(--ink-2); }
.gantt .axis { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: .7rem; color: var(--ink-2); }
.gantt .axis .ticks { position: relative; height: 16px; }
.gantt .axis .ticks span { position: absolute; transform: translateX(-50%); }
.dish { padding: 12px; margin-bottom: 8px; }
.dish .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dish .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.dish .grid label span { font-size: .72rem; }
.dish input, .dish select { min-height: 38px; padding: 6px 8px; }

/* sheets */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 12, 6, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.2);
}
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.sheet h2 { margin-top: 4px; }
.picklist { list-style: none; padding: 0; margin: 8px 0 0; max-height: 50vh; overflow-y: auto; }
.picklist li { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.picklist li .img { width: 40px; height: 40px; border-radius: 9px; background: var(--surface-2) center/cover; flex: none; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: .92rem;
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 90; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.job { padding: 12px; margin-bottom: 8px; }
.job .hd { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp 1s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }
.url { word-break: break-all; font-size: .8rem; color: var(--ink-2); }
@media (min-width: 700px) {
  .rgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* cook mode v2 */
body.cooking .timers { display: none; }
.cook { overflow-y: auto; gap: 10px; }
.cook .top { gap: 10px; }
.cook .top b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 7px 14px; font-weight: 700; font-size: .88rem; cursor: pointer; border-bottom: 3px solid var(--c, var(--line)); }
.ctabs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ctimers { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.ctimers::-webkit-scrollbar { display: none; }
.ctimers:empty { display: none; }
.ctimer { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); font-size: .88rem; font-weight: 600; }
.ctimer b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.ctimer button { background: none; border: 0; color: var(--ink-2); cursor: pointer; font-size: .9rem; padding: 0 4px; }
.ctimer.done { background: var(--accent); color: var(--accent-ink); animation: pulse 1s infinite; }
.ctimer.done button { color: inherit; }
.cbody { flex: 1; }
.ctask { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ctask.big { padding: 16px; }
.ctask.big .ctext { font-size: 1.35rem; line-height: 1.35; font-weight: 650; }
.ctask .ctext { font-weight: 600; margin-top: 4px; }
.ctask.isdone { opacity: .45; }
.ctask.isdone .ctext { text-decoration: line-through; }
.cmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.cdish { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.cing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cing span { background: var(--surface-2); border-radius: 8px; padding: 3px 8px; font-size: .85rem; }
.cnote { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .95rem; }
.cnote b { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 2px; }
.cnote.wait { background: var(--good-soft); }
.cnote.ahead { background: var(--accent-soft); }
.crow { margin-bottom: 8px; cursor: pointer; }

.fbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; margin: 2px 0 10px; border-radius: 12px; background: var(--accent-soft); font-size: .9rem; }

.tbig { text-align: center; font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.tbig.up { color: var(--accent); animation: pulse 1s infinite; }
.lastnote { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--warn-soft); font-size: .88rem; }
.lastnote .btn { min-height: 24px; padding: 0 6px; }

.polish { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--surface-2); }

.idea { display: flex; gap: 12px; padding: 10px; margin-bottom: 8px; }
.idea-img { flex: none; width: 84px; height: 84px; border-radius: 12px; background: var(--surface-2) center/cover; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.idea-body { flex: 1; min-width: 0; }
.idea-t { font-weight: 700; color: inherit; text-decoration: none; display: block; }
.havebar { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 6px 0 4px; overflow: hidden; }
.havebar span { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.good-t { color: var(--good); }
.apday { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: start; }
.apd { font-weight: 800; font-size: .85rem; padding-top: 12px; }
.apd span { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-2); }

/* scanner */
.scanner { position: fixed; inset: 0; z-index: 75; background: var(--bg); display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
.scan-top { display: flex; justify-content: space-between; align-items: center; }
.scan-view { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4/3; flex: none; }
.scan-view.off { display: none; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.scan-msg { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 3px #000; }
.scan-manual { display: flex; gap: 8px; }
.scan-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.scan-item { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); }
.scan-item.ok { border-left-color: var(--good); }
.scan-item.ask { border-left-color: var(--warn); }
.scan-item.bad { border-left-color: var(--bad); }
.scan-item input { min-height: 38px; padding: 6px 8px; }
.soonrow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.warn-t { color: var(--warn); font-weight: 700; font-size: .88rem; }
.bad-t { color: var(--bad); font-weight: 700; font-size: .88rem; }

.est { display: inline-block; padding: 0 5px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-size: .78em; font-weight: 700; }
.pill.est { background: var(--warn-soft); color: var(--warn); }

.pace { color: var(--good); font-weight: 600; }

.skiprow { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.skiprow .ctask { flex: 1; min-width: 0; }
.skipdone { flex: none; width: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--good); font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.skipdone:active { background: var(--good-soft); }

.done-card { margin: 14px 0 0; }
.done-card h3 { font-size: .98rem; }
.done-t { width: 100%; border-collapse: collapse; font-size: .9rem; }
.done-t td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.done-t td:nth-child(2) { white-space: nowrap; }
.done-t td:nth-child(3) { font-size: .8rem; }
.done-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: .82rem; }
.done-line span { background: var(--accent-soft); border-radius: 8px; padding: 3px 8px; }

/* photo import */
.pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.pages:empty { display: none; }
.page { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; background: var(--surface-2); }
.page img { width: 100%; height: 100%; object-fit: cover; }
.page span { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; padding: 0 7px; font-weight: 700; font-size: .8rem; }
.page button { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
label.btn { cursor: pointer; }

/* tips */
.tip { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tip-hd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }

.bigcode { font-size: 2rem; font-weight: 800; letter-spacing: .25em; text-align: center; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.installsteps { padding-left: 20px; line-height: 1.7; }
.shareico { display: inline-flex; vertical-align: -3px; color: var(--accent); }

/* collect mode: tap recipes to put them in a collection */
.rcard.picking { position: relative; }
.rcard.picking::after { content: ""; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .25); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.rcard.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.rcard.picked::after { content: "✓"; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px; }
.pickbar { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabs-h) + 8px + env(safe-area-inset-bottom)); z-index: 26;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; }
.pickbar .pk-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: .92rem; }
.pickbar .pk-t select { width: auto; flex: 1; min-width: 140px; }
.pickbar .pk-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#list:has(~ .pickbar:not([hidden])) { padding-bottom: 110px; }

/* the days before a big meal */
.ahead .aday { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ahead .aday:last-of-type { border-bottom: 0; }
.ahead .aday.past { opacity: .5; }
.ahead .aday.today .dh b { color: var(--accent); }
.ahead .dh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ahead ul { margin: 4px 0 0; padding-left: 18px; }
.ahead li { margin: 3px 0; font-size: .92rem; }
.banner.thaw b { display: block; margin-bottom: 2px; }
a.banner.soon { display: block; text-decoration: none; color: inherit; margin-bottom: 8px; }

.offline-strip { position: sticky; top: 0; z-index: 40; background: #f59e0b; color: #1f1300;
  font-size: .85rem; font-weight: 600; padding: 6px 12px; text-align: center; }

/* cook mode: hands-free switches */
.cook .handsfree { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.cook .handsfree button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px;
  padding: 6px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.cook .handsfree button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.cook .vhelp { margin: 4px 0 6px; }
.cook .vhelp #vheard { display: block; font-style: italic; }

.plusbox { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }

/* pantry counts */
.stepper.mini { padding: 2px; border-radius: 10px; }
.stepper.mini button { width: 28px; height: 28px; font-size: 16px; }
.stepper.mini span { min-width: 30px; font-size: .85rem; }
.scan-modes { margin: 6px 12px; }

/* plans */
.plancards { display: grid; gap: 10px; }
.plancard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); }
.plancard.pro { border-color: var(--accent); }
.plancard .ph { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.plancard ul { margin: 6px 0 10px; padding-left: 18px; }
.packrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-2); }

/* receipt review */
.receipt-lines li { align-items: flex-start; }
.receipt-lines li.off { opacity: .5; }
.receipt-lines .rinc { width: 22px; height: 22px; margin-top: 8px; flex: none; }
.receipt-lines .rfood { padding: 6px 8px; font-weight: 600; }

/* first-run guide */
.guide { text-align: center; }
.guide p { text-align: left; }
.guide p.muted { text-align: center; margin: 0; }
.guide-icon { font-size: 3rem; line-height: 1; margin: 6px 0 4px; }
.guide-dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 4px; }
.guide-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.guide-dots span.on { background: var(--accent); }

/* pantry: one line per food, its brands under it */
.pfoods > li.pfood { display: block; padding: 10px 4px; }
.pfood .phead { display: flex; align-items: center; gap: 10px; }
.pfood.isout { opacity: .6; }
.pfood .stepper.total span { font-weight: 800; font-size: .95rem; }
ul.pitems { list-style: none; margin: 6px 0 0 12px; padding: 0 0 0 10px; border-left: 2px solid var(--line); }
ul.pitems li.pitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.pitem .pname { background: none; border: 0; padding: 4px 0; text-align: left; color: inherit; font: inherit; cursor: pointer; flex: 1; min-width: 0; }
.pitem .pname .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.linkish { background: none; border: 0; padding: 4px 0; color: var(--accent); font: inherit; text-align: left; cursor: pointer; }

/* produce picker */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; max-height: 52vh; overflow-y: auto; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.ptile.on { border-color: var(--accent); background: var(--accent-soft); }
.ptile .pe { font-size: 26px; line-height: 1; }
.ptile .pl { font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.2; }
.ptile .pn { position: absolute; top: 4px; right: 6px; background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  min-width: 20px; height: 20px; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ptile .pm { position: absolute; top: 4px; left: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--surface-2);
  font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.scan-produce { padding: 0 12px 6px; }

.cook .cend { text-align: center; margin: 14px 0 6px; }

/* recipe page: from your pantry */
.pcheck { margin: 4px 0 12px; }
.pcheck.good { color: var(--good, #2f7d4f); font-weight: 600; font-size: .92rem; }
.pchead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pcrow { display: flex; gap: 8px; font-size: .92rem; padding: 3px 0; }
.pcrow.swap { color: var(--ink); }
.pcrow.miss { color: var(--bad, #b3261e); }
.swapicon { font-size: 1.2rem; color: var(--accent); width: 28px; text-align: center; }

/* pantry tracking off: no pantry-only buttons */
body.nopantry #rcpt, body.nopantry #produce { display: none; }
.tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabs a[hidden] { display: none; }

.scan-item.undone { opacity: .6; }

.toastbtn { margin-left: 10px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; padding: 4px 6px; }
#toast.show { pointer-events: auto; }

.stchips { display: flex; flex-wrap: wrap; gap: 6px; }
.stchips .chip.had { opacity: .6; }
.stsec { margin-bottom: 8px; }

/* home: tonight's dinner */
.tonight { padding: 12px 14px; margin-bottom: 12px; border-color: var(--accent); }
.tn-dishes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tn-dish { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.tn-img { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2) center/cover no-repeat; flex: none; }
.tn-times { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; margin-bottom: 8px; color: var(--ink-2); }
.tn-times b { color: var(--ink); }

/* technique words in steps */
button.tech { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.techsteps { padding-left: 20px; margin: 4px 0 10px; }
.techsteps li { margin: 4px 0; }
.techrow { cursor: pointer; }

.review { border-color: var(--accent); margin: 10px 0 14px; }
.review textarea { width: 100%; margin-top: 6px; font: inherit; }

.lorow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lorow:last-child { border-bottom: 0; }

.preprow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.preprow input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

.stores { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.stores .chips { margin: 0; flex-wrap: nowrap; overflow-x: auto; }

.dietrow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dietrow .dhead { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.dietrow .dhead select { width: auto; flex: 1; }

.vidat { font-size: .78rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; margin-left: 4px; }

/* quick log (#/log) */
.qlog { display: flex; gap: 8px; margin: 10px 0; }
.qlog input { flex: 1; min-width: 0; font-size: 1.1rem; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.qlmic.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: qlpulse 1.2s ease-in-out infinite; }
@keyframes qlpulse { 50% { opacity: .65; } }
.qlcard { margin-top: 6px; }
.qmeals { flex-wrap: wrap; overflow: visible; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: inherit; }