/* Larder: recipe cards, old meets new. Apple structure (SF, tab bar, grouped lists) on a warm grey ground.
   Recipes are coloured index cards from a muted market palette; actions are ink black.
   Sizes are rem on a 17px body so iPhone Dynamic Type scales the whole app. */

:root {
  --bg: #eeece4;
  --bg-grouped: #e7e4d9;
  --cell: #f9f8f3;
  --fill: rgb(60 52 30 / .08);
  --fill-2: rgb(60 52 30 / .15);
  --label: #121212;
  --label-2: rgb(30 28 20 / .6);
  --label-3: rgb(30 28 20 / .34);
  --sep: rgb(30 28 20 / .14);
  --material: rgb(238 236 228 / .84);

  --tint: #141414;            /* ink: actions are black, like the reference's black pay button */
  --tint-hover: #000000;
  --tint-soft: rgb(20 20 20 / .08);
  --on-tint: #ffffff;
  --danger: #c8161a;

  /* card palette */
  --k-sage: #a9c3b6;
  --k-tan: #b39a6f;
  --k-butter: #ecea80;
  --k-red: #de1b1b;
  --k-grey: #b8b6b0;
  --k-orange: #ff6a13;
  --k-olive: #6f8d5f;
  --k-blue: #8fb1d6;
  --card-ink: #111111;

  /* aisle signage, from the same palette */
  --a-produce: var(--k-olive);
  --a-meat: var(--k-red);
  --a-dairy: var(--k-sage);
  --a-bakery: var(--k-tan);
  --a-pantry: #cbb57f;
  --a-spice: var(--k-orange);
  --a-frozen: #a7bccb;
  --a-drinks: var(--k-butter);
  --a-other: var(--k-grey);

  /* stickers */
  --st-superb: #ffd60a;
  --st-again: var(--k-olive);
  --st-good: var(--k-sage);
  --st-not: var(--k-grey);
  --st-kids: #ff6a13;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, 'Helvetica Neue', sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', system-ui, 'Helvetica Neue', sans-serif;
  --rounded: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  --brand: 'Zilla Slab', 'Rockwell', ui-serif, Georgia, serif; /* wordmark only */

  --r-cell: 14px;
  --r-card: 26px;
  --gutter: 16px;
  --sidebar: 0px;
  --tabbar: 0px;
  --ease: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-card: 0 1px 2px rgb(40 30 10 / .06), 0 6px 18px -6px rgb(40 30 10 / .16);
  --shadow-float: 0 10px 40px -8px rgb(30 20 0 / .3), 0 2px 6px rgb(0 0 0 / .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11110f;
    --bg-grouped: #11110f;
    --cell: #1e1d1a;
    --fill: rgb(240 235 220 / .1);
    --fill-2: rgb(240 235 220 / .18);
    --label: #f3f1ea;
    --label-2: rgb(243 241 234 / .62);
    --label-3: rgb(243 241 234 / .32);
    --sep: rgb(243 241 234 / .14);
    --material: rgb(24 23 20 / .8);
    --tint: #f3f1ea;
    --tint-hover: #ffffff;
    --tint-soft: rgb(243 241 234 / .12);
    --on-tint: #111111;
    --danger: #ff5a4f;
    --shadow-card: 0 0 0 1px rgb(255 255 255 / .05);
    --shadow-float: 0 10px 40px -8px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iPhone: follow the user's Dynamic Type size. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.024em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  padding-left: var(--sidebar);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
}
body.grouped { background: var(--bg-grouped); }
::selection { background: var(--tint-soft); }
input, textarea, select, button { font: inherit; letter-spacing: inherit; color: inherit; caret-color: var(--tint); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; }
.i { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 1.05rem; height: 1.05rem; }
.i.fill { fill: currentColor; stroke: none; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--fill-2); border-radius: 11px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Apple text styles */
.t-large { font: 700 2rem/1.2 var(--display); letter-spacing: 0.011em; }
.t-title1 { font: 700 1.647rem/1.21 var(--display); letter-spacing: 0.013em; }
.t-title2 { font: 700 1.294rem/1.27 var(--display); letter-spacing: -0.012em; }
.t-title3 { font: 600 1.176rem/1.25 var(--display); letter-spacing: -0.02em; }
.t-headline { font-weight: 600; }
.t-sub { font-size: .882rem; letter-spacing: -0.016em; }
.t-foot { font-size: .765rem; letter-spacing: -0.005em; }
.t-cap { font-size: .706rem; letter-spacing: 0; }
.secondary { color: var(--label-2); }
.tertiary { color: var(--label-3); }

/* ---------------------------------------------------------------- navigation: tab bar (phone) / sidebar (Mac) */

.tabs {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: flex;
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--material);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-top: .5px solid var(--sep);
}
.tabs .brand { display: none; }
.tabs a {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding-top: 4px;
  font-size: .588rem; font-weight: 500; letter-spacing: .01em; color: var(--label-2);
}
.tabs a .i { width: 1.6rem; height: 1.6rem; }
.tabs a[aria-current="page"] { color: var(--tint); }
.tabs a[aria-current="page"] .i { stroke-width: 2.2; }
.tabs .add-link { display: none; }
.badge {
  position: absolute; top: 3px; left: calc(50% + 7px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--a-meat); color: #fff;
  font: 600 11px/18px var(--sans); letter-spacing: 0; text-align: center;
}
body.immersive .tabs, body.signed-out .tabs { display: none; }
body.immersive, body.signed-out { padding-bottom: 0; padding-left: 0; }

@media (max-width: 999px) { :root { --tabbar: 50px; } }

@media (min-width: 1000px) {
  :root { --sidebar: 250px; --gutter: 32px; }
  .tabs {
    top: 0; bottom: 0; right: auto; width: var(--sidebar); height: auto;
    flex-direction: column; gap: 2px;
    padding: 20px 12px;
    border-top: 0; border-right: .5px solid var(--sep);
    background: var(--bg-grouped);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabs .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; font: 700 1.53rem/1 var(--brand); letter-spacing: -0.015em; color: var(--label); }
  .tabs .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .tabs a { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; height: 38px; padding: 0 10px; border-radius: 9px; font-size: .882rem; font-weight: 500; color: var(--label); }
  .tabs a .i { width: 1.2rem; height: 1.2rem; color: var(--tint); }
  .tabs a:hover { background: var(--fill); }
  .tabs a[aria-current="page"] { background: var(--tint); color: var(--on-tint); }
  .tabs a[aria-current="page"] .i { color: var(--on-tint); stroke-width: 1.9; }
  .tabs .badge { position: static; margin-left: auto; }
  .tabs a[aria-current="page"] .badge { background: var(--on-tint); color: var(--tint); }
  .tabs .add-link { display: flex; margin-top: 18px; background: var(--tint-soft); color: var(--tint); font-weight: 600; }
  .tabs .add-link:hover { background: color-mix(in srgb, var(--tint-soft) 70%, var(--tint) 15%); }
}

/* Navigation bar: inline title appears once the large title scrolls away. */
.navbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(8px, calc(var(--gutter) - 8px)) 0;
  transition: background .25s, border-color .25s;
  border-bottom: .5px solid transparent;
}
.navbar.scrolled, .navbar.solid {
  background: var(--material);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom-color: var(--sep);
}
.navbar .nav-title { font-weight: 600; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; text-align: center; }
.navbar.titled .nav-title, .navbar.solid .nav-title { opacity: 1; }
.navbar .nav-l { justify-self: start; display: flex; }
.navbar .nav-r { justify-self: end; display: flex; gap: 2px; align-items: center; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 2px; color: var(--tint); font-size: 1rem; }
.back .i { width: 1.45rem; height: 1.45rem; stroke-width: 2.3; }
.navbtn { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 0; background: none; color: var(--tint); cursor: pointer; border-radius: 22px; font-size: 1rem; }
.navbtn:hover { background: var(--fill); }
.navbtn.text { font-weight: 400; }
.navbtn.strong { font-weight: 600; }

.large-title { margin: 2px 0 0; padding: 0 var(--gutter); }
.large-title + .subtitle { margin: 2px 0 0; padding: 0 var(--gutter); color: var(--label-2); font-size: .882rem; }

.page { max-width: 1120px; margin: 0 auto; padding-bottom: 48px; }
.narrow { max-width: 760px; margin: 0 auto; }
.pad { padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--tint-soft); color: var(--tint);
  font-size: 1rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s, transform .2s var(--ease), opacity .15s;
}
.btn:hover { background: color-mix(in srgb, var(--tint-soft) 70%, var(--tint) 14%); }
.btn:active { transform: scale(.96); }
.btn.filled { background: var(--tint); color: var(--on-tint); }
.btn.filled:hover { background: var(--tint-hover); }
.btn.gray { background: var(--fill); color: var(--label); }
.btn.gray:hover { background: var(--fill-2); }
.btn.plain { background: none; }
.btn.plain:hover { background: var(--fill); }
.btn.destructive { background: none; color: var(--danger); }
.btn.destructive:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.small { min-height: 34px; padding: 0 14px; font-size: .882rem; }
.btn.large { min-height: 52px; padding: 0 24px; font-size: 1.06rem; }
.btn.block { width: 100%; }
.btn.icon { width: 44px; padding: 0; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn .i { width: 1.15rem; height: 1.15rem; stroke-width: 2.1; }

.search { position: relative; display: block; }
.search .i { position: absolute; left: 9px; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--label-2); stroke-width: 2.1; }
.search input {
  width: 100%; height: 36px; padding: 0 10px 0 32px;
  border: 0; border-radius: 10px; background: var(--fill);
  font-size: 1rem;
}
.search input:focus { outline: none; box-shadow: 0 0 0 3px var(--tint-soft); }
.search input::placeholder { color: var(--label-2); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

.capsules { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter); scroll-padding: var(--gutter); }
.capsules::-webkit-scrollbar { display: none; }
.capsule {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border: 0; border-radius: 17px;
  background: var(--fill); color: var(--label);
  font-size: .882rem; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.capsule:hover { background: var(--fill-2); }
.capsule[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.capsule .count { opacity: .55; font-variant-numeric: tabular-nums; }
.capsule .dot { width: 9px; height: 9px; border-radius: 50%; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--fill); width: fit-content; max-width: 100%; }
.seg button { all: unset; cursor: pointer; text-align: center; padding: 6px 14px; border-radius: 7px; font-size: .812rem; font-weight: 500; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--cell); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 .5px 1.5px rgb(0 0 0 / .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { background: #636366; } }

.stepper { display: inline-flex; align-items: center; border-radius: 9px; background: var(--fill); height: 32px; }
.stepper button { all: unset; cursor: pointer; width: 44px; height: 32px; display: grid; place-items: center; color: var(--label); }
.stepper button + output + button { border-left: 0; }
.stepper button .i { width: 1rem; height: 1rem; stroke-width: 2.3; }
.stepper button:active { background: var(--fill-2); }
.stepper output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; border-inline: .5px solid var(--sep); line-height: 18px; }

/* ---------------------------------------------------------------- grouped lists (inset) */

.group { margin: 0 var(--gutter) 26px; }
.group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 7px 16px; font-size: .765rem; letter-spacing: 0; text-transform: uppercase; color: var(--label-2); }
.group-f { margin: 7px 16px 0; font-size: .765rem; color: var(--label-2); letter-spacing: 0; }
.cells { list-style: none; margin: 0; padding: 0; background: var(--cell); border-radius: var(--r-cell); overflow: hidden; }
body:not(.grouped) .cells { background: var(--bg-grouped); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:not(.grouped) .cells { background: var(--cell); } }
.cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; }
.cell + .cell::before, .cell-sep { content: ''; position: absolute; top: 0; right: 0; left: var(--inset, 16px); border-top: .5px solid var(--sep); }
.cell.tap { cursor: pointer; }
.cell.tap:active, a.cell:active { background: var(--fill); }
.cell .grow { flex: 1; min-width: 0; }
.cell .chev { color: var(--label-3); width: 1rem; height: 1rem; stroke-width: 2.4; }
.cell .val { color: var(--label-2); }

/* form cells */
.cell.field { gap: 10px; }
.cell.field > span { flex: none; width: 6.5em; color: var(--label); }
.cell.field input, .cell.field textarea, .cell.stack textarea, .cell.stack input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; font-size: 1rem;
}
.cell.field input { text-align: right; color: var(--label-2); }
.cell.field input:focus { color: var(--label); }
.cell.stack { display: block; padding: 12px 16px; }
.cell.stack textarea { display: block; width: 100%; resize: vertical; line-height: 1.45; }
.cell input::placeholder, .cell textarea::placeholder { color: var(--label-3); }
.title-cell input { font: 700 1.294rem/1.25 var(--display); letter-spacing: -0.012em; width: 100%; }

/* ---------------------------------------------------------------- produce stickers (the signature) */

.sticker {
  --c: var(--st-superb);
  display: inline-grid; place-items: center; align-content: center;
  width: 6.4em; height: 3.5em; border-radius: 50%;
  background: var(--c); color: #1b1b1d;
  font: 800 .706rem/1 var(--rounded); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  rotate: -9deg;
  position: relative;
  box-shadow: 0 1px 1.5px rgb(0 0 0 / .28), 0 3px 8px -2px rgb(0 0 0 / .25);
  user-select: none;
}
/* The brand's dotted ring, as on the app icon. */
.sticker::after { content: ''; position: absolute; inset: .32em; border-radius: 50%; border: .12em dotted rgb(27 27 29 / .7); pointer-events: none; }
.sticker small { display: block; font-size: .62em; letter-spacing: .14em; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.sticker.again { --c: var(--st-again); }
.sticker.good { --c: var(--st-good); }
.sticker.not { --c: var(--st-not); }
/* Kid approved: a round orange sticker, white type. */
.sticker.kids { --c: var(--st-kids); color: #fff; width: 6.3em; height: 6.3em; rotate: 8deg; font-size: .6rem; letter-spacing: .01em; line-height: 1.05; }
.sticker.kids::after { border-color: rgb(255 255 255 / .75); }
.sticker.kids small { font-size: .9em; opacity: 1; letter-spacing: .1em; margin-bottom: 1px; }
.sticker.sm { font-size: .6rem; }

.stickers { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: center; }
.stickers button {
  all: unset; cursor: pointer; display: grid; place-items: center;
  width: 6.2rem; height: 3.6rem; border-radius: 50%;
  border: 1.5px dashed var(--label-3); color: var(--label-2);
  font: 700 .647rem/1.1 var(--rounded); letter-spacing: .05em; text-transform: uppercase; text-align: center;
  transition: border-color .15s, color .15s;
}
.stickers button:hover { border-color: var(--label-2); color: var(--label); }
.stickers button[aria-pressed="true"] { border-color: transparent; }
.stickers button[aria-pressed="true"] .sticker { animation: stamp .45s var(--spring); }
.stickers button.round { width: 4.8rem; height: 4.8rem; text-align: center; }
.stickers button.round[aria-pressed="true"] .sticker { animation-name: stamp-kids; }
@keyframes stamp-kids { 0% { scale: 1.6; opacity: 0; rotate: -10deg; } 60% { opacity: 1; } 100% { scale: 1; rotate: 8deg; } }
.stickers-sep { width: 1px; height: 2.6rem; background: var(--sep); margin: 0 4px; }
@keyframes stamp { 0% { scale: 1.6; opacity: 0; rotate: 6deg; } 60% { opacity: 1; } 100% { scale: 1; rotate: -9deg; } }

/* ---------------------------------------------------------------- library */

.lib-tools { display: grid; gap: 12px; padding: 12px 0 4px; }
.lib-tools .search { margin: 0 var(--gutter); }
.lib-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--gutter) 0; }
.sort { appearance: none; -webkit-appearance: none; border: 0; background: none; color: var(--tint); font-size: .882rem; font-weight: 500; padding: 8px 0; cursor: pointer; text-align: right; }

/* Recipe cards. Phone: a stacked wallet, each card showing its top; the last card shows in full with its photo.
   Wider screens: a grid of whole cards. */
.stack { display: flex; flex-direction: column; padding: 14px 10px 28px; }
.rcard {
  --c: var(--k-sage);
  position: relative; display: flex; flex-direction: column;
  min-height: 236px; margin-top: -88px;
  padding: 16px 18px 18px; border-radius: var(--r-card);
  background: var(--c); color: var(--card-ink);
  box-shadow: 0 -1px 0 rgb(0 0 0 / .05), 0 -10px 24px -14px rgb(0 0 0 / .35);
  transition: translate .35s var(--spring);
}
.rcard:first-child { margin-top: 0; }
.rcard:last-child { min-height: 0; }
.rcard:active { translate: 0 -6px; }
@media (hover: hover) { .stack .rcard:hover { translate: 0 -8px; } }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 42px; }
.rc-cuisine { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px; border: 1.5px solid rgb(17 17 17 / .78); background: rgb(255 255 255 / .2); font-size: .765rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; }
.rc-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 13px; background: var(--card-ink); color: #fff; font-size: .706rem; font-weight: 600; letter-spacing: .01em; }
.rc-pill .i { width: .8rem; height: .8rem; }
.rc-label { margin-top: 12px; font-size: .765rem; font-weight: 500; letter-spacing: -0.005em; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 2px; }
.rc-row h3 { margin: 0; font: 700 1.294rem/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-time { flex: none; font: 500 1.294rem/1.12 var(--display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.rc-time small { font-size: .62em; font-weight: 500; opacity: .6; margin-left: 1px; }
.rc-ph { display: none; margin-top: 16px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: rgb(0 0 0 / .1); }
.rc-ph img { width: 100%; height: 100%; object-fit: cover; }
.rc-ph.page img { object-position: top; }
.rc-meta { display: none; margin-top: 12px; font-size: .765rem; font-weight: 500; opacity: .66; gap: 10px; }
.rcard:last-child .rc-ph { display: block; }
.rcard:last-child .rc-meta { display: flex; }
.rcard.red { --card-ink: #111; }

@media (min-width: 760px) {
  .stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; padding: 16px var(--gutter) 32px; align-items: start; }
  .rcard { margin-top: 0; min-height: 0; box-shadow: none; }
  .rcard .rc-ph { display: block; }
  .rcard .rc-meta { display: flex; }
}

.empty { max-width: 420px; margin: 12vh auto 0; text-align: center; padding: 0 var(--gutter); display: grid; justify-items: center; gap: 10px; }
.empty .art { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; background: var(--tint-soft); color: var(--tint); margin-bottom: 6px; }
.empty .art .i { width: 42px; height: 42px; stroke-width: 1.6; }
.empty h2 { margin: 0; }
.empty p { margin: 0 0 12px; color: var(--label-2); text-wrap: pretty; }
.nothing { color: var(--label-2); padding: 40px var(--gutter); text-align: center; grid-column: 1 / -1; }

/* ---------------------------------------------------------------- recipe */

/* The recipe page header is the recipe's card, grown up. */
.r-card { --c: var(--k-sage); margin: 6px 10px 0; padding: 18px 18px 18px; border-radius: 30px; background: var(--c); color: var(--card-ink); }
@media (min-width: 760px) { .r-card { margin: 6px var(--gutter) 0; padding: 24px 26px 26px; } }
.r-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.r-card .rc-label { margin: 0; white-space: normal; }
.r-card .r-source { margin-top: 10px; }
.r-card .rc-label b { font-weight: 600; }
.r-title { margin: 10px 0 0; font: 700 clamp(2rem, 6vw, 3.1rem)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch; }
.r-figs { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: flex-end; margin-top: 22px; }
.r-figs > div { display: grid; gap: 4px; }
.r-figs .k { font-size: .706rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .62; }
.r-figs .big { font: 500 2.2rem/1 var(--display); letter-spacing: -0.04em; }
.r-figs .big small { font-size: .5em; letter-spacing: -0.01em; opacity: .55; margin: 0 2px 0 1px; }
.r-card .stepper { background: rgb(255 255 255 / .45); height: 36px; }
.r-card .stepper button { color: var(--card-ink); width: 40px; height: 36px; }
.r-card .stepper output { border-color: rgb(0 0 0 / .12); font-size: 1.06rem; }
.r-card .rc-pill .i { stroke-width: 2.6; }
.hero { position: relative; margin: 20px 0 0; border-radius: 20px; overflow: hidden; background: rgb(0 0 0 / .1); aspect-ratio: 16 / 10; max-height: 60vh; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .sticker { position: absolute !important; right: 16px; bottom: 16px; font-size: .94rem; animation: stamp .5s var(--spring) both; }
.hero .sticker.kid-pos { right: auto; left: 16px; font-size: .74rem; animation-name: stamp-kids; }
.r-split { margin: 0 0 6px; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--ease); }
.r-head { padding: 18px calc(var(--gutter) + 4px) 0; max-width: 820px; }
.r-head h1 { margin: 0; text-wrap: balance; }
.r-source { margin: 6px 0 0; color: var(--label-2); font-size: .882rem; }
.r-source b { color: var(--label); font-weight: 600; }
.r-desc { margin: 12px 0 0; color: var(--label-2); line-height: 1.47; max-width: 64ch; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.r-desc.open { -webkit-line-clamp: unset; display: block; }
.more-btn { all: unset; cursor: pointer; margin-top: 6px; font-weight: 600; font-size: .882rem; color: var(--label); text-decoration: underline; text-underline-offset: 3px; }


.cook-cta { display: flex; gap: 10px; padding: 16px var(--gutter) 0; max-width: 820px; }
.cook-cta .btn.filled { flex: 1; }
@media (min-width: 760px) { .cook-cta .btn.filled { flex: none; } }

.r-section-title { margin: 0 0 10px; padding: 0 4px; }
.r-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 36px; padding: 30px var(--gutter) 0; align-items: start; }
@media (max-width: 859px) { .r-body { grid-template-columns: 1fr; gap: 30px; } }
.ingredients { position: sticky; top: calc(56px + env(safe-area-inset-top)); }
@media (max-width: 859px) { .ingredients { position: static; } }
.ing-sec { margin: 18px 4px 6px 16px; font-size: .765rem; text-transform: uppercase; color: var(--label-2); letter-spacing: 0; }
.ing-sec:first-child { margin-top: 0; }
.ing .cell { cursor: pointer; user-select: none; align-items: flex-start; line-height: 1.35; padding-block: 11px; --inset: 50px; }
.ing .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--label-3); display: grid; place-items: center; margin-top: -1px; transition: background .2s, border-color .2s; }
.ing .tick .i { width: 13px; height: 13px; stroke-width: 3; color: #fff; opacity: 0; transition: opacity .15s; }
.ing .got .tick { background: var(--tint); border-color: var(--tint); }
.ing .got .tick .i { opacity: 1; }
.ing .got .txt { color: var(--label-3); text-decoration: line-through; }
.ing .q { font-weight: 600; font-variant-numeric: tabular-nums; }
.ing .aisle-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; margin-left: auto; opacity: .85; }

.method { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 66ch; }
.method li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 0 0 22px; font-size: 1.06rem; line-height: 1.55; letter-spacing: -0.02em; text-wrap: pretty; }
.method li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--tint-soft)); color: var(--card-ink); font: 700 .882rem/1 var(--rounded); font-variant-numeric: tabular-nums; margin-top: 1px; }
.method-sec { margin: 8px 0 12px; font-size: .765rem; text-transform: uppercase; color: var(--label-2); letter-spacing: 0; }
.notes { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-cell); background: var(--bg-grouped); line-height: 1.5; max-width: 66ch; white-space: pre-line; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notes { background: var(--cell); } }
.notes b { display: block; font-size: .765rem; text-transform: uppercase; color: var(--label-2); font-weight: 500; letter-spacing: 0; margin-bottom: 6px; }

.verdict { padding: 26px var(--gutter) 0; max-width: 820px; }
.verdict .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verdict .cooked-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; color: var(--label-2); font-size: .882rem; }
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 12px; border-radius: 15px; background: var(--fill); font-size: .882rem; }
.tag button { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--label-2); }
.tag button:hover { background: var(--fill-2); color: var(--label); }
.tag button .i { width: .8rem; height: .8rem; stroke-width: 2.6; }
.tag-add input { width: 7.5em; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: none; box-shadow: inset 0 0 0 1px var(--sep); font-size: .882rem; }
.tag-add input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint); }

.pages { padding: 34px var(--gutter) 0; }
.pages .strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
.pages button { all: unset; cursor: zoom-in; flex: none; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); }
.pages img { height: 200px; width: auto; }

/* ---------------------------------------------------------------- cook mode */

.cook { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-rows: auto auto 1fr auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.cook-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.cook-top .t { flex: 1; min-width: 0; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cook-progress { display: flex; gap: 4px; padding: 4px var(--gutter) 0; }
.cook-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--fill); transition: background .3s; }
.cook-progress span.on { background: var(--tint); }
.cook-stage { overflow-y: auto; display: grid; align-content: center; padding: 18px var(--gutter); perspective: 1600px; }
.cook-stage .n { font: 700 .82rem/1 var(--rounded); color: var(--label-2); letter-spacing: .04em; }
.cook-stage .sec { font-size: .765rem; text-transform: uppercase; color: var(--label-2); margin: 18px 0 6px; letter-spacing: 0; }
.cook-stage p { margin: 18px 0 0; font: 600 clamp(1.5rem, 3.4vw, 2.4rem)/1.3 var(--display); letter-spacing: -0.02em; max-width: 30ch; text-wrap: pretty; animation: rise .45s var(--ease); }
.cook-stage .sec + p { margin-top: 0; }
.cook-stage p.done { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: 10px; }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }
/* The step is a card; flip it for every ingredient. */
.flip { width: 100%; max-width: 760px; margin: 0 auto; }
.flip-inner { display: grid; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; padding: 20px 20px 24px; background: var(--c, var(--cell)); color: var(--card-ink); min-height: 52vh; overflow-y: auto; max-height: 72vh; }
.face.f-back { transform: rotateY(180deg); background: var(--cell); color: var(--label); }
.face-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.face .n { color: inherit; opacity: .7; }
.flip-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 17px; background: var(--card-ink); color: #fff; font-size: .765rem; font-weight: 600; }
.face.f-back .flip-btn { background: var(--label); color: var(--bg); }
.flip-btn .i { width: .95rem; height: .95rem; }
.face.f-back .ing { margin-top: 14px; }
.need { list-style: none; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .42); display: grid; gap: 6px; font-size: .94rem; line-height: 1.3; }
.need li .q { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
.cook-nav { display: flex; gap: 10px; padding: 12px var(--gutter) 14px; }
.cook-nav .btn { flex: 1; min-height: 56px; font-size: 1.06rem; }
.cook-ings { display: none; }
@media (min-width: 900px) {
  .cook.wide { grid-template-columns: 1fr 380px; }
  .cook.wide .cook-top, .cook.wide .cook-progress, .cook.wide .cook-nav { grid-column: 1 / -1; }
  .cook.wide .cook-stage { grid-row: 3; grid-column: 1; }
  .cook.wide .cook-ings { display: block; overflow-y: auto; grid-row: 3; grid-column: 2; padding: 18px var(--gutter) 18px 0; }
  .cook.wide .cook-ings h2 { margin: 0 0 10px; }
  .cook.wide .ings-toggle, .cook.wide .flip-btn { display: none; }
}

/* ---------------------------------------------------------------- add / edit */

.capture { margin: 14px var(--gutter) 0; display: grid; gap: 14px; }
.drop {
  display: grid; place-items: center; text-align: center; gap: 10px;
  min-height: 300px; padding: 30px 20px;
  border-radius: 18px; background: var(--bg-grouped); cursor: pointer;
  outline: 2px dashed transparent; outline-offset: -10px;
  transition: outline-color .2s, background .2s;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drop { background: var(--cell); } }
.drop:hover, .drop.over { outline-color: var(--tint); }
.drop .big { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--on-tint); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--tint) 60%, transparent); }
.drop .big .i { width: 36px; height: 36px; stroke-width: 1.8; }
.drop strong { font: 700 1.294rem/1.25 var(--display); }
.drop span { color: var(--label-2); max-width: 34ch; font-size: .882rem; }
.thumbs { display: flex; gap: 14px; flex-wrap: wrap; }
.thumbs figure { position: relative; margin: 0; }
.thumbs img { height: 160px; width: auto; border-radius: 10px; box-shadow: var(--shadow-card); }
.thumbs figcaption { font-size: .706rem; color: var(--label-2); margin-top: 6px; text-align: center; }
.thumbs .rm { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); background: var(--label-2); color: var(--bg); display: grid; place-items: center; cursor: pointer; padding: 0; }
.thumbs .rm .i { width: 12px; height: 12px; stroke-width: 3; }
.add-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hint { font-size: .765rem; color: var(--label-2); letter-spacing: 0; }
.or { color: var(--label-2); font-size: .882rem; text-align: center; margin: 22px var(--gutter) 0; }
.or button { all: unset; color: var(--tint); cursor: pointer; font-weight: 500; }

.reading { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 8vh var(--gutter) 0; }
.reading .page { position: relative; width: min(230px, 56vw); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-float); margin-bottom: 14px; }
.reading .page::after { content: ''; position: absolute; left: 0; right: 0; height: 26%; top: -26%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--tint) 45%, transparent), transparent); animation: scanline 2.2s var(--ease) infinite; }
@keyframes scanline { to { top: 100%; } }
.reading h2 { margin: 0; }
.reading p { margin: 0; color: var(--label-2); min-height: 1.4em; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--fill-2); border-top-color: var(--label-2); animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.crop { display: grid; gap: 10px; padding: 12px 16px; }
.crop-stage { position: relative; touch-action: none; user-select: none; border-radius: 8px; overflow: hidden; background: var(--fill); width: fit-content; max-width: 100%; margin: 0 auto; }
.crop-stage img { max-height: 56vh; width: auto; max-width: 100%; }
.crop-box { position: absolute; box-shadow: 0 0 0 9999px rgb(0 0 0 / .5); outline: 1.5px solid #fff; cursor: move; }
.crop-box i { position: absolute; width: 24px; height: 24px; border: 4px solid #fff; }
.crop-box i:nth-child(1) { left: -4px; top: -4px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.crop-box i:nth-child(2) { right: -4px; top: -4px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.crop-box i:nth-child(3) { left: -4px; bottom: -4px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.crop-box i:nth-child(4) { right: -4px; bottom: -4px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.crop-box i::after { content: ''; position: absolute; inset: -14px; }
.hero-preview { padding: 12px 16px; }
.hero-preview img { max-height: 260px; width: auto; border-radius: 8px; }

/* ---------------------------------------------------------------- plan */

.week-nav { display: flex; align-items: center; gap: 4px; }
.week-range { padding: 4px var(--gutter) 18px; color: var(--label-2); font-size: .882rem; }
.day-h { display: flex; align-items: center; gap: 8px; margin: 0 4px 7px 16px; }
.day-h .dn { font: 700 1.06rem/1.2 var(--display); letter-spacing: -0.02em; }
.day-h .dd { font-size: .765rem; color: var(--label-2); letter-spacing: 0; }
.day-h .today { font: 700 .647rem/1 var(--rounded); letter-spacing: .06em; text-transform: uppercase; background: var(--tint); color: var(--on-tint); padding: 4px 7px; border-radius: 6px; }
.meal { --inset: 84px; }
.meal img, .meal .noimg { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--fill); flex: none; }
.meal .mt { font-weight: 600; display: block; line-height: 1.25; }
.meal .mm { display: flex; gap: 10px; align-items: center; margin-top: 5px; font-size: .765rem; color: var(--label-2); letter-spacing: 0; }
.meal .stepper { height: 26px; }
.meal .stepper button { width: 30px; height: 26px; }
.add-row { color: var(--tint); }
.add-row .i { stroke-width: 2.2; }
.shop-cta { margin: 6px var(--gutter) 0; display: grid; gap: 8px; }

/* ---------------------------------------------------------------- list: aisle signage */

.list-add { display: flex; gap: 8px; align-items: center; margin: 12px var(--gutter) 22px; }
.list-add .search { flex: 1; }
.aisle-sign {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 8px 8px; height: 26px; padding: 0 11px 0 9px; border-radius: 7px;
  background: var(--ac); color: var(--card-ink);
  font: 800 .706rem/1 var(--rounded); letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgb(0 0 0 / .08);
}
.aisle-sign .n { opacity: .75; font-weight: 700; font-variant-numeric: tabular-nums; }
.aisle-sign.red { color: #fff; }
.item { --inset: 52px; min-height: 52px; }
.item .box { all: unset; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--label-3); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, scale .2s var(--spring); }
.item .box::after { content: ''; position: absolute; inset: 0; }
.item .box .i { width: 14px; height: 14px; stroke-width: 3; color: var(--card-ink); opacity: 0; }
.item.done .box { background: var(--ac, var(--tint)); border-color: var(--ac, var(--tint)); }
.item.done .box .i { opacity: 1; }
.item .box:active { scale: .85; }
.item .txt { line-height: 1.3; }
.item.done .txt { color: var(--label-3); text-decoration: line-through; }
.item .src { font-size: .765rem; color: var(--label-2); margin-top: 2px; letter-spacing: 0; }
.item .acts { position: relative; z-index: 1; display: flex; margin-right: -10px; }
.item .acts a, .item .acts button { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--label-3); }
.item .acts a:hover, .item .acts button:hover { background: var(--fill); color: var(--label); }
.item .acts .i { width: 1.05rem; height: 1.05rem; }
.list-foot { display: grid; gap: 10px; margin: 4px var(--gutter) 0; }
.note { color: var(--label-2); margin: 0 var(--gutter) 20px; font-size: .882rem; }

/* ---------------------------------------------------------------- sheets, alerts, toast, login */

dialog.sheet {
  border: 0; padding: 0; color: var(--label); background: var(--bg-grouped);
  width: min(540px, 100vw); max-height: min(86dvh, 760px);
  border-radius: 14px; box-shadow: var(--shadow-float);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.sheet { background: #1c1c1e; } :root:not([data-theme="light"]) dialog.sheet .cells { background: #2c2c2e; } }
dialog.sheet::backdrop { background: rgb(0 0 0 / .32); }
dialog.sheet[open] { animation: sheet-in .4s var(--ease); }
@keyframes sheet-in { from { translate: 0 40px; opacity: 0; } }
@media (max-width: 599px) {
  dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.sheet[open] { animation: sheet-up .45s var(--ease); }
  @keyframes sheet-up { from { translate: 0 100%; } }
}
.sheet-in { display: flex; flex-direction: column; max-height: inherit; }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 6px auto 0; }
@media (min-width: 600px) { .sheet-grab { display: none; } }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 8px 8px; }
.sheet-head h2 { grid-column: 2; margin: 0; font-size: 1rem; font-weight: 600; text-align: center; }
.sheet-head .navbtn { grid-column: 3; justify-self: end; }
.sheet-body { padding: 4px 0 18px; overflow-y: auto; }
.sheet-body > .pad, .sheet-body > .search { margin-left: var(--gutter); margin-right: var(--gutter); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 var(--gutter) 22px; }
.days button { all: unset; cursor: pointer; text-align: center; padding: 8px 0 9px; border-radius: 10px; background: var(--cell); font-size: .706rem; color: var(--label-2); letter-spacing: 0; }
.days button b { display: block; font: 600 1.176rem/1.25 var(--rounded); color: var(--label); }
.days button[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
.days button[aria-pressed="true"] b { color: var(--on-tint); }
.pick .cell { --inset: 82px; }
.pick img, .pick .noimg { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--fill); flex: none; }
.pick b { font-weight: 600; display: block; }
.pick small { display: block; color: var(--label-2); font-size: .765rem; margin-top: 2px; letter-spacing: 0; }
.menu .cell { color: var(--tint); font-size: 1rem; }
.menu .cell .i { color: var(--tint); }
.menu .cell.destructive, .menu .cell.destructive .i { color: var(--danger); }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .94); display: grid; place-items: center; padding: 20px; cursor: zoom-out; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.lightbox img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 4px; }

.toast {
  position: fixed; z-index: 80; left: calc(50% + var(--sidebar) / 2); top: calc(env(safe-area-inset-top) + 10px);
  translate: -50% -24px; opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 10px 10px 10px 20px; border-radius: 24px;
  background: var(--material); color: var(--label);
  backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  font-size: .882rem; font-weight: 500; box-shadow: var(--shadow-float);
  transition: translate .45s var(--spring), opacity .2s;
}
.toast:not(:has(button)) { padding-right: 20px; }
.toast.show { translate: -50% 0; opacity: 1; pointer-events: auto; }
.toast button { all: unset; cursor: pointer; font-weight: 600; color: var(--tint); padding: 6px 10px; border-radius: 14px; }
.toast button:hover { background: var(--fill); }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 0 var(--gutter); background: var(--bg-grouped); }
.login form { width: min(360px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; }
.login .appicon { width: 84px; height: 84px; border-radius: 19px; box-shadow: var(--shadow-card); margin-bottom: 8px; }
.login h1 { margin: 0; }
.wordmark { font: 700 3rem/1 var(--brand); letter-spacing: -0.02em; color: var(--label); }
.login p { color: var(--label-2); margin: 0 0 14px; }
.login .cells { width: 100%; background: var(--cell) !important; box-shadow: 0 0 0 .5px var(--sep); }
.login input { width: 100%; height: 50px; border: 0; background: none; padding: 0 16px; font-size: 1rem; outline: none; }
.login .btn { width: 100%; }
.login .err { color: var(--danger); font-size: .882rem; min-height: 1.3em; margin: 0; }

.skeleton { background: var(--fill); border-radius: var(--r-card); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .tabs, .navbar, .cook-cta, .verdict, .pages, .toast { display: none !important; }
  body { padding: 0; }
}

/* ---------------------------------------------------------------- additions: brand title, pills, units, deck */

.brand-title { display: flex; align-items: center; gap: 12px; font: 700 2.2rem/1 var(--brand); letter-spacing: -0.02em; }
.brand-title img { width: 2.1rem; height: 2.1rem; border-radius: 9px; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.rc-pills { display: inline-flex; gap: 6px; }
.rc-pill.ghost { background: rgb(255 255 255 / .35); color: var(--card-ink); box-shadow: inset 0 0 0 1.5px rgb(17 17 17 / .6); }
.rc-pill.kids { background: #ff6a13; color: #fff; }
.rcard.orange .rc-pill.kids, .dcard[style*="orange"] .rc-pill.kids { background: #fff; color: #c2410c; }
.approx { opacity: .55; margin-right: 1px; font-weight: 500; }
.seg.units { margin: 0 0 12px 4px; }
.lib-meta-r { display: inline-flex; align-items: center; gap: 12px; }
.view-seg button { padding: 5px 10px; }
.view-seg .i { width: 1.05rem; height: 1.05rem; display: block; }

/* Deck: a pile of big cards you flip through. */
.deck { position: relative; height: clamp(340px, calc(100dvh - 330px - var(--tabbar) - env(safe-area-inset-bottom)), 640px); margin: 14px auto 0; max-width: 460px; padding: 0 12px; touch-action: none; user-select: none; }
.dcard {
  position: absolute; inset: 0 12px; display: flex; flex-direction: column;
  padding: 16px 18px 20px; border-radius: 30px; background: var(--c); color: var(--card-ink);
  box-shadow: 0 18px 40px -18px rgb(30 20 0 / .45), 0 2px 6px rgb(0 0 0 / .08);
  transition: transform .45s var(--spring), opacity .3s;
  will-change: transform;
}
.dcard[data-depth="1"] { transform: translateY(16px) scale(.95); }
.dcard[data-depth="2"] { transform: translateY(32px) scale(.9); opacity: .9; }
.dcard.dragging { transition: none; cursor: grabbing; }
.dcard.out-next { transform: translateY(-115%) rotate(-6deg) !important; opacity: 0; transition: transform .26s ease-in, opacity .26s; }
.dcard.out-prev { transform: translateY(115%) rotate(6deg) !important; opacity: 0; transition: transform .26s ease-in, opacity .26s; }
.dcard.quick { transition-duration: .09s !important; }
.dcard.landed { animation: land .5s var(--spring); }
@keyframes land { 0% { scale: .94; } 100% { scale: 1; } }
.d-ph { flex: 1; min-height: 0; margin-top: 14px; border-radius: 20px; overflow: hidden; background: rgb(0 0 0 / .1); }
.d-ph img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.d-ph.page img { object-position: top; }
.dcard .rc-row h3 { font-size: 1.5rem; -webkit-line-clamp: 3; }
.dcard .rc-time { font-size: 1.5rem; }
.deck-hint { text-align: center; color: var(--label-2); font-size: .765rem; margin: 40px 0 12px; letter-spacing: 0; }
.deck-hint span { color: var(--label); font-weight: 600; }
/* No photo: the name fills the card instead. */
.d-noimg { flex: 1; min-height: 0; display: flex; align-items: flex-end; margin-top: 14px; font: 700 clamp(2rem, 9vw, 2.9rem)/1.02 var(--display); letter-spacing: -0.035em; text-wrap: balance; overflow: hidden; }
.dcard.noimg .rc-row h3 { display: none; }
.dcard.noimg .rc-row { justify-content: flex-end; margin-top: 0; }

/* ---------------------------------------------------------------- household: avatars, comments, feed, names on stickers */

.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 .82rem/1 var(--rounded); color: #111; background: var(--k-sage); }
.avatar.p-brett { background: var(--k-olive); color: #fff; }
.avatar.p-sarah { background: var(--k-orange); color: #fff; }
.sticker .by { display: block; font-style: normal; font-size: .58em; letter-spacing: .1em; font-weight: 700; opacity: .75; margin-top: 2px; }
.sticker.kids .by { opacity: .9; }
.src-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 3px; }
.src-link .i { width: .8rem; height: .8rem; }
.r-split:empty { display: none; }

.comments-sec { padding: 30px var(--gutter) 0; max-width: 820px; }
.comments-sec.pad { padding: 8px var(--gutter) 0; }
.comments { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 12px; }
.comments li { display: flex; gap: 10px; align-items: flex-start; }
.comments .bubble { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: var(--cell); box-shadow: var(--shadow-card); }
.comments li.mine .bubble { background: color-mix(in srgb, var(--cell) 82%, var(--k-olive)); }
.comments .who { font-weight: 600; font-size: .82rem; }
.comments .who span { font-weight: 400; color: var(--label-2); margin-left: 4px; }
.comments p { margin: 2px 0 0; white-space: pre-line; line-height: 1.4; overflow-wrap: anywhere; }
.c-del { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--label-3); }
.c-del:hover { background: var(--fill); color: var(--label); }
.c-del .i { width: .9rem; height: .9rem; }
.c-form { display: flex; gap: 8px; align-items: flex-end; }
.c-form textarea { flex: 1; min-height: 40px; max-height: 40vh; resize: none; padding: 9px 14px; border-radius: 20px; border: 0; background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep); font-size: 1rem; line-height: 1.35; }
.c-form textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint); }

.feed .cell { --inset: 60px; align-items: flex-start; padding-block: 12px; }
.feed .f-text { display: block; line-height: 1.35; }
.feed .f-text q { display: block; margin-top: 3px; color: var(--label-2); quotes: '“' '”'; }
.feed .f-time { display: block; font-size: .765rem; color: var(--label-2); margin-top: 4px; letter-spacing: 0; }
.feed .unread { background: color-mix(in srgb, var(--cell) 88%, var(--k-orange)); }
.feed .unread .f-text::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-orange); margin-right: 6px; vertical-align: 1px; }
.tabs #activity-badge { background: var(--k-orange); }

.link-import { margin: 22px var(--gutter) 0; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row .search { flex: 1; }
.link-row .search input { height: 44px; border-radius: 12px; }

/* ---------------------------------------------------------------- accounts: shared banner, recipients, welcome */

.shared-banner { display: flex; align-items: center; gap: 12px; margin: 4px 10px 10px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--cell); box-shadow: var(--shadow-card); }
.shared-banner b { display: block; font-weight: 600; }
.shared-banner q { display: block; color: var(--label-2); font-size: .882rem; margin-top: 2px; quotes: '“' '”'; }
@media (min-width: 760px) { .shared-banner { margin: 4px var(--gutter) 12px; } }

.who-list .cell { --inset: 60px; }
.who-list small { font-size: .765rem; }
.who-list .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--label-3); display: grid; place-items: center; }
.who-list .tick .i { width: 13px; height: 13px; stroke-width: 3; color: var(--on-tint); opacity: 0; }
.who-list [aria-checked="true"] .tick { background: var(--tint); border-color: var(--tint); }
.who-list [aria-checked="true"] .tick .i { opacity: 1; }

.welcome { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) var(--gutter) calc(env(safe-area-inset-bottom) + 36px); }
.w-head { text-align: center; display: grid; justify-items: center; gap: 8px; }
.w-icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: var(--shadow-card); margin-bottom: 6px; }
.w-head h1 { margin: 0; font: 700 clamp(2rem, 7vw, 2.8rem)/1.05 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.w-head p { margin: 0; color: var(--label-2); font-size: 1.06rem; max-width: 30ch; text-wrap: balance; }
.w-video { margin: 26px auto 0; max-width: 420px; }
.w-video video { width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; background: #111; box-shadow: var(--shadow-float); display: block; object-fit: cover; }
.w-video figcaption { text-align: center; color: var(--label-2); font-size: .765rem; margin-top: 10px; letter-spacing: 0; }
.w-h2 { margin: 40px 4px 14px; font: 700 1.294rem/1.2 var(--display); letter-spacing: -0.02em; }
.w-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.w-grid li { display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--cell); box-shadow: var(--shadow-card); align-content: start; }
.w-grid li:nth-child(8n+1) .w-ic { background: var(--k-red); color: #fff; }
.w-grid li:nth-child(8n+2) .w-ic { background: var(--k-sage); }
.w-grid li:nth-child(8n+3) .w-ic { background: var(--k-butter); }
.w-grid li:nth-child(8n+4) .w-ic { background: var(--k-orange); color: #fff; }
.w-grid li:nth-child(8n+5) .w-ic { background: var(--k-olive); color: #fff; }
.w-grid li:nth-child(8n+6) .w-ic { background: var(--k-blue); }
.w-grid li:nth-child(8n+7) .w-ic { background: var(--k-tan); }
.w-grid li:nth-child(8n+8) .w-ic { background: var(--k-grey); }
.w-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #111; margin-bottom: 6px; }
.w-ic .i { width: 1.15rem; height: 1.15rem; }
.w-grid b { font-weight: 600; }
.w-grid span:last-child { color: var(--label-2); font-size: .882rem; line-height: 1.4; }
.w-steps { margin: 0; padding: 0; list-style: none; counter-reset: w; display: grid; gap: 12px; }
.w-steps li { counter-increment: w; display: grid; grid-template-columns: 32px 1fr; gap: 12px; line-height: 1.45; color: var(--label-2); }
.w-steps li::before { content: counter(w); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--label); color: var(--bg); font: 700 .82rem/1 var(--rounded); }
.w-steps b { color: var(--label); font-weight: 600; }
.w-cta { display: grid; gap: 10px; margin-top: 30px; }