:root{
  --ground:#f2ece0; --paper:#fbf7ee; --ink:#302724; --ink-soft:#4f4038;
  --maroon:#663b42; --maroon-ink:#fbf7ee; --terra:#9e6544; --tan:#e7d9c5;
  --muted:#817268; --line:#ded4c3; --line-soft:#e8dfd0;
  --good:#4c7a52; --warn:#b5892f; --crit:#a4453a;
  --variation-protein-fill:#e98479; --variation-protein-outline:#8c2d27;
  --variation-vegetable-fill:#8bc987; --variation-vegetable-outline:#2f6d39; --variation-effect-ink:#17110f;
  --form-control-scheme:light;
  --shadow:0 1px 2px rgba(48,39,36,.06),0 6px 20px rgba(48,39,36,.06);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --num:"Manrope",var(--sans);
  --r:12px; --r-sm:9px; --r-head:18px;
  --support:#675a51; --fs-support:13px; /* 320a: supporting text (5.6:1 on paper); --muted stays for icons */
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --ground:#1c1815; --paper:#26201d; --ink:#f1e9dd; --ink-soft:#d6c9bb;
  --maroon:#c58b92; --maroon-ink:#241012; --terra:#cf9166; --tan:#3c332d;
  --muted:#a2938700; --muted:#a89a8d; --support:#b3a598; --line:#3a322d; --line-soft:#322a26;
  --good:#7fb083; --warn:#d9b25e; --crit:#dd7d72;
  --variation-protein-fill:#a83f38; --variation-protein-outline:#f09a91;
  --variation-vegetable-fill:#347a41; --variation-vegetable-outline:#9ce0a1; --variation-effect-ink:#fffaf2;
  --form-control-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
}}
:root[data-theme="dark"]{
  --ground:#1c1815; --paper:#26201d; --ink:#f1e9dd; --ink-soft:#d6c9bb;
  --maroon:#c58b92; --maroon-ink:#241012; --terra:#cf9166; --tan:#3c332d;
  --muted:#a89a8d; --support:#b3a598; --line:#3a322d; --line-soft:#322a26;
  --good:#7fb083; --warn:#d9b25e; --crit:#dd7d72;
  --variation-protein-fill:#a83f38; --variation-protein-outline:#f09a91;
  --variation-vegetable-fill:#347a41; --variation-vegetable-outline:#9ce0a1; --variation-effect-ink:#fffaf2;
  --form-control-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 480px at 100% -8%, color-mix(in srgb,var(--terra) 8%,transparent), transparent 60%),
    radial-gradient(900px 460px at -8% 108%, color-mix(in srgb,var(--maroon) 7%,transparent), transparent 55%),
    var(--ground);
  background-attachment:fixed}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--ink);color-scheme:var(--form-control-scheme)}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:var(--terra)}

/* App bar
   position:fixed, not sticky — see the note above .livebar below for why:
   the same broken-hit-region issue applies here (this is the OTHER of the
   only two position:sticky controls that ever existed in this file; every
   other pinned control — modal, undo bar, cook overlay, timer tray, toast —
   was already position:fixed and appended straight to document.body, which
   is exactly why those never showed this bug). */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--maroon);
  color:var(--maroon-ink);padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.05;margin-right:auto}
.brand .k{font-family:var(--serif);font-style:italic;font-size:20px}
.brand .s{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.72;margin-top:2px}
.brand .build-badge{font-family:var(--num);font-size:10px;letter-spacing:.04em;opacity:.85;margin-top:4px}
.nav{display:flex;gap:2px;background:rgba(0,0,0,.16);border-radius:999px;padding:3px}
.nav button{border:0;background:transparent;color:var(--maroon-ink);opacity:.75;
  padding:6px 13px;border-radius:999px;font-weight:600;font-size:13px;transition:.15s}
.nav button.on{background:var(--paper);color:var(--maroon);opacity:1}
.sync{display:flex;align-items:center;gap:6px;font-size:11.5px;opacity:.85;
  font-family:var(--num);letter-spacing:.02em}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.sync.saving .dot{background:var(--warn)}
.sync.offline .dot{background:var(--muted)}
/* Keep badge text paired with the bar background in both themes. The dot has
   a contrasting outline; status is also written out, never conveyed by color alone. */
.ai-status-button{border:0;background:transparent;padding:6px;border-radius:6px;cursor:pointer;color:inherit}
.ai-status-button:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.sync.ai-status{opacity:1;color:var(--maroon-ink);white-space:nowrap}
.sync.ai-status .dot{outline:1px solid currentColor;flex-shrink:0}
.sync.ai-status.checking .dot{background:var(--warn)}
.sync.ai-status.off .dot{background:transparent}

/* DEV ONLY, remove alongside its button in index.html once relaunching manually is no
   longer a routine annoyance — deliberately loud (solid crit color, not the bar's muted
   maroon buttons) so it reads as a temporary tool, not a real feature. */
.dev-reload-btn{border:2px solid var(--crit);background:var(--crit);color:#fff;font-weight:700;
  font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;letter-spacing:.01em}
.dev-reload-btn:hover{filter:brightness(1.1)}
.dev-reload-btn:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}

/* Layout
   Top/bottom padding reserve room for the now position:fixed .bar and
   .livebar (see both below) — --barh/--livebarh are the real measured
   heights of those bars, kept in sync by syncFixedBars() on every render
   (a static guess would be wrong the moment the bar wraps to a second
   line, e.g. a narrow viewport or long batch-cost numbers). The literal
   fallbacks (60px/0px) only apply for the ~0ms before the first
   syncFixedBars() call has run. */
.wrap{max-width:1000px;margin:0 auto;padding:calc(20px + var(--barh,60px)) max(16px,env(safe-area-inset-left)) calc(64px + var(--livebarh,0px)) max(16px,env(safe-area-inset-right))}
.view{animation:viewRise .22s ease backwards}
@keyframes viewRise{from{transform:translateY(4px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.view{animation:none}}
/* Phase 40: a same-view refresh or a dialog refresh never replays the entry animation. */
.view.no-enter,.modal.no-enter{animation:none}

/* Buttons */
.btn{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);
  padding:8px 14px;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.btn:hover{border-color:var(--terra)}
/* Phase 42: a light, consistent hover/press treatment so a button's affordance is apparent
   without a blanket transform on every element — hover lift is gated to hover-capable pointers
   (a touch tap shouldn't leave a button "risen"), while :active press feedback works everywhere,
   touch included, since a tap's own down-state is exactly what touch needs. */
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--maroon);border-color:var(--maroon);color:var(--maroon-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:active{filter:brightness(.96)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--crit);border-color:var(--line)}
.btn.danger:hover{border-color:var(--crit)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover,.btn:disabled:active,.btn[disabled]:active{transform:none;filter:none;border-color:var(--line)}
.btn.primary:disabled,.btn.primary[disabled]{border-color:var(--maroon)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Library toolbar */
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:60px}
.tabs{display:flex;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px}
.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-weight:600;font-size:12.5px;color:var(--muted)}
.tabs button.on{background:var(--tan);color:var(--ink)}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.seg button{border:0;background:var(--paper);padding:7px 9px;color:var(--muted)}
.seg button.on{background:var(--tan);color:var(--ink)}

.count{font-size:12.5px;color:var(--muted);font-family:var(--num)}
.note{background:var(--tan);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--ink-soft);
  margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.note button{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;flex:none}

/* Recipe grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.grid.list{grid-template-columns:1fr}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:left;padding:0;transition:.16s}
/* Phase 42: hover lift/zoom only for pointers that actually hover — a touch tap must not leave a
   card "stuck" mid-animation until the next tap elsewhere. Press/keyboard-focus feedback (below)
   still works on every input. */
@media (hover:hover) and (pointer:fine){
  .card:hover,.hover-card:hover{transform:translateY(-2px) scale(1.015);border-color:var(--terra)}
}
@media (prefers-reduced-motion:reduce){.card:hover,.hover-card:hover{transform:none}}
.hover-card{transition:.16s}
.thumb{aspect-ratio:16/10;background:
  linear-gradient(135deg,var(--tan),var(--line));display:flex;align-items:center;justify-content:center;
  position:relative;color:var(--muted)}
.thumb .ph{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.7}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin-bottom:14px;display:block;background:var(--tan)}
.dropzone{margin-top:8px;border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:14px;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer}
.dropzone.over{border-color:var(--terra);background:var(--ground);color:var(--ink)}
.badge{position:absolute;top:10px;left:10px;background:var(--paper);color:var(--maroon);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.heart{position:absolute;top:8px;right:8px;background:rgba(251,247,238,.9);border:0;border-radius:50%;
  width:30px;height:30px;display:grid;place-items:center}
.heart .icon{width:16px;height:16px;stroke:var(--maroon)}
.heart.on .icon{fill:var(--maroon)}
.card .body{padding:12px 14px 14px}
.card h3{font-family:var(--serif);font-size:18px;line-height:1.15;margin-bottom:8px}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);font-family:var(--num)}
.card .meta b{color:var(--ink);font-weight:700}
.card .meta .cost{color:var(--terra);font-weight:700}
/* List mode has its own information hierarchy; grid card rules stay unchanged. */
.recipe-row{display:grid;grid-template-columns:112px minmax(0,1fr) 152px;gap:18px;
  padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);cursor:pointer;align-items:center}
.recipe-row:hover{border-color:var(--terra)}
.recipe-row .thumb{width:112px;height:128px;aspect-ratio:auto;border-radius:var(--r-sm);overflow:hidden}
.recipe-row .thumb .ph{padding:12px;text-align:center;overflow-wrap:anywhere}
.recipe-row .badge{top:7px;left:7px;font-size:8px;padding:2px 5px}
.recipe-row .heart{top:auto;bottom:7px;right:7px;background:var(--paper)}
.recipe-row-body{min-width:0}
.recipe-row-open{padding:0;border:0;background:transparent;text-align:left;color:var(--ink)}
.recipe-row-open h3{font-family:var(--serif);font-size:22px;line-height:1.2;margin:0;overflow-wrap:anywhere}
.recipe-row-open:focus-visible,.recipe-row .heart:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:4px}
.recipe-row-context{font-size:12px;color:var(--muted);margin-top:5px}
/* Phase 37C: a Library card/row matched through a nondefault variation combination — never the
   same visual weight as the tags/description, just enough to say "this isn't the default view." */
.recipe-row-match{font-size:11.5px;font-weight:600;color:var(--maroon);margin-top:4px}
.recipe-row-description{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:7px 0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;max-width:65ch}
.recipe-row-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:8px}
.recipe-row-tags .chip{font-size:10px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipe-row-more{font-size:11px;color:var(--muted)}
.recipe-row-stats{border-left:1px solid var(--line-soft);padding-left:18px;margin:0;display:grid;gap:8px;font-family:var(--num)}
.recipe-row-stats div{display:flex;flex-direction:column-reverse}
.recipe-row-stats dt{font-size:10px;color:var(--muted)}
.recipe-row-stats dd{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.recipe-row-stats div:first-child dd{font-size:20px;color:var(--terra)}
@media(max-width:600px){
  .grid.list{gap:10px}
  .recipe-row{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px}
  .recipe-row .thumb{width:76px;height:108px;align-self:start}
  .recipe-row-open h3{font-size:18px}
  .recipe-row-context{font-size:11px}
  .recipe-row-stats{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    border-left:0;border-top:1px solid var(--line-soft);padding:10px 0 0}
  .recipe-row-stats div:first-child dd{font-size:16px}
}

.example-chip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--terra);border:1px solid var(--terra);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}

/* Detail */
.detail-head{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
/* Overflow menu (editor header, mobile only) — a native <details> disclosure, no JS state needed */
.ovmenu{position:relative}
.ovmenu>summary{list-style:none;cursor:pointer}
.ovmenu>summary::-webkit-details-marker{display:none}
.ovmenu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;z-index:30;min-width:150px}
.narrow-only{display:none}
@media (max-width:560px){.wide-only{display:none}.narrow-only{display:block}}
.hero{background:linear-gradient(135deg,var(--tan),var(--line));border-radius:var(--r);padding:26px 22px;
  margin-bottom:18px;position:relative;overflow:hidden}
.hero .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:700}
.hero h1{font-family:var(--serif);font-size:clamp(26px,5vw,38px);line-height:1.05;margin:6px 0 8px}
.hero .desc{font-family:var(--serif);font-style:italic;color:var(--ink-soft);max-width:60ch;font-size:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--ink-soft)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.stat{background:var(--paper);padding:12px 14px}
.stat .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--num);font-weight:700;font-size:19px;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:12px;color:var(--muted);font-weight:600}

.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:18px}
.panel h2{font-family:var(--serif);font-size:20px;margin-bottom:4px}
.panel .sub{font-size:12px;color:var(--muted);margin-bottom:14px}
.subsection{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.subsection h3{font-family:var(--serif);font-size:15px;margin-bottom:8px}
.sectionbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sectionbar h2{margin:0}
.sectionbar .spacer{margin-left:auto}

/* Variation picker — one framed panel per group, options as tiles in a horizontal scroll row
   (the row reuses .calendar-week-scroll's overflow-x pattern). Selection = heavier maroon border
   + check mark; effect tags are separate badges, so no combination can hide the selection. */
.variation-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:18px 0}
.variation-groups .panel + .panel{margin-top:0}
.variation-panel{padding:14px 16px;min-width:0}
.variation-panel h2,.variation-panel h3{font-family:var(--serif);font-size:20px;margin:0 0 2px}
.variation-panel .sub{margin-bottom:10px}
.modal .variation-panel{box-shadow:none;background:var(--ground)}
.variation-options{position:relative;display:flex;gap:10px;scroll-snap-type:x proximity;padding:2px 2px 6px}
.variation-tile{flex:0 0 200px;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);font:inherit;cursor:pointer;scroll-snap-align:start}
.modal .variation-tile{background:var(--paper)}
.variation-tile:hover{border-color:var(--muted)}
.variation-tile.on{border-color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon)}
/* Phase 40: the newly chosen tile settles into its selected ring and check. Only colour, ring and
   the check's scale move — never the tile's size — and reduced motion switches state instantly. */
.variation-tile{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.variation-tile.just-chosen{animation:variationChosen .2s ease both}
.variation-tile.just-chosen .variation-check{animation:variationCheck .2s ease both}
@keyframes variationChosen{from{box-shadow:inset 0 0 0 0 var(--maroon);border-color:var(--line)}to{box-shadow:inset 0 0 0 1px var(--maroon);border-color:var(--maroon)}}
@keyframes variationCheck{from{transform:scale(.6);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.variation-tile{transition:none}.variation-tile.just-chosen,.variation-tile.just-chosen .variation-check{animation:none}}
.variation-tile:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.variation-tile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.variation-tile-name{font-weight:700;font-size:14px;line-height:1.3}
.variation-check{flex:0 0 20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1}
.variation-tile.on .variation-check{background:var(--maroon);border-color:var(--maroon);color:var(--maroon-ink)}
.variation-tile-desc{font-size:12px;color:var(--muted);line-height:1.35}
/* Phase 37A-2: an option's relative difficulty/time nudge — deliberately not the broad Easy/Moderate/Advanced wording. */
.variation-impact{font-size:11.5px;font-weight:600;color:var(--ink-soft);line-height:1.35}
/* Effect tags are about a specific variation option, not recipe-level quality tags. */
.variation-badges{display:flex;flex-wrap:wrap;gap:4px}
.variation-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--variation-effect-ink)}
.variation-badge-high-protein{background:var(--variation-protein-fill);box-shadow:inset 0 0 0 1px var(--variation-protein-outline)}
.variation-badge-adds-vegetables{background:var(--variation-vegetable-fill);box-shadow:inset 0 0 0 1px var(--variation-vegetable-outline)}
/* Same red family as the objective high-protein badge — this one is author-entered (an option
   that's genuinely a protein bolt-on), so it shares the palette but not the computation. */
.variation-badge-adds-extra-protein{background:var(--variation-protein-fill);box-shadow:inset 0 0 0 1px var(--variation-protein-outline)}
.ed-variation-effect{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;cursor:pointer;color:var(--ink-soft)}
/* Draft meal cards have much less room than Detail or the Planner preview. Their choices wrap
   as content-sized chips; the existing button keeps its pressed state, check and focus ring.
   Effect names remain in the button's accessible text while the chip itself carries the colour. */
.slot-variation-groups{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:6px}
.slot-variation-groups .variation-panel-compact{padding:0;background:none;border:0;box-shadow:none}
.slot-variation-groups .variation-panel-compact h3{margin:0 0 3px;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.slot-variation-groups .variation-options{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;gap:4px;padding:0}
.slot-variation-groups .variation-tile{flex:0 1 auto;min-width:0;max-width:100%;min-height:44px;
  padding:5px 7px;gap:0;scroll-snap-align:none}
.slot-variation-groups .variation-tile-desc,.slot-variation-groups .variation-impact{display:none}
.slot-variation-groups .variation-tile-head{align-items:center;gap:5px;min-width:0}
.slot-variation-groups .variation-tile-name{min-width:0;overflow-wrap:anywhere;font-size:12px;line-height:1.2}
.slot-variation-groups .variation-check{flex-basis:16px;width:16px;height:16px;font-size:10px}
.slot-variation-groups .variation-tile.on{outline:2px solid var(--maroon);outline-offset:-2px}
.slot-variation-groups .variation-badges{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.slot-variation-groups .variation-tile:is(.variation-effect-high-protein,.variation-effect-adds-extra-protein){
  background:var(--variation-protein-fill);border-color:var(--variation-protein-outline);color:var(--variation-effect-ink)}
.slot-variation-groups .variation-tile.variation-effect-adds-vegetables{
  background:var(--variation-vegetable-fill);border-color:var(--variation-vegetable-outline);color:var(--variation-effect-ink)}
.slot-variation-groups .variation-tile:is(.variation-effect-high-protein,.variation-effect-adds-extra-protein).variation-effect-adds-vegetables{
  background:linear-gradient(90deg,var(--variation-protein-fill) 0 50%,var(--variation-vegetable-fill) 50% 100%)}
/* Phase 41: the bottom-of-page strip lays similar-recipe buttons out in one scrollable row
   instead of the stacked full-width list the old hero-adjacent panel used. */
.similar-recipes-strip{display:flex;gap:8px;scroll-snap-type:x proximity;padding:2px 2px 6px}
.similar-recipes-strip .similar-recipe{flex:0 0 auto;scroll-snap-align:start}
.similar-recipe{margin:4px;white-space:normal;min-height:44px;max-width:100%;padding:4px 9px 4px 4px}
.similar-recipes-strip .similar-recipe{margin:0;max-width:180px}
.similar-recipe-photo{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 34px}
.photo-missing.similar-recipe-photo{display:grid;place-items:center;padding:3px;font-size:7px;line-height:1.05;overflow:hidden}
.photo-missing.similar-recipe-photo .photo-missing-note{font-size:6px}

/* Ingredients */
.comp{margin-bottom:16px}
.comp:last-child{margin-bottom:0}
.comp-h{display:flex;align-items:baseline;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.comp-h .n{font-weight:700;font-size:14.5px}
.comp-h .w{margin-left:auto;font-size:11.5px;color:var(--muted);font-family:var(--num)}
.ing{display:flex;align-items:center;gap:10px;padding:6px 0}
.ing + .ing{border-top:1px dashed var(--line-soft)}
.ing .chk{width:16px;height:16px;flex:none;border:1.5px solid var(--line);border-radius:4px;background:var(--paper)}
.ing .nm{flex:1;min-width:0}
.ing .nm .k{font-size:11.5px;color:var(--muted)}
/* The selected batch is a single list; component-level editing stays behind a disclosure. */
.ing-breakdown{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.ing-breakdown summary{color:var(--muted);font-size:12px;cursor:pointer;width:max-content;max-width:100%;padding:5px 0}
.ing-breakdown summary:hover{color:var(--ink)}
.ing-breakdown[open] summary{margin-bottom:10px}
.ing-breakdown .comp{padding-left:12px;border-left:2px solid var(--line-soft)}
.ing .amt{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;white-space:nowrap;
  background:transparent;border:1px dashed transparent;border-radius:6px;padding:2px 6px}
.ing .amt:hover{border-color:var(--line)}
.ing .amtinput{width:78px;font-family:var(--num);border:1px solid var(--terra);border-radius:6px;padding:3px 6px;text-align:right}

/* Nutrition tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.tile .v{font-family:var(--num);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.tile .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.tile.hero-tile{grid-column:span 3;background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.tile.hero-tile .l{color:rgba(251,247,238,.75)}

/* Portion calculator */
.portion .prow{display:flex;align-items:center;gap:10px;padding:7px 0}
.portion .prow + .prow{border-top:1px dashed var(--line-soft)}
.portion .prow .n{flex:1}
.portion .prow input{width:92px;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;text-align:right;font-family:var(--num)}
.portion .prow .u{color:var(--muted);font-size:12px;width:16px}

/* Editor */
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;background:var(--paper);outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terra)}
.field textarea{min-height:64px;resize:vertical}
/* Native form controls use the same paper/ink surfaces in every app view. Checkboxes and
   radios deliberately retain their compact native form; their surrounding labels carry layout. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:inset 0 1px 1px color-mix(in srgb,var(--ink) 4%,transparent)}
input:not([type="checkbox"]):not([type="radio"]),select{min-height:38px;padding:7px 9px}
textarea{padding:9px 11px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--maroon);outline-offset:1px;border-color:var(--maroon);box-shadow:0 0 0 3px color-mix(in srgb,var(--maroon) 18%,transparent)}
select{appearance:none;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) calc(50% - 2px),calc(100% - 10px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}
button:disabled:hover{filter:none;border-color:inherit}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr}}
.ed-comp{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px;background:var(--paper)}
.ed-comp-h{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ed-comp-h input{flex:1}
.ed-variant-row{margin-bottom:12px}
.ed-variant-row input[type=text]{width:100%;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--ground)}
.ed-variant-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
/* Phase 37A-2: per-option difficulty/time impact. Three compact fields that wrap to one column on a phone. */
.ed-prep-explainer{padding:12px 14px;margin-bottom:12px;font-size:13px;display:grid;gap:4px}
.ed-variation-impact{margin-top:8px}
/* Phase 43: optional option/combination photos — a small thumbnail beside wrapping actions. */
.ed-option-photo,.ed-combo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.ed-photo-thumb{width:64px;height:48px;flex:none;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--ground);display:flex;align-items:center;justify-content:center;text-align:center}
.ed-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed-photo-thumb .subtle{font-size:10px;padding:2px}
.ed-combo-photos{margin:4px 0 12px;display:grid;gap:4px}
.ed-combo-photos h3{font-size:15px}
.ed-combo-row{margin-top:4px;padding-top:8px;border-top:1px solid var(--line-soft)}
.ed-combo-name{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;font-weight:600;color:var(--ink)}
.ed-impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ed-impact-grid .field{margin:0}
.ed-impact-grid select,.ed-impact-grid input{width:100%}
.ed-impact-error:empty{display:none}
.ed-impact-error{color:var(--crit);font-size:12px;margin-top:4px}
.ed-impact-preview{font-size:12px;margin-top:4px}
.ed-ing{border:1px dashed var(--line);border-radius:var(--r-sm);padding:11px;margin-bottom:10px;background:var(--ground)}
.ed-ing .macros{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
@media (max-width:560px){.ed-ing .macros{grid-template-columns:repeat(3,1fr)}}
.mini{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px;display:block}
.ed-ing .macros input,.ed-ing .g input{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 8px;background:var(--paper);font-family:var(--num);text-align:right}
.ed-ing-top{display:grid;grid-template-columns:2fr 1fr 90px auto;gap:8px;align-items:end}
@media (max-width:560px){.ed-ing-top{grid-template-columns:1fr 1fr}}
/* Was position:sticky;bottom:0. In the published artifact's cross-origin
   preview iframe, a sticky element's *stuck* rendered position doesn't
   hit-test where it visually paints — verified directly: hovering the
   button at its visually-pinned coordinates produced no :hover state at
   all (compared against an in-flow button on the same page, which lit up
   immediately), and clicking there fired zero network requests. The same
   click at the button's natural in-flow position (reached only once you
   scroll to the literal end of the page, where sticky's stuck and static
   positions happen to coincide) worked immediately. Every OTHER pinned
   control in this app (.modal-back, .undobar, .cook, .timertray, the
   #toast) was already position:fixed and never showed this problem, which
   is the tell: it's specifically sticky's dual static/stuck position that
   breaks here, not fixed positioning itself. Fixed here too, with a real
   spacer (.livebar-spacer, appended in viewEditor()) reserving the space
   sticky used to reserve automatically. left/right:0 replaces the old
   negative-margin full-bleed hack, which only made sense relative to
   .wrap's own width. */
.livebar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:2px solid var(--maroon);
  padding:12px max(16px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right));
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;z-index:15}
.livebar-spacer{height:var(--livebarh,84px)}
.advanced-editor-layout{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.advanced-editor-main,.advanced-editor-side{min-width:0}
.advanced-editor-side{gap:16px;display:grid;align-content:start}
.advanced-editor-main .panel,.advanced-editor-main .compwrap,.advanced-editor-main .steps{margin-bottom:16px}
.draft-check-error{color:var(--crit);overflow-wrap:break-word}
@media(min-width:1000px){.advanced-editor-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.livebar .m{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:13px}
.livebar .m b{font-size:16px}
.livebar .spacer{margin-left:auto}
.err{background:color-mix(in srgb,var(--crit) 12%,var(--paper));border:1px solid var(--crit);color:var(--crit);
  border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-bottom:12px}
.nutri-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.nutri-row:last-of-type{border-bottom:none}
.nutri-head{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:none;padding-bottom:4px}
.nutri-label{font-weight:600}
.nutri-val{font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right}
.nutri-missing-row .nutri-val{color:var(--terra)}
.nutri-note{font-size:12px;color:var(--terra);margin-top:8px}
.nutri-note-ok{color:var(--muted)}

/* Empty + coming soon */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .big{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);margin-bottom:8px}
.soon{background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);padding:34px 24px;text-align:center}
.soon h2{font-family:var(--serif);font-size:24px;margin-bottom:8px}
.soon p{color:var(--muted);max-width:52ch;margin:0 auto 4px}
.soon .list{display:inline-flex;flex-direction:column;gap:6px;text-align:left;margin-top:14px;color:var(--ink-soft);font-size:13.5px}

.subtle{color:var(--support);font-size:var(--fs-support)}
.hidden{display:none!important}

/* Flair + controls */
/* Phase 42: the five-stop elastic spend selector — replaces the old continuous 0-100 .slider
   (removed; it's no longer referenced anywhere) so there is exactly one way to land on a spend
   level, and it is always one of the five TIERS anchors. An opaque, theme-matched track with five
   anchor buttons (always directly clickable) and a floating thumb that follows a drag with a
   subtle rubber-band stretch, then snaps to the nearest anchor on release. */
.budget-elastic{width:100%;padding:6px 4px;border-radius:999px;outline:none}
.budget-elastic:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:999px}
.budget-elastic-track{position:relative;height:40px;border-radius:999px;background:var(--ground);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4px;touch-action:none;overflow:hidden}
.budget-elastic-anchor{background:none;border:0;flex:1;height:100%;font-size:11px;font-weight:700;
  color:var(--muted);cursor:pointer;position:relative;z-index:1;transition:color .15s}
.budget-elastic-anchor.on{color:var(--maroon-ink)}
.budget-elastic-thumb{position:absolute;top:3px;bottom:3px;width:calc(20% - 4px);border-radius:999px;
  background:var(--maroon);left:0;transform:translateX(-50%);pointer-events:none;
  transition:left .22s cubic-bezier(.22,.61,.36,1),transform .22s cubic-bezier(.22,.61,.36,1)}
.budget-elastic-thumb.dragging{transition:none}
@media (prefers-reduced-motion:reduce){
  .budget-elastic-thumb{transition:none}
}
.chip.on{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.chip.sug{cursor:pointer}
.tag-glabel{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:12px 0 6px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;margin-right:6px;vertical-align:middle}
.lib-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.lib-head .who .eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);font-weight:700}
.lib-head .who h2{font-family:var(--serif);font-size:clamp(24px,5vw,30px);line-height:1;margin-top:3px}
.lib-head .motif{color:var(--maroon);opacity:.85;flex:none}
.filterbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow)}
.spec .s{background:var(--paper);padding:13px 16px}
.spec .s .l{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-weight:700}
.spec .s .v{font-family:var(--num);font-weight:700;font-size:18px;margin-top:3px;font-variant-numeric:tabular-nums}
.spec .s .v small{font-size:11px;color:var(--muted);font-weight:600}
.detail-title{font-family:var(--serif);font-size:clamp(28px,6vw,42px);line-height:1.03;margin:6px 0 8px}

/* Steps (non-cook) */
.steps{margin-top:12px}
.step{display:flex;gap:14px;padding:16px 0}
.step+.step{border-top:1px solid var(--line)}
.step .no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tan);color:var(--maroon);font-family:var(--serif);font-weight:700;display:grid;place-items:center;font-size:15px;margin-top:1px}
.step .t{font-size:15.5px;line-height:1.5}
.step .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.step .meta .chip{font-size:11px;padding:2px 9px}
.step .mw{font-size:12.5px;color:var(--terra);margin-top:7px;display:flex;gap:7px;align-items:baseline}
.step .mw b{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;flex:none}

/* Nutrition (condensed) */
.nutri{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:4px}
.nutri .kcal{flex:none}
.nutri .kcal .n{font-family:var(--num);font-weight:700;font-size:clamp(34px,6vw,44px);line-height:1;font-variant-numeric:tabular-nums;color:var(--maroon)}
.nutri .kcal .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nutri .macros{display:flex;gap:8px;flex:1;min-width:230px}
.nutri .macros .m{flex:1;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 8px;text-align:center}
.nutri .macros .m .n{font-family:var(--num);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.nutri .macros .m .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.macrobar{height:9px;border-radius:999px;overflow:hidden;display:flex;margin-top:16px;background:var(--line)}
.macrobar i{display:block;height:100%}
.macrolegend{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.macrolegend span{display:inline-flex;align-items:center;gap:6px}
.macrolegend .sw{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Extra 10% */
.extra{background:linear-gradient(135deg,color-mix(in srgb,var(--tan) 70%,var(--paper)),var(--paper))}
.extra h2{display:inline-flex;align-items:center;gap:8px}
.extra .tip{display:flex;gap:11px;padding:9px 0}
.extra .tip+.tip{border-top:1px dashed var(--line)}
.extra .tip .dot{flex:none;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:var(--maroon-ink);display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px;font-family:var(--num)}

/* Cover / landing */
.brand{cursor:pointer}
.cover{max-width:720px;margin:8px auto;background:var(--maroon);color:var(--maroon-ink);border-radius:20px;
  padding:22px;box-shadow:var(--shadow)}
.cover .frame{border:1px solid rgba(251,247,238,.32);border-radius:14px;padding:40px 24px;text-align:center}
:root[data-theme="dark"] .cover .frame,:root:not([data-theme="light"]) .cover .frame{border-color:rgba(36,16,18,.3)}
.cover .motif{margin-bottom:8px}
.cover .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.cover h1{font-family:var(--serif);font-style:italic;font-size:clamp(34px,7.5vw,52px);line-height:1.02;margin:14px 0 10px}
.cover .by{font-size:12.5px;letter-spacing:.05em;opacity:.85}
.cover .rule{width:52px;height:1px;background:currentColor;opacity:.35;margin:24px auto}
.cover .quote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;max-width:32ch;margin:0 auto;
  min-height:3.4em;display:flex;align-items:center;justify-content:center}
.cover .another{margin-top:12px;background:none;border:0;color:currentColor;opacity:.7;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cover .another:hover{opacity:1}
.cover .stat{background:transparent;font-size:12px;opacity:.8;margin-top:4px;font-family:var(--num)}
.cover .cta{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cover .cta .btn{background:var(--paper);border-color:var(--paper);color:var(--maroon)}
.cover .cta .btn.ghost{background:transparent;border-color:currentColor;color:var(--maroon-ink)}

/* Modal dialog */
.modal-back{position:fixed;inset:0;background:rgba(24,18,14,.5);z-index:70;display:flex;align-items:flex-end;justify-content:center;
  padding:0;padding-bottom:env(safe-area-inset-bottom,0)}
@media(min-width:560px){.modal-back{align-items:center;padding:20px}}
.modal{background:var(--paper);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:22px;
  box-shadow:var(--shadow);max-height:90vh;overflow:auto;animation:sheetUp .22s ease both}
@media(min-width:560px){.modal{border-radius:18px}}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal .close{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--ground);font-size:18px;line-height:1;flex:none}
.plan-modal{max-width:min(1280px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
.plan-modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.plan-modal-head h2{font-family:var(--serif);font-size:22px;flex:1;margin:0}
.plan-modal-body{min-width:0}
.calendar-week-scroll{overflow-x:auto;padding-bottom:4px}
.calendar-week-grid{display:grid;grid-template-columns:minmax(88px,.6fr) repeat(var(--calendar-days),minmax(180px,240px));gap:10px;min-width:max-content}
.calendar-grid-corner,.calendar-day-heading,.calendar-meal-heading{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.calendar-grid-corner,.calendar-day-heading{padding:4px 2px;align-self:end}.calendar-day-heading{text-align:center}.calendar-meal-heading{display:flex;align-items:center;padding:8px 2px}
.calendar-grid-slot{min-width:180px}
.tentative-plan{margin-top:18px;border:1px dashed var(--terra);border-radius:var(--r);padding:12px;background:var(--ground)}
.tentative-plan-note{font-size:13px;font-weight:700;color:var(--terra);margin:0 0 2px}.tentative-plan .calendar-week-grid{opacity:.72}
.tentative-plan-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}

/* Undo bar (deletion undo window) */
.undobar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:66;background:var(--ink);color:var(--paper);border-radius:999px;padding:9px 9px 9px 16px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);max-width:min(420px,92vw);
  animation:undobarUp .22s ease both}
/* Own keyframes (not sheetUp): sheetUp's to{transform:none} would clobber this bar's
   translateX(-50%) centering once the animation's fill-mode locks in its end state,
   pushing the whole bar off-screen to the right on narrow viewports. */
@keyframes undobarUp{from{transform:translateX(-50%) translateY(24px);opacity:0}to{transform:translateX(-50%);opacity:1}}
@media (prefers-reduced-motion:reduce){.undobar{animation:none}}
.undobar .msg{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.undobar .cd{font-family:var(--num);font-size:11.5px;opacity:.65;white-space:nowrap}
.undobar .btn.primary{padding:6px 14px;white-space:nowrap}

/* Cook mode */
.cook{position:fixed;inset:0;z-index:60;color:var(--ink);display:flex;flex-direction:column;
  background:radial-gradient(130% 90% at 50% -10%,var(--tan),var(--ground) 62%);
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
/* Phase 34: Cook Mode started from the Planner preview (z 76) opens above it and the Planner. */
.cook.cook-over-planner{z-index:77}
.cook-top{display:flex;align-items:center;gap:12px;padding:16px 22px 8px}
.cook-top .who{min-width:0}
.cook-top .eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);font-weight:700}
.cook-top .ttl{font-family:var(--serif);font-size:19px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cook-top .close{margin-left:auto;border:1px solid var(--line);background:var(--paper);border-radius:999px;width:40px;height:40px;font-size:22px;line-height:1;flex:none}
.cook-dots{display:flex;gap:7px;justify-content:center;padding:4px 22px;flex-wrap:wrap}
.cook-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s}
.cook-dots i.done{background:var(--terra)}
.cook-dots i.cur{background:var(--maroon);transform:scale(1.6)}
.cook-body{flex:1;overflow-y:auto;padding:14px 20px 4px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cook-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:26px 24px;max-width:640px;width:100%;display:flex;flex-direction:column;gap:18px;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease;will-change:transform,opacity;touch-action:pan-y;cursor:grab}
.cook-card:active{cursor:grabbing}
@keyframes cardInNext{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}
@keyframes cardInPrev{from{transform:translateX(-46px);opacity:0}to{transform:none;opacity:1}}
.cook-hint{text-align:center;font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:.7;padding-top:2px}
.cook-stepno{align-self:flex-start;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);font-weight:700;border:1px solid var(--maroon);border-radius:999px;padding:4px 13px}
.cook-text{font-family:var(--serif);font-size:clamp(22px,4.1vw,31px);line-height:1.3}
.cook-sub{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:-10px}
.cook-inglist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.cook-inglist .r{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--ground)}
.cook-inglist .r+.r{border-top:1px solid var(--line)}
.cook-inglist .r .nm{flex:1;font-weight:600;font-size:15.5px}
.cook-inglist .r .amt{font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--terra);font-weight:700;white-space:nowrap;font-size:14px}
.cook-none{color:var(--muted);font-style:italic;font-family:var(--serif);font-size:16px}
.cook-mw{background:var(--tan);border-radius:13px;padding:13px 16px;font-size:15.5px;display:flex;gap:11px;align-items:baseline}
.cook-mw b{color:var(--terra);text-transform:uppercase;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.cook-timerbtn{align-self:flex-start;font-size:16px;padding:13px 22px;border-radius:12px}
.cook-next{text-align:center;font-size:12.5px;color:var(--muted);padding:2px 20px 4px;max-width:640px;margin:0 auto}
.cook-next b{color:var(--ink-soft);font-weight:600}
.cook-nav{display:flex;gap:12px;padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));align-items:center;max-width:680px;margin:0 auto;width:100%}
.cook-nav .btn{flex:1;justify-content:center;padding:16px;font-size:16px;border-radius:13px}
.cook-nav .btn.back{flex:0 0 34%}

/* Timer tray */
.timertray{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;flex-direction:column;gap:8px;max-width:min(320px,90vw)}
.timer{background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
.timer.done{background:var(--crit);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.timer.done{animation:none}}
.timer .lab{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer .rem{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;font-size:16px}
.timer button{background:rgba(255,255,255,.16);border:0;color:var(--paper);border-radius:7px;width:28px;height:28px;font-size:14px;flex:none}
.cook-timers{max-width:640px;width:100%;margin:0 auto;padding:6px 20px 4px;display:flex;flex-direction:column;gap:8px}
.cook-timers:empty{display:none}

/* Structured generation preferences: scoped controls, using matching surface/ink tokens. */
.generation-preferences{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.generation-preferences details{border-top:1px solid var(--line-soft);padding:10px 0}
.generation-preferences summary{cursor:pointer;font-weight:600}
.generation-preferences fieldset{border:0;margin:0;padding:10px 0 0;min-width:0}
.generation-preferences legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.preference-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.preference-option{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
.preference-option input{width:16px;height:16px;flex:none;accent-color:var(--maroon)}
.preference-form{display:flex;flex-direction:column;gap:5px;min-width:0}
.preference-form select{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.exclusion-notice{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--terra);background:var(--tan);color:var(--ink);font-size:13px}

/* Phase 26 — recipe photo "file missing" fallback and Planner candidate cards */
.photo-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:64px;padding:10px;box-sizing:border-box;text-align:center;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--tan) 0 10px,var(--line-soft) 10px 20px);color:var(--ink)}
.photo-missing-name{font-family:var(--serif);font-size:15px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.photo-missing-note{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-img.photo-missing{height:auto}

/* Phase 28 — Planner serving controls: explicit theme-matched surfaces so values stay legible
   in dark mode (a native light input under light --ink text was unreadable), usable steppers,
   and a visible focus ring. Labels use the stronger --ink-soft instead of --muted. */
.plan-num{width:58px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);
  font-family:var(--num,inherit);font-size:13px;font-weight:600;line-height:1.2;color-scheme:light}
.plan-num:focus-visible{outline:2px solid var(--maroon);outline-offset:1px;border-color:var(--maroon)}
:root[data-theme="dark"] .plan-num{color-scheme:dark;border-color:var(--ink-soft)}
:root:not([data-theme="light"]) .plan-num{ @media (prefers-color-scheme:dark){ color-scheme:dark;border-color:var(--ink-soft) } }
.calendar-grid-slot label.subtle,.batch-quantities .subtle,.plan-field-label,.batch-balance{color:var(--ink-soft)}

/* Phase 31A — tags on grid cards; quality tags slightly emphasized; title suggestion note */
.card .card-tags{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 6px}
.card .card-tags .chip{font-size:10.5px;padding:1px 7px}
.chip.quality-tag{border-color:var(--maroon);color:var(--maroon)}
.note.title-suggestion{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.note.title-suggestion .btn{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.note.title-suggestion .btn:first-of-type{border-color:var(--maroon);color:var(--maroon)}

/* Phase 30 — Shopping row details: store and recipe sources wrap cleanly on narrow screens */
.shopping-row-details .k{overflow-wrap:anywhere}
.shopping-row-store.no-store{font-style:italic}
.shopping-sources-toggle{background:none;border:0;padding:0;font:inherit;color:var(--maroon);text-decoration:underline;cursor:pointer}
.shopping-sources-toggle:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}

/* Phase 33 — compact "Nothing planned" calendar rows */
.calendar-row-empty{min-width:0}
.calendar-empty-line{display:block;width:100%;text-align:left;padding:6px 10px;border:1px dashed var(--line);border-radius:var(--r-sm);background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
button.calendar-empty-line:hover,button.calendar-empty-line:focus-visible{border-color:var(--maroon);color:var(--ink)}

/* Phase 37B: step visibility (option-bound steps) in the Steps editor. */
.ed-step-visibility{margin-top:8px;display:grid;gap:6px}
.ed-step-visibility select{width:100%}
.ed-step-group{display:grid;gap:4px}
.ed-step-choices .chip{cursor:pointer}
.ed-step-choices .chip.on{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.ed-step-hint{font-size:12px}
.ed-step-warning,.ed-variation-issues{border:1px solid var(--crit);color:var(--crit);border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px}
.ed-variation-issues{display:grid;gap:4px;margin-bottom:12px;background:var(--paper)}
.ed-variation-issues .subtle{color:var(--ink-soft)}
.ed-variation-issues .btn{justify-self:start}
.ed-step-stale{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--crit)}

/* Phase 46: saved-plan variation choices — read-only chips on meal cards, and locked tiles. */
.slot-variation-choices{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}
.slot-variation-choices .slot-variation-chip{font-size:11px;padding:1px 8px}
.slot-variation-choices .slot-variation-chip.stale{border-color:var(--terra);color:var(--terra)}
.slot-variation-inherited{font-size:11px}
.slot-variation-stale{flex-basis:100%;font-size:11px;color:var(--terra)}
.planner-variation-locked-note{font-size:12.5px;margin-bottom:4px}
.variation-panel-locked .variation-tile-locked{cursor:not-allowed;opacity:.62;filter:saturate(.7)}
.variation-panel-locked .variation-tile-locked.on{opacity:.85}
.variation-panel-locked .variation-tile-locked:hover{border-color:var(--line)}
.variation-panel-locked .variation-tile-locked.on:hover{border-color:var(--maroon)}

/* Phase 47: Shopping's custom date range. */
.shopping-range{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;margin-top:4px}
.shopping-range-field{display:grid;gap:3px;font-size:12px;color:var(--muted);font-weight:600}
.shopping-range-field input{min-width:0}
.shopping-range-error{flex-basis:100%;color:var(--crit);font-size:12.5px;font-weight:600}
.shopping-range-note{flex-basis:100%;font-size:12px}

/* Recovery fixes B: per-document choices when finishing an interrupted cookbook move. */
.move-conflicts{display:grid;gap:10px;max-height:46vh;overflow:auto;margin:6px 0}
.move-conflict{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;margin:0}
.move-conflict legend{font-weight:700;padding:0 4px}
.move-conflict-option{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:4px 0;cursor:pointer}
.move-conflict-option .subtle{font-size:12px}

/* Phase 51A — Shopping Assistant shell. Each store keeps one single-tone accent (--store) for its
   chip, assigned-item bubble and two-letter badge; the badge text keeps it readable without color. */
.sa-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px}
.sa-entry-text{flex:1;min-width:200px}.sa-entry-text .chip{margin-left:8px;font-size:10.5px;padding:1px 8px}
.sa-modal{max-width:720px;padding:0;display:flex;flex-direction:column}
@media(max-width:559px){.sa-modal{max-height:calc(100dvh - 8px);min-height:min(640px,calc(100dvh - 8px))}}
.sa-head{position:sticky;top:0;z-index:1;background:var(--paper);padding:16px 20px 10px;border-bottom:1px solid var(--line-soft)}
.sa-head-row{display:flex;align-items:center;gap:10px}
.sa-eyebrow{flex:1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:700}
.sa-progress-text{font-size:13px;color:var(--ink-soft);margin:6px 0 8px;font-weight:600}
.sa-progress{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sa-progress-step{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.sa-progress-step::before{content:"";height:4px;border-radius:999px;background:var(--line)}
.sa-progress-step.done::before{background:color-mix(in srgb,var(--maroon) 55%,var(--line))}
.sa-progress-step.current::before{background:var(--maroon)}
.sa-progress-step.current{color:var(--ink);font-weight:700}
.sa-progress-step.skipped{opacity:.6}.sa-progress-step.skipped::before{height:0;border-top:3px dotted var(--line);background:none;margin:1px 0 0}
.sa-progress-num{display:none}
@media(max-width:559px){.sa-progress-label{display:none}}
.sa-body{padding:16px 20px;flex:1}
.sa-step-title{font-family:var(--serif);font-size:22px;margin:0 0 6px}
.sa-step-title:focus{outline:none}.sa-step-title:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:4px}
.sa-foot{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line-soft);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:10px}
.sa-foot .btn{min-height:40px}
.sa-welcome-steps{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.sa-welcome-steps li{display:flex;gap:12px;align-items:flex-start}
.sa-welcome-num{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--num);font-size:12px;color:var(--maroon);font-weight:700}
.sa-advanced-toggle{background:none;border:0;padding:6px 0;color:var(--terra);font-weight:700;cursor:pointer;font-size:13px}
.sa-advanced-toggle:focus-visible,.sa-store:focus-visible,.sa-arm:focus-visible,.sa-bubble:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.sa-advanced{display:grid;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)}
.sa-skip{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.sa-skip.fixed{cursor:default;opacity:.75}
.sa-skip input{margin-top:3px;flex:none}.sa-skip span{display:flex;flex-direction:column;gap:2px}
.sa-badge{flex:none;display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 4px;border-radius:6px;background:var(--store,var(--muted));color:#fff;font-family:var(--num);font-size:10.5px;font-weight:800;letter-spacing:.04em}
.sa-store-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.sa-store{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 12px 7px 8px;cursor:pointer;font:inherit;font-size:14px;min-height:40px}
.sa-store.on{border-color:var(--store);background:color-mix(in srgb,var(--store) 16%,var(--paper));font-weight:700}
.sa-check{width:14px;color:var(--store);font-weight:800}
@media(max-width:559px){
  .sa-store-list{flex-direction:column;flex-wrap:nowrap;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
  .sa-store{border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:12px 14px;min-height:48px}
  .sa-store:last-child{border-bottom:0}
  .sa-store-name{flex:1;text-align:left}.sa-check{width:18px;font-size:16px}
}
.sa-add-store{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.sa-add-store-toggle{min-height:40px}
.sa-add-store-input{flex:1;min-width:160px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px}
.sa-add-store-input:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.sa-add-store-error{flex-basis:100%;color:var(--crit);font-size:13px}
.sa-arm-bar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.sa-arm{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 11px 5px 6px;cursor:pointer;font:inherit;font-size:13px;min-height:36px}
.sa-arm.on{border-color:var(--store);background:var(--store);color:#fff;font-weight:700}
.sa-arm.on .sa-badge{background:#fff;color:var(--store)}
.sa-hint{min-height:1.4em;margin-bottom:6px}
.sa-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin:14px 0 6px}
.sa-bubbles{display:flex;flex-wrap:wrap;gap:6px}
.sa-bubble{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer;font:inherit;font-size:13px;min-height:34px;max-width:100%;text-align:left}
.sa-bubble.on{border-style:solid;border-color:var(--store);background:color-mix(in srgb,var(--store) 16%,var(--paper));padding-right:5px}
/* 040: store suggestion chips under unassigned items in the Assign step */
.sa-item{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%}
.sa-suggest{border:1px dashed var(--terra);background:transparent;color:var(--terra);border-radius:999px;padding:3px 10px;cursor:pointer;font:inherit;font-size:12px;line-height:1.4;text-align:left}
.sa-suggest:hover{background:color-mix(in srgb,var(--terra) 8%,transparent)}
.sa-suggest.add{border-style:solid;font-weight:600}
.sa-suggest:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.sa-count{margin-top:12px}
.sa-meals{list-style:none;padding:0;margin:12px 0;border:1px solid var(--line);border-radius:var(--r-sm)}
.sa-meal{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}.sa-meal:last-child{border-bottom:0}
.sa-meal-date{flex:none;width:52px;display:flex;flex-direction:column;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sa-meal-date span{text-transform:none;letter-spacing:0;color:var(--ink-soft);font-weight:600}
.sa-meal-main{flex:1;min-width:0}.sa-meal-name{font-family:var(--serif);font-size:15px}
.sa-meal .slot-variation-choices{margin-top:4px}
.sa-summary{display:grid;gap:4px;padding:10px 12px;background:var(--ground);border-radius:var(--r-sm);font-size:13px}
.sa-error{color:var(--crit);font-weight:700;margin-top:10px}
/* Phase 51B — Pricing and Review steps */
.sa-price-counts{font-size:13px}
.sa-paths{display:grid;gap:10px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.sa-path-where{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.sa-zip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.sa-zip input{width:6.5em;font-family:var(--num)}
.sa-ai-stores{display:flex;flex-wrap:wrap;gap:6px}
.sa-path{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--line-soft)}
.sa-path-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.sa-request,.sa-paste{width:100%;min-height:64px;font-family:var(--num);font-size:12.5px}
.sa-price-note{min-height:1.2em}.sa-price-note:empty{display:none}
.sa-price-tools{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}
.sa-price-tools .sa-cat{margin:0;flex:1}.sa-search{flex:1 1 200px;min-width:0;max-width:100%}
.sa-show-label{display:flex;align-items:center;gap:6px;font-size:13px}.sa-show{min-width:0;max-width:100%}
.sa-price-list,.sa-review-list,.sa-excluded-list{list-style:none;padding:0;margin:8px 0;border:1px solid var(--line);border-radius:var(--r-sm)}
.sa-price-list{min-height:min(300px,40vh)}
.sa-price-row,.sa-review-row{display:flex;flex-wrap:wrap;gap:6px 12px;padding:10px 12px;border-bottom:1px solid var(--line-soft);align-items:center}
.sa-price-row:last-child,.sa-review-row:last-child{border-bottom:0}
.sa-price-main,.sa-review-main{flex:1 1 200px;min-width:0}
.sa-price-name{font-weight:600;overflow-wrap:anywhere}
.sa-price-meta{font-size:12.5px;color:var(--muted)}.sa-price-meta.attn{color:var(--terra)}
.sa-price-controls{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.sa-price-input{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.sa-price-input input{width:88px;font-family:var(--num)}
.sa-field-error{color:var(--crit);font-size:12px;font-weight:700}.sa-field-error:empty{display:none}
.sa-sale{display:flex;align-items:center;gap:4px;font-size:12.5px;white-space:nowrap}
.sa-price-blocked{max-width:34ch;font-size:12px}.sa-price-controls [hidden]{display:none}
.sa-price-empty{padding:12px}
.sa-excluded{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-sm)}
.sa-excluded-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.sa-excluded-list{border:0;margin:6px 0 0}.sa-excluded-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0}
.sa-review-amt{font-weight:400}
/* Phase 51D: Review's price direction. Text and arrow carry the meaning; color only reinforces it. */
.sa-review-price{font-family:var(--num);font-size:14px;color:var(--ink)}
.sa-price-change{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:12.5px;font-weight:700}
.sa-price-change.up{color:var(--crit)}.sa-price-change.down{color:var(--good)}.sa-price-change.new{color:var(--muted);font-weight:600}
.sa-arrow{font-size:14px;line-height:1}
.sa-review-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sa-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 9px 1px 3px;color:var(--ink-soft)}
.sa-tag:not([style]){padding-left:9px}
.sa-tag[style]{border-color:var(--store)}
.sa-tag.sale{border-color:var(--good);color:var(--good);font-weight:700}
@media(max-width:559px){.sa-price-controls{flex:1 1 100%;gap:6px 8px}.sa-price-input input{width:72px}.sa-leave{margin-left:auto}.sa-paths{padding:10px}}
.sa-quit-back,.sa-quit-back.modal-back{align-items:center;justify-content:center;padding:20px;z-index:78}
.sa-quit-sheet{max-width:520px;border-radius:18px}
.sa-quit-sheet h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.sa-quit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.sa-quit-actions .btn{flex:1;min-height:42px}

/* Phase 51C: Shopping's three sections — Shopping Assistant, Meal planning, Shopping list. */
.shopping-top{display:grid;gap:16px;margin-bottom:24px}
@media (min-width:760px){.shopping-top{grid-template-columns:minmax(240px,1fr) minmax(0,1.6fr);align-items:start}}
.shopping-top .panel + .panel{margin-top:0}
.shopping-section h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.shopping-assistant{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-color:var(--maroon)}
.shopping-assistant p{margin:0}
.shopping-assistant-open{min-height:44px}
.shopping-planning{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px}
.shopping-planning h2{flex-basis:100%;margin-bottom:0}
.shopping-plan-info{flex:1;min-width:160px}
.shopping-list-section{border-top:1px solid var(--line);padding-top:18px;margin-bottom:24px}
.shopping-list-head{margin-bottom:12px}
.shopping-list-source{font-size:12.5px;margin-top:2px}
.shopping-add{padding:14px;margin-bottom:14px}
.shopping-list-summary{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:10px}
.shopping-group-by{display:flex;align-items:center;gap:8px;font-size:13px}
.shopping-group-by select{width:auto}
.shopping-more-title{font-family:var(--serif);font-size:18px;margin:8px 0 12px}
.shopping-add-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 130px auto;gap:8px;align-items:center}
.shopping-add-row>*{min-width:0;width:100%}
@media (max-width:600px){.shopping-add-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.shopping-add-row>input[type=text]{grid-column:1/-1}}

/* Phase 44: Variations area */
.ed-variations{margin-bottom:16px}
.ed-variations .sectionbar h2{font-family:var(--serif);font-size:20px}
.ed-comp-title{font-family:var(--serif);font-size:17px;margin:4px 0 10px}
.ed-var-group{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:12px 0;background:var(--ground)}
.ed-var-group-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ed-var-group-h h3{font-family:var(--serif);font-size:17px;margin:0}
.ed-var-group-h .spacer{flex:1}
.ed-var-missing{color:var(--terra);font-size:12.5px;font-weight:700}
.ed-var-option{margin-bottom:8px;padding:0}
.ed-var-option>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:2px 8px;align-items:baseline;padding:10px 12px}
.ed-var-option>summary::-webkit-details-marker{display:none}
.ed-var-option>summary::after{content:"Edit ›";grid-column:3;grid-row:1;font-size:12px;color:var(--terra);font-weight:700}
.ed-var-option[open]>summary::after{content:"Close ⌄"}
.ed-var-option[open]>summary{border-bottom:1px solid var(--line-soft)}
.ed-var-star{color:var(--terra);font-weight:700}
.ed-var-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
.ed-var-impact{grid-column:2/4;font-size:12.5px;color:var(--ink-soft)}
.ed-var-impact-missing{color:var(--terra);font-weight:700}
.ed-var-ings{grid-column:2/4;font-size:12px;overflow-wrap:anywhere}
.ed-var-body{padding:12px 14px 14px}
.ed-var-kind,.ed-var-compare,.ed-var-totals{font-size:12.5px;margin:0 0 10px}
.ed-var-compare,.ed-var-totals{color:var(--ink-soft);overflow-wrap:anywhere}
.ed-var-totals{font-weight:600}
.ed-var-steps{margin:10px 0}
.ed-var-steps ul{margin:4px 0 6px 18px;padding:0;font-size:12.5px}
.ed-var-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ed-var-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.ed-var-add input[type=text]{flex:1 1 160px;min-width:0;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--paper)}
.ed-var-add select{max-width:100%}
.ed-var-form,.ed-var-confirm{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:8px 0;background:var(--paper);display:grid;gap:8px}
.ed-var-confirm{border-color:var(--crit)}
.ed-var-check{display:flex;gap:6px;align-items:flex-start;font-size:13px}
.ed-var-step-choice{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.ed-var-step-choice span{flex:1 1 200px;min-width:0}
.ed-make-option>summary{cursor:pointer;font-size:13px;color:var(--terra);font-weight:600}
.ed-make-option[open]{display:grid;gap:6px}
.ed-var-preview{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:10px}
.ed-var-preview-sels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:6px 0}
.ed-var-preview-sels select{width:100%}
.ed-var-preview-facts{font-weight:600;font-size:13px}
.ed-var-preview-rows{list-style:none;margin:6px 0 0;padding:0;font-size:13px}
.ed-var-preview-rows li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dotted var(--line-soft)}
.ed-var-preview-rows .amt{font-family:var(--num)}
@media (max-width:560px){.ed-var-group{padding:10px}.ed-var-body{padding:10px}.ed-var-option .ed-comp-h{flex-wrap:wrap}.ed-var-option .ed-comp-h .field{width:100%!important}}
/* Phase 44: recipe-page "+ Add variation" and its overlay, plus the variation diff */
.variation-panel-h{display:flex;align-items:baseline;gap:10px;justify-content:space-between;flex-wrap:wrap}
.variation-add{padding:3px 9px;font-size:12.5px}
.variation-empty-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.addvar-modal{max-width:680px;max-height:90vh;overflow:auto}
.addvar-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.addvar-head h2{font-family:var(--serif);font-size:20px;flex:1;margin:0}
.addvar-form{display:grid;gap:8px;margin:6px 0 12px}
.addvar-note{font-size:12.5px;margin:-4px 0 8px}
.addvar-rows{display:grid;gap:6px}
.addvar-row{display:flex;gap:6px;align-items:center}
.addvar-row input[type=text],.addvar-row textarea{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--paper);font:inherit;color:var(--ink)}
.addvar-row input[type=number]{width:90px;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--paper);font-family:var(--num);color:var(--ink)}
.addvar-impact{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:6px;margin:4px 0}
.addvar-impact legend{font-weight:700;font-size:13px;padding:0 4px}
.addvar-impact .field{margin:0}
.addvar-steps{display:grid;gap:6px}
#addvar-review{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
#addvar-review h3{font-family:var(--serif);font-size:17px;margin:0 0 6px}
.addvar-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 -22px;position:sticky;bottom:-22px;background:var(--paper);padding:10px 0 22px;border-top:1px solid var(--line-soft);z-index:1}
.var-diff{display:grid;gap:8px}
.var-diff-item{border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;background:var(--ground)}
.var-diff-item.rejected{opacity:.55}
.var-diff-item.rejected ul{text-decoration:line-through}
.var-diff-h{display:flex;gap:8px;align-items:center}
.var-diff-item ul{margin:4px 0 0 18px;padding:0;font-size:12.5px;overflow-wrap:anywhere}
.var-diff-item li.add{color:var(--good)}
.var-diff-item li.del{color:var(--crit)}
@media (max-width:560px){.addvar-modal{max-height:94vh}.addvar-row input[type=number]{width:70px}}
.ed-var-ai{border:1px solid var(--terra);border-radius:var(--r);padding:12px;margin:12px 0;background:var(--paper)}
.ed-var-ai-review{display:grid;gap:8px}
.addvar-tabs{margin:4px 0 10px}
button.ed-var-missing{background:none;border:0;padding:2px 4px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:var(--terra);text-decoration:underline dotted}
.ed-impact-status{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
.ed-impact-status-text{flex:1 1 220px;min-width:0}
.ed-impact-status.missing .ed-impact-status-text{color:var(--terra);font-weight:700}
.ed-impact-status .subtle{flex-basis:100%}

/* Phase 48 — shared frame, cover, and Library presentation. */
.bar{min-height:64px;gap:10px;box-shadow:0 2px 12px rgba(48,20,22,.16)}
.brand{flex:0 1 auto}.brand .build-badge{display:inline-block}
.wrap{max-width:1440px;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.cover{max-width:980px;margin:18px auto}.cover .frame{min-height:560px;display:flex;flex-direction:column;justify-content:center}.cover .quote{min-height:5.8em;display:flex;align-items:center;justify-content:center}
.lib-head{display:flex;align-items:center;gap:14px;margin:4px 0 20px}.lib-head .motif{color:var(--maroon);line-height:0}.lib-head h1{font-family:var(--serif);font-size:clamp(30px,4vw,44px);line-height:1}.lib-head .who{min-width:0;flex:1}.lib-summary{margin-top:4px}.lib-add{flex:none}
.tools{padding:12px;border:1px solid var(--line-soft);border-radius:var(--r);background:color-mix(in srgb,var(--paper) 76%,transparent);gap:8px}.tools .search{min-width:min(320px,100%)}
.lib-more{position:relative}.lib-more>summary{list-style:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--paper)}.lib-more>summary::-webkit-details-marker{display:none}.lib-more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:grid;gap:6px;min-width:180px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card h3{font-size:19px}.card .body{padding:14px}
@media(max-width:1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bar{gap:7px}.brand .s{display:none}.nav button{padding:6px 10px}.sync{font-size:10.5px}.dev-reload-btn{padding:5px 8px;font-size:10px}}
@media(max-width:560px){.bar{align-items:center;padding:8px 12px}.brand .k{font-size:17px}.brand .build-badge{font-size:9px;margin-top:2px}.nav{order:5;width:100%;justify-content:space-between}.nav button{flex:1;padding:6px 3px;font-size:12px}.ai-status-button{margin-left:auto}.sync#sync:not(.held){display:none}.sync#sync.held{font-size:10px;padding:2px 8px;border-radius:999px;background:var(--terra);color:#fff;opacity:1}.sync#sync.held .dot{background:#fff}.dev-reload-btn{font-size:0;padding:6px 8px}.dev-reload-btn::before{content:"⟳";font-size:14px}.wrap{padding-left:16px;padding-right:16px}.cover{margin:0 auto}.cover .frame{min-height:500px;padding:32px 20px}.lib-head{align-items:flex-start;margin-bottom:14px}.lib-head .motif svg{width:30px;height:30px}.lib-head h1{font-size:30px}.lib-summary{font-size:12px}.lib-add{font-size:0;padding:9px}.lib-add .icon{margin:0}.tools{padding:10px}.tools .search{order:-2;width:100%;flex-basis:100%}.tabs{flex:1}.tabs button{flex:1;padding:6px 7px}.grid{grid-template-columns:1fr;gap:14px}.card{min-height:0}.thumb{aspect-ratio:16/9}}
.active-filter-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:-8px 0 14px}.active-filter-chips .chip{cursor:pointer}.card:focus-visible,.tabs button:focus-visible,.seg button:focus-visible,.lib-more>summary:focus-visible{outline:2px solid var(--terra);outline-offset:2px}

/* Phase 50 — Planner presentation: overview, creation, draft calendar, picker, preview, saved view. */
.planner-head{display:flex;align-items:center;gap:14px;margin:4px 0 20px}.planner-head .who{min-width:0;flex:1}
.planner-head .eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);font-weight:700}
.planner-head h1{font-family:var(--serif);font-size:clamp(30px,4vw,44px);line-height:1;margin:4px 0 0}
.planner-summary{margin-top:6px}.planner-create{flex:none}
.planner-view>.panel+.panel,.planner-view>.panel+section,.planner-view>section+.panel,.planner-view>.empty+.panel{margin-top:16px}
.planner-now .eyebrow,.plan-setup-group h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:700}
.planner-now h2{font-family:var(--serif);font-size:22px;margin:4px 0}
.planner-card-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0}
.planner-card-range{font-family:var(--serif);font-size:20px;font-weight:400;margin:0}
.planner-draft-entry .planner-card-range{font-family:var(--sans);font-size:15px;font-weight:700}
.planner-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.plan-status-chip{font-size:10.5px;padding:1px 8px;font-weight:700}
.plan-status-chip.status-current{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.plan-status-chip.status-upcoming{border-color:var(--maroon);color:var(--maroon)}
.plan-status-chip.status-draft{border-style:dashed;border-color:var(--terra);color:var(--terra)}
.planner-draft-entry{border-left:4px solid var(--terra)}
.planner-now{border-left:4px solid var(--maroon)}
/* Saved weeks (Planner context only): status, range, then View/Load with Delete set apart. */
.planner-saved-weeks [data-saved-week]{display:grid;grid-template-columns:88px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;margin:0}
.planner-saved-weeks [data-saved-week]>span:nth-child(2){min-width:0!important}
.planner-saved-weeks .saved-week-status{justify-self:start}
.planner-saved-weeks [data-saved-week] .danger{margin-left:14px}
@media (max-width:560px){
  .planner-saved-weeks [data-saved-week]{grid-template-columns:auto 1fr;row-gap:6px}
  .planner-saved-weeks [data-saved-week]>span:nth-child(2){grid-column:2}
  .planner-saved-weeks [data-saved-week]>button{grid-row:2}
  .planner-saved-weeks [data-saved-week]>button:nth-of-type(1){grid-column:1}
  .planner-saved-weeks [data-saved-week]>button:nth-of-type(2){grid-column:2;justify-self:start}
  .planner-saved-weeks [data-saved-week]>button:nth-of-type(3){grid-column:2;justify-self:end;margin-left:0}
}
/* This calendar week */
.week-overview-head h2{font-family:var(--serif);font-size:20px;margin:0;flex:1}
.week-overview-head{margin-bottom:6px}
.week-overview-source{margin:0 0 8px}
.week-overview-key{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px;font-size:11.5px}
.week-key{display:inline-flex;align-items:center;gap:5px}
.week-key::before{content:"";width:14px;height:10px;border-radius:3px;border:1px solid var(--line)}
.week-key.is-cook::before{border-left:4px solid var(--maroon)}
.week-key.is-leftover::before{border:1px dashed var(--maroon);background:color-mix(in srgb,var(--tan) 60%,transparent)}
.week-key.is-gap::before{border:1px dashed var(--terra)}
.week-key.is-outside::before{border-style:dashed;opacity:.55}
.week-overview-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.week-overview-grid{display:grid;grid-template-columns:78px repeat(7,minmax(96px,1fr));gap:4px;min-width:760px;font-size:12px}
.week-overview-label{position:sticky;left:0;z-index:1;background:var(--paper);font-weight:700;display:flex;align-items:center}
.week-overview-day{text-align:center;font-weight:700;padding:4px 2px;border-radius:7px;color:var(--muted)}
.week-overview-day.is-today{background:var(--maroon);color:var(--maroon-ink)}
.week-overview-date{font-weight:400}
.week-cell{min-height:48px;padding:5px 6px;border-radius:7px;border:1px solid var(--line-soft);min-width:0;overflow-wrap:anywhere}
.week-cell.is-today{border-color:var(--maroon)}
.week-cell.is-cook{border-left:4px solid var(--maroon)}
.week-cell.is-cook::before{content:"Cook";display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--maroon);font-weight:700;margin-bottom:1px}
.week-cell.is-leftover{border-style:dashed;border-color:var(--maroon);background:color-mix(in srgb,var(--tan) 45%,transparent)}
.week-cell.is-gap{border-style:dashed;border-color:var(--terra)}
.week-cell.is-outside{border-style:dashed;opacity:.55}
.week-overview-recipe{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);line-height:1.25;cursor:pointer}
.week-overview-recipe:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:3px}
.week-cell .slot-variation-chip{border-radius:8px;white-space:normal}
.week-leftover-chip{padding:0 6px;font-size:10px;margin-top:3px;display:inline-block}
.week-gap-text{color:var(--terra);font-weight:600}
/* Shared plan dialog: wide on desktop, full-screen sheet on phones. */
.plan-modal-head h2{overflow-wrap:anywhere}
@media (max-width:559px){
  .planmodal-back{align-items:stretch}
  .plan-modal{max-width:100%;width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 14px 0}
  .plan-modal-head{margin-bottom:10px}.plan-modal-head h2{font-size:19px}
}
/* Creation: grouped setup and spend level */
.plan-setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px 22px;align-items:start}
.plan-setup-group{min-width:0}.plan-setup-group h3{margin:0 0 8px;font-family:var(--sans)}
.plan-setup-group .field{margin-bottom:10px}
.plan-setup-help{font-size:12px;margin-top:4px}
.plan-toggle-row{display:flex;gap:6px;flex-wrap:wrap}
.plan-toggle{cursor:pointer;min-height:32px;padding:4px 12px;font-size:12.5px}
.plan-toggle.on{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.plan-toggle.on::before{content:"✓ "}
.plan-toggle:focus-visible,.plan-tier-card:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.plan-per-type{display:flex;gap:10px;flex-wrap:wrap}.plan-per-type .field{flex:1 1 90px;margin-bottom:0}
.plan-spend{margin-top:16px}.plan-spend>h2{font-family:var(--serif);font-size:22px}
.plan-spend-help{margin:2px 0 12px;max-width:80ch}
.plan-spend-slider{margin:4px 0 14px}
.plan-tier-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:900px){.plan-tier-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (max-width:559px){.plan-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.plan-tier-card{padding:10px}.plan-tier-total{font-size:20px}.plan-spend{padding:14px}}
.plan-tier-card{padding:14px;min-width:0;border-width:1px}
.plan-tier-card.on{border-color:var(--maroon);box-shadow:0 0 0 2px var(--maroon)}
.plan-tier-name{font-family:var(--serif);font-size:18px}
.plan-tier-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px}
.plan-tier-total{font-family:var(--num);font-weight:700;font-size:24px;color:var(--terra);line-height:1.1;margin-bottom:4px}
.plan-tier-gaps{margin-top:6px;font-size:11px;font-weight:600;color:var(--terra)}
.plan-tier-use{margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}.plan-tier-card.on .plan-tier-use{color:var(--maroon)}
.plan-warning{border:1px solid var(--terra);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 12px;background:var(--paper)}
.plan-warning-title{color:var(--terra);font-weight:700}
.plan-warning-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.plan-warning .subtle{margin-top:4px}
/* Draft workspace and sticky action footer */
.tentative-plan{margin-top:16px;border:1px dashed var(--terra);border-radius:var(--r);padding:14px 14px 0;background:var(--ground)}
.tentative-plan .calendar-week-grid{opacity:1}
.tentative-plan .tentative-lock-warning{margin-top:12px}
.plan-action-footer{position:sticky;bottom:0;z-index:5;margin:14px -14px 0;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(0,0,0,.08);border-radius:0 0 var(--r) var(--r)}
.plan-footer-summary{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;align-items:baseline}
.plan-footer-count{font-weight:700}.plan-footer-count.is-attn,.plan-finalize-note.is-attn{color:var(--terra)}
.plan-save-status{color:var(--muted);font-size:12.5px}
.plan-finalize-note{font-size:12px;margin-top:2px}
.tentative-plan-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.tentative-plan-actions .spacer{flex:1}
.tentative-plan-actions .btn:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:559px){
  .plan-action-footer{margin:14px -14px 0;border-radius:0}
  .tentative-plan{margin-left:-14px;margin-right:-14px;border-left:0;border-right:0;border-radius:0}
  .tentative-plan-actions .spacer{display:none}
  .tentative-plan-actions .btn{flex:1 1 auto;padding-left:10px;padding-right:10px}
}
/* Draft and saved calendar */
.plan-calendar{margin-top:18px}
.plan-calendar-head h2{font-family:var(--serif);font-size:22px}
.plan-status-panel{padding:10px 14px;margin-bottom:12px}
.plan-status-panel.is-incomplete{border-color:var(--terra)}.plan-status-panel.is-incomplete .plan-status-line{color:var(--terra)}
.plan-status-line{font-weight:700}
.plan-status-gaps{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.plan-calendar-help{margin-bottom:10px;font-size:12.5px}
.plan-week-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.plan-week-label{font-weight:600}
.calendar-week-scroll{overscroll-behavior-x:contain}
.calendar-week-grid{grid-template-columns:minmax(76px,96px) repeat(var(--calendar-days),minmax(190px,1fr));gap:8px;min-width:100%;width:max-content}
@media (min-width:1100px){.calendar-week-grid{width:100%}}
.calendar-meal-heading{position:sticky;left:0;z-index:3;background:var(--paper);align-items:flex-start;padding-top:12px;overflow-wrap:anywhere}
.tentative-plan .calendar-meal-heading{background:var(--ground)}
.calendar-grid-corner{position:sticky;left:0;z-index:3;background:inherit}
.calendar-grid-slot{min-width:0;display:flex}
.calendar-grid-slot>*{flex:1;min-width:0}
.plan-slot{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--paper);min-width:0;overflow-wrap:anywhere}
.plan-slot.is-cook{border-left:4px solid var(--maroon)}
.plan-slot.is-leftover{border-style:dashed;border-color:var(--maroon);border-left-width:4px;background:color-mix(in srgb,var(--tan) 40%,var(--paper))}
.plan-slot.is-gap{border:1px dashed var(--terra);background:transparent}
.plan-slot.is-empty{border:1px dashed var(--line);background:transparent}
.plan-slot-kicker{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.plan-slot.is-gap .plan-slot-kicker,.plan-slot-gap-text{color:var(--terra)}
.plan-slot-top{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.plan-slot-title{flex:1 1 120px;min-width:0;display:block;text-align:left;background:none;border:0;padding:0;font-family:var(--serif);font-size:15.5px;line-height:1.25;color:var(--ink);cursor:pointer}
.plan-slot-title:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:3px}
.plan-slot-chip{padding:1px 7px;font-size:10px}
.plan-slot-nums{font-family:var(--num);margin-top:6px;font-size:12px}
.plan-slot-meta{font-size:11.5px;margin-top:2px}
.plan-slot-field{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px}
.plan-slot-fix{font-style:italic;margin:4px 0 8px}
.plan-slot-add{width:100%;margin-top:6px}
.plan-slot-actions{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.plan-slot-actions .btn{padding:3px 9px}
.plan-slot-actions .plan-slot-remove{margin-left:auto}
.calendar-grid-slot .batch-quantities .subtle{font-size:11.5px}
@media (max-width:760px){
  .calendar-week-grid{grid-template-columns:64px repeat(var(--calendar-days),minmax(172px,calc(100vw - 104px)))}
  .calendar-grid-slot:not(.calendar-row-empty)::before{content:attr(data-day-label);display:block;font-size:10.5px;font-weight:700;color:var(--ink-soft);margin:0 0 3px 2px;position:absolute}
  .calendar-grid-slot:not(.calendar-row-empty){position:relative;padding-top:16px}
  .calendar-grid-slot:not(.calendar-row-empty)::before{top:0;left:0}
  .calendar-meal-heading{font-size:9px;letter-spacing:0;overflow-wrap:normal;word-break:normal}
  .calendar-week-scroll{scroll-snap-type:x proximity;scroll-padding-left:72px}
  .calendar-grid-slot{scroll-snap-align:start}
}
/* Candidates row stays compact and never clips at the right edge. */
/* Saved-plan view/edit */
.saved-plan-toolbar{gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)}
.saved-plan-toolbar.mode-editing{position:sticky;top:-22px;z-index:6;border-color:var(--maroon);box-shadow:var(--shadow)}
.saved-plan-mode{font-weight:700;font-size:11px;padding:1px 9px}
.saved-plan-toolbar.mode-view .saved-plan-mode{border-style:dashed}
.saved-plan-toolbar.mode-editing .saved-plan-mode{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.saved-plan-toolbar.mode-version .saved-plan-mode{border-color:var(--terra);color:var(--terra)}
.saved-plan-mode-text{flex:1;min-width:180px}.saved-plan-mode-text.is-attn{color:var(--terra);font-weight:700}
.saved-plan-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:4px 0 0}
.saved-plan-range{font-family:var(--serif);font-size:18px}
@media (max-width:559px){.saved-plan-toolbar.mode-editing{top:-16px}.saved-plan-toolbar .btn{flex:1 1 auto}}
/* Meal picker */
.meal-picker-modal{max-width:680px;max-height:88vh;display:flex;flex-direction:column;gap:0}
.meal-picker-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.meal-picker-titles{flex:1;min-width:0}.meal-picker-titles .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:700}
.meal-picker-titles h2{font-family:var(--serif);font-size:21px;margin:2px 0 0}
.meal-picker-gap{margin:0 0 10px}
.meal-picker-fixed{font-weight:700;margin-bottom:14px}
.meal-picker-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px}
.meal-pick-search,.meal-pick-sort{border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--paper);min-width:0}
.meal-pick-all{grid-column:1/-1;display:flex;align-items:center;gap:6px;cursor:pointer}
.meal-pick-list{max-height:34vh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding:2px;overscroll-behavior:contain}
.meal-pick-none{padding:8px}
.meal-pick-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:2px 8px 2px 2px}
.meal-pick-card.on{border-color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon)}
.meal-pick-select{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;background:none;border:0;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink)}
.meal-pick-select:focus-visible,.meal-pick-view:focus-visible{outline:2px solid var(--terra);outline-offset:1px}
.meal-pick-name{font-family:var(--serif);font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.meal-pick-cues,.meal-pick-vars{font-size:11.5px;color:var(--muted)}
.meal-pick-tags{display:flex;gap:4px;flex-wrap:wrap}.meal-pick-tags .chip{font-size:10px;padding:0 7px}.meal-pick-tags .recipe-row-more{font-size:10.5px;color:var(--muted)}
.meal-pick-state{font-size:11px;font-weight:700;color:var(--muted)}.meal-pick-card.on .meal-pick-state{color:var(--maroon)}
.meal-picker-label{font-weight:700;margin-bottom:6px}
.meal-picker-servings{width:90px;margin-bottom:14px}
.meal-picker-footer{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:-22px;background:var(--paper);padding:10px 0 4px;margin-top:4px;border-top:1px solid var(--line-soft)}
@media (max-width:559px){.meal-picker-modal{max-height:94dvh}.meal-picker-tools{grid-template-columns:1fr}.meal-picker-footer .btn{flex:1}}
/* Planner recipe preview */
.planner-readonly-banner{border:1px dashed var(--maroon);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:10px;font-size:13px;color:var(--ink);background:var(--ground)}
.planner-recipe-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--line)}
.planner-recipe-summary>div{background:var(--paper);padding:8px 10px;min-width:0}
.planner-recipe-summary dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.planner-recipe-summary dd{margin:2px 0 0;font-family:var(--num);font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.planner-recipe-choice{margin:-2px 0 12px}
@media (max-width:559px){.planner-head{align-items:flex-start}.planner-head h1{font-size:30px}.planner-create{padding:9px 12px}}
@media (max-width:559px){.plan-spend-slider .budget-elastic-anchor{font-size:9.5px;letter-spacing:0;padding:0 1px;min-width:0}}
/* Phase 52A — Settings shell and kitchen preferences. */
.settings-index{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:8px;border:1px solid var(--line-soft);border-radius:var(--r);background:color-mix(in srgb,var(--paper) 72%,transparent)}
.settings-index a{color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;padding:6px 9px;border-radius:999px}.settings-index a:hover{background:var(--tan)}.settings-index a:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.settings-kitchen{scroll-margin-top:calc(var(--barh,60px) + 18px)}.settings-section{scroll-margin-top:calc(var(--barh,60px) + 18px)}
.settings-group{padding:16px 0;border-top:1px solid var(--line-soft)}.settings-group:first-child{padding-top:0;border-top:0}.settings-group h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}.settings-group .sub{margin-bottom:12px}.settings-group .field{margin-bottom:12px}
.settings-save{margin-top:14px;color:var(--muted);font-size:12px;font-weight:600}.settings-save.saving{color:var(--terra)}.settings-save.saved{color:var(--good)}.settings-save.error{color:var(--crit)}
@media(max-width:560px){.settings-index{position:sticky;top:calc(var(--barh,60px) + 4px);z-index:5;flex-wrap:nowrap;overflow-x:auto;padding:7px}.settings-index a{white-space:nowrap;font-size:11.5px;padding:6px 8px}.settings-group{padding:14px 0}.settings-group h2{font-size:19px}}
/* Phase 52D — glanceable cook mode and concurrent timer tray. */
.cook{background:radial-gradient(110% 84% at 50% -12%,color-mix(in srgb,var(--tan) 82%,var(--paper)),var(--ground) 64%)}
.cook-top{max-width:900px;width:100%;margin:0 auto;padding-top:20px}.cook-top .ttl{font-size:21px}.cook-dots{padding-bottom:8px}
.cook-body{padding-top:20px}.cook-card{max-width:700px;padding:30px 30px;gap:20px}.cook-stepno{background:color-mix(in srgb,var(--tan) 45%,var(--paper));font-variant-numeric:tabular-nums}.cook-text{font-size:clamp(24px,3.2vw,34px);line-height:1.34}.cook-mw{border-left:4px solid var(--terra)}
.cook-nav{position:relative}.cook-nav .btn{min-height:54px}.timertray{gap:10px}.timer{border:1px solid rgba(255,255,255,.16);min-height:48px}.timer.done{box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 28%,transparent),var(--shadow)}.timer button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:560px){.cook-top{padding:14px 16px 6px}.cook-top .ttl{font-size:18px}.cook-body{padding:10px 12px 2px}.cook-card{padding:22px 18px;border-radius:16px;gap:16px}.cook-text{font-size:25px}.cook-inglist .r{padding:11px 12px}.cook-nav{padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));gap:8px}.cook-nav .btn{padding:13px 10px;font-size:15px}.cook-nav .btn.back{flex-basis:38%}.cook-timers{padding:4px 12px}.timer{padding:9px 10px}.timertray{left:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){.cook-card{transition:none}.cook-dots i{transition:none}}

/* Phase 52B — backup, sharing, restore, and tidy-up flows. */
.backup-panel,.tidy-panel{display:flex;flex-direction:column;gap:14px}.backup-panel h2,.tidy-panel h2{font-family:var(--serif);font-size:20px}.backup-panel-top{display:flex;gap:16px;align-items:flex-start}.backup-panel-top>.btn{flex:none}.backup-status{display:flex;gap:10px;align-items:baseline;padding:10px 12px;background:var(--tan);border-radius:var(--r-sm)}.backup-status.is-stale{border-left:3px solid var(--warn)}.backup-secondary{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}.backup-dialog{max-width:680px}.backup-dialog-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}.backup-dialog-head h2{font-family:var(--serif);font-size:22px}.backup-dialog .close{margin:0}.backup-picker-tools{display:flex;gap:10px;align-items:center;margin:14px 0 8px}.backup-picker-tools input{flex:1;min-width:0}.backup-count{font:600 12px var(--num);white-space:nowrap}.backup-picker-actions{display:flex;gap:8px;margin-bottom:10px}.backup-picker-list{display:flex;flex-direction:column;gap:2px;max-height:min(42vh,360px);overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.backup-picker-row{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid var(--line-soft)}.backup-dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}.backup-warning{color:var(--terra);font-weight:600;margin-top:9px}.backup-json{width:100%;min-height:220px;margin-top:12px;font:11px var(--num);line-height:1.4}.backup-import-text{min-height:130px;margin:8px 0}.backup-file-input{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600;margin:12px 0}.backup-file-input input{max-width:100%}.backup-preview{margin-top:10px;padding:13px;background:color-mix(in srgb,var(--tan) 55%,var(--paper));border:1px solid var(--line);border-radius:var(--r-sm)}.backup-preview-title{font-weight:700;margin-bottom:8px}.backup-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px}.backup-choice{display:flex;align-items:flex-start;gap:9px;margin-top:10px}.backup-choice span>span{display:block;margin-top:2px}.backup-exact-action{margin-top:12px;padding:10px 12px;border-left:3px solid var(--maroon);background:var(--line-soft);font-size:13px}.tidy-flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tidy-flow{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:13px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-sm)}
@media(max-width:620px){.backup-panel-top{flex-direction:column}.backup-panel-top>.btn{width:100%;justify-content:center}.backup-status{flex-direction:column;gap:2px}.backup-secondary{grid-template-columns:1fr}.backup-secondary .subtle{margin-top:-5px}.backup-picker-tools{align-items:stretch;flex-direction:column}.backup-preview-grid,.tidy-flow-grid{grid-template-columns:1fr}.backup-dialog-actions>.btn{flex:1}.backup-dialog{max-width:calc(100vw - 24px)}}
.tidy-review-search{width:100%;margin:2px 0 12px}

/* Phase 52C — compact Settings price and catalog controls. */
.price-search,.catalog-search{display:flex;align-items:center;gap:8px;margin:10px 0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)}
.price-search svg,.catalog-search svg{width:15px;height:15px;color:var(--muted);flex:none}.price-search input,.catalog-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}
.price-row{padding:12px!important;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:color-mix(in srgb,var(--paper) 82%,transparent)}.price-row+.price-row{margin-top:8px}.price-row .nm{min-width:0}.price-row .k{overflow-wrap:anywhere}
@media(max-width:560px){.price-row{padding:10px!important}.price-row .ing{align-items:flex-start!important}.price-row .nm{width:100%}.price-row .nm+.subtle{align-self:flex-end}.price-row select,.price-row input{max-width:100%}.catalog-search{margin-bottom:8px}}

/* Phase 49A — Recipe Detail reading layout: two-column opening and ingredients beside steps on
   wide screens, a deliberate stack on phones, section jump links, and a quieter edit group. */
.detail-head{gap:8px}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detail-head>.detail-actions:first-of-type{margin-left:auto}
.detail-actions-edit{padding-left:10px;border-left:1px solid var(--line)}
.detail-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:16px}
.detail-hero .hero-img{margin:0;aspect-ratio:4/3;max-height:460px;height:auto}
.detail-hero .hero-img.photo-missing{min-height:180px}
.detail-hero-text{min-width:0}
.detail-hero .desc{max-width:65ch}
.detail-hero .spec{margin:16px 0 0;box-shadow:none}
.detail-current{margin-top:12px;font-size:13px;color:var(--ink-soft)}
.detail-current b{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}
.detail-source{margin-top:12px;font-size:12.5px;font-weight:600}
.detail-source a{color:var(--maroon)}
.detail-photo-note{font-size:12px;color:var(--ink-soft);margin-top:6px}
.detail-jump{position:sticky;top:var(--barh,60px);z-index:5;display:flex;gap:6px;overflow-x:auto;
  padding:8px 0;margin:0 0 4px;background:var(--ground);scrollbar-width:none}
.detail-jump a{flex:none;display:inline-flex;align-items:center;min-height:34px;border:1px solid var(--line);border-radius:999px;
  padding:4px 13px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper);text-decoration:none}
.detail-jump a:hover{border-color:var(--terra)}
.detail-jump a:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.detail-section{scroll-margin-top:calc(var(--barh,60px) + 58px)}
.detail-section:focus{outline:none}
.detail-view .variation-groups{margin:12px 0 18px}
.detail-facts,.detail-cook{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.detail-facts{margin-bottom:18px}
.detail-facts>.panel+.panel{margin-top:0}
.detail-col{min-width:0}
.detail-col-steps .step .t{max-width:72ch}
@media(min-width:900px){
  .detail-hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;padding:22px}
  .detail-facts:has(>:nth-child(2)){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}
@media(min-width:960px){.detail-cook:not(.detail-cook-single){grid-template-columns:minmax(330px,2fr) minmax(0,3fr)}}
@media(max-width:560px){
  .detail-head>.btn.ghost{padding-left:6px}
  .detail-head>.detail-actions:first-of-type{margin-left:0}
  .detail-actions{width:100%}
  .detail-actions-edit{padding-left:0;border-left:0;padding-top:8px;border-top:1px solid var(--line)}
  .detail-hero{padding:12px}
  .detail-hero .spec .s{padding:10px 12px}
}

/* Phase 60 — recipe search in the shared top bar. Desktop: an always-visible field between the
   brand and the nav (the brand's small subtitle yields its room below 1180px, keeping one row).
   Tablet and phone: a compact icon beside the AI badge that opens the field as its own
   full-width row (the .bar wraps, and syncFixedBars() re-measures it). */
.topsearch{flex:0 1 250px;min-width:150px;display:flex;align-items:center;gap:7px;margin:0;
  background:rgba(0,0,0,.16);border:1px solid color-mix(in srgb,var(--maroon-ink) 26%,transparent);border-radius:999px;padding:6px 12px;color:var(--maroon-ink)}
.topsearch:focus-within{outline:2px solid var(--maroon-ink);outline-offset:2px}
.topsearch-icon{line-height:0;opacity:.8}
#topsearch-input{flex:1;min-width:0;min-height:0;border:0;outline:0;box-shadow:none;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:13px;padding:0}
#topsearch-input::placeholder{color:var(--maroon-ink);opacity:.72}
.topsearch-toggle{display:none;position:relative;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);border-radius:999px;width:34px;height:34px;padding:0;align-items:center;justify-content:center;cursor:pointer;flex:none}
.topsearch-toggle:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.topsearch-toggle.has-query::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--maroon-ink);box-shadow:0 0 0 2px var(--maroon)}
.bar.topsearch-open .topsearch-toggle{background:var(--paper);color:var(--maroon)}.bar.topsearch-open .topsearch-toggle::after{display:none}
#topsearch-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:1180px){.brand .s{display:none}.topsearch{flex-basis:170px;min-width:140px}}
@media(max-width:1040px){.topsearch{display:none;order:4;flex:1 1 100%;min-width:0}.bar.topsearch-open .topsearch{display:flex}.topsearch-toggle{display:inline-flex}}
@media(max-width:560px){.topsearch-toggle{margin-left:auto}.topsearch-toggle~.ai-status-button{margin-left:0}}
/* Phase 58: Cookbook tidy-up wizard. One stage at a time; the header and actions stay put and the
   body is the dialog's only scroll area. Marked rows carry a label, a tint and struck-through text,
   so state never rests on color or strike-through alone; every choice stays clickable. */
.tidy-wizard{max-width:760px;padding:0;display:flex;flex-direction:column;overflow:hidden;max-height:min(860px,calc(100dvh - 40px))}
@media(max-width:559px){.tidy-back.modal-back{align-items:stretch}.tidy-wizard{height:100dvh;max-height:100dvh;border-radius:0}}
.tw-head{flex:none;padding:16px 22px 12px;border-bottom:1px solid var(--line-soft)}
.tw-head-row{display:flex;align-items:center;gap:10px}
.tw-eyebrow{flex:1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:700}
.tw-progress-text{font-size:13px;color:var(--ink-soft);margin:6px 0 8px;font-weight:600}
.tw-steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.tw-steps li{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);min-width:0}
.tw-steps li::before{content:"";height:4px;border-radius:999px;background:var(--line)}
.tw-steps li.done::before{background:color-mix(in srgb,var(--maroon) 50%,var(--line))}
.tw-steps li.current::before{background:var(--maroon)}
.tw-steps li.current{color:var(--ink);font-weight:700}
.tw-steps li.skipped::before{height:0;border-top:3px dotted var(--line);background:none;margin-top:1px}
.tw-body{flex:1;min-height:0;overflow:auto;padding:18px 22px 24px;overscroll-behavior:contain}
.tw-title{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 4px;text-wrap:balance}
.tw-title:focus{outline:none}.tw-title:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:4px}
.tw-lede{color:var(--ink-soft);margin:0 0 14px;max-width:62ch}
.tw-foot{flex:none;border-top:1px solid var(--line-soft);padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;background:var(--paper)}
.tw-foot .spacer{flex:1}.tw-foot .btn{min-height:40px}
.tw-count{font-size:12.5px;color:var(--muted);font-family:var(--num)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--terra)}
@media(max-width:559px){.tw-head,.tw-body,.tw-foot{padding-left:16px;padding-right:16px}.tw-steps li span{display:none}.tw-count{display:none}.tw-foot{gap:6px}.tw-foot .btn{padding-left:12px;padding-right:12px}}
.tw-rows{display:grid;gap:10px}
.tw-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--paper);display:grid;gap:8px;min-width:0}
.tw-row.marked{background:color-mix(in srgb,var(--tan) 45%,var(--paper));border-color:color-mix(in srgb,var(--maroon) 30%,var(--line))}
.tw-row-top{display:flex;gap:6px 10px;align-items:baseline;flex-wrap:wrap}
.tw-row-text{flex:1;min-width:min(200px,100%);font-weight:600;overflow-wrap:anywhere}
.tw-row.marked .tw-row-text{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink-soft)}
.tw-state{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);max-width:100%;overflow-wrap:anywhere}
.tw-row.marked .tw-state{border-color:var(--maroon);color:var(--maroon)}
.tw-state.conflict,.tw-row.marked .tw-state.conflict{border-color:var(--crit);color:var(--crit)}
.tw-meta{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.tw-note{margin:0 0 10px}
.tw-internal{font-style:italic}
.tw-src{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-right:6px;color:var(--ink-soft)}
.tw-choices{display:flex;flex-wrap:wrap;gap:6px}
.tw-choice{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;font-size:13.5px;cursor:pointer;font-weight:600;color:var(--ink);text-align:left;max-width:100%;overflow-wrap:anywhere}
.tw-choice:hover{border-color:var(--maroon)}
.tw-choice[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:var(--maroon-ink)}
.tw-choice[aria-pressed="true"]::before{content:"✓ "}
.tw-choice:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.tw-readas{display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;font-size:14px}
.tw-readas>span:not([aria-hidden]){flex:1;min-width:130px}
.tw-result{font-size:13px;padding:8px 10px;border-radius:8px;background:var(--ground)}
.tw-review-box{border:1px solid var(--crit);border-radius:8px;padding:10px 12px;display:grid;gap:8px;background:color-mix(in srgb,var(--crit) 6%,var(--paper))}
.tw-conflict{border:0;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.tw-conflict legend{font-weight:600;font-size:13.5px;padding:0;margin-bottom:2px}
.tw-conflict label{display:flex;gap:8px;align-items:baseline;font-size:13.5px;cursor:pointer;overflow-wrap:anywhere}
.tw-amount-line{display:grid;gap:6px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--crit) 25%,var(--line))}
.tw-amount-controls{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.tw-amount-controls select{font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.tw-more{margin-top:12px}.tw-more>summary{cursor:pointer;font-weight:600;color:var(--ink-soft);padding:6px 0}
.tw-more>.tw-rows{margin-top:6px}
.tw-notice{border-left:3px solid var(--terra);padding:6px 10px;background:color-mix(in srgb,var(--terra) 8%,var(--paper));font-size:13px;border-radius:0 8px 8px 0;margin:0 0 12px}
.tw-notice.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 9%,var(--paper))}
.tw-stage-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.tw-stage-list li{display:flex;gap:12px;align-items:flex-start}
.tw-stage-num{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--num);font-size:12px;color:var(--maroon);font-weight:700}
.tw-sum{display:grid;gap:14px}
.tw-sum section{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.tw-sum section.tw-blockers{border-color:var(--crit)}
.tw-sum h3{margin:0 0 6px;font-size:15px}
.tw-sum ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px}
.tw-sum details>summary{cursor:pointer;font-weight:700;font-size:15px}
.tw-apply-box{border:2px solid var(--maroon);border-radius:var(--r-sm);padding:12px 14px;display:grid;gap:6px}
.tw-apply-box h3{margin:0;font-family:var(--serif);font-weight:400;font-size:18px}
.tw-caution{font-size:12.5px;color:var(--warn);font-weight:600}.tw-caution::before{content:"⚠ "}
.tidy-quit-back.modal-back{align-items:center;justify-content:center;padding:20px;z-index:78}
.tidy-quit-sheet{max-width:520px;border-radius:18px}
.tidy-quit-sheet h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.tidy-quit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:flex-end}.tidy-quit-actions .btn{flex:1;min-height:42px}
@media (prefers-reduced-motion:no-preference){.tw-choice,.tw-row{transition:background-color .12s,border-color .12s}}
.tw-method-wrap{display:grid;gap:10px;margin:4px 0 14px}
.tw-method{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:999px;padding:3px;max-width:520px}
.tw-method button{border:0;background:none;border-radius:999px;padding:7px 8px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);font-family:inherit}
.tw-method button[aria-pressed="true"]{background:var(--maroon);color:var(--maroon-ink)}
.tw-method button:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.tw-ai-box{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--ground);display:grid;gap:8px}
.tw-ai-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tw-ai-row>.tw-notice{flex:1;margin:0;min-width:min(240px,100%)}
.tw-paste{width:100%;min-height:84px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:8px;font:12.5px/1.45 ui-monospace,Menlo,monospace;resize:vertical}
.tw-sugg{font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--ink-soft)}
.tw-ai-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--terra);color:var(--terra);border-radius:999px;padding:1px 7px}
@media(max-width:559px){.tw-method button{font-size:12.5px;padding:7px 4px}}

.sa-quote-report,.sa-staged-quotes{overflow-wrap:anywhere}.sa-quote-report ul{margin:.5rem 0;padding-left:1.2rem}.sa-staged-quotes>div{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.sa-staged-quotes li{flex:1;min-width:0}.sa-staged-quotes button{flex-shrink:0}

/* Cookbook-used sale entry */
.sa-sale-form form{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.sa-sale-form label{display:flex;flex-direction:column;gap:6px}.sa-sale-form input,.sa-sale-form select{width:100%;min-width:0;box-sizing:border-box}.sa-sale-review li{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.sa-sale-search,.sa-sale-form,.sa-sale-review{overflow-wrap:anywhere;min-width:0}@media(max-width:600px){.sa-sale-form form{grid-template-columns:1fr}}

/* Audited shared-dialog focus and scroll support */
body.shared-dialog-open{overflow:hidden}.shared-dialog-back .modal{overscroll-behavior:contain}.shared-dialog-back .modal h2,.shared-dialog-back .modal h3{overflow-wrap:anywhere}@media(max-width:559px){.shared-dialog-back:not(.sa-quit-back):not(.tidy-quit-back)>.modal:not(.sa-modal):not(.tidy-wizard):not(.plan-modal){max-width:100%;max-height:calc(100dvh - 8px)}}

/* Receipt review */
#receipt-back .receipt-header{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:640px){#receipt-back .receipt-header{grid-template-columns:1fr}}#receipt-back .receipt-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:8px}#receipt-back input,#receipt-back select,#receipt-back textarea{max-width:100%;box-sizing:border-box;min-width:0}#receipt-back input[type=checkbox]{width:auto}#receipt-back [id^=receipt-line-]{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}#receipt-back .rc-actions{display:flex;flex-wrap:wrap;gap:8px}
#receipt-back .rc-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}#receipt-back .rc-suggest-btn{border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:var(--r-sm);padding:4px 10px;font-size:13px;cursor:pointer}#receipt-back .rc-suggest-btn:disabled{opacity:.5;cursor:default}
#receipt-back .rc-remembered{display:inline-block;margin-top:8px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--tan);color:var(--maroon-ink);font-size:12px;font-weight:600;cursor:help}

#receipt-back #receipt-lines-panel { max-height: min(50vh, 480px); max-height: min(50dvh, 480px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }

/* Sous-chef chat window (Phase 62, task 006) */
.souschef-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--maroon);font-size:20px;line-height:1;padding:0;cursor:pointer;display:grid;place-items:center}
.souschef-btn:hover{background:var(--tan)}
.souschef-btn:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.souschef-dock{display:flex;justify-content:flex-end;margin-top:20px}
@keyframes souschef-wiggle{0%{transform:rotate(-12deg)}35%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
.souschef-btn.wiggle{animation:souschef-wiggle .7s ease;transform-origin:bottom center}
/* Hover uses its own keyframes name: in Cook mode the button keeps .wiggle after its opening wiggle, and a
   browser won't restart an animation whose name hasn't changed — a separate name makes every hover wiggle. */
@keyframes souschef-wiggle-hover{0%{transform:rotate(-12deg)}35%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:no-preference){.souschef-btn:hover{animation:souschef-wiggle-hover .7s ease;transform-origin:bottom center}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#souschef{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(360px, calc(100vw - 32px));max-height:70vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.2);z-index:80}
.souschef-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.souschef-head span{font-weight:700;font-size:14px}
.souschef-head button.close{border:0;background:none;color:var(--ink);font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:var(--r-sm)}
.souschef-head button.close:hover{background:var(--tan)}
.souschef-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;overscroll-behavior:contain}
.souschef-msg{max-width:85%;padding:8px 11px;border-radius:var(--r-sm);font-size:14px;line-height:1.45;display:flex;align-items:flex-start;gap:7px}
.souschef-msg-chef{align-self:flex-start;background:var(--ground);border:1px solid var(--line)}
.souschef-msg-cook{align-self:flex-end;background:var(--maroon);color:var(--maroon-ink)}
.souschef-avatar{flex-shrink:0;color:var(--maroon);line-height:0}
.souschef-msg{flex-wrap:wrap}.souschef-msg>span:not(.souschef-avatar):not(.souschef-sim){flex:1;min-width:0}
.souschef-msg .souschef-actions{flex-basis:100%}
#souschef form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
#souschef input{flex:1;min-width:0;background:var(--ground);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font:inherit}
#souschef input::placeholder{color:var(--ink-soft)}
#souschef form button{border:1px solid var(--maroon);background:var(--maroon);color:var(--maroon-ink);border-radius:var(--r-sm);padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.souschef-sim{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--tan);color:var(--ink);border-radius:999px;padding:2px 7px;flex-shrink:0;align-self:center}
.souschef-loading{font-style:italic}
.souschef-error{color:var(--terra)}
/* 330a + 340a: sous-chef thinking, thought bubble v2 A (docs/design/souschef-thinking-notes.md "Version 2"). No chat box: a 34px Little Chef, two round puffs and an oval cloud on one diagonal. Transform only. */
.souschef-msg.souschef-thinking{background:none;border:0;padding:0;height:90px;align-items:flex-end;gap:0;flex-wrap:nowrap;max-width:100%}
.souschef-thinking .souschef-avatar{margin:0 0 2px 4px}
.souschef-thinking .souschef-avatar svg.chef-mark{width:34px;height:34px}
.souschef-thinking .souschef-loading{display:flex;align-items:flex-end}
.sc-thought{display:flex;align-items:flex-end;color:var(--maroon);flex:none}
.sc-puff{display:block;border-radius:50%;border:1.6px solid currentColor;background:var(--paper);flex:none;transform-origin:0 100%}
.sc-puff.p1{width:6px;height:6px;margin:0 3px 25px -5px}
.sc-puff.p2{width:10px;height:10px;margin:0 0 33px 0}
.sc-cloud{position:relative;display:block;flex:none;width:86px;height:58px;margin:0 0 30px -5px;transform-origin:0 100%}
.sc-cloud svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-cloud path{fill:var(--paper);stroke:currentColor;stroke-width:1.6}
.sc-ico{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-11px 0 0 -12px;color:var(--maroon)}
.sc-ico svg{position:absolute;inset:0;width:26px;height:26px;transform:scale(0);transform-origin:center}
.sc-ico svg:first-child{transform:none}
.sc-ico path,.sc-ico circle{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .souschef-thinking .sc-puff,.souschef-thinking .sc-cloud{animation:sc-cloud 3.2s ease-in-out infinite;transform:scale(0)}
  .souschef-thinking .sc-puff.p2{animation-delay:.25s}
  .souschef-thinking .sc-cloud{animation-delay:.5s}
  .souschef-thinking .sc-ico svg{animation:sc-ico-5 16s step-end infinite;transform:scale(0)}
  .souschef-thinking .sc-ico .steam{animation:sc-steam 1.2s ease-in-out infinite;transform-box:fill-box}
  .souschef-thinking .sc-ico g,.souschef-thinking .sc-ico .stir{transform-box:view-box}
  .souschef-thinking .sc-ico .wob{animation:sc-wob .7s ease-in-out infinite alternate;transform-origin:12px 21.5px}
  .souschef-thinking .sc-ico .egg{animation:sc-sizzle .5s ease-in-out infinite alternate;transform-origin:10px 13.5px}
  .souschef-thinking .sc-ico .chop{animation:sc-chop .8s ease-in-out infinite;transform-origin:21px 12px}
  .souschef-thinking .sc-ico .stir{animation:sc-stir 1s ease-in-out infinite alternate;transform-origin:13.5px 11.5px}
  .souschef-thinking .chef-mark path:nth-of-type(4){animation:sc-glance 4s ease-in-out infinite;transform-box:view-box}
  .souschef-thinking .souschef-avatar svg.chef-mark{animation:sc-tilt 4s ease-in-out infinite;transform-origin:50% 80%}
  .souschef-msg.sc-arrive{animation:sc-pop .32s cubic-bezier(.2,.9,.3,1.35);transform-origin:left center}
  .souschef-msg.sc-arrive .souschef-avatar{animation:sc-hop .45s .05s ease-out}
  .souschef-msg.sc-oops{animation:sc-shake .42s ease-in-out}
}
@keyframes sc-cloud{0%{transform:scale(0)}9%{transform:scale(1.18)}14%,62%{transform:scale(1)}70%,100%{transform:scale(0)}}
@keyframes sc-ico-5{0%{transform:scale(1)}20%,100%{transform:scale(0)}}
@keyframes sc-steam{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes sc-wob{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes sc-sizzle{from{transform:scale(.92)}to{transform:scale(1.08)}}
@keyframes sc-chop{0%,40%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}}
@keyframes sc-stir{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes sc-glance{0%,55%,100%{transform:translate(0,0)}65%,90%{transform:translate(1px,-1.6px)}}
@keyframes sc-tilt{0%,55%,100%{transform:rotate(0)}65%,90%{transform:rotate(-5deg)}}
@keyframes sc-pop{from{transform:scale(.94)}}
@keyframes sc-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@keyframes sc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
.souschef-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.souschef-actions .souschef-site{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r-sm);padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.souschef-actions .souschef-site:hover{background:var(--tan)}
.souschef-actions details{width:100%;font-size:12.5px;margin-top:2px}
.souschef-prompt{width:100%;min-height:88px;margin-top:6px;font:inherit;font-size:12px;background:var(--ground);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;resize:vertical}
@media(max-width:560px){#souschef{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px))}}

/* Accounts sign-in / change-password screens (docs/design/accounts-v1.md §5) */
.ac-overlay{position:fixed;inset:0;z-index:90;background:var(--ground);display:grid;place-items:center;padding:16px;overflow-y:auto}
.ac-card{width:min(380px,100%);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px 20px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.ac-mark{color:var(--maroon);display:flex;justify-content:center;line-height:0}
.ac-title{font-family:var(--serif);font-size:24px;text-align:center;margin:8px 0 4px}
.ac-sub{text-align:center;color:var(--ink-soft);margin:0 0 16px;font-size:14px}
.ac-tabs{display:flex;gap:6px;margin-bottom:14px}.ac-tabs button{flex:1;border:1px solid var(--line);background:var(--ground);color:var(--ink);border-radius:var(--r-sm);padding:8px;font:inherit;cursor:pointer}
.ac-tabs button.on{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.ac-form{display:flex;flex-direction:column;gap:10px}.ac-form[hidden]{display:none}
.ac-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}
.ac-form input{font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);min-width:0}
.ac-msg{min-height:1.2em;margin:0;font-size:13px;color:var(--terra)}.ac-msg:empty{min-height:0}
.ac-actions{display:flex;justify-content:flex-end}
.account-panel .ac-actions{gap:8px}
.ac-rename{max-width:320px;margin-top:16px}
.ac-rename-actions{display:flex;justify-content:flex-end}
/* Users panel (task 013a, contract §4 admin endpoints) */
.users-sub{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:18px 0 8px}
.users-pending,.users-accounts{display:flex;flex-direction:column;gap:8px}
.users-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)}
.users-name{font-weight:600}
.users-role{padding:4px 8px;font-size:13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.users-status,.users-last{font-size:13px;color:var(--ink-soft)}
.users-toggle{margin-left:auto}
.users-delete.users-armed{font-weight:600}
/* Users panel — add account & reset password (task 013b, contract §4) */
.users-add{display:flex;flex-direction:column;gap:10px;max-width:420px}
.users-add label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}
.users-add input,.users-add select{font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);min-width:0}
.users-add-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.users-check{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink-soft)}
.users-reset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.users-reset[hidden]{display:none}
.users-reset input[type="password"]{font-size:15px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.users-add-msg,.users-reset-msg{width:100%}
/* Households (task 029a shell, contract §7) */
.hh-panel .hh-name{font-family:var(--serif);font-size:18px;margin:2px 0}
.hh-create{max-width:320px;margin-top:6px}
.hh-members{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.hh-member{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);font-size:14px}
/* Households — owner controls (task 029b, contract §7) */
.hh-member{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hh-role{font-size:13px;padding:4px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.hh-remove{margin-left:auto}
.hh-remove.hh-remove-armed{font-weight:600}
.hh-invite-box{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.hh-invite{max-width:320px}
.hh-pending{display:flex;flex-direction:column;gap:6px}
.hh-pending-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);font-size:14px}
.hh-revoke{margin-left:auto}
/* Households — leave & delete (task 029c, contract §7) */
.hh-leave,.hh-delete{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.hh-leave-confirm[hidden],.hh-delete-confirm[hidden]{display:none}
.hh-copy-list{display:flex;flex-direction:column;gap:6px;max-width:320px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)}
.hh-delete-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:420px}
.hh-delete-confirm input{font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);color:var(--ink)}
/* Task 030: household notices (#household-notices) — invitation + unhoused banners above #app */
#household-notices{display:flex;flex-direction:column;gap:12px;width:min(640px,100%);margin:0 auto 18px}
.hh-notice{padding:14px 16px}
.hh-notice-title{font-weight:700;font-size:15px;margin-bottom:6px}
.hh-unhoused .hh-notice-title{color:var(--terra)}
.hh-notice-msg{min-height:0}
.hh-copy-list[hidden]{display:none}
.hh-notice-count{font-size:13px;color:var(--muted);margin-top:2px}
/* Task 031: activity bell (contract §6–§7) — top-bar bell + unread badge + feed panel */
.activity-bell{position:relative;border:0;background:transparent;padding:6px;border-radius:6px;cursor:pointer;color:inherit;display:flex;align-items:center}
.activity-bell:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.activity-badge{min-width:17px;height:17px;padding:0 4px;margin-left:3px;border-radius:999px;background:var(--paper);color:var(--maroon);font-family:var(--num);font-size:11px;font-weight:700;line-height:17px;text-align:center}
.activity-badge[hidden]{display:none}
.activity-panel{position:fixed;top:58px;right:max(16px,env(safe-area-inset-right));z-index:30;width:min(340px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px 16px}
.activity-title{font-family:var(--serif);font-size:17px;margin:0 0 8px}
.activity-list{display:flex;flex-direction:column;gap:8px}
.activity-line{display:flex;align-items:baseline;gap:6px;font-size:14px;line-height:1.35}
.activity-time{color:var(--muted);white-space:nowrap;font-family:var(--num)}
/* Design language (2026-09-28) — reusable building blocks from docs/design/new-recipe-chooser-notes.md.
   Not used on any screen yet (task 041 adds the pieces only; 042+ wires them in). */
:root{
  --maroon-ledge:color-mix(in srgb,var(--maroon) 68%,#000);
  --halo:color-mix(in srgb,var(--tan) 70%,var(--paper));
  --brass:#d8a94a; --brass-ink:#2c1f0a;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --maroon-ledge:color-mix(in srgb,var(--maroon) 55%,#000);
  --halo:color-mix(in srgb,var(--tan) 75%,var(--paper));
  --brass:#d9b25e; --brass-ink:#241012;
}}
:root[data-theme="dark"]{
  --maroon-ledge:color-mix(in srgb,var(--maroon) 55%,#000);
  --halo:color-mix(in srgb,var(--tan) 75%,var(--paper));
  --brass:#d9b25e; --brass-ink:#241012;
}
/* Chunky primary button (Duolingo-style): a solid 4px ledge underneath that disappears when pressed. */
.btn.chunky{border:0;border-radius:16px;padding:14px 20px;font-weight:800;font-size:16px;letter-spacing:.01em;background:var(--maroon);color:var(--maroon-ink);box-shadow:0 4px 0 var(--maroon-ledge);transform:translateY(0);transition:transform .07s ease,box-shadow .07s ease,filter .15s;display:flex;align-items:center;justify-content:center;gap:8px}
@media (hover:hover) and (pointer:fine){.btn.chunky:hover{filter:brightness(1.07)}}
.btn.chunky:active,.btn.chunky.is-pressed{transform:translateY(4px);box-shadow:0 0 0 var(--maroon-ledge)}
.btn.chunky:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.btn.chunky.ghost{background:var(--paper);color:var(--ink-soft);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);padding:12px 18px}
.btn.chunky.ghost:active,.btn.chunky.ghost.is-pressed{box-shadow:0 0 0 var(--line)}
.btn.chunky svg{width:18px;height:18px}
.btn.chunky:disabled,.btn.chunky[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--maroon-ledge)}
/* Segmented selector: .nav's track + pill, icon above each label, a paper thumb sliding between options. */
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(0,0,0,.16);border-radius:20px;padding:4px;border:0;margin:0;min-width:0}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg-thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:16px;background:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.14);transition:transform .28s cubic-bezier(.34,1.4,.64,1),width .28s ease;will-change:transform}
.seg-thumb.no-anim{transition:none}
.seg-opt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px 8px;border-radius:16px;color:var(--maroon-ink);opacity:.78;font-weight:600;font-size:12.5px;line-height:1.15;text-align:center;cursor:pointer;user-select:none;transition:color .15s,opacity .15s}
.seg-opt:hover{opacity:1}
.seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg-opt:has(input:checked){color:var(--maroon);opacity:1}
.seg-opt:has(input:focus-visible){outline:2px solid var(--maroon-ink);outline-offset:2px}
/* Hero icon: a big line icon on a soft tan disc with a dashed ring. */
.hero-ring{position:relative;width:148px;height:148px;margin:0 auto 12px;display:grid;place-items:center}
.hero-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--halo)}
.hero-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed color-mix(in srgb,var(--maroon) 22%,transparent)}
.hero-icon{position:relative;width:112px;height:112px;color:var(--maroon);display:grid;place-items:center}
.hero-icon svg{width:100%;height:100%;display:block}
/* Reassurance chips: small pills that answer "what am I getting into?" */
.note-chips{display:flex;justify-content:center;gap:6px;margin:12px 0 0;flex-wrap:wrap}
.note-chips>*{font-family:var(--num);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
/* Brass "RECOMMENDED" pill — muted brass for small guidance highlights. */
.badge-brass{display:inline-block;white-space:nowrap;background:var(--brass);color:var(--brass-ink);font-family:var(--num);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:999px;box-shadow:0 2px 0 color-mix(in srgb,var(--brass) 62%,#000);line-height:1.5}
@media (prefers-reduced-motion:reduce){.btn.chunky,.seg-thumb,.seg-opt{transition:none}}
/* Recipe chooser (task 042): maroon header band + hero + chunky actions on the .modal shell. */
.rc-sheet{padding:0}
.rc-head{background:var(--maroon);color:var(--maroon-ink);padding:16px 16px 20px}
.rc-head-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.rc-head-top h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:22px;line-height:1.1;margin:0;margin-right:auto}
.rc-close{width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);display:grid;place-items:center;flex:none;padding:0}
.rc-close svg{width:16px;height:16px;display:block}
.rc-close:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.seg-opt .badge-brass{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none}
.rc-main{padding:18px 20px 22px;text-align:center}
.rc-choice-title{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:0 0 6px}
.rc-choice-line{margin:0 auto;max-width:34ch;color:var(--ink-soft);font-size:15px}
@media(max-width:560px){.rc-sheet .hero-ring{width:124px;height:124px;margin-bottom:8px}.rc-sheet .hero-icon{width:94px;height:94px}.rc-choice-title{font-size:22px}}
.rc-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
@media(min-width:560px){.rc-actions{flex-direction:row-reverse}.rc-actions>*{flex:1}}
/* Chooser motion (task 043): hero pop, three sparkles, chosen segment icon bounce. JS applies the classes on change; all off under reduced motion. */
@keyframes rcPop{0%{transform:scale(.5) rotate(-10deg);opacity:0}55%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes rcSpark{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.9) translateY(-4px)}}
@keyframes rcTick{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:none}}
.hero-icon.rc-pop{animation:rcPop .46s cubic-bezier(.34,1.56,.64,1) both}
.seg-ico.rc-tick{animation:rcTick .36s cubic-bezier(.34,1.56,.64,1)}
.rc-spark{position:absolute;width:16px;height:16px;color:var(--terra);opacity:0;pointer-events:none;animation:rcSpark .6s ease-out both}
.rc-spark svg{width:100%;height:100%;display:block}
.rc-spark.s1{top:10px;right:6px}.rc-spark.s2{bottom:18px;left:0;animation-delay:.06s}.rc-spark.s3{top:30px;left:4px;width:11px;height:11px;animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.hero-icon.rc-pop,.seg-ico.rc-tick,.rc-spark{animation:none}}
/* Kitchen setup wizard (task 044): mandatory first-run dialog, a centered card at every width
   over the app. Reuses the case 8 blocks (.btn.chunky, .note-chips) — only wizard-specific pieces here. */
#kitchen-setup{position:fixed;inset:0;z-index:120;background:var(--ground);display:grid;place-items:center;padding:16px;overflow-y:auto}
.ks-card{width:min(520px,100%);background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden}
.ks-head{background:var(--maroon);color:var(--maroon-ink);padding:14px 18px 16px}
.ks-brand{display:block;font-family:var(--serif);font-style:italic;font-size:15px;opacity:.9;margin-bottom:10px}
.ks-prog{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.ks-prog i{position:relative;height:12px;border-radius:999px;background:rgba(0,0,0,.2);overflow:hidden}
.ks-prog i::after{content:"";position:absolute;inset:0;width:0;border-radius:999px;background:var(--paper);transition:width .45s cubic-bezier(.34,1.3,.64,1)}
.ks-prog i.done::after{width:100%}
.ks-prog i.cur::after{width:55%}
.ks-prog-text{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-family:var(--num);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ks-body{padding:22px 20px 6px;text-align:center}
.ks-body h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:0 0 8px;outline:none}
.ks-actions{display:flex;justify-content:center;padding:8px 20px 22px}
@media (prefers-reduced-motion:reduce){.ks-prog i::after{transition:none}}
/* Kitchen setup wizard steps 1-2 (task 045): servings stepper, meal tiles, protein/dislike chips, spice segment. */
.ks-body .subtle{margin:0 0 4px}
.ks-block{margin:18px 0;text-align:left}
.ks-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px;font-size:13.5px}
.ks-lbl b{font-weight:700;color:var(--ink)}
.ks-lbl>span{font-family:var(--num);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ks-lbl .opt{color:var(--terra)}
.ks-stepper{display:flex;align-items:center;justify-content:center;gap:12px}
.ks-fewer,.ks-more{width:54px;height:54px;padding:0;border-radius:18px}
.ks-count{text-align:center;min-width:72px}
.ks-count b{display:block;font-family:var(--num);font-size:30px;font-weight:800;line-height:1;color:var(--ink)}
.ks-unit{font-size:12px;color:var(--muted)}
.ks-plates{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;min-height:22px}
.ks-plate{width:20px;height:20px;display:inline-flex;color:var(--maroon);opacity:.8}
.ks-plate svg{width:100%;height:100%}
@keyframes ksPop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:none}}
.ks-plate.pop{animation:ksPop .32s cubic-bezier(.34,1.56,.64,1)}
.ks-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ks-meal{padding:14px 8px;font-size:14px;border-radius:16px}
.ks-meal[aria-pressed="true"]{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon);box-shadow:0 4px 0 var(--maroon-ledge)}
.ks-chips{display:flex;flex-wrap:wrap;gap:8px}
.ks-prot,.ks-dis{padding:8px 14px;font-size:13px;border-radius:999px;box-shadow:0 3px 0 var(--line)}
.ks-prot[aria-pressed="true"],.ks-dis[aria-pressed="true"]{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon);box-shadow:0 3px 0 var(--maroon-ledge)}
.ks-x{margin-left:6px;font-weight:800;opacity:.7}
.ks-spice{grid-template-columns:repeat(4,1fr)}
.ks-chilis{display:flex;gap:2px;color:var(--terra)}
.ks-chilis svg{width:13px;height:15px;display:block}
.ks-add{display:flex;gap:8px;margin-top:10px}
.ks-field{flex:1;min-width:0;border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px;background:var(--paper);color:var(--ink)}
.ks-field:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px color-mix(in srgb,var(--terra) 25%,transparent)}
.ks-err{min-height:18px;margin:8px 0 0;font-size:13px;font-weight:600;color:var(--crit)}
@media (prefers-reduced-motion:reduce){.ks-plate.pop{animation:none}}
/* Kitchen setup steps 5–7 (tasks 047–048): chips, radios, summary, invitation card, Saved screen. */
.ks-q{margin-top:14px}
.ks-radios{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0}
.ks-radio{font:inherit;padding:9px 14px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--line)}
.ks-radio.on{border-color:var(--maroon);background:var(--maroon);color:var(--maroon-ink);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ks-radio:focus-visible,.ks-chip-x:focus-visible,.ks-edit:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.ks-chip-editor{margin:8px 0}
.ks-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:8px}
.ks-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--tan);color:var(--ink);animation:ks-pop .28s cubic-bezier(.34,1.5,.64,1) backwards}
.ks-chip-x{font:inherit;border:0;background:transparent;color:inherit;cursor:pointer;width:24px;height:24px;border-radius:50%}
.ks-add{display:flex;gap:8px;justify-content:center;margin-top:10px}
.ks-add-input{font:inherit;padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);min-width:0;flex:1;max-width:260px}
.ks-nav{gap:10px}
.ks-sum{display:grid;gap:10px;text-align:left;margin:12px 0}
.ks-sum-card{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;animation:ks-rise .3s ease-out backwards}
.ks-sum-head{font-weight:600;margin-bottom:2px}
.ks-sum-line{font-size:14px;opacity:.85}
.ks-invite{margin:10px 0;padding:12px 14px;border-radius:14px;border:2px solid #d8a94a;background:rgba(216,169,74,.14);text-align:left}
.ks-truth{margin:8px 0 0}
.ks-error{color:var(--terra);font-weight:600}
.ks-saved{position:relative;overflow:hidden}
.ks-confetti{position:absolute;inset:0;pointer-events:none}
.ks-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:ks-fall 1.6s ease-in backwards}
@keyframes ks-pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes ks-rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes ks-fall{from{transform:translateY(0) rotate(0)}to{transform:translateY(420px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.ks-chip,.ks-sum-card,.ks-confetti i{animation:none}}
/* Kitchen setup steps 3–4 (task 046) */
.ks-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ks-units{margin:6px auto;max-width:360px}
.ks-budget-input{margin:10px auto 0;display:block;max-width:180px}
.ks-place .ks-zip{max-width:96px}
.ks-per-meal,.ks-unit-preview{margin:6px 0 0}
/* Kitchen setup: the case 8 .seg is styled for the maroon chooser header — on the wizard's paper card,
   options use ink text and the checked one fills maroon (dark-theme contrast fix). */
.ks-body .seg{background:rgba(127,127,127,.14)}
.ks-spice.seg{grid-template-columns:repeat(4,1fr)}
.ks-units.seg{grid-template-columns:repeat(2,1fr)}
.ks-body .seg-opt{color:var(--ink);opacity:.85}
.ks-body .seg-opt:has(input:checked){background:var(--maroon);color:var(--maroon-ink);opacity:1}
.ks-body .seg-opt:has(input:focus-visible){outline:3px solid var(--terra)}
.ks-lbl .opt{margin-left:6px}

/* Nav tabs (2026-09-28) — task 050: six icon+label tabs; Admin set apart by a divider; phone puts the icon above the label. */
.nav button{display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav button svg{width:18px;height:18px;flex:none}
.nav-admin{border-left:1px solid rgba(255,255,255,.22);margin-left:4px;padding-left:13px;border-radius:0 999px 999px 0}
@media(max-width:480px){
.nav{order:5;width:100%;border-radius:18px;padding:4px}
.nav button{flex:1;flex-direction:column;gap:3px;padding:7px 2px 6px;font-size:10.5px;border-radius:14px;min-width:0}
.nav button svg{width:22px;height:22px}
.nav-admin{border-left:0;margin-left:0;padding-left:2px;border-radius:14px}
}
/* Admin page (task 051): Users · Audit log · Developer — .seg tabs, audit rows, developer panel. No new motion; .seg/.btn.chunky rules already cover reduced-motion. */
.admin-seg{max-width:460px;margin:0 0 18px}
.admin-audit-row{padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-soft)}
.admin-build{font-family:var(--num);font-weight:700;font-size:14px;letter-spacing:.02em;margin:0 0 14px}
.admin-status-row{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.admin-status-k{flex:0 0 96px;color:var(--muted)}
.admin-status-v{color:var(--ink-soft);word-break:break-word}
/* Household page (2026-09-28): header card, tabs, hero (task 058). Move/scale-only entrances, off under reduced motion. */
.hhp-embedded .hh-panel{border:0;box-shadow:none;background:none;padding:0}
.hhp-embedded .hh-panel>h2,.hhp-embedded .hh-body>p.hh-name,.hhp-embedded .hh-body>p.sub{display:none}
.hhp-embedded .hh-create{max-width:none}
.hhp-page{display:grid;gap:14px;align-content:start}
.hhp-head{display:flex;align-items:center;gap:14px;background:var(--maroon);color:var(--maroon-ink);border-radius:20px;padding:16px 18px;animation:hhpRise .4s cubic-bezier(.34,1.3,.64,1) backwards}
.hhp-head-main{flex:1;min-width:0}
.hhp-name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.1;margin:0;overflow-wrap:anywhere}
.hhp-sub{margin:4px 0 0;font-size:13px;opacity:.9}
.hhp-stack{display:flex;flex:none}
.hhp-av{display:grid;place-items:center;width:34px;height:34px;margin-left:-8px;border-radius:999px;border:2px solid var(--maroon);background:var(--c,var(--muted));color:#fff;font-weight:800;font-size:14px}
.hhp-av:first-child{margin-left:0}
.hhp-seg{display:flex;gap:2px;background:var(--maroon);border-radius:999px;padding:4px}
.hhp-seg-opt{flex:1;border:0;background:transparent;color:var(--maroon-ink);opacity:.8;padding:9px 12px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.hhp-seg-opt[aria-checked="true"]{background:var(--paper);color:var(--maroon);opacity:1}
.hhp-seg-opt:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.hhp-panel{margin-top:14px;animation:hhpRise .3s cubic-bezier(.34,1.3,.64,1) backwards}
.hhp-panel[hidden]{display:none}
.hhp-hero{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px 20px 24px;display:grid;justify-items:center;gap:10px}
.hhp-hero-ico{display:grid;place-items:center;width:112px;height:112px;border-radius:999px;background:var(--halo);color:var(--maroon);animation:hhpPop .46s cubic-bezier(.34,1.56,.64,1) backwards}
.hhp-hero-ico svg{width:76px;height:76px;display:block}
.hhp-hero-title{font-family:var(--serif);font-weight:400;font-size:28px;margin:4px 0 0}
.hhp-hero-line{margin:0;max-width:40ch;color:var(--ink-soft)}
.hhp-create-slot{width:min(420px,100%);text-align:left}
.hhp-wait{margin:6px 0 0}
@keyframes hhpRise{from{transform:translateY(10px)}to{transform:none}}
@keyframes hhpPop{from{transform:scale(.6) rotate(-8deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.hhp-head,.hhp-panel,.hhp-hero-ico{animation:none}}
/* Household page: Members tab (task 059). */
.hhp-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px 16px 12px;margin-bottom:14px}
.hhp-card h3{font-family:var(--serif);font-size:20px;margin:0}
.hhp-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hhp-card-line{margin:4px 0 8px;color:var(--ink-soft);font-size:14px}
.hhp-mem{list-style:none;margin:0;padding:0}
.hhp-member{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap}
.hhp-member+.hhp-member{border-top:1px solid var(--line-soft)}
.hhp-member .hhp-av{margin-left:0;width:40px;height:40px;border-color:var(--paper);flex:none}
.hhp-nm{flex:1;min-width:120px;display:grid;gap:1px}
.hhp-nm span{font-size:13px;color:var(--muted)}
.hhp-nm .hhp-you{color:var(--muted);font-weight:600}
.hhp-pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1.5px solid var(--line);font-size:12.5px;font-weight:700;text-transform:capitalize;color:var(--ink-soft)}
.hhp-pill-owner{border-color:var(--maroon);color:var(--maroon)}
.hhp-pill-wait{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 20%,var(--paper));color:var(--ink);text-transform:none}
.hhp-empty{padding:8px 0;color:var(--muted);font-size:13.5px}
.hhp-invite-slot{margin-top:12px;padding-top:8px;border-top:1px dashed var(--line)}
.hhp-invite-slot[hidden]{display:none}
.hhp-member .hh-role{min-height:38px}
.hhp-member .hh-remove{min-height:38px}
/* Shopping Assistant reskin (2026-09-28): maroon header band, chunky segments/buttons, store tiles, filled bubbles. Motion is move/scale only and off under reduced motion. */
.sa-modal{border-radius:20px 20px 0 0;overflow:auto}
@media(min-width:560px){.sa-modal{border-radius:20px}}
.sa-head{background:var(--maroon);color:var(--maroon-ink);border-bottom:0;padding:14px 18px 16px}
.sa-head-row{margin-bottom:12px}
.sa-head-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(0,0,0,.16)}
.sa-head-ico svg{width:24px;height:24px;display:block}
.sa-eyebrow{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--maroon-ink)}
.sa-head .close{border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink)}
.sa-head .close:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.sa-progress-text{color:var(--maroon-ink);opacity:.9;margin:0 0 8px}
.sa-progress{gap:5px}
.sa-progress-step{color:var(--maroon-ink);opacity:.85}
.sa-progress-step::before{height:10px;background:rgba(0,0,0,.22)}
.sa-progress-step.done::before{background:var(--paper)}
.sa-progress-step.current::before{background:linear-gradient(90deg,var(--paper) 50%,rgba(0,0,0,.22) 50%)}
.sa-progress-step.current{color:var(--maroon-ink);opacity:1}
.sa-progress-step.skipped{opacity:.7}
.sa-progress-step.skipped::before{height:10px;background:none;border:2px dashed color-mix(in srgb,var(--maroon-ink) 60%,transparent);margin:0;box-sizing:border-box}
.sa-foot{gap:12px;padding-top:14px}
.sa-foot .btn.chunky{min-height:48px;flex:0 1 auto}
.sa-foot .btn.chunky.primary{flex:1 1 auto}
.sa-store-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0;border:0;border-radius:0;overflow:visible}
@media(max-width:559px){.sa-store-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;border-radius:0;overflow:visible}}
.sa-store{position:relative;flex-direction:column;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 4px 0 var(--line);padding:14px 8px 12px;min-height:88px;text-align:center;transition:transform .12s ease,box-shadow .12s ease}
.sa-store:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sa-store.on{border-color:var(--store);background:color-mix(in srgb,var(--store) 14%,var(--paper));box-shadow:0 4px 0 var(--store);font-weight:800}
@media(max-width:559px){.sa-store{border:2px solid var(--line);border-radius:16px;padding:14px 8px 12px;min-height:88px}.sa-store.on{border-color:var(--store)}.sa-store:last-child{border-bottom:2px solid var(--line)}.sa-store-name{flex:none;text-align:center}}
.sa-store .sa-badge{min-width:34px;height:26px;font-size:12px;border-radius:8px}
.sa-store .sa-check{position:absolute;top:6px;right:8px;width:auto;font-size:15px}
.sa-store.on .sa-check{animation:saPop .32s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes saPop{0%{transform:scale(.4)}100%{transform:none}}
.sa-arm{border:2px solid var(--line);box-shadow:0 3px 0 var(--line);padding:6px 12px 6px 8px;min-height:38px}
.sa-arm.on{box-shadow:0 3px 0 color-mix(in srgb,var(--store) 65%,#000)}
.sa-bubble{border:2px dashed var(--line)}
.sa-bubble.on{border:2px solid var(--store);background:var(--store);color:#fff;font-weight:700;box-shadow:0 3px 0 color-mix(in srgb,var(--store) 65%,#000);animation:saPop .28s cubic-bezier(.34,1.56,.64,1) backwards}
.sa-bubble.on .sa-badge{background:#fff;color:var(--store)}
.sa-price-counts{padding:10px 14px;border-radius:14px;background:var(--ground);border:2px solid var(--line-soft);font-weight:700;color:var(--ink-soft)}
.sa-summary{border-radius:14px;padding:12px 14px}
.sa-meal-date{border-radius:12px;background:var(--ground);padding:6px 4px;align-items:center;text-align:center;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.sa-store,.sa-store.on .sa-check,.sa-bubble.on{animation:none;transition:none}}
/* Shopping Assistant Welcome path (task 069): hero, round icon nodes, skip switches. Move/scale only, off under reduced motion. */
.sa-hero{display:grid;place-items:center;width:96px;height:96px;margin:4px auto 10px;border-radius:999px;background:var(--halo);color:var(--maroon);animation:saHeroPop .46s cubic-bezier(.34,1.56,.64,1) backwards}
.sa-hero svg{width:64px;height:64px;display:block}
@keyframes saHeroPop{0%{transform:scale(.5) rotate(-10deg)}100%{transform:none}}
.sa-welcome-steps{position:relative;gap:0;margin:14px 0}
.sa-path-step{position:relative;align-items:center;gap:14px;padding:6px 0}
.sa-path-step:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;height:calc(100% - 44px);width:4px;border-radius:2px;background:var(--line)}
.sa-welcome-num.sa-node{width:46px;height:46px;border:0;background:var(--maroon);color:var(--maroon-ink);box-shadow:0 4px 0 var(--maroon-ledge);animation:saNodePop .4s cubic-bezier(.34,1.56,.64,1) backwards}
.sa-path-step:nth-child(2) .sa-node{animation-delay:.05s}.sa-path-step:nth-child(3) .sa-node{animation-delay:.1s}.sa-path-step:nth-child(4) .sa-node{animation-delay:.15s}.sa-path-step:nth-child(5) .sa-node{animation-delay:.2s}
.sa-node svg{width:24px;height:24px;display:block}
@keyframes saNodePop{0%{transform:scale(.6)}100%{transform:none}}
.sa-path-skipped .sa-node{background:var(--line);color:var(--muted);box-shadow:0 4px 0 var(--line-soft)}
.sa-path-skipped b{color:var(--muted);text-decoration:line-through}
.sa-skip input[role="switch"]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:42px;height:24px;margin:1px 0 0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .18s ease}
.sa-skip input[role="switch"]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.sa-skip input[role="switch"]:checked{background:var(--maroon)}
.sa-skip input[role="switch"]:checked::after{transform:translateX(18px)}
.sa-skip input[role="switch"]:disabled{cursor:default;opacity:.7}
.sa-skip input[role="switch"]:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sa-hero,.sa-welcome-num.sa-node{animation:none}.sa-skip input[role="switch"],.sa-skip input[role="switch"]::after{transition:none}}
/* Shopping Assistant Pricing (task 070): stat tiles, method selector, filter chips. */
.sa-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.sa-stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--ground);border:2px solid var(--line-soft)}
.sa-stat-n{font-family:var(--num);font-size:24px;font-weight:800;line-height:1.1}
.sa-stat-l{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);font-weight:600}
.sa-dot{flex:none;width:9px;height:9px;border-radius:999px;background:var(--muted)}
.sa-stat-current .sa-dot{background:var(--good)}.sa-stat-stale .sa-dot{background:var(--brass)}.sa-stat-missing .sa-dot{background:var(--crit)}
@media(max-width:559px){.sa-stat{padding:8px 8px}.sa-stat-n{font-size:20px}.sa-stat-l{font-size:11px}}
.sa-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:4px;margin-top:6px;border-radius:20px;background:rgba(0,0,0,.16)}
.sa-method{position:relative;border:0;background:none;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:700;padding:11px 6px 9px;border-radius:16px;cursor:pointer;min-height:44px}
.sa-method.on{background:var(--paper);color:var(--maroon);box-shadow:0 2px 0 rgba(0,0,0,.14)}
.sa-method:focus-visible,.sa-chip:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.sa-method .badge-brass{position:absolute;top:-12px;left:50%;transform:translateX(-50%);pointer-events:none}
.sa-chips{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;order:3}
.sa-chip{border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;min-height:34px;cursor:pointer;transition:transform .12s ease}
.sa-chip.on{border-color:var(--maroon);background:var(--maroon);color:var(--maroon-ink);font-weight:800}
.sa-chip:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.sa-chip{transition:none}}
/* Shopping Assistant Done (task 071): celebration overlay. Confetti starts visible and flies out; the cart chef rolls in (move/rotate only). All off under reduced motion. */
.sa-done-modal{min-height:0}
.sa-done{position:relative;text-align:center;padding-top:18px;padding-bottom:18px}
.sa-done .sa-hero{width:132px;height:132px;margin:0 auto 8px}
.sa-done .sa-hero svg{width:92px;height:92px}
.sa-hero-roll svg{animation:saRoll .9s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes saRoll{0%{transform:translateX(-110px) rotate(-14deg)}55%{transform:translateX(10px) rotate(5deg)}75%{transform:translateX(-4px) rotate(-2deg)}100%{transform:none}}
.sa-done .sa-step-title{font-weight:400;font-size:28px;margin:6px 0 4px}
.sa-done p{margin:0 auto 18px;max-width:36ch}
.sa-big-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sa-big-stat{border:2px solid var(--line);border-radius:16px;padding:10px 6px;box-shadow:0 3px 0 var(--line)}
.sa-big-stat b{display:block;font-family:var(--num);font-size:24px;font-weight:800;color:var(--maroon);font-variant-numeric:tabular-nums}
.sa-big-stat span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.sa-confetti{position:absolute;left:50%;top:96px;width:0;height:0;pointer-events:none}
.sa-confetti i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);animation:saBurst 1.1s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d)}
.sa-confetti i.o{width:9px;height:9px;border-radius:50%}
@keyframes saBurst{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.sa-done-modal .sa-foot{justify-content:center}.sa-done-modal .sa-foot .btn{width:100%}
@media (prefers-reduced-motion:reduce){.sa-hero-roll svg,.sa-confetti i{animation:none}.sa-confetti{display:none}}
/* Shopping Assistant step motion (task 072): a step slides in from the side it came from (move only, never from opacity 0). Off under reduced motion. */
@keyframes saSlideFwd{0%{transform:translateX(28px)}100%{transform:none}}
@keyframes saSlideBack{0%{transform:translateX(-28px)}100%{transform:none}}
.sa-body.sa-slide-fwd{animation:saSlideFwd .26s cubic-bezier(.2,.8,.3,1) backwards}
.sa-body.sa-slide-back{animation:saSlideBack .26s cubic-bezier(.2,.8,.3,1) backwards}
@media (prefers-reduced-motion:reduce){.sa-body.sa-slide-fwd,.sa-body.sa-slide-back{animation:none}}
.sa-done-back.modal-back{align-items:center;justify-content:center;padding:20px}
.sa-done-modal{border-radius:20px;min-height:0;max-width:520px}
/* Activity feed (2026-09-28): icon badges, day groups, rows (task 065). Every class carries the activity- prefix. */
.activity-day{margin:0 0 10px}
.activity-day-label{margin:6px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:700}
.activity-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.activity-who{position:relative;flex:none;width:36px;height:36px}
.activity-av{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--c,var(--muted));color:#fff;font-weight:800;font-size:15px}
.activity-act{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--ac,var(--muted));color:#fff;border:2px solid var(--paper);box-sizing:content-box}
.activity-act svg{width:12px;height:12px;display:block}
.activity-body{flex:1;min-width:0}
.activity-row .activity-line{flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.activity-what{overflow-wrap:anywhere}
.activity-recipe{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;cursor:pointer;text-align:left}
.activity-recipe:hover{text-decoration-color:var(--maroon)}
.activity-recipe:focus-visible,.activity-showedits:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:4px}
.activity-recipe-name{font-weight:700}
.activity-gone{color:var(--muted);font-weight:600}
.activity-muted{color:var(--muted)}
.activity-var{display:inline-block;padding:0 7px;border-radius:999px;background:color-mix(in srgb,#b5892f 18%,var(--paper));color:var(--ink);font-weight:700;font-size:13px}
.activity-role{display:inline-block;margin-left:2px;padding:0 6px;border-radius:6px;background:var(--ground);border:1px solid var(--line);font-family:var(--num);font-size:10.5px;font-weight:800;letter-spacing:.08em}
.activity-showedits{display:block;margin-top:2px;border:0;background:none;padding:0;color:var(--terra);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.activity-times{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--muted)}
.activity-times[hidden]{display:none}
/* Activity panel (task 066): a floating card under the bell over a scrim; a centered card on phones, never a bottom sheet. */
.activity-panel{position:static;width:auto;max-height:none;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;padding:0;color:inherit}
.activity-scrim{position:fixed;left:0;right:0;bottom:0;top:calc(var(--activity-top,56px) - 8px);z-index:40;background:rgba(24,18,14,.42)}
.activity-card{position:fixed;z-index:41;top:var(--activity-top,56px);right:18px;width:440px;max-height:calc(100dvh - var(--activity-top,56px) - 16px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.3),0 0 0 1px var(--line);transform-origin:var(--activity-ox,calc(100% - 22px)) 0;animation:activityGrow .3s cubic-bezier(.34,1.3,.64,1) backwards}
@media(max-width:559px){.activity-card{left:10px;right:10px;width:auto;bottom:14px;max-height:none}}
.activity-settled .activity-card{animation:none}
@keyframes activityGrow{from{transform:translateY(-8px) scale(.92)}to{transform:none}}
.activity-caret{position:fixed;z-index:41;top:calc(var(--activity-top,56px) - 8px);width:16px;height:16px;background:var(--maroon);transform:rotate(45deg);border-radius:3px}
.activity-head{flex:none;background:var(--maroon);color:var(--maroon-ink);padding:14px 16px 12px}
.activity-head-row{display:flex;align-items:center;gap:10px}
.activity-grow{flex:1;min-width:0}
.activity-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;line-height:1.1;margin:0}
.activity-head small{display:block;font-family:var(--num);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-stack{display:flex}
.activity-stack .activity-av{width:26px;height:26px;font-size:10.5px;margin-left:-6px;border:2px solid var(--maroon)}
.activity-stack .activity-av:first-child{margin-left:0}
.activity-close{width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);display:grid;place-items:center;flex:none;padding:0;cursor:pointer}
.activity-close svg{width:16px;height:16px}
.activity-close:focus-visible,.activity-seg-opt:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.activity-seg{display:flex;gap:2px;background:rgba(0,0,0,.16);border-radius:999px;padding:3px;margin-top:12px}
.activity-seg-opt{flex:1;border:0;background:transparent;color:var(--maroon-ink);opacity:.78;padding:6px 8px;border-radius:999px;font:inherit;font-weight:700;font-size:12.5px;white-space:nowrap;cursor:pointer}
.activity-seg-opt[aria-checked="true"]{background:var(--paper);color:var(--maroon);opacity:1}
.activity-fbody{flex:1;overflow:auto;padding:6px 0 10px;overscroll-behavior:contain}
.activity-foot{flex:none;padding:8px 16px 10px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted);text-align:center}
.activity-panel .activity-list{display:block}
.activity-day{margin:0}
.activity-day-label{margin:14px 16px 4px;font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.activity-panel .activity-row{position:relative;padding:10px 16px;gap:12px;align-items:flex-start}
.activity-panel .activity-row+.activity-row{border-top:1px solid var(--line-soft)}
.activity-panel .activity-who{width:44px;height:44px}
.activity-panel .activity-av{width:44px;height:44px;font-size:16px}
.activity-panel .activity-act{width:24px;height:24px;right:-5px;bottom:-4px;border-width:2.5px}
.activity-panel .activity-act svg{width:16px;height:16px}
.activity-unread{background:color-mix(in srgb,var(--brass) 14%,var(--paper))}
.activity-unread::before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brass)}
.activity-unread .activity-act{border-color:color-mix(in srgb,var(--brass) 14%,var(--paper))}
.activity-newbar{display:flex;align-items:center;gap:10px;margin:8px 16px 2px;font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink)}
.activity-newbar span{background:var(--brass);border-radius:999px;padding:2px 9px}
.activity-newbar::after{content:"";flex:1;height:2px;background:var(--brass);border-radius:2px;opacity:.6}
.activity-empty{text-align:center;padding:26px 24px 30px}
.activity-empty-ico{display:inline-grid;place-items:center;color:var(--maroon)}
.activity-empty-title{font-family:var(--serif);font-size:20px;margin:8px 0 2px}
.activity-thumb{flex:none;position:relative;display:block;width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--ground);border:2px solid var(--line);box-shadow:0 2px 0 var(--line);box-sizing:border-box}
.activity-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.activity-thumb-empty img{display:none}
.activity-thumb-none{display:grid;place-items:center;background:transparent;border-style:dashed;box-shadow:none;color:var(--muted)}
.activity-thumb-none svg{width:22px;height:22px}
.activity-swap{display:flex;align-items:center;gap:3px;flex:none}
.activity-swap .activity-thumb{width:38px;height:38px}
.activity-swap .activity-thumb-old{width:28px;height:28px;opacity:.55;filter:grayscale(.6)}
.activity-swap-arrow{font-weight:800;color:var(--terra);font-size:13px}
.activity-thumb-new{animation:activityFlash .6s .3s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes activityFlash{0%{transform:scale(.6);filter:brightness(2)}100%{transform:none;filter:none}}
/* Motion: the row stagger plays only on the first paint after open; a filter switch cross-fades the list (never from opacity 0); a new arrival slides in by itself. */
.activity-list.activity-first .activity-row{animation:activityRise .45s cubic-bezier(.34,1.4,.64,1) backwards;animation-delay:calc(var(--i,0)*45ms + 80ms)}
@keyframes activityRise{from{transform:translateY(10px)}to{transform:none}}
.activity-list.activity-fade{animation:activityFade .18s ease backwards}
@keyframes activityFade{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.activity-fresh{animation:activitySlide .5s cubic-bezier(.34,1.4,.64,1) backwards}
@keyframes activitySlide{from{transform:translateY(-14px) scale(.96);background:color-mix(in srgb,var(--good) 20%,var(--paper))}to{transform:none}}
.activity-pop{animation:activityPopIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes activityPopIn{0%{transform:scale(.6)}100%{transform:none}}
.activity-ring{transform-origin:50% 8%;animation:activityRing .7s ease}
@keyframes activityRing{0%,100%{transform:none}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.activity-card,.activity-list.activity-first .activity-row,.activity-list.activity-fade,.activity-fresh,.activity-thumb-new,.activity-pop,.activity-ring{animation:none}}
/* Welcome tour (2026-09-29) */
#welcome-tour{position:fixed;inset:0;z-index:125;background:var(--ground);display:grid;place-items:center;padding:16px}
.wt-card{width:min(560px,100%);max-height:min(760px,100%);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden}
.wt-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--maroon);color:var(--maroon-ink)}
.wt-title{font-family:var(--serif);font-style:italic;font-size:15px;margin:0;flex:1}
.wt-dots{display:flex;gap:5px;align-items:center}
.wt-dots i{width:8px;height:8px;border-radius:999px;background:rgba(251,247,238,.4);transition:width .3s cubic-bezier(.34,1.3,.64,1)}
.wt-dots i.done{background:var(--maroon-ink)}
.wt-dots i.cur{width:22px;background:var(--maroon-ink)}
.wt-skip{border:0;background:none;color:var(--maroon-ink);font-weight:700;font-size:13px;padding:6px 4px;opacity:.85;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.wt-skip:hover{opacity:1}}
.wt-skip:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.wt-viewport{flex:1;overflow:hidden;position:relative;touch-action:pan-y;min-height:340px}
.wt-track{display:flex;height:100%;transition:transform .42s cubic-bezier(.3,1.1,.4,1)}
.wt-track.dragging{transition:none}
.wt-slide{flex:0 0 100%;height:100%;overflow:auto;padding:20px 22px 16px;display:flex;flex-direction:column}
.wt-vig{border-radius:20px;background:var(--halo);min-height:210px;display:grid;place-items:center;padding:18px;overflow:hidden;flex:none}
.wt-ph{font-family:var(--serif);font-size:26px;color:var(--muted);letter-spacing:.3em}
/* The developer's note: a ruled recipe index card */
.wt-note{position:relative;width:100%;max-width:400px;background:var(--paper);border-radius:6px;padding:16px 18px 14px 34px;box-shadow:0 2px 0 var(--line),0 10px 24px rgba(0,0,0,.12);transform:rotate(-1.2deg);
  background-image:linear-gradient(var(--paper) 30px,transparent 30px),repeating-linear-gradient(transparent 0 25px,color-mix(in srgb,var(--terra) 20%,transparent) 25px 26px);background-position:0 0,0 8px}
.wt-note::before{content:"";position:absolute;top:0;bottom:0;left:24px;border-left:1.5px solid color-mix(in srgb,var(--terra) 35%,transparent)}
.wt-from{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wt-avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;font-family:var(--num);font-weight:800;font-size:12px;border:2px solid var(--paper)}
.wt-from b{font-size:13px}
.wt-owner-tag{white-space:nowrap;font-family:var(--num);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--brass);color:var(--brass-ink);border-radius:999px;padding:1px 7px}
.wt-msg{font-family:var(--serif);font-style:italic;font-size:17px;line-height:26px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.wt-sig{font-family:var(--serif);font-style:italic;text-align:right;margin-top:4px;color:var(--maroon);font-size:17px;line-height:26px}
.wt-head{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.12;margin:18px 0 6px;outline:none;text-wrap:balance}
.wt-lead{margin:0;color:var(--ink-soft);font-size:15px;max-width:46ch}
.wt-foot{flex:none;display:flex;gap:12px;padding:12px 18px 16px;border-top:2px solid var(--line-soft)}
.wt-foot>*{flex:1}
.wt-foot .ghost{flex:0 0 auto;min-width:110px}
/* Staggered pop-in for slide parts when a slide becomes current — move/scale only, never from opacity 0. */
@keyframes wtRise{from{transform:translateY(14px) scale(.9)}to{transform:none}}
.wt-slide.on .wt-in{animation:wtRise .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*90ms + 80ms)}
@media (prefers-reduced-motion:reduce){.wt-track{transition:none}.wt-slide.on .wt-in{animation:none}}
/* Settings cards (2026-09-28) */
.settings-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.settings-card h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
@keyframes settingsCardIn{from{transform:translateY(10px) scale(.98)}to{transform:none}}
.settings-card{animation:settingsCardIn .4s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@media (prefers-reduced-motion:reduce){.settings-card{animation:none}}
/* Section index (task 052b): sticky chip row on phone, sticky left column beside the cards at ≥900px. */
.settings-index a[aria-current="true"]{background:var(--tan)}
@media(max-width:899.5px){
.settings-cards-view .settings-index{position:sticky;top:calc(var(--barh,60px) + 4px);z-index:5;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.settings-cards-view .settings-index a{white-space:nowrap;flex:0 0 auto}
}
@media(min-width:900px){
.settings-cards-view{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:32px;align-items:start}
.settings-cards-view .settings-hero{grid-column:1 / -1}
.settings-cards-view > .settings-index{grid-column:1;grid-row:2 / -1;align-self:start;position:sticky;top:calc(var(--barh,60px) + 12px);flex-direction:column;align-items:stretch;border:none;background:transparent;padding:0;margin:0}
.settings-cards-view .settings-index a{display:block;text-align:left;font-size:13px;padding:8px 10px}
}
/* Account avatar menu (task 055): the .bar button and the fixed menu on document.body. */
.nav-avatar{flex:none;width:34px;height:34px;border:0;border-radius:999px;background:rgba(0,0,0,.16);color:var(--maroon-ink);display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:15px;cursor:pointer;transition:background .15s}
.nav-avatar:hover{background:rgba(0,0,0,.26)}
.nav-avatar:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.nav-avatar-menu{position:fixed;z-index:30;min-width:232px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
@keyframes navAvatarIn{from{transform:translateY(-6px) scale(.97)}to{transform:none}}
.nav-avatar-menu{animation:navAvatarIn .18s ease backwards}
.nav-avatar-head{display:flex;align-items:center;gap:10px;padding:8px 10px}
.nav-avatar-letter{flex:none;width:34px;height:34px;border-radius:999px;background:var(--maroon);color:var(--maroon-ink);display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:15px}
.nav-avatar-head b{display:block;font-size:14px;line-height:1.2}
.nav-avatar-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:10px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.nav-avatar-item:hover{background:color-mix(in srgb,var(--tan) 35%,transparent)}
.nav-avatar-item:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:-2px}
.nav-avatar-sep{border:0;border-top:1px solid var(--line);margin:5px 6px}
.settings-help-tour,.settings-help-household{margin:8px 0 4px}
@media (prefers-reduced-motion:reduce){.nav-avatar,.nav-avatar-menu{transition:none;animation:none}}
/* Household page: invite wizard (task 060) — a centered dialog, never a bottom sheet. */
.hhp-wiz-back.modal-back{align-items:center;justify-content:center;padding:16px 12px;z-index:78}
.hhp-wiz{max-width:480px;padding:0;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;animation:hhpWizIn .28s cubic-bezier(.34,1.3,.64,1) backwards}
.hhp-wiz.no-enter{animation:hhpWizIn .28s cubic-bezier(.34,1.3,.64,1) backwards}
@keyframes hhpWizIn{from{transform:scale(.94)}to{transform:none}}
.hhp-wiz-head{display:flex;align-items:center;gap:10px;background:var(--maroon);color:var(--maroon-ink);padding:14px 16px}
.hhp-wiz-title{font-family:var(--serif);font-style:italic;font-size:19px;flex:none}
.hhp-wiz-prog{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.hhp-wiz-prog i{position:relative;height:10px;border-radius:999px;background:rgba(0,0,0,.2);overflow:hidden}
.hhp-wiz-prog i::after{content:"";position:absolute;inset:0;width:0;background:var(--paper);border-radius:999px;transition:width .4s cubic-bezier(.34,1.3,.64,1)}
.hhp-wiz-prog i.done::after{width:100%}.hhp-wiz-prog i.cur::after{width:55%}
.hhp-wiz-x{width:32px;height:32px;border-radius:999px;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);display:grid;place-items:center;padding:0;cursor:pointer;flex:none}
.hhp-wiz-x svg{width:16px;height:16px}
.hhp-wiz-x:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.hhp-wiz-body{padding:20px;overflow:auto;flex:1}
.hhp-wiz-body h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 4px}
.hhp-wiz-hint{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.hhp-wiz-opt{font-family:var(--sans);font-size:14px;color:var(--muted)}
.hhp-wiz-input{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink)}
.hhp-wiz-input:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
textarea.hhp-wiz-input{resize:vertical;min-height:96px}
.hhp-wiz-err{color:var(--crit);font-size:12.5px;font-weight:600;margin:6px 0 0;min-height:18px}
.hhp-wiz-cnt{font-family:var(--num);font-size:12px;color:var(--muted);text-align:right;margin-top:4px}
.hhp-wiz-cnt.over{color:var(--crit);font-weight:700}
.hhp-wiz-foot{display:flex;gap:12px;padding:12px 20px 16px;border-top:2px solid var(--line-soft)}
.hhp-wiz-foot>*{flex:1}.hhp-wiz-foot>.ghost{flex:0 0 auto;min-width:100px}
.hhp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hhp-tile{display:flex;flex-direction:column;gap:3px;text-align:left;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:16px;padding:12px;box-shadow:0 3px 0 var(--line);font:inherit;cursor:pointer}
.hhp-tile span{font-size:12.5px;color:var(--muted)}
.hhp-tile[aria-checked="true"]{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 10%,var(--paper));box-shadow:0 3px 0 var(--maroon)}
.hhp-tile:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.hhp-wiz-sent{text-align:center;padding:14px 0}
@media (prefers-reduced-motion:reduce){.hhp-wiz,.hhp-wiz.no-enter{animation:none}.hhp-wiz-prog i::after{transition:none}}
/* Household page: invitation and unhoused cards (task 061). The banners above #app hide while the page shows the cards. */
.hhp-view #household-notices{display:none}
.hhp-inv-card{border:2px solid var(--brass);background:color-mix(in srgb,var(--brass) 10%,var(--paper));border-radius:20px;animation:hhpRise .4s cubic-bezier(.34,1.3,.64,1) backwards}
.hhp-inv-head{display:flex;align-items:center;gap:12px}
.hhp-inv-head .hhp-av{margin-left:0;width:44px;height:44px;border-color:var(--paper);flex:none}
.hhp-inv-main{flex:1;min-width:0}
.hhp-inv-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:13px;color:var(--muted)}
.hhp-note{position:relative;margin:12px 0 4px;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--paper);border:1px solid var(--line);font-style:italic;color:var(--ink);overflow-wrap:anywhere}
.hhp-note::before{content:"“";font-family:var(--serif);font-size:22px;line-height:0;margin-right:2px;color:var(--brass)}
.hhp-unh-card{border-radius:20px;animation:hhpRise .4s cubic-bezier(.34,1.3,.64,1) backwards}
.hhp-unh-when{margin:2px 0 6px}
@media (prefers-reduced-motion:reduce){.hhp-inv-card,.hhp-unh-card{animation:none}}
.hhp-page>.hh-notice{justify-self:stretch;width:auto;max-width:none;box-sizing:border-box}
/* Household page: Settings tab (task 062). */
.hhp-fam-row{display:flex;gap:14px;align-items:flex-start}
.hhp-fam-main{flex:1;min-width:0}
.hhp-state{display:inline-block;margin-top:2px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:800;border:1.5px solid var(--line);color:var(--muted)}
.hhp-state.on{border-color:var(--good);color:var(--good)}
.hhp-fam-preview{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.hhp-muted{color:var(--muted)}
.hhp-mini-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--maroon)}
.hhp-mini-seg span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--maroon-ink);opacity:.8}
.hhp-mini-seg span.on{background:var(--paper);color:var(--maroon);opacity:1}
.hhp-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:50px;height:30px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .18s ease}
.hhp-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.hhp-sw:checked{background:var(--maroon)}
.hhp-sw:checked::after{transform:translateX(20px)}
.hhp-sw:disabled{cursor:default;opacity:.65}
.hhp-sw:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}
.hhp-rename-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hhp-rename-input{flex:1;min-width:200px;max-width:340px}
.hhp-danger{border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.hhp-danger .hh-leave,.hhp-danger .hh-delete{margin-top:8px}
@media (prefers-reduced-motion:reduce){.hhp-sw,.hhp-sw::after{transition:none}}
/* Household page: tab dot and entrance (task 063). The global .view fade starts at opacity 0, so the Household page uses a move-only entrance. */
.view.hhp-page{animation:hhpRise .3s cubic-bezier(.34,1.3,.64,1) backwards}
.view.hhp-page.no-enter{animation:none}
@media (prefers-reduced-motion:reduce){.view.hhp-page{animation:none}}
#nav button{position:relative}
.hhp-dot{position:absolute;top:3px;right:5px;width:9px;height:9px;border-radius:999px;background:var(--crit,#c0392b);border:2px solid var(--maroon);box-sizing:content-box;animation:hhpPop .4s cubic-bezier(.34,1.56,.64,1) backwards}
@media (prefers-reduced-motion:reduce){.hhp-dot{animation:none}}
/* What to eat (2026-09-29) — skeleton: a centered card over a scrim, like the kitchen-setup wizard. */
#wte{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;overflow-y:auto}
.wte-card{width:min(520px,100%);background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden;animation:wte-pop .28s cubic-bezier(.34,1.4,.64,1) backwards}
.wte-head{position:relative;background:var(--maroon);color:var(--maroon-ink);padding:14px 18px 16px}
.wte-brand{display:block;font-family:var(--serif);font-style:italic;font-size:15px;margin-bottom:10px}
.wte-x{position:absolute;top:10px;right:12px;font:inherit;font-size:22px;line-height:1;background:none;border:0;color:inherit;cursor:pointer;width:34px;height:34px;border-radius:50%}
.wte-prog{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.wte-prog i{height:10px;border-radius:999px;background:rgba(0,0,0,.2)}
.wte-prog i.done{background:var(--paper)}
.wte-prog i.cur{background:linear-gradient(90deg,var(--paper) 55%,rgba(0,0,0,.2) 55%)}
.wte-body{padding:22px 20px 6px;text-align:center}
.wte-body h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:0 0 12px;outline:none}
.wte-actions{display:flex;justify-content:center;gap:10px;padding:10px 20px 22px}
@keyframes wte-pop{from{transform:scale(.94)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.wte-card{animation:none}}
/* Activity feed embedded in the Household page (task 067): the same rows and filter, no floating frame. */
.activity-embedded{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.activity-embedded .activity-seg-band{background:var(--maroon);padding:10px 12px}
.activity-embedded .activity-seg{margin-top:0}
.activity-embedded .activity-list{padding:6px 0 10px}
.btn.chunky.wte-open{background:var(--brass);color:var(--brass-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--brass) 62%,#000);padding:10px 16px;font-size:15px}
/* Planner redesign (2026-09-29) — landing (task 086). Entrances move or scale only, never from opacity 0; all off under reduced motion. */
.pl-head{background:var(--maroon);color:var(--maroon-ink);border-radius:22px;padding:18px 20px;margin:4px 0 18px;animation:plRise .4s cubic-bezier(.34,1.3,.64,1) backwards}
.pl-head .eyebrow,.pl-head .subtle,.pl-head h1{color:var(--maroon-ink)}
.pl-head .eyebrow{opacity:.85}
.pl-head .btn.primary{background:var(--paper);color:var(--maroon);border-color:var(--paper);box-shadow:0 3px 0 rgba(0,0,0,.18);font-weight:800}
.pl-head-slot{flex:none;min-width:0}
.pl-card{border-radius:20px;animation:plRise .4s cubic-bezier(.34,1.3,.64,1) backwards}
.pl-draft{border:2px solid var(--brass);border-left-width:2px;background:color-mix(in srgb,var(--brass) 12%,var(--paper))}
.pl-open-note{font-size:13px;font-weight:700;color:var(--brass-ink);background:var(--brass);border-radius:999px;padding:1px 10px}
.pl-now{border-left:2px solid var(--line)}
.pl-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 10px}
.pl-fig{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--ground);border:2px solid var(--line-soft)}
.pl-fig b{font-family:var(--num);font-size:20px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.pl-fig span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:559px){.pl-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-weektabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--maroon);margin:4px 0 10px;width:max-content;max-width:100%}
.pl-weektab{border:0;background:transparent;color:var(--maroon-ink);opacity:.8;padding:6px 16px;border-radius:999px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.pl-weektab[aria-checked="true"]{background:var(--paper);color:var(--maroon);opacity:1}
.pl-weektab:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.planner-saved-weeks{border-radius:20px}
@keyframes plRise{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.pl-head,.pl-card{animation:none}}
/* Planner redesign (2026-09-29) — Create plan wizard frame (task 087). */
.pl-wizard{display:flex;flex-direction:column;gap:14px}
.pl-wiz-prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pl-wiz-pip{display:flex}
.pl-wiz-pipbtn{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-align:left}
.pl-wiz-pipbtn:disabled{cursor:default}
.pl-wiz-pipbtn::before{content:"";display:block;width:100%;height:10px;border-radius:999px;background:var(--line);box-sizing:border-box}
.pl-wiz-pip.done .pl-wiz-pipbtn::before{background:var(--maroon)}
.pl-wiz-pip.cur .pl-wiz-pipbtn::before{background:linear-gradient(90deg,var(--maroon) 55%,var(--line) 55%)}
.pl-wiz-pip.cur .pl-wiz-pipbtn{color:var(--ink);font-weight:700}
.pl-wiz-num{display:none}
.pl-wiz-lbl{font-size:11.5px;line-height:1.2}
@media(max-width:559px){.pl-wiz-lbl{display:none}.pl-wiz-pip.cur .pl-wiz-lbl{display:none}.pl-wiz-prog{margin-bottom:18px;position:relative}}
.pl-wiz-pipbtn:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:4px}
.pl-wiz-title{font-family:var(--serif);font-weight:400;font-size:22px;margin:0}
.pl-wiz-title:focus{outline:none}
.pl-wiz-body{display:flex;flex-direction:column;gap:14px;animation:plRise .3s cubic-bezier(.34,1.3,.64,1) backwards}
.pl-wiz-foot{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:12px 0 4px;background:var(--paper);border-top:2px solid var(--line-soft)}
.pl-wiz-foot .btn{min-width:110px}
.pl-wiz-foot .pl-wiz-next{flex:1}
.plan-modal-body .pl-wiz-foot{bottom:-14px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))} /* 260a: cover the body's 14px bottom padding; clear the iPhone home bar */
.pl-wizard{min-height:100%;box-sizing:border-box}.pl-wizard .pl-wiz-foot{margin-top:auto} /* 260a: Back/Next sits at the bottom on short steps */
@media(max-width:559px){.pl-wizard .row2:has(> .pl-tiles){grid-template-columns:1fr}} /* 260a: Leftovers choices get the full width on phones */
@media(max-width:559px){.pl-wizard .plan-action-footer .plan-save-status,.pl-wizard .plan-action-footer .plan-finalize-note{display:none}.pl-wizard .plan-action-footer .plm-tool{padding:6px 12px;min-height:36px;font-size:14px}} /* 260a: compact Review footer on phones; the count line and Fill gaps still explain a disabled Finalize */
.pl-step-note{color:var(--ink-soft);font-size:14px}
.pl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl-wizard .plan-toggle-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.pl-wizard .pl-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:2px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:12px;box-shadow:0 3px 0 var(--line);font:inherit;cursor:pointer;min-height:0}
.pl-wizard .pl-tile b{font-size:15px}
.pl-tile-sub{font-size:12.5px;color:var(--muted);font-weight:500}
.pl-wizard .pl-tile.on,.pl-wizard .plan-toggle-row .chip.on{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 10%,var(--paper));box-shadow:0 3px 0 var(--maroon);color:var(--ink)}
.pl-wizard .plan-toggle-row .chip:not(.pl-tile){border:2px solid var(--line);border-radius:16px;padding:14px 12px;font-weight:700;background:var(--paper);box-shadow:0 3px 0 var(--line)}
.pl-tile:focus-visible,.pl-step-btn:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.pl-stepper{display:inline-flex;align-items:center;gap:6px}
.pl-stepper input{width:76px;text-align:center;font-family:var(--num);font-weight:800;font-size:18px}
.pl-step-btn{width:40px;height:40px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font-size:20px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.pl-step-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.pl-slots-line{font-family:var(--num);font-size:13px;font-weight:700;color:var(--ink-soft);padding:8px 12px;border-radius:12px;background:var(--ground)}
.pl-wizard .plan-setup{border:0;box-shadow:none;background:none;padding:0}
@media (prefers-reduced-motion:reduce){.pl-wiz-body{animation:none}}
/* Planner redesign (2026-09-29) — meal card (task 091): a compact tile in the calendar, a centered card on tap (never a bottom sheet). */
.pl-meal-tile{position:relative;display:flex;flex-direction:column;gap:4px}
.pl-meal-photo{width:100%;aspect-ratio:16/7;border-radius:10px;overflow:hidden;background:var(--tan);margin-bottom:2px}
.pl-meal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pl-meal-photo .photo-missing{min-height:0;height:100%;padding:4px}
.pl-meal-tile.is-leftover .pl-meal-photo{filter:grayscale(.5) opacity(.85);background:repeating-linear-gradient(135deg,var(--tan) 0 8px,var(--line-soft) 8px 16px)}
.pl-meal-open{align-self:flex-start;margin-top:2px}
.pl-meal-back.modal-back{z-index:74;align-items:center;justify-content:center;padding:16px 12px}
.pl-meal-card{max-width:520px;width:100%;padding:0;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);animation:plRise .28s cubic-bezier(.34,1.3,.64,1) backwards}
.pl-meal-card.no-enter{animation:plRise .28s cubic-bezier(.34,1.3,.64,1) backwards}
.pl-meal-head{display:flex;align-items:center;gap:12px;background:var(--maroon);color:var(--maroon-ink);padding:14px 16px;flex:none}
.pl-meal-photo-big{width:72px;flex:none;margin:0;aspect-ratio:1/1;border-radius:14px;border:2px solid rgba(255,255,255,.35)}
.pl-meal-head-text{flex:1;min-width:0}
.pl-meal-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;line-height:1.15;margin:0;overflow-wrap:anywhere}
.pl-meal-title:focus{outline:none}
.pl-meal-sub{font-size:13px;opacity:.9;margin-top:2px}
.pl-meal-close{width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);flex:none}
.pl-meal-body{padding:14px 16px 16px;overflow:auto;flex:1}
.pl-meal-body .plan-slot{border:0;box-shadow:none;padding:0;background:none}
.pl-meal-body .plan-slot-kicker{display:none}
@media (prefers-reduced-motion:reduce){.pl-meal-card,.pl-meal-card.no-enter{animation:none}}
.pl-meal-card .close.pl-meal-close{background:rgba(0,0,0,.16);border:0;color:var(--maroon-ink);font-size:20px;display:grid;place-items:center;padding:0}
.pl-meal-card .close.pl-meal-close:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.wte-top{position:relative;margin:4px 0 12px;padding:14px;border:2px solid var(--line);border-radius:16px}
.wte-photo{width:100%;max-height:180px;object-fit:cover;border-radius:12px;display:block;margin-bottom:10px}
.wte-top h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:8px 0 2px}
.wte-ring{--p:0;width:96px;height:96px;margin:10px auto;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--terra) calc(var(--p)*1%),var(--line) 0)}
.wte-ring b{display:block;font-size:20px;background:var(--paper);border-radius:50%;width:74px;height:50px;line-height:50px;margin:0 auto}
.wte-ring span{display:block;font-size:12px;background:var(--paper);width:74px;margin:0 auto;border-radius:0 0 40px 40px}
.wte-ring.sm{width:52px;height:52px}.wte-ring.sm b{width:40px;height:40px;line-height:40px;font-size:13px;border-radius:50%}
.wte-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:6px 0}
.wte-chip{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--tan)}.wte-chip.miss{background:transparent;border:1px dashed var(--line)}
.wte-pickline{font-size:14px;margin:6px 0 0}
.wte-alts{text-align:left;margin:6px 0}.wte-alt{display:flex;gap:12px;align-items:center;padding:10px;border:2px solid var(--line);border-radius:14px;margin:6px 0}
.wte-how{text-align:left;margin:8px 0;font-size:14px}.wte-how summary{cursor:pointer}
.settings-chip-label{font-weight:700;font-size:14px;margin:0 0 4px}.settings-chip-field .ks-chips{justify-content:flex-start}.settings-chip-field .ks-add{max-width:420px}
.settings-step-row{display:flex;align-items:center;gap:12px}.settings-step-btn{width:44px;height:44px;padding:0;justify-content:center;font-size:22px}.settings-step-val{min-width:2ch;text-align:center;font-family:var(--num);font-size:22px;font-weight:800}
.settings-switch-row{display:flex;align-items:center;gap:12px;margin:8px 0}.settings-switch{flex:none;position:relative;width:52px;height:30px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer}.settings-switch[aria-checked=true]{background:var(--maroon)}.settings-switch-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.2);transition:transform .15s}.settings-switch[aria-checked=true] .settings-switch-knob{transform:translateX(22px)}.settings-switch:focus-visible{outline:3px solid var(--terra);outline-offset:2px}@media (prefers-reduced-motion:reduce){.settings-switch-knob{transition:none}}

/* Household tour (2026-09-29) */
#household-tour{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;overflow-y:auto}
.ht-card{width:min(480px,100%);background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden}
.ht-head{position:relative;background:var(--maroon);color:var(--maroon-ink);padding:14px 18px 16px}
.ht-brand{display:block;font-family:var(--serif);font-style:italic;font-size:15px;margin-bottom:10px}
.ht-dots{display:flex;gap:6px}.ht-dots i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.2)}.ht-dots i.done,.ht-dots i.cur{background:var(--paper)}
.ht-x{position:absolute;top:10px;right:12px;font:inherit;font-size:22px;line-height:1;background:none;border:0;color:inherit;cursor:pointer;width:34px;height:34px;border-radius:50%}
.ht-slide{padding:22px 20px 6px;text-align:center;animation:ht-in .25s ease-out backwards}
.ht-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brass);color:var(--brass-ink);font-family:var(--num);font-weight:800;font-size:18px}
.ht-slide h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:10px 0 8px;outline:none}
.ht-body{margin:0;line-height:1.5}
.ht-foot{display:flex;justify-content:center;gap:10px;padding:14px 20px 22px}
@keyframes ht-in{from{transform:translateX(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ht-slide{animation:none}}
.pl-price-hero{text-align:center;display:flex;flex-direction:column;align-items:center}
.pl-price-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.pl-price-stat{border:2px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:2px}
.pl-stat-num{font-size:24px;font-family:var(--num);font-weight:800}
.pl-store-badge{color:#fff;padding:2px 8px;border-radius:999px;font-size:12px;margin:0 3px;display:inline-block}
/* Plan wizard step 3: price method cards (task 088b) */
.pl-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.pl-method{display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid var(--line);border-radius:16px;padding:14px;gap:6px;position:relative}
.pl-ai-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
/* Plan wizard step 4: spend readout + chunkier slider (task 089a) */
.pl-spend-readout{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:8px}
.pl-spend-total{font-family:var(--num);font-size:34px;font-weight:800}
.pl-wiz-body .budget-elastic-track{height:48px}
.pl-wiz-body .budget-elastic-thumb{box-shadow:0 4px 0 var(--maroon-ledge)}
/* Plan wizard step 4: tier card recipe thumbs (task 089b) */
.pl-tier-thumbs{display:flex;gap:4px;justify-content:center;margin:6px 0}
.pl-tier-thumb{width:34px;height:34px;border-radius:10px;overflow:hidden;display:inline-block}
.pl-tier-thumb img{width:100%;height:100%;object-fit:cover}
.pl-wizard .plan-slot.is-gap{border-width:2px;background:color-mix(in srgb,var(--terra) 8%,transparent)}
.shopping-top .shopping-section{border-width:2px;border-radius:20px}
.shopping-top .shopping-assistant{align-items:center;text-align:center}
.pl-shop-ico{display:block;line-height:0}
.pl-week-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;margin-top:8px;border:2px solid var(--line);border-radius:14px;background:var(--paper)}
.pl-week-row[data-status=current]{border-color:var(--maroon)}
.pl-scope{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--ground);border:2px solid var(--line)}
.pl-scope-opt{font:inherit;font-weight:700;border:0;border-radius:999px;padding:7px 16px;background:transparent;color:var(--ink);cursor:pointer}
.pl-scope-opt.on{background:var(--maroon);color:var(--maroon-ink)}
.pl-scope-opt:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.pl-shop-scope{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pl-family-note{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 14px;padding:10px 14px;border-radius:14px;background:var(--brass);color:var(--brass-ink);font-weight:600}
.pl-family-note-x{font:inherit;font-size:20px;line-height:1;border:0;background:transparent;color:inherit;cursor:pointer}
.pl-by{font-size:12px;color:var(--muted);white-space:nowrap}
.pl-fam-peek{font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;white-space:normal}
/* Welcome tour vignettes (fix 2026-09-29): task 074 shipped the vignette markup without these styles.
   Values from the approved docs/design/welcome-tour-prototype.html, renamed to the app's wt- classes. */
#welcome-tour .wt-vig{display:grid;place-items:center;text-align:left}
.wt-mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:320px}
.wt-mc{background:var(--paper);border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 3px 0 var(--line)}
.wt-mc i{display:block;height:48px;background:var(--c)}
.wt-mc b{display:block;font-size:11.5px;padding:5px 7px 0;line-height:1.2}
.wt-mc small{display:block;font-size:10px;color:var(--muted);padding:0 7px 6px}
.wt-ways{display:flex;justify-content:center;gap:10px;margin-top:14px}
.wt-way{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.wt-way-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--paper);border:2px solid var(--line);box-shadow:0 2px 0 var(--line);color:var(--maroon)}
.wt-rec{font-family:var(--num);font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--brass);color:var(--brass-ink);border-radius:999px;padding:0 5px}
.wt-recipe{width:100%;max-width:320px;background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 3px 0 var(--line)}
.wt-recipe h4{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 8px}
.wt-vrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
.wt-vrow>span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:52px}
.wt-vchip{border:2px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;transition:border-color .25s,background-color .25s,color .25s}
.wt-vchip.sel{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 12%,var(--paper));color:var(--maroon)}
.wt-vline{font-size:12.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:7px}
.wt-vline b{color:var(--maroon)}
.wt-pl{width:100%;max-width:360px;display:grid;gap:10px;justify-items:center}
.wt-fam-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--paper);border:2px solid var(--line);font-size:12px;font-weight:700}
.wt-fam-seg span{padding:3px 12px;border-radius:999px}.wt-fam-seg span.on{background:var(--maroon);color:var(--maroon-ink)}
.wt-pl-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.wt-pl-card{background:var(--paper);border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 3px 0 var(--line);text-align:left}
.wt-pl-card>i{display:block;height:30px;background:radial-gradient(circle at 30% 28%,color-mix(in srgb,#fff 42%,var(--c)) 0 15%,var(--c) 55%,color-mix(in srgb,#000 22%,var(--c)));border-bottom:5px solid var(--c)}
.wt-pl-card.left{border-style:dashed;box-shadow:none;background:transparent}
.wt-pl-card.left>i{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--paper) 62%,transparent) 0 5px,transparent 5px 10px),var(--c);filter:saturate(.6)}
.wt-pl-t{padding:5px 7px 7px}
.wt-pl-t b{display:block;font-family:var(--num);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wt-pl-t .n{display:block;font-size:11.5px;font-weight:700;line-height:1.2;margin-top:1px}
.wt-pl-t .by{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:9.5px;color:var(--muted)}
.wt-av{display:inline-grid;place-items:center;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-weight:800;border:2px solid var(--paper)}
.wt-pl-t .by .wt-av{width:14px;height:14px;font-size:7px;border:0}
.wt-pl-set{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.wt-mini-sw{width:30px;height:18px;border-radius:999px;background:var(--good);position:relative;flex:none}
.wt-mini-sw::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--paper)}
.wt-list{width:100%;max-width:320px;display:grid;gap:8px}
.wt-store{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:8px 12px;box-shadow:0 3px 0 var(--line)}
.wt-store h5{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:13px}
.wt-badge{display:inline-grid;place-items:center;width:24px;height:19px;border-radius:6px;background:var(--store);color:#fff;font-family:var(--num);font-size:9.5px;font-weight:800}
.wt-li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:2px 0}
.wt-li .box{width:15px;height:15px;border-radius:5px;border:2px solid var(--line);flex:none}
.wt-li.done .box{background:var(--good);border-color:var(--good)}
.wt-li.done span{text-decoration:line-through;color:var(--muted)}
.wt-li em{margin-left:auto;font-style:normal;font-family:var(--num);font-weight:700;color:var(--muted);font-size:11.5px}
.wt-sale{font-family:var(--num);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--brass);color:var(--brass-ink);border-radius:999px;padding:0 6px}
.wt-chat{width:100%;max-width:330px;display:grid;gap:10px}
.wt-bubble{max-width:82%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.35}
.wt-bubble.me{justify-self:end;background:var(--maroon);color:var(--maroon-ink);border-bottom-right-radius:5px}
.wt-bubble.chef{background:var(--paper);border:2px solid var(--line);border-bottom-left-radius:5px}
.wt-chef-row{display:flex;align-items:flex-end;gap:8px}
.wt-chef-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.wt-typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin:0 2px;animation:wt-dot 1s infinite}
.wt-typing i:nth-child(2){animation-delay:.15s}.wt-typing i:nth-child(3){animation-delay:.3s}
@keyframes wt-dot{0%,100%{transform:none}50%{transform:translateY(-3px)}}
.wt-house{display:grid;justify-items:center;gap:8px;text-align:center}
.wt-house-ico{display:block;width:96px;height:96px;color:var(--maroon)}
.wt-members{display:flex}
.wt-members .wt-av{width:40px;height:40px;font-size:14px;margin-left:-8px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.wt-members .wt-av:first-child{margin-left:0}
.wt-hh-name{font-family:var(--serif);font-size:18px}
@media (prefers-reduced-motion:reduce){.wt-typing i{animation:none}.wt-vchip{transition:none}}
/* The case 8 segmented control: the old global .seg{overflow:hidden} clipped its RECOMMENDED badge (fix 2026-09-29) */
fieldset.seg{overflow:visible}
/* Tall centered dialogs must scroll to their top on phones: a centered grid overflows upward out of reach.
   Flex + auto margins centers when there's room and top-aligns when there isn't (fix 2026-09-29). */
#wte,#household-tour{display:flex;flex-direction:column;align-items:center;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wte-card,.ht-card{margin:auto 0;flex:none}
.ht-num{color:var(--brass-ink)}
.ht-num svg{display:block}
.wt-learn{border:0;background:none;color:var(--terra);font:inherit;font-weight:700;font-size:14px;padding:4px 0;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;margin-top:10px;cursor:pointer}
/* Library header actions (190a): Add recipe and What should I eat? are equal, prominent buttons; on phones they share a row under the title */
.lib-head .lib-add,.tools .wte-open{min-height:48px;padding:10px 18px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
@media (max-width:560px){.lib-head{flex-wrap:wrap}.lib-head .who{flex:1 1 calc(100% - 64px)}.lib-head .lib-add,.lib-head .wte-open{flex:1 1 0;min-width:0;font-size:15px;padding:10px 12px}.lib-head .lib-add .icon{margin:0}}
html{touch-action:manipulation} /* 190b: no double-tap zoom; pinch zoom still works */
/* Create plan wizard tiles (190c): corner check instead of a "✓" line, plus line icons */
.pl-wizard .plan-toggle.on::before{content:none}
.pl-wizard .plan-toggle{position:relative}
.pl-wizard .plan-toggle.on::after{content:"✓";position:absolute;top:7px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--maroon);color:var(--maroon-ink);display:grid;place-items:center;font-size:11px;font-weight:800;line-height:1}
.pl-tile-ico{display:inline-grid;place-items:center;color:var(--maroon);line-height:0}
.pl-wizard .plan-toggle-row .chip:not(.pl-tile){display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pl-wizard .pl-tiles .pl-tile{min-height:88px}
.btn.chunky.ks-prot[aria-pressed="true"],.btn.chunky.ks-dis[aria-pressed="true"]{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon);box-shadow:0 3px 0 var(--maroon-ledge)} /* 191a: beats .btn.chunky.ghost */

/* Recipe creator (case 21) */
.rcx-view{display:flex;justify-content:center;padding:8px 0 32px}
.rcx-card{width:min(640px,100%);background:var(--paper);color:var(--ink);border-radius:22px;box-shadow:0 16px 48px rgba(0,0,0,.18);overflow:hidden;border:1px solid var(--line)}
.rcx-head{background:var(--maroon);color:var(--maroon-ink);padding:14px 16px 12px}
.rcx-bar{display:flex;align-items:center;gap:10px}
.rcx-titles{flex:1;min-width:0}
.rcx-eyebrow{font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.rcx-head h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:2px 0 0;outline:none}
.rcx-back,.rcx-x{font:inherit;font-size:22px;line-height:1;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.16);color:inherit;cursor:pointer;flex:none}
.rcx-back:focus-visible,.rcx-x:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.rcx-prog{display:flex;gap:5px;margin:12px 0 6px}.rcx-prog i{flex:1;height:8px;border-radius:999px;background:rgba(0,0,0,.2)}
.rcx-prog i.done,.rcx-prog i.cur{background:var(--paper)}
.rcx-safe{font-size:12px;opacity:.8}
.rcx-body{padding:18px 18px 8px}
.rcx-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px 20px}
.rcx-foot .rcx-next{min-width:160px}
@media (max-width:560px){.rcx-view{padding:0 0 24px}.rcx-card{border-radius:18px}.rcx-foot .rcx-next{flex:1}}
.rcx-choices{display:grid;gap:10px}
.rcx-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;padding:16px;border:2px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--line);cursor:pointer;position:relative}
.rcx-choice[aria-checked="true"]{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 10%,var(--paper));box-shadow:0 3px 0 var(--maroon)}
.rcx-choice b{font-size:17px}
.rcx-choice .badge-brass{position:absolute;top:12px;right:12px}
.rcx-choice-sub{font-size:13px;color:var(--muted)}
.rcx-choice:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.rcx-quick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rcx-quick-chip{font:inherit;font-size:13px;font-weight:700;border:2px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--paper);color:var(--ink);cursor:pointer}
.rcx-working{text-align:center}
.rcx-robot{display:inline-block;color:var(--maroon);animation:rcx-bob 1.4s ease-in-out infinite}
@keyframes rcx-bob{50%{transform:translateY(-6px)}}
.rcx-checklist{list-style:none;padding:0;margin:12px auto;display:grid;gap:6px;max-width:260px;text-align:left}
.rcx-checklist li::before{content:"✓ ";color:var(--good);font-weight:800}
@media (prefers-reduced-motion:reduce){.rcx-robot{animation:none}}
.rcx-platform{display:inline-block;margin:0 0 10px;font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--brass);color:var(--brass-ink);border-radius:999px;padding:2px 10px}
.rcx-hints{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.rcx-hint{font-size:12.5px;font-weight:700;border:1px dashed var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-soft)}
.rcx-lbl{font-weight:700;font-size:14px;margin:6px 0 2px}.rcx-basics .ks-radios{justify-content:flex-start}
.rcx-card[data-step="ingredients"] #compwrap .ed-variations{display:none}
.rcx-card[data-step="options"] #compwrap > :not(.ed-variations){display:none}
.rcx-summary{border:2px solid var(--line);border-radius:16px;padding:14px;margin:0 0 10px}.rcx-summary h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 4px}.rcx-facts{font-size:13px;color:var(--muted);margin:4px 0 8px}.rcx-part ul{margin:4px 0 8px;padding-left:18px}.rcx-edit-links{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.rcx-review .rcx-foot{justify-content:space-between;padding:12px 0 8px}
#rcx-saved{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.rcx-saved-card{width:min(420px,100%);background:var(--paper);color:var(--ink);border-radius:22px;padding:24px 20px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.28);animation:rcx-pop .32s cubic-bezier(.34,1.5,.64,1) backwards}
.rcx-saved-ico{font-size:44px;line-height:1}
.rcx-saved-card h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:8px 0 6px;outline:none}
.rcx-saved-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
@keyframes rcx-pop{from{transform:scale(.9)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.rcx-saved-card{animation:none}}

/* Planner sheet (case 20, 200a) */
.plan-modal.plm-sheet{display:flex;flex-direction:column;width:min(1060px,100%);max-height:min(780px,calc(100dvh - 20px));padding:0;overflow:hidden;border-radius:22px}
.plm-sheet .plan-modal-head{background:var(--maroon);color:var(--maroon-ink);padding:14px 16px;margin:0;display:flex;align-items:center;gap:10px}
.plm-sheet .plan-modal-head h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0;flex:1}
.plm-sheet .plan-modal-head .close{color:inherit;background:rgba(0,0,0,.16);border:0;border-radius:50%;width:38px;height:38px;font-size:22px}
.plm-sheet .plan-modal-body{flex:1;min-height:0;overflow:auto;padding:14px 16px}
.plm-foot{flex:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
@media (max-width:560px){#planmodal-back{padding:10px;align-items:stretch}.plan-modal.plm-sheet{height:calc(100dvh - 20px);max-height:none;border-radius:20px}}

/* Planner phone week agenda (case 20, 200b) */
.plm-agenda{display:flex;flex-direction:column;gap:10px}
.plm-day-card{border:2px solid var(--line);border-radius:16px;background:var(--paper);padding:10px}
.plm-day-head{display:flex;align-items:center;gap:8px;margin:0 2px 8px;font-size:14px}
.plm-day-head b{margin-right:auto}
.plm-row{width:100%;height:48px;display:flex;align-items:center;gap:10px;padding:0 6px;background:none;border:0;border-radius:12px;text-align:left;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.plm-row-thumb{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;display:block}
.plm-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.plm-row-thumb .photo-missing{min-height:0;height:100%;padding:0;gap:0}.plm-row-thumb .photo-missing-name,.plm-row-thumb .photo-missing-note{display:none}.plm-row-thumb .photo-missing::before{content:"🍽";font-size:17px;line-height:1} /* 260a: 36px thumb shows an icon, not squeezed text */
.plm-row-name{font-weight:700;text-align:left}
.plm-row-kicker{color:var(--muted);font-size:12px}
.plm-row.is-gap{border:2px dashed var(--crit);color:var(--crit)}

/* Planner day strip (case 20, 200c) */
.plm-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.plm-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;background:var(--paper);border:2px solid var(--line);border-radius:12px;font-family:inherit;color:var(--ink);cursor:pointer}
.plm-chip-wd{font-size:11px;text-transform:uppercase;color:var(--muted)}
.plm-chip-n{font-size:15px;line-height:1}
.plm-dots{display:flex;gap:3px;min-height:6px}
.plm-dots i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.plm-dots i.left{background:none;border:1.5px solid var(--good)}
.plm-dots i.gap{background:var(--crit)}
.plm-chip[aria-selected="true"]{background:var(--maroon);color:var(--maroon-ink);box-shadow:0 3px 0 var(--maroon-ledge)}
.plm-chip[aria-selected="true"] .plm-chip-wd{color:var(--maroon-ink);opacity:.75}
.plm-chip.is-today::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--terra)}

/* Planner day pane (case 20, 200d) */
.plm-pane{display:flex;flex-direction:column;gap:10px;width:100%}
.plm-pane-head{display:flex;align-items:center;gap:8px}
.plm-pane-mid{flex:1;min-width:0;text-align:center}
.plm-nav{flex:none;width:40px;height:40px;border-radius:50%;background:var(--paper);border:2px solid var(--line);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.plm-pane-title{font-family:var(--serif);font-weight:400;font-size:20px;margin:0}
.plm-pane-sum{margin:2px 0 0}
.plm-slot{width:100%}

/* Planner week|day switch (case 20, 200e) */
.plm-view-switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--ground);border:2px solid var(--line);margin:8px 0;width:max-content}
.plm-view-opt{font:inherit;font-weight:700;border:0;border-radius:999px;padding:7px 16px;background:transparent;color:var(--ink);cursor:pointer}
.plm-view-opt.on{background:var(--maroon);color:var(--maroon-ink)}
.plm-view-opt:focus-visible{outline:3px solid var(--terra);outline-offset:2px}

/* Plan review footer (case 20, 200f): tools row + pinned actions */
.pl-wizard .plan-action-footer{position:sticky;bottom:-14px;z-index:3;background:var(--paper);border-top:1px solid var(--line);margin:12px -16px -14px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(0,0,0,.06)}
.pl-wizard .plan-calendar-head .btn{display:none}
.plm-tools{display:flex;gap:8px;margin-bottom:8px}.plm-tools .plm-tool{flex:1;min-height:44px}
.plm-status{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:color-mix(in srgb,var(--brass) 30%,var(--paper));margin:0 0 8px}

/* Saved plan sheet (case 20, 200g): mode strip + pinned toolbar */
.plm-saved{display:flex;flex-direction:column;gap:10px}
.plm-saved .saved-plan-toolbar{order:99;position:sticky;bottom:-14px;z-index:3;background:var(--paper);border-top:1px solid var(--line);margin:0 -16px -14px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px}
.plm-mode{border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;background:var(--ground)}
.plm-mode-edit{background:color-mix(in srgb,var(--brass) 30%,var(--paper))}
.plm-mode-version{background:color-mix(in srgb,var(--terra) 14%,var(--paper))}

/* Planner board meal tile (case 20, 201a): color bar, icon kicker, tags, whole-tile open button */
.plm-tile{position:relative;border-radius:16px}
.plm-tile .pl-meal-photo{border-right:5px solid var(--c)}
.plm-tile.is-leftover{outline:2px dashed var(--line);outline-offset:-2px}
.plm-tile.is-leftover .pl-meal-photo{border-right-style:dashed}
.plm-tile-open{position:absolute;inset:0;z-index:1;background:none;border:0;border-radius:inherit;cursor:pointer}
.plm-tile-open{align-self:stretch;justify-self:stretch;margin:0}.plm-tile .plan-slot-title{pointer-events:none} /* 260a: the stretched button must fill the tile (it was 2px tall); a tap on the name opens the meal card too */
.plm-tile-open:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.plm-tile .plan-slot-title{position:relative;z-index:2}
.plm-tile-kicker{display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--c)}
.plm-tag-pin{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon)}
.plm-tag-left{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,0,0,.06) 5px 10px)}
.plm-pane .plm-tile{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:start}
.plm-pane .plm-tile .pl-meal-photo{grid-row:1 / span 4;aspect-ratio:1/1;margin:0;height:auto}

.plm-ro-body{display:flex;flex-direction:column;gap:12px}
.plm-ro-view{width:100%}
.plm-lock{margin:0;font-size:13px}

/* 201c — meal card: chunky icon action grid + wide photo band (card only) */
.pl-meal-card .plan-slot-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pl-meal-card .plan-slot-actions .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;border-radius:14px;border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.pl-meal-card .plan-slot-actions .btn[aria-pressed="true"]{background:var(--maroon);color:var(--maroon-ink);border-color:var(--maroon);animation:plmPop .25s ease backwards}
@keyframes plmPop{from{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.pl-meal-card .plan-slot-actions .btn{animation:none}}
.pl-meal-card .plan-slot-remove{color:var(--crit)}
.pl-meal-card .pl-meal-head{flex-wrap:wrap}
.pl-meal-card .pl-meal-photo-big{width:100%;aspect-ratio:auto;height:118px;border-radius:14px}
.plm-row[role="button"]{cursor:pointer}
.plm-row .pl-by{margin-left:auto;font-size:12px;color:var(--muted)}

/* 201e — day view: swipe between days, the slide, and the "N open · next" pill */
.plm-next-open{align-self:flex-start;border:0;border-radius:999px;background:var(--crit);color:#fff;font-weight:700;padding:6px 12px;margin:8px 0}
.plm-pane{touch-action:pan-y}
.plm-slide-next{animation:plmSlideN .32s cubic-bezier(.22,.61,.36,1) backwards}
.plm-slide-prev{animation:plmSlideP .32s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes plmSlideN{from{transform:translateX(60%) rotate(1.5deg)}}
@keyframes plmSlideP{from{transform:translateX(-60%) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.plm-slide-next,.plm-slide-prev{animation:none}}
.plm-swipe-hint{text-align:center;font-size:12px;margin-top:8px}
.pl-wiz-ico{display:flex;color:var(--muted)}
.pl-wiz-pip.cur .pl-wiz-ico,.pl-wiz-pip.done .pl-wiz-ico{color:var(--brass)}
.pl-wiz-pip.done .pl-wiz-pipbtn::before,.pl-wiz-pip.cur .pl-wiz-pipbtn::before{background:var(--brass)}

/* 201g — saved plan sheet: previous versions as a list screen */
.plm-ver-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.plm-ver-card{border:2px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:1fr auto auto;gap:4px 8px;align-items:center}
.plm-ver-replaced{grid-column:1}

/* 201h — meal picker in the card look */
.plm-picker{padding:0;border-radius:22px;overflow:hidden;max-height:calc(100dvh - 20px)}
.plm-picker .meal-picker-head{background:var(--maroon);color:var(--maroon-ink);padding:14px 16px;margin:0}
.plm-picker .meal-picker-head .eyebrow{color:inherit;opacity:.85}
.plm-picker .meal-picker-head .close{color:inherit;background:rgba(0,0,0,.16);border:0;border-radius:50%;width:38px;height:38px}
.plm-picker > :not(.meal-picker-head):not(.meal-picker-footer){padding-left:16px;padding-right:16px}
.plm-picker .meal-pick-list{flex:1;min-height:0;overflow:auto}
.plm-picker .meal-pick-select{display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center;text-align:left}
.plm-pick-thumb{grid-row:1 / span 2;width:44px;height:44px}
.plm-picker .meal-picker-footer{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px}
.plm-picker .meal-picker-footer .btn{flex:1;min-height:48px}
/* 201i: choice dialogs — icon disc, chunky stacked buttons on phone, link-style choice */
.plm-dlg-ico{width:56px;height:56px;border-radius:50%;background:var(--tan);display:grid;place-items:center;font-size:28px;margin:0 auto 10px}
.plm-dlg h2{text-align:center}
.plm-dlg .sub{text-align:center}
.plm-dlg-link{background:none;border:0;box-shadow:none;text-decoration:underline;color:var(--muted)}
@media (max-width:560px){.plm-dlg-btns{flex-direction:column}.plm-dlg-btns .btn{width:100%;min-height:48px}}
.plm-view-draft{display:flex;flex-direction:column;gap:12px}
.plm-close-draft{width:100%}
.ai-local-cmd{display:block;white-space:pre-wrap;word-break:break-all;background:var(--tan);border-radius:10px;padding:8px 10px;font-size:12.5px;margin:6px 0}

.vw-ais{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.pl-price-ico{display:inline-flex;color:var(--brass)} /* 260f */
@media(max-width:559px){.thumb .photo-missing{padding:24px 6px 28px;gap:0}.thumb .photo-missing-note{display:none}.thumb .photo-missing-name{font-size:12px;-webkit-line-clamp:3}} /* 260g: library row placeholder shows only the name */
@media(max-width:559px){.detail-hero .spec .s{padding:10px 10px}.detail-hero .spec .s .v{font-size:16px}} /* 260g: "Moderate" fits its stat box */
.settings-ai-prefs{display:block;width:100%;box-sizing:border-box;min-height:9em} /* 260g: AI preferences textarea uses the card's full width */
.photo-missing.similar-recipe-photo .photo-missing-name,.photo-missing.similar-recipe-photo .photo-missing-note{display:none}.photo-missing.similar-recipe-photo::before{content:"🍽";font-size:16px;line-height:1} /* 260g: 34px similar-recipe thumb shows an icon */
@media(min-width:900px){.settings-cards-view > :not(.settings-hero):not(.settings-index){grid-column:2;min-width:0}.settings-cards-view > .settings-index{grid-row:2 / span 40}} /* 270a: every Settings card in the main column; the index keeps the left column */
@media(max-width:560px){.settings-cards-view .settings-index,.settings-index{padding-right:36px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}} /* 270a: the phone index shows that it scrolls sideways */
.admin-seg{background:rgba(127,127,127,.18)}.admin-seg .seg-opt{color:var(--ink);opacity:.85}.admin-seg .seg-opt:has(input:checked){color:var(--maroon);opacity:1} /* 270b: unselected Admin tabs are readable */
@media(min-width:900px){.users-add{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;max-width:640px}.users-add > :not(label){grid-column:1 / -1}.users-add .ac-actions{justify-content:flex-start}} /* 270b: add-account form reads as one block */
.thumb{overflow:hidden}.thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* 270c: photo height follows the box, not the image */
@media(min-width:900px){.detail-hero .spec{grid-template-columns:repeat(4,minmax(0,1fr))}} /* 270c: recipe facts in balanced rows of 4 */
@media(min-width:1900px){.wrap:has(.lib-head){max-width:1820px}.wrap:has(.lib-head) .grid{grid-template-columns:repeat(5,minmax(0,1fr))}} /* 270c: big screens show more of the Library */
.calendar-week-scroll{scrollbar-width:thin;scrollbar-color:var(--maroon) transparent}.calendar-week-scroll::-webkit-scrollbar{height:8px}.calendar-week-scroll::-webkit-scrollbar-thumb{background:var(--maroon);border-radius:999px} /* 270c: the week visibly scrolls sideways */
@media(min-width:1100px){.livebar{padding-left:calc((100vw - 1000px) / 2);padding-right:calc((100vw - 1000px) / 2)}} /* 270c: Save stays near the form on wide screens */
.receipt-current summary{cursor:pointer;font-weight:700;margin:4px 0 8px}.receipt-current-q{width:100%;box-sizing:border-box;margin:0 0 8px} /* 270h */
.livebar .btn.is-incomplete{opacity:.55}.rcx-count{font-size:12px;font-weight:700;opacity:.85;margin:0 0 4px} /* 270j */
.ing .shop-chk{width:22px;height:22px;flex:none;cursor:pointer}.shop-nm-lbl{cursor:pointer}.ing .shop-rm{min-width:36px;min-height:36px;padding:0 8px} /* 270f */
@media(max-width:560px){.ing .shop-chk{width:24px;height:24px;margin:10px 10px 10px 0}.ing .shop-rm{min-width:44px;min-height:44px}} /* 270f: thumb-sized targets on phones */
.detail-more{width:100%}.detail-more > summary{list-style:none;display:inline-flex;cursor:pointer}.detail-more > summary::-webkit-details-marker{display:none}.detail-more[open] > summary{margin-bottom:8px} /* 270i */

.settings-more{display:block;margin:10px auto 4px} /* 280c */
.admin-head{margin:0 0 14px}.admin-head h2{font-family:var(--serif);font-size:26px;margin:0 0 2px}.admin-seg{background:var(--maroon)}.admin-seg .seg-opt{color:var(--maroon-ink);opacity:.8}.admin-seg .seg-opt:has(input:checked){color:var(--maroon);opacity:1} /* 290b: same switcher colours as Household */
.settings-card>*:not(h2) h2{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px} /* 290e: in-card headings are subheads, not a second title */
.detail-more:not([open]){width:auto}@media(max-width:560px){.detail-hero .hero-img{aspect-ratio:16/9;max-height:34vh}} /* 290f */
@media(min-width:1041px){.lib-search{display:none}} /* 290d: the header search covers the Library on wide screens */
.rcx-save.is-incomplete{opacity:.55} /* 300d: greyed but still pressable; pressing jumps to what's missing */
.lib-drafts{margin:0 0 16px}.lib-drafts h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}.lib-draft{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line-soft)}.lib-draft-name{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}.lib-draft-name .subtle{display:block;font-weight:400;font-size:12.5px} /* 300f */
@media(min-width:1024px){:root{--fs-support:13.5px}}@media(min-width:1800px){:root{--fs-support:14.5px}}.card .meta,.panel .sub,.tw-meta,.hhp-nm span,.hhp-inv-meta,.activity-time,.sa-price-meta:not(.attn){color:var(--support)} /* 320a: Phase 63 A3 supporting text */
/* 320b: Phase 63 shared page heading (docs/design/page-headers-notes.md). Scoped .view>.page-head so it outranks the old per-page heading rules. */
.view>.page-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;justify-items:stretch;text-align:left;gap:6px 18px;margin:4px 0 20px;padding:22px 26px;border-radius:var(--r-head);background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;container-type:inline-size}
.view>.page-head>*{position:relative;z-index:1}
.page-head-icon{width:52px;height:52px;border-radius:14px;background:var(--tan);color:var(--maroon);display:grid;place-items:center;line-height:0;align-self:start}
.page-head-icon svg{width:30px;height:30px}
.page-head-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.view>.page-head .page-head-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.1cqi + 12px,44px);line-height:1.05;margin:4px 0 0;color:inherit;outline:none}
.view>.page-head .page-head-purpose{font-size:16px;color:var(--ink-soft);max-width:62ch;margin:6px 0 0}
.page-head-extra{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.page-head-action{display:flex;gap:8px;justify-content:flex-end}
.view>.page-head-featured{background:var(--maroon);color:var(--maroon-ink);border-color:transparent}
.view>.page-head-featured .page-head-eyebrow,.view>.page-head-featured .page-head-purpose{color:var(--maroon-ink)}
.page-head-featured .page-head-icon{background:rgba(255,255,255,.14);color:var(--maroon-ink)}
.view>.page-head-featured::after{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.page-head-featured .page-head-action .btn.primary{background:var(--paper);color:var(--maroon);border-color:var(--paper)}
@media (max-width:639px){.view>.page-head{grid-template-columns:auto minmax(0,1fr);padding:18px}.page-head-action{grid-column:1 / -1}.page-head-action>.btn{flex:1}.view>.page-head .page-head-purpose{font-size:15px}}
@media (min-width:1800px){.view>.page-head{padding:28px 32px}.view>.page-head .page-head-purpose{font-size:17px}}
.page-head-pop .page-head-icon{animation:pageHeadPop .45s cubic-bezier(.34,1.56,.64,1) backwards}
.page-head-pop .page-head-action{animation:pageHeadPop .45s .12s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes pageHeadPop{from{transform:scale(.6) rotate(-6deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.page-head-pop .page-head-icon,.page-head-pop .page-head-action{animation:none}}
.card .thumb{aspect-ratio:auto;width:100%;height:190px}.recipe-row{grid-template-columns:128px minmax(0,1fr) 152px}.recipe-row .thumb{width:128px;height:96px}@media(max-width:600px){.card .thumb{height:132px}.recipe-row{grid-template-columns:96px minmax(0,1fr)}.recipe-row .thumb{width:96px;height:72px}} /* 320k: Phase 63 A4 one photo box */
.admin-seg{background:var(--tan)}.admin-seg .seg-opt{color:var(--ink-soft);opacity:1}.admin-seg .seg-opt:has(input:checked){color:var(--maroon)} /* 320i: Phase 63 A2: readable Admin tabs on a tan track */
.form-max{max-width:560px}.users-split{display:grid;gap:16px;align-items:start}@media(min-width:900px){.users-split{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}} /* 320j: Phase 63 A2 */
.needs-fixing-chip{background:var(--terra);border-color:var(--terra);color:#fff} /* 391b */
.variation-fix-panel{border-color:var(--terra)}.variation-fix-panel ul{margin:6px 0 10px;padding-left:18px} /* 391d */
.tools .wte-open{margin-left:auto} /* 400c: What should I eat? sits on the right of the tools box */
/* 400d: Revise with AI pill — filled pink, soft glow ring pulses twice on open */
.btn.primary.revise-ai{border-radius:999px;padding-left:16px;padding-right:16px;animation:revise-glow 1.4s ease-out .3s 2}
@keyframes revise-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--maroon) 60%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--maroon) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.btn.primary.revise-ai{animation:none}}
@media (hover:hover) and (pointer:fine){.take-photo{display:none}} /* 400e: camera button only on touch devices */
.sa-recent-prices{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0}.sa-recent-prices p{margin:0} /* 400g */
/* 420a: Items on sale — shared head, search, inline form, sticker (design docs/design/sale-layout-notes.md, option C) */
:root{--brass-ledge:color-mix(in srgb,var(--brass) 62%,#000);--sel-fill:color-mix(in srgb,var(--maroon) 9%,var(--paper))}
.sale-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.sale-tile{width:44px;height:44px;border-radius:13px;background:var(--halo);color:var(--maroon);display:grid;place-items:center}
.sale-tile svg{width:26px;height:26px}
.sale-head h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;margin:0}
.sale-head p{margin:2px 0 0;font-size:13.5px;color:var(--support);line-height:1.35}
.sale-count{font-family:var(--num);font-size:12px;font-weight:800;color:var(--brass-ink);background:var(--brass);border-radius:999px;padding:3px 10px;box-shadow:0 2px 0 var(--brass-ledge);white-space:nowrap}
.sale-count.zero{background:none;color:var(--support);box-shadow:none;border:1px solid var(--line)}
.sale-find{position:relative;margin:12px 0}
.sale-find svg{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.sale-find input[type="search"]{width:100%;box-sizing:border-box;border:2px solid var(--line);background:var(--ground);border-radius:14px;padding:11px 12px 11px 38px;font-size:15px}
.sale-find input[type="search"]:focus{outline:none;border-color:var(--maroon)}
.sale-empty{margin:0;padding:14px;text-align:center;color:var(--support);font-size:14px;border:2px dashed var(--line);border-radius:14px}
.sale-form{border:2px solid var(--maroon);border-radius:16px;background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:12px;margin-top:10px}
.sf-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-top b{font-size:16px}
.sf-top span{font-size:12.5px;color:var(--support)}
.sf-top .x{margin-left:auto;width:32px;height:32px;border-radius:999px;border:0;background:var(--tan);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:18px}
.sf-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--support);margin:0 0 -6px}
.sf-stores{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0;min-width:0}
.sf-stores label{position:relative;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:5px 11px 5px 6px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--paper);box-shadow:0 2px 0 var(--line)}
.sf-stores input,.sf-unit input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sf-stores i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:800;color:#fff}
.sf-stores label:has(input:checked){border-color:var(--maroon);background:var(--sel-fill);box-shadow:0 2px 0 var(--maroon)}
.sf-stores label:has(input:focus-visible),.sf-unit label:has(input:focus-visible){outline:2px solid var(--terra);outline-offset:2px}
.sf-price{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.sf-money{position:relative}
.sf-money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--num);font-weight:800;font-size:22px;color:var(--support)}
.sale-form .sf-money input{width:100%;box-sizing:border-box;font-family:var(--num);font-size:24px;font-weight:800;border:2px solid var(--line);border-radius:14px;padding:6px 10px 6px 30px;background:var(--ground);-moz-appearance:textfield}
.sale-form .sf-money input::-webkit-inner-spin-button{display:none}
.sale-form .sf-money input:focus,.sale-form .sf-small input:focus{outline:none;border-color:var(--maroon)}
.sf-unit{display:flex;background:var(--tan);border-radius:12px;padding:3px;gap:2px;border:0;margin:0}
.sf-unit label{position:relative;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.sf-unit label:has(input:checked){background:var(--paper);color:var(--maroon);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.sf-row{display:flex;flex-wrap:wrap;gap:8px}
.sf-small{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--support);flex:1;min-width:120px}
.sale-form .sf-small input{border:2px solid var(--line);border-radius:12px;padding:7px 10px;background:var(--ground);font-size:14px;color:var(--ink);min-width:0}
.sf-note{margin:0;font-size:12.5px;color:var(--support)}
.sf-err{margin:0;font-size:13.5px;color:var(--crit);font-weight:600}
.sf-acts{display:flex;gap:10px}
.sf-acts .btn.chunky{flex:1}.sf-acts .btn.chunky.ghost{flex:none}
@media (prefers-reduced-motion:no-preference){
  .sale-form.opening{animation:sfOpen .28s cubic-bezier(.2,.9,.3,1.2) backwards;transform-origin:50% 0}
  .sale-pop{animation:salePop .46s cubic-bezier(.34,1.56,.64,1) backwards}
  .c-tag.swing{animation:tagSwing .6s ease-out}
}
@keyframes sfOpen{from{transform:translateY(-6px) scale(.98)}}
@keyframes salePop{0%{transform:scale(.5) rotate(-12deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
@keyframes tagSwing{0%{transform:rotate(0)}25%{transform:rotate(-7deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}100%{transform:none}}
/* 420b: Items on sale option C — this week first, price-tag chips */
.c-sec{margin-top:12px}
.c-sec h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin:0 0 4px}
.c-sec p.c-why{margin:0 0 10px;font-size:13px;color:var(--support)}
.c-tags{display:flex;flex-wrap:wrap;gap:10px 8px}
.c-tag{position:relative;display:inline-flex;align-items:center;gap:7px;border:0;background:var(--tan);color:var(--ink);cursor:pointer;padding:8px 14px 8px 24px;font-size:14.5px;font-weight:700;border-radius:0 12px 12px 0;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%);transform-origin:4px 50%}
.c-tag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--paper)}
.c-tag small{font-family:var(--num);font-weight:800;font-size:12px;display:inline-block}
.c-tag[aria-expanded="true"]{background:var(--maroon);color:var(--maroon-ink)}
.c-tag.on{background:var(--brass);color:var(--brass-ink)}
.c-tag:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.c-sec+.c-sec{border-top:1px dashed var(--line);padding-top:12px}
.c-more{border:0;background:none;color:var(--maroon);font-weight:800;font-size:14px;cursor:pointer;padding:12px 0 0}

/* ===== Phase 68: receipt wizard (.rw), Shopping entry card, welcome-tour slide; ported from docs/design/receipt-wizard-prototype.html ===== */
/* ---------- wizard shell: a full-height sheet on phone, a 600px card on laptop ---------- */
.rw-back,.rw,.rw-entry,.wt-rcpt{--good-ledge:color-mix(in srgb,var(--good) 65%,#000);--good-fill:color-mix(in srgb,var(--good) 12%,var(--paper));--crit-fill:color-mix(in srgb,var(--crit) 10%,var(--paper));--mono:ui-monospace,"SF Mono",Menlo,monospace}
.rw-back{position:fixed;inset:0;z-index:76;background:var(--paper)}
.rw{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);overflow:hidden}
@media (min-width:700px){
  .rw-back{background:rgba(20,12,10,.45);display:grid;place-items:center;padding:20px}
  .rw{position:relative;inset:auto;width:600px;max-width:100%;height:min(760px,calc(100vh - 40px));border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
}
.rw .rw-newstore input,.rw .rw-fixlist input,.rw input.rw-num,.rw .rw-paste textarea{box-shadow:none}
.rw-head{background:var(--maroon);color:var(--maroon-ink);padding:14px 16px 16px;flex:none}
.rw-top{display:flex;align-items:center;gap:10px}
.rw-top h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:21px;line-height:1.1;margin-right:auto}
.rw-round{width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.16);color:var(--maroon-ink);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.rw-round svg{width:17px;height:17px}
.rw-round:focus-visible{outline:2px solid var(--maroon-ink);outline-offset:2px}
.rw-prog{display:flex;align-items:center;gap:10px;margin-top:14px}
.rw-track{flex:1;height:12px;border-radius:999px;background:rgba(0,0,0,.2);overflow:hidden}
.rw-fill{height:100%;width:100%;border-radius:999px;background:var(--brass);box-shadow:inset 0 -3px 0 var(--brass-ledge);transform-origin:0 50%;transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.rw-steplbl{font-family:var(--num);font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap;opacity:.9}
.rw-body:focus{outline:none}
.rw-body{flex:1;min-height:0;overflow-y:auto;padding:20px 16px 24px;overscroll-behavior:contain}
.rw-foot{flex:none;border-top:1px solid var(--line);background:var(--paper);padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px}
.rw-foot-row{display:flex;gap:10px;align-items:center}
.rw-foot-msg{font-size:13.5px;color:var(--support);text-align:center}
.rw-foot-msg b{color:var(--maroon)}

/* shared pieces */
.rw .btn.chunky{border:0;border-radius:16px;padding:13px 18px;font-weight:800;font-size:16px;background:var(--maroon);color:var(--maroon-ink);box-shadow:0 4px 0 var(--maroon-ledge);cursor:pointer;transition:transform .07s,box-shadow .07s;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.rw .btn.chunky svg{width:19px;height:19px}
.rw .btn.chunky:active{transform:translateY(4px);box-shadow:0 0 0 var(--maroon-ledge)}
.rw .btn.chunky.ghost{background:var(--paper);color:var(--ink-soft);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);padding:11px 16px}
.rw .btn.chunky.ghost:active{box-shadow:0 0 0 var(--line)}
.rw .btn.chunky.good{background:var(--good);color:#fff;box-shadow:0 4px 0 var(--good-ledge)}
:root[data-theme="dark"] .rw .btn.chunky.good{color:#10200f}
.rw .btn.chunky.sm{font-size:14px;padding:9px 13px;border-radius:13px;flex:none}
.rw .btn.chunky:disabled{opacity:.5;cursor:not-allowed;transform:none}
.rw .btn.chunky:focus-visible,.rw .linkbtn:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.rw .linkbtn{border:0;background:none;color:var(--maroon);font-weight:800;font-size:14px;cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.rw .hero{text-align:center;background:none;border-radius:0;padding:0;margin:0;overflow:visible}
.rw .hero-ring{position:relative;width:132px;height:132px;margin:0 auto 12px;display:grid;place-items:center}
.rw .hero-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--halo)}
.rw .hero-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed color-mix(in srgb,var(--maroon) 22%,transparent)}
.rw .hero-ring svg{position:relative;width:76px;height:76px;color:var(--maroon)}
.rw .hero h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.15;margin-bottom:6px}
.rw .hero p{color:var(--ink-soft);max-width:34ch;margin:0 auto;font-size:15px}
.rw .lbl{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--support);margin:0 0 8px}
.rw .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;border:0;padding:0;margin:0}
.rw .chips legend{float:left;width:100%;text-align:center}
.rw .chips .rw-addstore{display:inline-flex;align-items:center;gap:5px;border:2px dashed var(--line);border-radius:999px;padding:5px 12px 5px 8px;font-size:13.5px;font-weight:700;color:var(--maroon);background:none;cursor:pointer}
.rw .chips .rw-addstore svg{width:16px;height:16px}
.rw .chips .rw-addstore:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.rw-storerow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rw-storerow .chips label{cursor:default;border-color:var(--maroon);background:var(--sel-fill);box-shadow:0 2px 0 var(--maroon)}
.rw-src{font-size:12.5px;color:var(--support)}
.rw-storepick{border:2px solid var(--maroon);border-radius:18px;padding:12px;margin-bottom:14px;background:var(--paper)}
.rw-storemiss{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:8px}
.rw-newstore{display:flex;gap:8px;margin-top:10px;width:100%}
.rw .rw-newstore input{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--ground);font-size:15px}
.rw .rw-newstore input:focus{outline:none;border-color:var(--maroon)}
.rw .chips label.just{animation:none}
@media (prefers-reduced-motion:no-preference){.rw .chips label.just{animation:rwPop .45s cubic-bezier(.34,1.56,.64,1) backwards}}
.rw .chips label{position:relative;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:5px 11px 5px 6px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--paper);box-shadow:0 2px 0 var(--line)}
.rw .chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rw .chips i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:800;color:#fff}
.rw .chips label:has(input:checked){border-color:var(--maroon);background:var(--sel-fill);box-shadow:0 2px 0 var(--maroon)}
.rw .chips label:has(input:focus-visible){outline:2px solid var(--terra);outline-offset:2px}
.rw .mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.rw .money{font-family:var(--num);font-weight:800}

/* ---------- 1. Photo ---------- */
.rw-tips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0 18px}
.rw-tips span{display:inline-flex;align-items:center;gap:5px;font-family:var(--num);font-size:12px;font-weight:800;color:var(--support);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 7px}
.rw-tips svg{width:14px;height:14px;color:var(--good)}
.rw-shots{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;margin-bottom:6px}
.rw-shot{position:relative;flex:none;width:78px;height:118px;border-radius:12px;background:#fffdf8;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);overflow:hidden}
.rw-shot svg.r{width:100%;height:100%}
.rw-shot b{position:absolute;left:6px;bottom:5px;font-family:var(--num);font-size:11px;background:var(--maroon);color:var(--maroon-ink);border-radius:999px;padding:0 7px}
.rw-shot .rw-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.rw-shot .rw-x svg{width:12px;height:12px}
.rw-add{flex:none;width:78px;height:118px;border-radius:12px;border:2px dashed var(--line);background:none;color:var(--maroon);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:800;cursor:pointer;text-align:center;line-height:1.2}
.rw-add svg{width:22px;height:22px}
.rw-picks{display:flex;gap:10px;margin:4px 0 22px}
.rw-sec+.rw-sec{margin-top:18px}

/* ---------- 2. Reading: a receipt printing out ---------- */
.rw-print{position:relative;width:200px;margin:8px auto 18px}
.rw-slot{position:relative;z-index:2;height:22px;border-radius:11px;background:var(--ink);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 60%,#000)}
.rw-slot::after{content:"";position:absolute;left:18px;right:18px;top:9px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--paper) 25%,var(--ink))}
.rw-window{position:relative;height:210px;margin:-8px 14px 0;overflow:hidden}
.rw-tape{position:absolute;left:0;right:0;top:0;background:#fffdf8;color:#4a3f38;padding:0 12px;
  -webkit-mask:linear-gradient(#000 calc(100% - 8px),transparent 0),conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 50% 100%/12px 8px repeat-x;
          mask:linear-gradient(#000 calc(100% - 8px),transparent 0),conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 50% 100%/12px 8px repeat-x}
.rw-tape i{display:flex;justify-content:space-between;align-items:center;height:21px;font-style:normal}
.rw-tape i::before{content:"";height:7px;width:var(--w);border-radius:2px;background:#cfc4b6}
.rw-tape i::after{content:"";height:7px;width:28px;border-radius:2px;background:#b7a998}
.rw-tape i.sp::before,.rw-tape i.sp::after{background:none}
.rw-wait{text-align:center}
.rw-wait h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:4px}
.rw-wait p{color:var(--ink-soft);max-width:32ch;margin:0 auto;font-size:15px;min-height:3em}
.rw-elapsed{display:inline-block;margin-top:10px;font-family:var(--num);font-weight:800;font-size:12px;color:var(--support);border:1px solid var(--line);border-radius:999px;padding:2px 10px}

/* ---------- failure ---------- */
.rw-fail .hero-ring svg{color:var(--crit)}
.rw-why{list-style:none;padding:0;margin:16px auto 0;max-width:30ch;text-align:left;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.rw-why li{display:flex;gap:8px}
.rw-why svg{width:18px;height:18px;flex:none;color:var(--terra);margin-top:2px}
.rw .rw-paste textarea{width:100%;min-height:150px;border:2px solid var(--line);border-radius:14px;background:var(--ground);padding:10px 12px;font-family:var(--mono);font-size:13px;resize:vertical}
.rw .rw-paste textarea:focus{outline:none;border-color:var(--maroon)}
.rw-paste ol{margin:0 0 12px;padding-left:20px;color:var(--ink-soft);font-size:14px;display:flex;flex-direction:column;gap:4px}

/* ---------- 3. Totals ---------- */
.rw-sum{border:2px solid var(--line);border-radius:18px;padding:16px;background:var(--paper);box-shadow:0 4px 0 var(--line)}
.rw-sum.ok{border-color:var(--good);box-shadow:0 4px 0 var(--good-ledge);background:var(--good-fill)}
.rw-sum.off{border-color:var(--crit);box-shadow:0 4px 0 color-mix(in srgb,var(--crit) 65%,#000);background:var(--crit-fill)}
.rw-sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;padding:3px 0}
.rw-sumrow .money{font-size:20px}
.rw-sumrow.small{font-size:13.5px;color:var(--support)}.rw-sumrow.small .money{font-size:14px}
.rw-sum hr{border:0;border-top:1px dashed var(--line);margin:8px 0}
.rw-tick{width:96px;height:96px;margin:6px auto 14px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--good-ledge)}
:root[data-theme="dark"] .rw-tick{color:#10200f}
.rw-tick svg{width:54px;height:54px;stroke-width:3}
.rw-tick path{stroke-dasharray:30;stroke-dashoffset:0}
.rw-offbadge{width:96px;height:96px;margin:6px auto 14px;border-radius:50%;background:var(--crit);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 color-mix(in srgb,var(--crit) 65%,#000);font-family:var(--num);font-weight:800;font-size:22px}
.rw-fixlist{list-style:none;margin:12px 0 0;padding:0;border:2px solid var(--line);border-radius:16px;overflow:hidden}
.rw-fixlist li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 10px 7px 12px;border-top:1px solid var(--line)}
.rw-fixlist li:first-child{border-top:0}
.rw-fixlist small{display:block;color:var(--support);font-size:12px}
.rw .rw-fixlist input{width:84px;text-align:right;border:2px solid var(--line);border-radius:10px;padding:5px 8px;background:var(--ground);font-family:var(--num);font-weight:800}
.rw .rw-fixlist input:focus{outline:none;border-color:var(--maroon)}

/* ---------- 4. Lines ---------- */
.rw-score{display:flex;gap:8px;margin-bottom:16px}
.rw-score span{flex:1;border-radius:14px;padding:8px 10px;font-size:13px;font-weight:700;line-height:1.2;display:flex;flex-direction:column;gap:2px}
.rw-score b{font-family:var(--num);font-size:22px;line-height:1}
.rw-score .need{background:var(--maroon);color:var(--maroon-ink);box-shadow:0 3px 0 var(--maroon-ledge)}
.rw-score .need.zero{background:var(--good);color:#fff;box-shadow:0 3px 0 var(--good-ledge)}
.rw-score .ready{background:var(--halo);color:var(--ink-soft)}
.rw-score .skip{background:none;border:2px solid var(--line);color:var(--support)}
.rw-gh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--terra);margin:18px 0 8px}
.rw-gh:first-of-type{margin-top:0}
.rw-lead{font-size:14px;color:var(--ink-soft);margin:-2px 0 10px}
.rw-cards{display:flex;flex-direction:column;gap:12px}
.rw-card{border:2px solid var(--maroon);border-radius:18px;background:var(--paper);box-shadow:0 4px 0 var(--maroon-ledge);padding:12px 12px 13px;display:flex;flex-direction:column;gap:10px}
.rw-card.done{border-color:var(--good);box-shadow:0 4px 0 var(--good-ledge)}
.rw-card.skipped{border:2px dashed var(--line);box-shadow:none;padding:9px 12px;flex-direction:row;align-items:center;gap:8px;color:var(--support);font-size:13.5px}
.rw-card.skipped .linkbtn{margin-left:auto}
.rw-rline{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rw-rline .mono{color:var(--support)}
.rw-ask{display:flex;align-items:flex-start;gap:9px}
.rw-ask .kico{width:34px;height:34px;flex:none;border-radius:11px;background:var(--sel-fill);color:var(--maroon);display:grid;place-items:center}
.rw-card.done .kico{background:var(--good-fill);color:var(--good)}
.rw-ask .kico svg{width:20px;height:20px}
.rw-ask b{display:block;font-size:15.5px;line-height:1.25}
.rw-ask p{font-size:13.5px;color:var(--ink-soft);line-height:1.35;margin-top:2px}
.rw-badge{display:inline-block;font-family:var(--num);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:1px 8px;vertical-align:2px;margin-left:4px;background:var(--brass);color:var(--brass-ink)}
.rw-badge.soft{background:var(--tan);color:var(--ink-soft)}
.rw-vs{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:14px;background:var(--ground);border-radius:12px;padding:8px 10px}
.rw-vs dt{font-size:12px;color:var(--support);padding-top:1px}.rw-vs dd{margin:0;font-weight:700}
.rw-weigh{display:flex;gap:8px;align-items:stretch}
.rw input.rw-num{flex:1;min-width:0;font-family:var(--num);font-size:22px;font-weight:800;border:2px solid var(--line);border-radius:14px;padding:6px 10px;background:var(--ground);-moz-appearance:textfield}
.rw input.rw-num::-webkit-inner-spin-button{display:none}
.rw input.rw-num:focus{outline:none;border-color:var(--maroon)}
.rw .seg2{display:flex;background:var(--tan);border-radius:12px;padding:3px;gap:2px;border:0;margin:0}
.rw .seg2 label{position:relative;padding:8px 11px;border-radius:9px;font-size:13.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}
.rw .seg2 input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rw .seg2 label:has(input:checked){background:var(--paper);color:var(--maroon);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.rw .seg2 label:has(input:focus-visible){outline:2px solid var(--terra)}
.rw-math{font-size:13.5px;color:var(--ink-soft)}
.rw-math .money{color:var(--ink)}
.rw-acts{display:flex;gap:8px;flex-wrap:wrap}
.rw-ing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.rw-ing>span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--support)}
.rw .rw-ing select{flex:1;min-width:150px;border:2px solid var(--line);border-radius:12px;padding:6px 8px;background:var(--paper);font-weight:700;font-size:14px}
.rw .rw-ing select.unset{border-color:var(--maroon);color:var(--maroon)}
.rw .rw-ing select:focus{outline:2px solid var(--terra);outline-offset:1px}
.rw-ing .linkbtn{font-size:13px}
.rw-done-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--good);font-weight:700}
.rw-done-line svg{width:18px;height:18px;flex:none}
.rw-done-line .linkbtn{margin-left:auto;color:var(--support)}
/* the "ready" group: compact rows, folded by default */
.rw-ready{border:2px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden}
.rw-ready-head{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;padding:12px;cursor:pointer;text-align:left}
.rw-ready-head .kico{width:34px;height:34px;border-radius:11px;background:var(--good-fill);color:var(--good);display:grid;place-items:center;flex:none}
.rw-ready-head .kico svg{width:20px;height:20px}
.rw-ready-head b{display:block;font-size:15px}
.rw-ready-head small{font-size:13px;color:var(--support)}
.rw-ready-head .chev{margin-left:auto;width:20px;height:20px;color:var(--support);transition:transform .2s}
.rw-ready-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.rw-ready-head:focus-visible{outline:3px solid var(--terra);outline-offset:-3px}
.rw-rows{list-style:none;margin:0;padding:0}
.rw-rows li{border-top:1px solid var(--line);padding:9px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:start}
.rw-rows .nm{font-weight:700;font-size:14.5px;line-height:1.3}
.rw-rows .mono{grid-column:1;color:var(--support);font-size:11.5px}
.rw-rows .rw-math{grid-column:1;font-size:13px}
.rw-rows .side{grid-row:1/span 3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rw-pill{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--halo);color:var(--ink-soft);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.rw-rows .linkbtn{font-size:12.5px;padding:0;color:var(--support)}
.rw-rows .rw-ing{grid-column:1/-1;margin-top:6px}
.rw-each{display:inline-block;font-family:var(--num);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:1px 7px;background:var(--brass);color:var(--brass-ink);margin-left:4px;vertical-align:1px}

/* ---------- 5. Done ---------- */
.rw-party{position:relative}
.rw-confetti{position:absolute;inset:-10px 0 auto;height:0;pointer-events:none}
.rw-confetti i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;left:var(--x);background:var(--c);transform:translateY(var(--y0)) rotate(var(--r0))}
.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.rw-stats div{border-radius:14px;padding:10px;background:var(--halo);text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);line-height:1.2}
.rw-stats b{display:block;font-family:var(--num);font-size:26px;color:var(--ink);line-height:1.1}
.rw-stats div.saved{background:var(--good);color:#fff;box-shadow:0 3px 0 var(--good-ledge)}
.rw-stats div.saved b{color:inherit}
.rw-list{list-style:none;margin:0 0 14px;padding:0;font-size:14px;display:flex;flex-direction:column;gap:4px}
.rw-list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:4px 0}
.rw-list li span:last-child{color:var(--support);text-align:right}

/* ---------- entry on the Shopping page (in addition to Settings › Ingredient prices) ---------- */
.rw-entry{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:var(--paper);border:2px solid var(--maroon);border-radius:18px;padding:14px;box-shadow:0 4px 0 var(--maroon-ledge);margin-bottom:14px}
.rw-entry .kico{grid-row:1/span 2;width:46px;height:46px;border-radius:14px;background:var(--halo);color:var(--maroon);display:grid;place-items:center}
.rw-entry .kico svg{width:28px;height:28px}
.rw-entry b{font-size:16px;line-height:1.25}
.rw-entry p{font-size:13.5px;color:var(--ink-soft);line-height:1.35}
.rw-entry .when{grid-column:1/-1;font-size:12.5px;color:var(--support);display:flex;align-items:center;gap:6px;margin-top:6px}
.rw-entry .when i{width:8px;height:8px;border-radius:50%;background:var(--brass);flex:none}
.rw-entry .btn.chunky{grid-column:1/-1;margin-top:8px}
/* ---------- welcome tour: new slide 6 of 9 (copies the live .wt-* look) ---------- */
.wt-rcpt{display:flex;align-items:center;gap:14px}
.wt-strip{width:96px;background:#fffdf8;border-radius:4px 4px 0 0;padding:10px 9px 14px;box-shadow:0 8px 18px rgba(0,0,0,.14);transform:rotate(-4deg);
  -webkit-mask:linear-gradient(#000 calc(100% - 6px),transparent 0),conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 50% 100%/10px 6px repeat-x;
          mask:linear-gradient(#000 calc(100% - 6px),transparent 0),conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 50% 100%/10px 6px repeat-x}
.wt-strip i{display:flex;justify-content:space-between;height:13px;align-items:center}
.wt-strip i::before{content:"";height:5px;width:var(--w);background:#cfc4b6;border-radius:2px}
.wt-strip i::after{content:"";height:5px;width:16px;background:#b7a998;border-radius:2px}
.wt-strip b{display:block;font-family:var(--mono);font-size:9px;color:#6b5d52;text-align:center;margin-bottom:6px;letter-spacing:.08em}
.wt-pills{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wt-pill{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 6px;font-size:13px;font-weight:700;box-shadow:0 2px 0 var(--line)}
.wt-pill .t{width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center}
.wt-pill .t svg{width:13px;height:13px;stroke-width:3}
.wt-pill.cam{border-color:var(--maroon);color:var(--maroon)}
.wt-pill.cam svg{width:18px;height:18px}

/* ---------- motion: transform only, nothing starts invisible, plays once per step ---------- */
@media (prefers-reduced-motion:no-preference){
  .rw-body.enter>*{animation:rwRise .32s cubic-bezier(.2,.9,.3,1.15) backwards}
  .rw-body.enter>*:nth-child(2){animation-delay:.04s}
  .rw-body.enter>*:nth-child(3){animation-delay:.08s}
  .rw-body.enter .hero-ring svg{animation:rwPop .5s .05s cubic-bezier(.34,1.56,.64,1) backwards}
  .rw-tape{animation:rwFeed 7.2s steps(18) infinite}
  .rw-tick.pop{animation:rwPop .5s cubic-bezier(.34,1.56,.64,1) backwards}
  .rw-tick.pop path{animation:rwDraw .45s .25s ease-out backwards}
  .rw-card.just{animation:rwBump .4s cubic-bezier(.34,1.56,.64,1)}
  .rw-card.just .kico{animation:rwPop .45s cubic-bezier(.34,1.56,.64,1)}
  .rw-shot.just{animation:rwPop .45s cubic-bezier(.34,1.56,.64,1) backwards}
  .rw-confetti i{animation:rwFall 1.6s var(--d) cubic-bezier(.2,.6,.4,1) forwards}
}
@keyframes rwRise{from{transform:translateY(10px)}}
@keyframes rwPop{0%{transform:scale(.5) rotate(-10deg)}55%{transform:scale(1.08) rotate(3deg)}100%{transform:none}}
@keyframes rwDraw{from{stroke-dashoffset:30}}
@keyframes rwFeed{from{transform:translateY(-378px)}to{transform:translateY(0)}}
@keyframes rwBump{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
@keyframes rwFall{0%{transform:translateY(var(--y0)) rotate(var(--r0))}80%{opacity:1}100%{transform:translateY(260px) rotate(var(--r1));opacity:0}}
.rw-confetti{display:none}
@media (prefers-reduced-motion:no-preference){.rw-confetti{display:block}}
@media (prefers-reduced-motion:reduce){.rw *{transition:none!important}}
/* 450d: US average price line in Settings › Ingredient prices */
.price-bench{font-size:11.5px;color:var(--support);padding-left:2px}.price-bench.warn{color:var(--crit);font-weight:700}
/* 540a: phones. iOS zooms in on any field under 16px and stays zoomed (Cook Mode then opened cropped), and inflates text on rotate. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse){input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:max(16px,1em)!important}}