/* Honest Dinner. Colors and feel: docs/BRAND.md. */

@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* Eucalyptus and oat (2026-10-25): calm, low-fatigue. docs/BRAND.md. */
  --action: #336B5D;
  --action-press: #285A4E;
  --on-action: #FFFFFF;
  --honey: #E6C07A;
  --honey-soft: #F6EBD2;
  --on-honey: #25302C;
  --oat: #F6F4EE;
  --linen: #FFFEFB;
  --mist: #E8EEE8;
  --sage: #8DB8A8;
  --sage-ink: #336B5D;
  --sage-soft: #E3EEE8;
  --on-sage: #FFFFFF;
  --ink: #25302C;
  --soft: #5C6963;
  --line: #E2E4DC;
  --veil: rgba(246, 244, 238, .86);
  --edge: #7C8782;
  --muted-on-mist: #52605A;
  --alert: #A9533C;
  --bowl: #B04E4A;
  --plate: #FFFDF8; --plate-rim: #E4E0D6; --plate-ring: #EDEAE1; --plate-hi: #FFFFFF; --plate-lo: #E3D7C9;
  --dock: #25302C; --on-dock: #F6F4EE; --dock-line: transparent;
  --toast-link: #E6C07A;
  --glow: 18%;
  --shadow: 0 1px 2px rgba(30, 48, 42, .05), 0 10px 28px rgba(40, 64, 56, .09);
  --shadow-lift: 0 2px 4px rgba(30, 48, 42, .06), 0 16px 36px rgba(40, 64, 56, .14);
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-pill: 999px;
  --head: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --action: #8FCBB9; --action-press: #A6D8C8; --on-action: #10201A;
    --honey: #E6C07A; --honey-soft: #3A3424; --on-honey: #1A1D17;
    --oat: #151A18; --linen: #1E2522; --mist: #28302D;
    --sage: #8FCBB9; --sage-ink: #8FCBB9; --sage-soft: #1F2E29; --on-sage: #10201A;
    --ink: #E8EEEA; --soft: #AFBAB4; --line: #2C3431;
    --veil: rgba(21, 26, 24, .86);
    --edge: #6E7A75; --muted-on-mist: #B3BDB8; --alert: #E8A08C; --bowl: #E68A80;
    --plate: #CFD3CC; --plate-rim: #BFC4BD; --plate-ring: #C6CBC4; --plate-hi: #E4E7E1; --plate-lo: #A2A9A0;
    --dock: #1E2522; --on-dock: #E8EEEA; --dock-line: #34403B;
    --toast-link: #285A4E;
    --glow: 8%;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 36px rgba(0, 0, 0, .36);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --action: #8FCBB9; --action-press: #A6D8C8; --on-action: #10201A;
  --honey: #E6C07A; --honey-soft: #3A3424; --on-honey: #1A1D17;
  --oat: #151A18; --linen: #1E2522; --mist: #28302D;
  --sage: #8FCBB9; --sage-ink: #8FCBB9; --sage-soft: #1F2E29; --on-sage: #10201A;
  --ink: #E8EEEA; --soft: #AFBAB4; --line: #2C3431;
  --veil: rgba(21, 26, 24, .86);
  --edge: #6E7A75; --muted-on-mist: #B3BDB8; --alert: #E8A08C; --bowl: #E68A80;
  --plate: #CFD3CC; --plate-rim: #BFC4BD; --plate-ring: #C6CBC4; --plate-hi: #E4E7E1; --plate-lo: #A2A9A0;
  --dock: #1E2522; --on-dock: #E8EEEA; --dock-line: #34403B;
  --toast-link: #285A4E;
  --glow: 8%;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 36px rgba(0, 0, 0, .36);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* A faint warm glow at the top of every page, like lamplight. */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 340px;
  background: radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--honey) var(--glow), transparent), transparent 70%),
              radial-gradient(90% 80% at 0% -20%, color-mix(in srgb, var(--mist) 80%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--action); }
h1, h2, h3 { text-wrap: balance; font-family: var(--head); font-variation-settings: "SOFT" 100; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 23px; line-height: 1.2; }
h3 { font-size: 19px; line-height: 1.25; }
p { margin: 0; }
svg { flex: none; }

.shell {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 150px);
}
.screen { display: grid; gap: 18px; }
/* A grid item's minimum is its widest unbreakable content: let every card on
   a screen shrink to the phone instead, so nothing scrolls sideways at 320 px
   (the coherence review, H6: one rule behind eleven screens). */
.screen > *, .stack > * { min-width: 0; }
.row > .grow, .search { min-width: 0; }
.enter .screen { animation: settle .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.brand { display: flex; align-items: center; gap: 8px; font: 600 18px/1 var(--head); font-variation-settings: "SOFT" 100; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--mist); color: var(--ink); font-weight: 800;
}
.back {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none;
  color: var(--soft); font-weight: 700; padding: 8px 4px; margin-left: -4px; text-decoration: none; min-height: 44px;
}

.hello { display: grid; gap: 4px; padding: 6px 2px 2px; }
.eyebrow { color: var(--soft); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.sub { color: var(--soft); font-size: 17px; }

/* Cards */
.card {
  background: var(--linen); border-radius: var(--r-xl);
  box-shadow: var(--shadow); padding: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.card.mist { background: var(--mist); box-shadow: none; border-color: transparent; }
.card.mist .muted { color: var(--muted-on-mist); }
.card.sage { background: var(--sage-soft); box-shadow: none; border-color: transparent; }
.card.honey { background: var(--honey-soft); box-shadow: none; border-color: transparent; }
.row { display: flex; align-items: center; gap: 12px; }
.stack { display: grid; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--soft); }
.small { font-size: 15px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--soft); font-size: 14px; font-weight: 600; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 2px 0; }
.link { position: relative; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--action); font-weight: 800; font-size: 15px; padding: 6px 0; text-decoration: none; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  background: var(--mist); color: var(--ink);
}
.chip.honey { background: var(--honey); color: var(--on-honey); }
.chip.sage { background: var(--sage-soft); color: var(--sage-ink); }
.chip.line { background: transparent; border: 1.5px solid var(--line); color: var(--soft); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -18px; padding-inline: 18px; }
.chips::-webkit-scrollbar { display: none; }
.chips .chip { flex: none; padding: 9px 16px; font-size: 14px; border: 0; min-height: 44px; }
.chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--oat); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 22px; border-radius: var(--r-pill); border: 0;
  font-weight: 800; font-size: 17px; letter-spacing: .01em;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--action); color: var(--on-action); box-shadow: 0 8px 20px color-mix(in srgb, var(--action) 32%, transparent); }
.btn.primary:hover { background: var(--action-press); }
.btn.quiet { background: var(--mist); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--soft); min-height: 44px; }
.btn.full { width: 100%; }
.btn { white-space: nowrap; }
/* A full-width button wraps its words before it pushes the page wider (H6). */
.btn.full, .list-actions .btn { white-space: normal; text-align: center; line-height: 1.25; }
.tabs[hidden] { display: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--honey) 80%, transparent); outline-offset: 2px; }

/* Tonight */
.tonight { padding: 0; overflow: hidden; }
.tonight .art {
  position: relative; height: 176px;
  background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--honey) 55%, var(--linen)), transparent 70%),
              linear-gradient(150deg, var(--mist), color-mix(in srgb, var(--honey) 30%, var(--mist)));
  display: grid; place-items: center;
}
.tonight .art .chip { position: absolute; left: 16px; top: 16px; }
.tonight .body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.tonight .why {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--oat); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px;
}
.tonight .actions { display: grid; gap: 4px; margin-top: 4px; }

/* Week strip */
.week { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 4px 18px 8px; }
.week::-webkit-scrollbar { display: none; }
.day {
  background: var(--linen); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 8px; align-content: start;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow); min-height: 156px;
}
.day .d { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.day .n { font-size: 14px; font-weight: 700; line-height: 1.3; }
.day.today { background: var(--honey); border-color: transparent; color: var(--on-honey); }
.day.today .d { color: var(--on-honey); opacity: .8; }
.day.out { background: transparent; box-shadow: none; border: 1.5px dashed var(--line); color: var(--soft); }

.tile-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--linen); color: var(--sage-ink);
}
.honey .tile-icon { color: var(--ink); }
.big-number { font: 600 34px/1 var(--head); font-variation-settings: "SOFT" 100; letter-spacing: -.02em; }

.ranked { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.ranked li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ranked li:first-child { border-top: 0; }
.ranked .rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); font-weight: 800; font-size: 14px; flex: none; }
.ranked li:first-child .rank { background: var(--honey); color: var(--on-honey); }
.ranked .weeks { color: var(--soft); font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Add a flyer */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-choice {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 24px 12px 20px; border-radius: var(--r-xl); border: 0;
  background: var(--linen); box-shadow: var(--shadow); color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.big-choice:active { transform: scale(.98); }
.big-choice .circle { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--on-action); }
.big-choice:nth-child(2) .circle { background: var(--honey); color: var(--on-honey); }
.big-choice b { font-size: 17px; }
.big-choice small { color: var(--soft); font-size: 13px; font-weight: 600; }

.progress { height: 10px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--honey), var(--sage)); }
.deals { list-style: none; margin: 0; padding: 0; display: grid; }
.deals li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.deals li:first-child { border-top: 0; }
.deals .price { font-weight: 800; white-space: nowrap; }
.deals .was { color: var(--soft); font-size: 13px; text-decoration: line-through; margin-left: 6px; font-weight: 600; }
.deals li.new { animation: arrive .5s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); flex: none; }
.shimmer { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--mist), var(--oat), var(--mist)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Pick sheet */
.picks { display: grid; gap: 12px; }
.pick {
  display: grid; grid-template-columns: 76px 1fr 36px; gap: 14px; align-items: center; text-align: left;
  width: 100%; padding: 12px; border-radius: var(--r-lg);
  background: var(--linen); border: 2px solid transparent; box-shadow: var(--shadow);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.pick:active { transform: scale(.99); }
.pick .plate { width: 76px; height: 76px; display: grid; place-items: center; }
.pick .name { font-weight: 800; font-size: 16px; line-height: 1.3; }
.pick .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pick .tags .chip { padding: 3px 9px; font-size: 13px; }
.pick .tick { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--edge); display: grid; place-items: center; color: transparent; transition: all .2s ease; }
.pick[aria-pressed="true"] { background: var(--sage-soft); border-color: var(--sage-ink); box-shadow: none; }
.pick[aria-pressed="true"] .tags .chip:not(.honey):not(.sage) { background: var(--linen); }
.pick[aria-pressed="true"] .tick { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--on-sage); }

/* --tabs-h is the tab bar's measured height (tabsHeight in app.js); the fallback is the tab row alone. */
.dock {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h, calc(env(safe-area-inset-bottom) + 76px)) + 10px); z-index: 5;
  display: flex; justify-content: center; padding: 0 18px; pointer-events: none;
}
.dock > div {
  pointer-events: auto; width: 100%; max-width: 524px;
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px;
  background: var(--dock); color: var(--on-dock); border: 1px solid var(--dock-line); border-radius: var(--r-pill); box-shadow: var(--shadow-lift);
}
.dock .count { font-weight: 800; }
.dock .count small { display: block; font-weight: 600; font-size: 12px; opacity: .75; }
.dock .btn { min-height: 48px; margin-left: auto; padding: 0 20px; font-size: 16px; }
.dock > div > * { min-width: 0; }
.dock .btn { white-space: normal; text-align: center; line-height: 1.2; }
.pips { display: flex; gap: 5px; margin-top: 4px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--on-dock) 30%, transparent); }
.pips i.on { background: var(--honey); }
.has-dock { padding-bottom: 96px; }

/* Bottom tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: center;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--veil); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.tabs { flex-direction: column; align-items: center; gap: 2px; }
/* One column per tab, however many there are (the app has four; a five-column grid left the fourth off-center). */
.tabs > .tabrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 524px; align-items: end; }
/* The "what's next" strip (the flow round): one thin line above the tabs that names the next step, the whole
   line one target. It replaced the five-step bar; the .steps rules below still draw the sign-up and cook pips. */
.next-strip { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 524px;
  min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage-ink);
  font-size: 14px; font-weight: 800; text-decoration: none; }
.next-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.next-strip svg { flex: none; }
.tabs:has(.next-strip) { padding-top: 6px; }
/* Tonight (the flow round): what tonight's dinner needs from the list, one line; the 5 pm door's quiet second line. */
.needs-line { display: block; padding: 2px 4px; color: var(--sage-ink); font-weight: 700; text-decoration: none; }
.easy-door { display: grid; place-items: center; min-height: 44px; text-align: center; }
/* A handoff's one line: what the app just did on its own, and a quiet way back (the flow round). */
.handoff-line { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--sage-soft); color: var(--ink); }
.handoff-line .link { white-space: nowrap; }
/* The pick sheet (the flow round): one quiet Make extra link, and a price we're not sure of said quietly. */
.extra-link { justify-self: start; min-height: 44px; padding: 0 6px; }
.price-unsure { display: block; margin-top: 4px; }
/* A recipe's notes (app/disclosures.recipe_footer): on the page, below the recipe, as one quiet block. */
.recipe-notes { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); }
.recipe-notes p { margin: 0; }
/* "Bowlby's on it" with the week on screen: the calm banner's one line, its retry beside it (the flow round). */
.on-it-line .link { flex: none; min-height: 44px; }
/* Move or swap on a Week card (the flow round): the nights wrap, each a 44 px target. */
.move-link { justify-self: start; min-height: 44px; padding: 0 2px; }
.empty-nights { margin: 0; padding: 2px 6px; }
.move-nights { display: flex; flex-wrap: wrap; gap: 8px; }
.move-nights .chip { min-height: 44px; padding: 9px 14px; font-size: 14px; }
/* The list (the flow round): one estimate line, the working a tap away; a sale price is its own control. */
.estimate summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.estimate summary::-webkit-details-marker { display: none; }
.estimate p { margin: 0; }
.fix-price { flex: none; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 800;
  text-decoration: underline dotted var(--edge); text-underline-offset: 4px; }
/* The week's five steps, above the tabs: done, now, later. */
.steps { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 524px; position: relative; }
.steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 10px; height: 2px; background: var(--line); }
.steps li { position: relative; display: grid; justify-items: center; }
.steps a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--soft); font-size: 11px; font-weight: 800; min-height: 44px; min-width: 44px; padding-top: 2px; }
.steps i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px;
  background: var(--linen); border: 2px solid var(--line); color: var(--soft); }
.steps i svg { width: 12px; height: 12px; }
.steps .done i { background: var(--action); border-color: var(--action); color: var(--on-action); }
.steps .done a { color: var(--sage-ink); }
.steps .now i { border-color: var(--action); color: var(--sage-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 22%, transparent); }
.steps .now a { color: var(--ink); }
/* What your family loves: the taste step */
.taste-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.taste-tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; min-height: 44px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--linen); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.2; }
.taste-tile[aria-pressed="true"] { border-color: var(--action); background: var(--sage-soft); color: var(--sage-ink); }
.taste-mark { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--on-action); }
.pick .why { color: var(--sage-ink); font-weight: 700; display: block; margin-top: 2px; }
.tab {
  display: grid; justify-items: center; gap: 3px; padding: 6px 0 2px; border: 0; background: none;
  color: var(--soft); font-size: 13px; font-weight: 800; text-decoration: none;
}
.tab[aria-current="page"] { color: var(--sage-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 700px) {
  .shell { padding-top: 32px; }
  h1 { font-size: 34px; }
}

/* Links that look like buttons or cards */
a.btn, a.card.plain { text-decoration: none; }
a.card.plain { color: inherit; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Segmented choice */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--mist); }
.seg button { border: 0; background: none; min-height: 42px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; color: var(--soft); }
.seg button { color: var(--muted-on-mist); }
.seg button[aria-pressed="true"] { background: var(--linen); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sage-ink); }

/* The list */
.aisle { margin: 14px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.items { list-style: none; margin: 0; padding: 0; }
.items li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.items li:first-child { border-top: 0; }
.items .name { display: block; font-weight: 700; }
.items .price { font-weight: 800; white-space: nowrap; }
.box {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--edge);
  background: none; display: grid; place-items: center; color: transparent; padding: 0; transition: all .2s ease;
}
.box[aria-pressed="true"], [aria-pressed="true"] > .box { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--oat); }
.items li.done .name { text-decoration: line-through; color: var(--soft); }
.items li.done .price { color: var(--soft); }

/* Cook mode: big type, nothing else on screen */
.cook { gap: 16px; }
.cook h2 { font-size: 21px; }
.pips.steps { display: grid; grid-auto-flow: column; gap: 6px; margin: 0; }
.pips.steps i { width: auto; height: 6px; border-radius: 3px; background: var(--mist); }
.pips.steps i.past { background: color-mix(in srgb, var(--sage-ink) 55%, var(--mist)); }
.pips.steps i.on { background: var(--sage-ink); }
.card.step { display: grid; gap: 14px; padding: 24px 22px; }
.cook-step { font-size: 25px; line-height: 1.4; font-weight: 700; letter-spacing: -.005em; }
.card.step .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.card.step .why { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; font-weight: 600; }
.card.timer { display: flex; align-items: center; gap: 18px; }
.card.timer > * { min-width: 0; }
@media (max-width: 359px) { .card.timer { flex-wrap: wrap; gap: 12px; } }      /* the ring and its buttons stack on a 320 px phone (H6) */
.ring { position: relative; display: grid; place-items: center; flex: none; }
.ring .time { position: absolute; }
.timer .time { font: 600 30px/1 var(--head); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; }
.cook-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 4px; }
.cook-nav > * { min-width: 0; }
.cook-nav .btn { white-space: normal; text-align: center; line-height: 1.2; }
.shell:has(.cook) { padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }

/* The kitchen helper */
.chat { display: grid; gap: 12px; }
.bubble { margin: 0; padding: 14px 16px; font-size: 16px; max-width: 86%; }
.bubble.me { justify-self: end; background: var(--sage-ink); color: var(--on-sage); border-radius: 22px 22px 6px 22px; font-weight: 600; }
.bubble.them { justify-self: start; background: var(--linen); border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow); display: grid; gap: 12px; max-width: 92%; }
.attach { background: var(--oat); border-radius: var(--r-md); padding: 10px 12px; }
.attach .tile-icon { width: 40px; height: 40px; }
.has-composer { padding-bottom: 84px; }
.dock > form { pointer-events: auto; width: 100%; max-width: 524px; display: flex; align-items: center; gap: 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-lift); margin: 0; }
.composer > div, .composer > form { background: var(--linen); color: var(--ink); border: 1px solid var(--line); padding: 6px 6px 6px 20px; }
.composer input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 600 16px var(--body); outline: none; }
.composer input::placeholder { color: var(--soft); }
.send { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--action); color: var(--on-action); }

/* The pantry */
.shelf { display: flex; flex-wrap: wrap; gap: 8px; }
.shelf .chip { font-weight: 700; padding: 7px 12px; }
.chips .chip.line { border: 1.5px solid var(--line); background: var(--linen); color: var(--ink); font-weight: 700; }

/* Quick links */
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -6px; }
.quick .chip { text-decoration: none; min-height: 44px; padding: 9px 14px; font-size: 14px; background: var(--linen); box-shadow: var(--shadow); color: var(--ink); }
.quick .chip svg { color: var(--sage-ink); }

/* Welcome */
.welcome { gap: 22px; padding-top: 12px; }
.welcome .hero {
  height: 230px; border-radius: 36px; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--honey) 60%, var(--mist)), var(--mist) 75%);
}
.welcome .plates { display: flex; align-items: flex-end; gap: 0; }
.welcome .plates > :first-child { margin-right: -14px; transform: rotate(-8deg); }
.welcome .plates > :last-child { margin-left: -14px; transform: rotate(8deg); }
.welcome .plates > :nth-child(2) { position: relative; z-index: 1; }

/* Setup */
.stepper { padding: 10px 0; border-top: 1px solid var(--line); }
.stepper:first-child { border-top: 0; }
.stepper .n { min-width: 28px; text-align: center; font: 600 24px/1 var(--head); font-variation-settings: "SOFT" 100; }
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center;
  background: var(--mist); color: var(--ink); padding: 0;
}
.round.small { width: 44px; height: 44px; }
.switch { width: 54px; height: 32px; border-radius: 999px; border: 0; padding: 3px; background: var(--edge); display: flex; flex: none; transition: background-color .2s ease; position: relative; }
.switch::after, .link::after { content: ""; position: absolute; inset: -8px -4px; }
.switch i { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.switch[aria-pressed="true"] { background: var(--sage-ink); }
.switch[aria-pressed="true"] i { transform: translateX(22px); }
.chip.toggle { border: 1.5px solid var(--edge); background: var(--linen); padding: 8px 14px; font-size: 15px; min-height: 44px; }
.chip.toggle[aria-pressed="true"] { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--on-sage); }

/* Recipe box */
.search { display: flex; align-items: center; gap: 10px; padding: 0 18px; min-height: 52px; border-radius: var(--r-pill); background: var(--linen); border: 1px solid var(--line); color: var(--soft); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 16px var(--body); color: var(--ink); outline: none; }
.search input::placeholder { color: var(--soft); }
.index-card {
  position: relative; padding: 22px 22px 20px; border-radius: 10px; display: grid; gap: 6px;
  color: #25302C; background: #FFFBF1;
  background-image: linear-gradient(transparent 31px, rgba(70, 110, 150, .16) 32px);
  background-size: 100% 32px; background-position: 0 14px;
  box-shadow: 0 1px 2px rgba(30, 48, 42, .08), 0 12px 26px rgba(40, 64, 56, .14);
  border-top: 6px solid #9FBFB3; transform: rotate(-.6deg);
}
.index-card .chip { background: #E8EEE8; color: #25302C; }
.index-card .eyebrow { color: #336B5D; }
.index-card .script { font-style: italic; font-weight: 600; font-size: 26px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card.tile { padding: 14px; display: grid; gap: 4px; justify-items: start; }
.card.tile b { line-height: 1.3; }

/* Most picked */
.ranked.top li { gap: 10px; }
.ranked.top b { font-size: 15px; line-height: 1.3; }

/* Bowlby moves. Each mood has one small motion that fits what's happening.
   It plays once when he appears, everything ends within five seconds (WCAG
   2.2.2 asks for no endless motion beside content), and then he rests. A
   redraw of the same screen doesn't replay it (.seen); reduced motion turns
   it all off. */
.bowlby { display: block; overflow: visible; }
.bowlby .figure, .bowlby .arm, .bowlby .eyes, .bowlby .heart, .bowlby .wisps,
.bowlby .spark, .bowlby .dots circle, .bowlby .z, .bowlby .shadow { transform-box: fill-box; }
.bowlby .figure { transform-origin: 50% 100%; }
.bowlby .shadow, .bowlby .eyes, .bowlby .spark { transform-origin: center; }
.bowlby .heart { transform-origin: 50% 85%; }
.bowlby .arm.r { transform-origin: 0% 100%; }
.bowlby .arm.l { transform-origin: 100% 100%; }
.bowlby .dots circle { opacity: .45; }
.bowlby .z { opacity: .45; }

/* Every appearance: settle in gently, steam drifts twice */
.bowlby.alive .figure { animation: bb-arrive .55s cubic-bezier(.3, 1.3, .5, 1) both; }
.bowlby.alive .wisps { animation: bb-drift 1.6s ease-in-out .5s 2 alternate; }
/* happy: one blink, a moment after arriving */
.bowlby.alive.happy .eyes { animation: bb-blink .26s ease-in-out 1.3s 1; }
/* wave: hello with three swings, then the arm rests */
.bowlby.alive.wave .arm.r { animation: bb-wave 1.5s ease-in-out .55s 1; }
/* content: the heart beats once, like a warm thought */
.bowlby.alive.content .heart { animation: bb-beat 1s ease-in-out .5s 1; }
/* cheer: two happy hops, the sparkles twinkle in */
.bowlby.alive.cheer .figure { animation: bb-arrive .5s cubic-bezier(.3, 1.3, .5, 1) both, bb-hop .75s cubic-bezier(.3, 1.4, .5, 1) .5s 2; }
.bowlby.alive.cheer .shadow { animation: bb-squash .75s cubic-bezier(.3, 1.4, .5, 1) .5s 2; }
.bowlby.alive.cheer .spark { animation: bb-twinkle .9s ease-out both; }
.bowlby.alive.cheer .spark:nth-child(1) { animation-delay: .55s; }
.bowlby.alive.cheer .spark:nth-child(2) { animation-delay: .8s; }
.bowlby.alive.cheer .spark:nth-child(3) { animation-delay: 1.05s; }
/* thinking: the dots take turns, like someone working it out */
.bowlby.alive.thinking .dots circle { animation: bb-dot 1.1s ease-in-out 3; }
.bowlby.alive.thinking .dots circle:nth-child(2) { animation-delay: .18s; }
.bowlby.alive.thinking .dots circle:nth-child(3) { animation-delay: .36s; }
/* sleepy: the z's float up and fade, slowly */
.bowlby.alive.sleepy .z { animation: bb-float 2.2s ease-out 2; }
.bowlby.alive.sleepy .z:nth-child(2) { animation-delay: .7s; }
.bowlby.seen *, .bowlby.seen { animation: none !important; }
/* Bowlby's on it (a failure screen, app.js onItCard): thinking, and moving
   for as long as the screen is up, calm, never frantic: the dots take turns
   and he sways slowly, like someone working it out. Still with reduced motion. */
.on-it .bowlby.thinking .figure { animation: bb-ponder 3.2s ease-in-out infinite !important; }
.on-it .bowlby.thinking .dots circle { animation: bb-dot 1.5s ease-in-out infinite !important; }
.on-it .bowlby.thinking .dots circle:nth-child(2) { animation-delay: .25s !important; }
.on-it .bowlby.thinking .dots circle:nth-child(3) { animation-delay: .5s !important; }
.on-it .bowlby.thinking .wisps { animation: bb-drift 2.4s ease-in-out infinite alternate !important; }
@media (prefers-reduced-motion: reduce) {
  .on-it .bowlby.thinking .figure, .on-it .bowlby.thinking .dots circle, .on-it .bowlby.thinking .wisps,
  .on-it .bowlby.thinking .dots circle:nth-child(2), .on-it .bowlby.thinking .dots circle:nth-child(3) { animation: none !important; }
  .on-it .bowlby.thinking .dots circle { opacity: .8; }
}

@keyframes bb-arrive { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bb-drift { from { transform: translateY(1px); } to { transform: translateY(-3px); } }
@keyframes bb-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes bb-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-18deg); } 80% { transform: rotate(6deg); } }
@keyframes bb-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.16); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } }
@keyframes bb-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
@keyframes bb-squash { 0%, 100% { transform: scale(1); } 40% { transform: scale(.8); } }
@keyframes bb-twinkle { 0% { opacity: 0; transform: scale(0) rotate(-40deg); } 60% { opacity: 1; transform: scale(1.25) rotate(0); } 100% { transform: scale(1); } }
@keyframes bb-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@keyframes bb-ponder { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-3deg) translateY(-1.5px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(3deg) translateY(-1.5px); } }
@keyframes bb-float { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .5; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Wordmark: a honey heart dots the i */
.wordmark { margin: 0; font: 600 22px/1 var(--head); font-variation-settings: "SOFT" 100; color: var(--ink); }
.wordmark .idot { position: relative; display: inline-block; }
.wordmark .idot svg { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); }

/* Rating: three calm choices, one tap */
.rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rate {
  display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--linen); font-weight: 800; font-size: 14px; color: var(--ink);
}
.rate svg { color: var(--ink); }
.rate[aria-pressed="true"] { background: var(--sage-soft); border-color: var(--sage-ink); }

/* Ask: Bowlby beside his answers */
.them-row { display: flex; align-items: flex-end; gap: 8px; }
.them-row .bowlby { flex: none; margin-bottom: 2px; }
.them-row .bubble.them { max-width: none; flex: 1; }

/* Hard moments */
.moment .moment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.moment .moment-actions .btn { flex: 1; }

/* The one thing you just checked gets a small pop */
.pop, .pop .box { animation: pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
.celebrate { display: grid; place-items: center; padding-top: 18px; }
.welcome .greeter { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ask-head { display: flex; align-items: center; gap: 10px; }
.pick .tags .chip.for-you { background: var(--linen); color: var(--sage-ink); }
.pop { animation-fill-mode: both; }

/* Forms */
.field { display: grid; gap: 6px; min-width: 0; }
.field > * { min-width: 0; }                              /* an input's own width never pushes the page wider (H6) */
.field input { width: 100%; }
.field > span { font-weight: 800; font-size: 15px; }
.field input {
  min-height: 54px; padding: 0 18px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--oat); color: var(--ink); font: 700 17px var(--body); outline: none;
}
.field input::placeholder { color: color-mix(in srgb, var(--soft) 70%, transparent); font-weight: 600; }
.field input:focus { border-color: var(--sage-ink); background: var(--linen); }

/* Store picker */
.stores { display: grid; gap: 10px; }
.store {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: var(--r-lg); border: 2px solid transparent; background: var(--linen); box-shadow: var(--shadow);
}
.store .tile-icon { background: var(--mist); color: var(--ink); }
.store .ready { color: var(--sage-ink); font-weight: 700; }
.store[aria-pressed="true"] { border-color: var(--sage-ink); background: var(--sage-soft); box-shadow: none; }
.store[aria-pressed="true"] .tile-icon { background: var(--linen); }
.store[aria-pressed="true"] .box { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--on-sage); }

/* Single choice */
.option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 56px; padding: 10px 14px;
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--linen);
}
.option .radio { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--edge); }
.option[aria-pressed="true"] { border-color: var(--sage-ink); background: var(--sage-soft); }
.option[aria-pressed="true"] .radio { border: 7px solid var(--sage-ink); }

/* The week */
.nights { display: grid; gap: 10px; }
.night {
  display: grid; grid-template-columns: 50px 1fr 44px; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px; border-radius: var(--r-lg); background: var(--linen); box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.night.today { background: var(--honey-soft); border-color: transparent; box-shadow: none; }
.night .when { display: grid; justify-items: center; line-height: 1.1; }
.night .when b { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.night.today .when b { color: var(--ink); font-size: 12px; }
.night .when span { font: 600 22px/1.1 var(--head); font-variation-settings: "SOFT" 100; }
.night .what { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.night .what b { font-size: 15px; line-height: 1.3; }
.off-icon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--ink); }
.option .off-icon { width: 44px; height: 44px; }
.swap { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--mist); color: var(--ink); padding: 0; }

/* Bottom sheet and the undo note */
.sheet-veil { position: fixed; inset: 0; z-index: 20; background: rgba(20, 30, 26, .38); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; margin: 0 auto; max-width: 560px;
  display: grid; gap: 8px; padding: 10px 18px calc(env(safe-area-inset-bottom) + 18px);
  background: var(--linen); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-lift);
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  animation: rise-sheet .28s cubic-bezier(.2, .8, .2, 1);
}
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; margin-bottom: 6px; }
.sheet .option { min-height: 64px; }
@keyframes rise-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 7;
  width: calc(100% - 36px); max-width: 524px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 18px; border-radius: var(--r-md); background: var(--ink); color: var(--oat);
  box-shadow: var(--shadow-lift); font-weight: 700; font-size: 15px;
}
.toast .link { color: var(--toast-link); }

/* A recipe */
.recipe-hero { padding: 0; overflow: hidden; }
.recipe-hero .art { display: grid; place-items: center; padding: 20px 0 8px;
  background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--honey) 45%, var(--linen)), transparent 70%), linear-gradient(150deg, var(--mist), color-mix(in srgb, var(--honey) 25%, var(--mist))); }
.recipe-hero .body { padding: 18px 20px 20px; }
.recipe-hero .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.steps-list { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.steps-list li { padding-left: 4px; }
.steps-list li::marker { font-weight: 800; color: var(--sage-ink); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.facts > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--oat); }
.facts b { font-size: 17px; }

/* Account */
a.avatar { display: grid; place-items: center; text-decoration: none; }
.avatar.big { width: 64px; height: 64px; font-size: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--ink); font-weight: 800; flex: none; }
.settings { padding: 6px 16px; }
.setting { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; }
.setting > svg { color: var(--soft); }
.setting .tile-icon { width: 40px; height: 40px; background: var(--mist); color: var(--ink); }

/* Invite */
.linkbox { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-md); background: var(--oat); border: 1.5px solid var(--line); font-weight: 700; }
.share-card { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--mist), var(--honey-soft)); }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tiers li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.tiers .dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--mist); color: var(--soft); }
.tiers li.met .dot { background: var(--sage-ink); color: var(--oat); }

/* Sign in */
.btn.ink { background: var(--ink); color: var(--oat); }
.btn.outline { background: var(--linen); color: var(--ink); border: 1.5px solid var(--line); }

/* The plan */
.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 14px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; display: grid; gap: 1px; }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--linen); border: 3px solid var(--honey); }
.timeline li:first-child::before { background: var(--honey); }
.timeline span { color: var(--soft); font-size: 15px; }
.plan { display: grid; gap: 8px; }
.price-big { font: 600 30px/1 var(--head); font-variation-settings: "SOFT" 100; }
.price-big small { font: 700 14px var(--body); color: var(--soft); margin-left: 2px; }

/* Review fixes, 2026-10-25 (docs/SCREENS.md, "Review fixes") */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.day { color: inherit; text-decoration: none; }
.day.out .n { font-weight: 800; }
.saved-line { display: flex; gap: 10px; align-items: flex-start; padding: 2px 4px; font-size: 15px; color: var(--soft); }
.saved-line b { color: var(--ink); }
.saved-line svg { color: var(--sage-ink); margin-top: 2px; }
.terms { text-align: center; font-size: 15px; color: var(--soft); padding: 0 8px; margin-bottom: -6px; }
.terms b { color: var(--ink); }

/* The one big way in on the flyer screen */
.big-cta {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-xl);
  background: var(--action); color: var(--on-action); text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--action) 30%, transparent);
}
.big-cta .circle { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--on-action) 18%, transparent); }
.big-cta b { font-size: 19px; }
.big-cta .small { opacity: .9; }

/* How many dinners */
.how-many { padding: 6px 4px 0; }
.how-many .n { min-width: 26px; text-align: center; font: 600 22px/1 var(--head); font-variation-settings: "SOFT" 100; }

/* Whole list rows are the button */
.items li:has(> .item-row) { padding: 0; }
.item-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; text-align: left; background: none; border: 0; color: inherit; }
.items li > .item-row, .item-row > .grow { min-width: 0; }      /* the row's words wrap; its Take-off button stays on screen (H6) */
/* "Flyer says something else?" sits under its sale row, part of it, not a new item */
.items li.fix-row { display: block; border-top: 0; padding: 0 0 8px 40px; }
.items li.fix-row .link { font-size: 14px; }
.items li.fix-row form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.items li.fix-row .field { flex: 1 1 100%; }            /* the field on its own line; Save and the links under it */
.chip.sale { padding: 2px 8px; font-size: 12px; }

/* An open night is a gap you can fill, drawn lighter */
.night.open { background: transparent; box-shadow: none; border: 1.5px dashed var(--edge); }

/* Time's up, and the timer that follows you around */
.card.timer.up { background: var(--honey-soft); border-color: transparent; box-shadow: none; }
.timer-pill {
  position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; min-height: 44px;
  background: var(--dock); color: var(--on-dock); border: 1px solid var(--dock-line); font-weight: 800; font-size: 14px;
  text-decoration: none; box-shadow: var(--shadow-lift);
}
.timer-pill.up { background: var(--honey); color: var(--on-honey); }

/* Titles that could leave a word alone on a line */
.moment-title { display: block; font-size: 17px; text-wrap: balance; }
.pick .name, .night .what b, .tile b { text-wrap: balance; }
.share-card .eyebrow { color: var(--soft); }
.ask-head h1 { font-size: 28px; }
.card.tile { align-content: start; }
.freeze { display: flex; gap: 5px; align-items: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--sage-ink); line-height: 1.35; }
.freeze svg { flex: none; margin-top: 2px; }

/* The tour button, only in the shareable preview */
.tour-chip {
  position: fixed; z-index: 9; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 10px);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--veil); color: var(--ink); border: 1px solid var(--line); text-decoration: none;
  font-weight: 800; font-size: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tour-chip svg { color: var(--sage-ink); }

/* Flyer pages, one row each */
.pages { display: grid; gap: 10px; }
.page-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--linen); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.page-row .chip { padding: 4px 10px; font-size: 13px; }
.mini-page { width: 44px; height: 56px; flex: none; border-radius: 6px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #FFFDF8; border: 1px solid #EADBD0; }
.mini-page i { border-radius: 3px; background: #F2C66B; }
.mini-page i:nth-child(2) { background: #E89A8E; }
.mini-page i:nth-child(3) { background: #A9C2A0; }
.mini-page i:nth-child(4) { background: #F0D29A; }
.page-row .link { min-height: 44px; padding: 0 6px; }

/* Meals on the pick sheet: one tab per meal, dinners led by the sale proteins */
.meal-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 22px; background: var(--mist); }
.meal-tabs button { border: 0; background: none; min-height: 54px; border-radius: 18px; display: grid; place-content: center; gap: 1px; color: var(--muted-on-mist); font: inherit; }
.meal-tabs button b { font-size: 15px; font-weight: 800; }
.meal-tabs button small { font-size: 12px; font-weight: 700; }
.meal-tabs button[aria-pressed="true"] { background: var(--linen); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sage-ink); }
.group { display: grid; gap: 12px; }
.group + .group { margin-top: 12px; }
.lead { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); background: var(--honey-soft); }
.lead > .stack > b { font-size: 16px; line-height: 1.3; }
.lead-off { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--honey); color: var(--on-honey); display: grid; place-content: center; text-align: center; line-height: 1; }
.lead-off b { font: 600 21px/1 var(--head); font-variation-settings: "SOFT" 100; }
.lead-off small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 2px 0; }
.night.has-meals .when { grid-row: span 2; }
.day-meals { grid-column: 2 / 4; display: grid; grid-template-columns: max-content 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; color: var(--soft); }
.day-meals b { color: var(--ink); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.nights .month { margin: 8px 2px 0; }
/* Context on the pick sheet: what the menu respects, what a pack covers, what's loved */
.fits { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--soft); }
.fits svg { flex: none; margin-top: 2px; color: var(--sage-ink); }
.lead-note { color: var(--ink); font-weight: 700; }
.pick .meta .plus { font-weight: 800; color: var(--sage-ink); }
.chip.loved { background: var(--mist); color: var(--sage-ink); display: inline-flex; align-items: center; gap: 4px; }
.pick[aria-pressed="true"] .tags .chip.loved { background: var(--linen); }

/* Printing the list: a button on screen, a plain black-on-white sheet on paper */
.list-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.list-actions > * { min-width: 0; }
.list-actions .btn { min-height: 50px; font-size: 15px; padding: 0 12px; }
/* Done shopping: the check-in sheet and what it leaves behind */
.missing-list { gap: 6px; max-height: 46vh; overflow: auto; overscroll-behavior: contain; padding: 2px; }
.missing-list .option { min-height: 58px; }
.missing-list .option .chip { flex: none; padding: 5px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.shop-done ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.put-away li { padding-left: 14px; position: relative; }
.put-away li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.not-found li { display: grid; justify-items: start; gap: 2px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sage-ink) 25%, transparent); }
.not-found .link { min-height: 44px; padding: 0; }

/* Already at home: the offer, the tap-to-mark screen, and what came off */
.list-actions .span2 { grid-column: 1 / -1; }
.have-row { gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.have-row .btn { min-height: 44px; font-size: 15px; padding: 0 16px; }
.have-row .link { min-height: 44px; }
.items li.have .name { color: var(--soft); }
.items li.have .price { color: var(--sage-ink); font-weight: 800; font-size: 14px; }
.have-list summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.have-list summary::-webkit-details-marker { display: none; }
.have-list .items { margin-top: 6px; }
.have-list .items li { padding: 8px 0; }
.have-list .grow { display: grid; }

/* How it works: three cards after setup, and one tip per screen on a first visit */
.howto .hello { gap: 12px; padding-top: 8px; }
.howto-art { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 150px; margin: 8px 0 4px; }
.howto-art .mini-page { width: 58px; height: 74px; padding: 6px; gap: 4px; transform: rotate(-4deg); box-shadow: var(--shadow); }
.howto-art .mini-page:nth-child(2) { transform: rotate(2deg) translateY(-6px); }
.howto-art .mini-page:nth-child(3) { transform: rotate(6deg); }
.howto-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage-ink); }
.howto-plate { display: grid; place-items: center; }
.card.tip { background: var(--sage-soft); box-shadow: none; border-color: transparent; padding: 12px 12px 12px 14px; align-items: flex-start; }
.card.tip .tile-icon { background: var(--linen); color: var(--sage-ink); width: 40px; height: 40px; }
.card.tip .link { min-height: 44px; padding: 0 4px; align-self: center; }

/* Fixes after the two audits, 2026-10-25 (docs/SCREENS.md, "Audit fixes") */
.round[disabled] { opacity: .4; pointer-events: none; }
/* Whatever floats at the top (the cook timer, the preview's Tour chip) gets
   its own room, so it never covers a back link or a title. */
body.has-float .shell { padding-top: calc(env(safe-area-inset-top) + 72px); }
.timer-pill, .tour-chip { white-space: nowrap; max-width: calc(100% - 24px); }
.pick .meta .rest { font-weight: 700; color: var(--soft); }
.wrap-links { flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: -6px; }
.wrap-links .link { min-height: 44px; }
.nut-note { display: block; color: var(--alert); font-weight: 700; font-size: 13px; }
.has-note { flex: none; color: var(--soft); font-weight: 700; max-width: 110px; text-align: right; }
.card.warn { background: color-mix(in srgb, var(--alert) 12%, var(--linen)); box-shadow: none; border-color: transparent; }
.card.warn .tile-icon { color: var(--alert); }
.step-safe { display: block; margin-top: 4px; color: var(--sage-ink); font-weight: 700; }
.other-timers { display: flex; flex-wrap: wrap; gap: 8px; }
.other-timers .chip { border: 0; min-height: 44px; padding: 0 14px; font-size: 14px; }
.other-timers .chip svg { color: var(--sage-ink); }
.join-card { padding: 14px 14px 14px 18px; }
.other-food .field input { min-height: 54px; }
button.index-card { width: 100%; text-align: left; font: inherit; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
button.index-card p, button.index-card h2 { margin: 0; }
button.card.tile { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
/* Recipe search */
.results { display: grid; gap: 6px; }
.result-list { list-style: none; margin: 0; padding: 4px 14px; display: grid; background: var(--linen); border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow); }
.result { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.result:first-child { border-top: 0; }
.result b { line-height: 1.3; }
.result.partial b { color: var(--soft); }
.small-btn { min-height: 44px; padding: 0 14px; font-size: 15px; flex: none; }
.sale-note { color: var(--sage-ink); font-weight: 700; }
.write-card { padding: 14px 14px 14px 16px; margin-top: 4px; }
.write-card > svg { color: var(--sage-ink); }
#results { display: grid; gap: 14px; }
#results:empty { display: none; }
#box { gap: 14px; }
.top .link, .linkbox .link { min-height: 44px; min-width: 44px; justify-content: center; }
/* Headings take focus after a screen changes (for screen readers); they
   aren't controls, so no ring. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }

/* Audit 3 fixes, 2026-10-25 (docs/SCREENS.md, "Audit 3") */
/* The note sits above the dock and the step bar, so it never covers a button. */
#app:has(.dock) .toast { bottom: calc(var(--tabs-h, calc(env(safe-area-inset-bottom) + 76px)) + 90px); }
#app:not(:has(.dock)) .toast { bottom: calc(env(safe-area-inset-bottom) + 118px); }
.toast { cursor: pointer; }
/* Check boxes (make extra, leftovers, healthier): square, so they read as "any of these". */
.option.check .box { border-radius: 8px; width: 28px; height: 28px; }
.option.check[aria-pressed="true"] { border-color: var(--sage-ink); background: var(--sage-soft); }
.option.check[disabled] { opacity: .75; cursor: default; }
.chip-sub { font-size: 12px; font-weight: 600; opacity: .8; margin-left: 4px; }
.chip.toggle[disabled] { opacity: 1; cursor: default; }
.learned { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--sage-soft); color: var(--ink); font-size: 15px; line-height: 1.45; font-weight: 600; }
.learned svg { flex: none; margin-top: 3px; color: var(--sage-ink); }
.learned .link { font-weight: 800; }
.ask-family { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.night.has-extra { grid-template-rows: auto auto; }
.make-extra { grid-column: 2 / 4; justify-self: start; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px dashed var(--edge);
  background: none; color: var(--sage-ink); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.day.cooked { opacity: .9; }
.day .small { color: var(--sage-ink); font-weight: 800; display: inline-flex; gap: 3px; align-items: center; }
.day.today .small { color: var(--on-honey); }
.card.tonight.cooked .body { padding: 18px; }
.card.tonight .rates { margin-top: 0; }
.bowlby-tip { background: var(--honey-soft); box-shadow: none; border-color: transparent; padding: 10px 8px 10px 12px; gap: 10px; }
.bowlby-tip a.plain { color: var(--ink); text-decoration: none; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.bowlby-tip .link { min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--soft); }
.flyer-day .btn, .friend-card .btn { margin-top: 2px; }
.person-link { padding: 12px 14px; }
.person-link .tile-icon { background: var(--mist); color: var(--ink); }
.plan-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }
.vote-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--linen); border: 1.5px solid var(--line); }
.vote-card .round[aria-pressed="true"] { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--on-sage); }
.link.inline { min-height: 0; padding: 0; display: inline; font-size: inherit; font-weight: 800; }
textarea { font: inherit; color: var(--ink); background: var(--linen); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; width: 100%; resize: vertical; }
.cook-title { font-size: 23px; line-height: 1.2; }
.lead-off small { font-size: 12px; }
/* On a wide screen the week strip is seven columns, nothing hidden off the edge. */
@media (min-width: 700px) {
  .week { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 4px 0 8px; }
  .week .day { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .week .day .d { font-size: 11px; letter-spacing: .02em; }
  .week .day .n { overflow-wrap: anywhere; }
}
.other-food .field { min-width: 0; }
.other-food .field input { width: 100%; min-width: 0; }

/* Dish pictures: a real photo sits inside the drawn plate's rim, so a photo
   and a drawing read as the same plate; the drawing shows if the photo fails. */
.dish-photo { position: relative; display: inline-block; flex: none; line-height: 0; }
.dish-photo > img { position: absolute; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.photo-credit { margin: 6px 0 0; font-size: 12px; color: var(--soft); text-align: center; }
.tonight .art .photo-credit { position: absolute; right: 14px; bottom: 8px; margin: 0; }

/* "What did you like most from last week?" on the family page: big taps, no typing */
.liked-last h2 { font-size: 22px; }
.liked { display: grid; gap: 8px; }
.liked-item { display: flex; align-items: center; gap: 8px; }
.liked-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill); border: 1.5px solid var(--edge); background: var(--linen); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.liked-chip > span { flex: 1; min-width: 0; }
.liked-chip[aria-pressed="true"] { background: var(--sage-ink); border-color: var(--sage-ink); color: var(--on-sage); }
.liked-item .round[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--oat); }

/* The pantry tab */
.stock-row { align-items: flex-start; gap: 10px; }
.stock-row .small-btn { flex: none; }

/* The kitchen question: four big tap targets and "None of these" (setup and Settings). */
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kit-tile { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 8px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--linen); color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; text-align: center; line-height: 1.2; }
.kit-tile.none { grid-column: 1 / -1; min-height: 48px; font-weight: 700; }
.kit-tile[aria-pressed="true"] { border-color: var(--action); background: var(--sage-soft); color: var(--sage-ink); }
.day-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day-row .chip { justify-content: center; padding: 8px 0; min-height: 44px; }

/* Bowlby's tips, piece 6 (docs/SCREENS.md, "Bowlby's tips"): a small card
   that slides in at the bottom edge, above the tabs (and above a dock),
   never over a note, never blocking: one tap on the x dismisses it. */
.bowlby-edge {
  position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 122px); z-index: 6;
  width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 10px;
  background: var(--honey-soft); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  animation: tip-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.bowlby-edge.settled { animation: none; }
.bowlby-edge .bowlby { flex: none; }
.bowlby-edge a.plain { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.35; min-height: 44px; display: flex; align-items: center; min-width: 0; }
.bowlby-edge .link { flex: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--soft); }
#app:has(.dock) .bowlby-edge { bottom: calc(var(--tabs-h, calc(env(safe-area-inset-bottom) + 76px)) + 94px); }
#app:has(.toast) .bowlby-edge { display: none; }
#app:has(.bowlby-edge) .screen { padding-bottom: 84px; }
#app:has(.bowlby-edge) .screen.has-dock { padding-bottom: 170px; }
@keyframes tip-in { from { transform: translateX(calc(100% + 24px)); opacity: 0; } to { transform: none; opacity: 1; } }
.tip-here { outline: 3px solid var(--honey); outline-offset: 3px; border-radius: var(--r-md); }
@media (min-width: 700px) { .bowlby-edge { right: max(16px, calc(50vw - 300px)); } }

/* piece 7: cook mode's ingredients fold-out, and the craving line */
.cook-ings summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.cook-ings .items { margin-top: 8px; }
.craving label { font-size: 17px; }
.craving .search { padding: 0 16px; }

/* Sign-in (piece 9): a long email address breaks rather than pushing the page sideways. */
.wrap { overflow-wrap: anywhere; }
.field input[data-rsicode] { letter-spacing: .3em; font-variant-numeric: tabular-nums; font-size: 22px; }

/* Low sodium and Lighter (piece 10): the per-person choice, the sheet's note, the dinner's bar. */
.diet-person { padding-top: 10px; border-top: 1px solid var(--line); }
.diet-row { gap: 10px; align-items: flex-end; }
.diet-row .field { min-width: 0; }
.diet-row .field input { width: 100%; min-width: 0; }
.diet-unit { padding-bottom: 17px; font-weight: 700; }
.diet-warn, .dbar-over { color: var(--alert); font-weight: 700; }
.pick .diet-note { display: block; margin-top: 2px; color: var(--soft); font-weight: 700; }
.facts-line { margin: 0; }
.dbar { display: grid; gap: 4px; }
.dbar-track { height: 8px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.dbar-track i { display: block; height: 100%; border-radius: inherit; background: var(--sage-ink); }
.dbar.over .dbar-track i { background: var(--alert); }
details.working summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
details.working .items li { align-items: flex-start; }

/* Report a problem, Help and the calm banner (build order item 11). The
   banner is sage, never the alert colour: something is slow, nothing is
   wrong with their dinner. */
.wrong-line { margin: 4px 0 0; text-align: center; }
.wrong-line .link { min-height: 44px; font-size: 14px; color: var(--soft); }
.calm-banner { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--sage-soft); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.calm-banner svg, .calm-banner .bowlby { flex: none; }
.report-kinds .option { min-height: 64px; }
.report-kinds .option .tile-icon { width: 40px; height: 40px; background: var(--mist); color: var(--ink); }
.report-photo { gap: 10px; }
.report-photo .btn { min-height: 44px; padding: 0 16px; font-size: 15px; gap: 6px; }
.report-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-md); flex: none; }
.faq details > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary svg { flex: none; color: var(--soft); transition: transform .2s ease; }
.faq details[open] > summary svg { transform: rotate(90deg); }
.faq details > p { margin: 8px 0 10px; line-height: 1.5; }
.faq details > .btn { min-height: 44px; font-size: 15px; }

/* Sign-up (#/start/...; build order item 4): calm, one idea a screen. */
.btn.big { min-height: 58px; font-size: 18px; }
.start .top .link { font-weight: 800; }
.consent p { font-size: 17px; line-height: 1.55; }
.consent-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.consent-links .link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; }
.field > label { font-weight: 800; font-size: 15px; }
.field input[data-rzip] { font-size: 22px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.store-deals { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; line-height: 1.3; }
.store-deals.auto { color: var(--sage-ink); }
.store-deals.photo { color: var(--soft); }
.store .grow b { overflow-wrap: anywhere; }
.typed-store { gap: 10px; flex-wrap: wrap; }
.count-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.count-row .chip { justify-content: center; padding: 0; min-height: 48px; font-size: 18px; font-weight: 800; }
.lever { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.levers > .lever:first-child { border-top: 0; }
.lever .link { flex: none; }
.lever-body { padding: 4px 0 14px; }
.preview-night { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--linen); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.preview-night .plate { flex: none; }
.preview-night b { font-size: 16px; line-height: 1.3; }
.preview-night .meta { display: inline-flex; align-items: center; gap: 4px; }
.preview-night .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.preview-night .chip { white-space: normal; }
.was { color: var(--soft); font-weight: 600; }
.plan-option { min-height: 72px; }
.plan-option .price-big { font-size: 26px; white-space: nowrap; }
.plan-option .price-big small { font: 700 14px var(--body); color: var(--soft); }
.plan-note { color: var(--sage-ink); font-weight: 800; }
.calm-line { font-size: 17px; line-height: 1.5; font-weight: 600; }
/* The setup and sign-up step bars share the week bar's .steps name: no connecting line, one column per step. */
.pips.steps { padding: 0; }
.pips.steps::before { content: none; }
.start .pips.steps { grid-template-columns: repeat(6, 1fr); }

/* The list with no signal and on two phones (build order item 8): the add
   box, taking an item off (a 44px target), and its Undo on the item itself. */
.add-item { margin: 0; }
.x-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--soft); cursor: pointer; }
.x-btn:hover, .x-btn:focus-visible { background: var(--mist); color: var(--ink); }
.items li.undo-row { gap: 10px; padding: 8px 0; }
.items li.undo-row .btn { flex: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
/* With the take-off button beside it, the Sale chip sits above the price, so
   the item's name keeps its width on a phone. */
.items li:has(> .x-btn) .price { display: grid; justify-items: end; gap: 3px; text-align: right; }

/* Your week, wrapped (build order item 12; app.js wrapCard, realWrapped).
   Bowlby counts beside money SAVED only (docs/BRAND.md). */
.wrap-card { display: flex; align-items: center; gap: 4px; padding: 12px 8px 12px 14px; background: var(--sage-soft); box-shadow: none; border-color: transparent; }
.wrap-card > a { gap: 12px; color: inherit; text-decoration: none; min-height: 56px; }
.wrap-card .bowlby, .wrap-card .plate { flex: none; }
.wrap-money { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.wrap-money .wrap-num { display: block; font: 600 46px/1 var(--head); font-variation-settings: "SOFT" 100; color: var(--ink); }
.wrap-money .what { display: block; font-weight: 700; margin-top: 6px; line-height: 1.35; }
.wrap-money .est { grid-column: 1 / -1; margin: 0; }
.wrap-totals { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 0; }
.wrap-totals div { background: var(--linen); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.card.mist .wrap-totals div { background: var(--oat); }
.wrap-totals dt { font-size: 12px; font-weight: 800; color: var(--soft); letter-spacing: .05em; text-transform: uppercase; }
.wrap-totals dd { margin: 2px 0 0; font: 600 20px/1.2 var(--head); font-variation-settings: "SOFT" 100; }
.wrap-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 10px; }
.wrap-plates li { display: grid; justify-items: center; text-align: center; gap: 6px; min-width: 0; }
.wrap-plates b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.wrap-q { display: grid; gap: 10px; }
.wrap-q + .wrap-q { border-top: 1px solid var(--line); padding-top: 14px; }
.wrap-q .rates { margin-top: 0; }
.wrap-q .rate { cursor: pointer; }
.wrap-q .shelf .chip { white-space: normal; text-align: left; }
.wrap-said { margin: 0; color: var(--sage-ink); font-weight: 700; }
.wrap-note { align-items: end; gap: 8px; }
.wrap-note .btn { flex: none; min-height: 54px; }
.wrapped .linkbox .wrap { overflow-wrap: anywhere; font-size: 15px; }
/* counting: one happy hop, then the top bill flicks three times as the number
   counts up, then a blink, and he rests (about four seconds in all). */
.bowlby .bill { transform-box: fill-box; transform-origin: 0% 100%; }
.bowlby.alive.counting .figure { animation: bb-arrive .5s cubic-bezier(.3, 1.3, .5, 1) both, bb-hop .6s cubic-bezier(.3, 1.4, .5, 1) .45s 1; }
.bowlby.alive.counting .shadow { animation: bb-squash .6s cubic-bezier(.3, 1.4, .5, 1) .45s 1; }
.bowlby.alive.counting .bill.top { animation: bb-count .5s ease-in-out 1.1s 3; }
.bowlby.alive.counting .eyes { animation: bb-blink .26s ease-in-out 3.3s 1; }
@keyframes bb-count { 0%, 100% { transform: none; } 45% { transform: rotate(-26deg) translate(-1px, -3px); } }

/* The snap ladder (the walls round, item 7): the drawing of a page snapped in halves; the work card's wait line. */
.snap-halves { width: 92px; height: auto; flex: none; color: var(--ink); }
.snap-how details summary { cursor: pointer; }
.work-line { margin: 0; }

/* ---------- Paper (the print round, 2026-10-29) ----------
   On screen a printed sheet is hidden; everything about paper lives in ONE stylesheet, paper.css (linked with
   media="print" from index.html, the website's pages and the owner's printouts). */
.print-sheet { display: none; }