/* Dense records and transaction surfaces share the household palette. */
.billing-state{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:13px}.billing-state p{margin:0}.notice p{margin:10px 0 0;font-size:13px}.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}.plans .panel{display:flex;flex-direction:column;align-items:flex-start}.plans .panel p:not(.price):not(.eyebrow){font-size:13px;color:var(--muted);margin-bottom:22px}.plans .panel button{margin-top:auto}.plans .price{font:43px/1 Georgia,serif;letter-spacing:-1px;margin:4px 0 14px}.plans .annual{background:var(--tint);border-color:var(--moss)}.empty{padding:32px 0;max-width:680px}.empty-mark{display:block;font:32px Georgia,serif;color:#a44720;margin-bottom:14px}.empty h2{font-size:26px}.empty p{font-size:14px;color:var(--muted)}.inline-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.inline-actions a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}.referral-panel{max-width:650px}.referral-panel label{margin:24px 0 12px}.referral-panel .details{margin-top:24px}.table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--white)}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th,td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;font-weight:600;background:var(--hover);color:var(--muted);white-space:nowrap}td{overflow-wrap:anywhere;min-width:120px}td small{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}tr:last-child td{border-bottom:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.section-heading h2{margin:0}.toolbar{max-width:480px;margin-bottom:26px}.secret label{margin:20px 0}.secret input{font-family:ui-monospace,monospace;font-size:13px}.secret .secondary{margin-top:4px}dialog{max-width:480px;width:calc(100% - 40px);padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);box-shadow:0 20px 80px #142c2440}dialog::backdrop{background:#172c2670}dialog p{font-size:14px;overflow-wrap:anywhere}.dialog-error{color:var(--danger);font-size:13px;margin-bottom:16px}select{max-width:100%;text-overflow:ellipsis}.form-stack>label+select{margin-top:-14px}#content{min-width:0;overflow-wrap:anywhere}.form-stack,.panel,.summary{min-width:0}#main:focus,#main:focus-visible{outline:none} /* the content region takes focus after navigation to reset reading order; it is not a control, and a ring around the whole page is the box Cody objects to; the next Tab shows the ring on the first control */@media(max-width:700px){.plans{grid-template-columns:1fr}.section-heading{align-items:flex-start}.section-heading .badge{white-space:normal}th,td{padding:12px}.table-wrap{width:100%}.billing-state{gap:10px}}

.sponsorship{background:var(--tint);border-color:var(--moss);max-width:760px;margin-top:28px}.sponsorship h2{margin-bottom:12px}.sponsorship>p{font-size:14px}.sponsorship .details{margin:22px 0}.sponsorship .inline-actions{margin-top:18px}
/* Daily plan (Home). Hero declaw (Cody, 2026-10-13): tonight sits on the paper with no card, outline, radius or stripe; the meal name is the h1. */
.today{display:grid;gap:14px;align-content:start}
.today.hero{padding-bottom:8px}
.plan-sample{margin-right:10px;vertical-align:middle;letter-spacing:0;font-weight:600;text-transform:none}
.today .meal h1,.meal-head h1{margin:0;flex:1 1 320px;min-width:0}
.today h2{margin:0}
.today>p{margin:0}
.today .hint{margin-top:6px}
.today .inline-actions{margin-top:10px}
.plan-feedback{color:var(--danger);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.plan-feedback:empty{display:none}
.plan-progress{font-size:15px}
.meal{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.meal:first-of-type{border-top:0;padding-top:0}
.meal .eyebrow{margin-bottom:4px}
.meal h2,.meal h4{margin:0;font:28px/1.2 Georgia,serif;letter-spacing:-.4px}
.meal-meta{font-size:14px;color:var(--muted);margin:0}
.meal-allergens{font-size:13px;margin:0}
.day-notes{font-size:14px;color:var(--muted);border-left:3px solid var(--orange);padding-left:12px;margin:8px 0 0}
.summary>a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.allowance{font-size:14px;margin:0 0 10px}
.allowance strong{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-right:8px;color:var(--muted)}
.allowance-amount{font:22px/1 Georgia,serif;letter-spacing:-.5px}
.exception{margin:0 0 28px;max-width:none}
.exception p{margin-top:8px}
/* 6am walk (2026-10-09): one line per day, meals comma-separated, so a 14-day plan reads as a list rather than a wall; prose preferences keep their line breaks. */
.exception ul{margin:8px 0;padding-left:18px;line-height:1.6}
.exception li+li{margin-top:4px}
.prose-lines{white-space:pre-line}
.billing-state a,.reason-link{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
/* Full-width week (Cody, 2026-10-13): under tonight across the content width; 5, 6 or 7 planned days sit left-to-right when 140px columns fit, a longer plan wraps; on a phone the days stack and the document scrolls. */
.week{margin-top:40px}
.week h2{font-size:23px}
.day-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:20px}
.day{display:grid;gap:4px;text-align:left;padding:12px 12px 14px;background:var(--white);border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:84px;align-content:start}
.day span,.day-today{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.day-today{color:var(--accent);font-weight:700}
.day strong{font:24px/1 Georgia,serif}
.day small{font-size:12px;color:var(--muted);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.day:hover{border-color:var(--line-strong)}
.day[aria-pressed="true"]{background:var(--tint);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.day-detail{padding:26px 30px;background:var(--white);border:1px solid var(--line);border-radius:8px}
.day-detail h3{font:23px/1.2 Georgia,serif;margin-bottom:12px}
.day-detail .meal h4{font-size:22px}
.ingredients-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.ingredients{margin:0;padding-left:18px;font-size:14px;line-height:1.7;columns:2;column-gap:28px}
@media(max-width:700px){.day-strip{grid-template-columns:1fr;gap:6px}.day{min-height:0;padding:10px 12px 12px}.day-detail{padding:20px}.ingredients{columns:1}.meal h2{font-size:24px}.exception{margin-bottom:20px}}
@media(prefers-reduced-motion:no-preference){.day{transition:border-color .15s ease,background-color .15s ease}}
.snapshot-note{margin:0 0 14px;font-size:13px}
.grocery{margin-top:20px;padding:18px 22px;background:var(--white);border:1px solid var(--line);border-radius:8px}
.grocery summary{cursor:pointer;font-weight:600;font-size:14px;min-height:44px;display:flex;align-items:center}
.grocery summary{border-radius:4px}
.grocery .ingredients{margin-top:14px}
.grocery-rest{margin-top:6px}
.topup{max-width:760px}.topup-form{max-width:420px;margin-top:18px}.topup-form input{font:22px/1 Georgia,serif;letter-spacing:-.5px}.topup-summary{font-size:14px;margin:0}.topup-pending{margin:0 0 18px}.topup-pending p{margin:0 0 12px;font-size:14px}
.topup-history{margin-top:28px}.topup-history h3{font-size:16px;margin-bottom:12px}.topup-status{font-size:12px;font-weight:600}.status-paid{color:var(--green)}.status-pending,.status-review_required{color:var(--accent)}.status-expired,.status-failed{color:var(--muted)}
/* Security page rhythm */
#verification-section,#password-form,.sessions{max-width:760px;margin-bottom:24px}
.sessions .section-heading{margin-bottom:14px}
.sessions .table-wrap{margin-bottom:16px}
/* Thumbs feedback — quiet line icons, 44px targets */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.thumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:6px 0 10px;color:var(--muted);font-size:13px}
.thumbs-label{margin-right:4px}
.thumb{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);opacity:.55}
.thumb:hover{opacity:.9;background:var(--hover)}
.thumb[aria-pressed="true"]{opacity:1;color:var(--green);background:var(--tint);border-color:var(--tint-line)}
.thumb[aria-pressed="true"] svg{fill:#cfe0c8}
.thumb[data-verdict="down"][aria-pressed="true"]{color:var(--accent);background:#fbefe7;border-color:#e3c4b3}
.thumb[data-verdict="down"][aria-pressed="true"] svg{fill:#f3d8c8}
.thumbs-reply{font-size:13px;color:var(--green)}
.thumbs-reply:empty{display:none}
.thumbs-note{flex-basis:100%}
.note-form{display:flex;gap:6px;align-items:center;max-width:460px;margin-top:4px}
.note-form input{min-height:44px;padding:8px 12px;font-size:14px}
.note-form .text-button{white-space:nowrap;min-height:44px}
.note-saved{margin-top:6px}
@media(prefers-reduced-motion:no-preference){.thumb{transition:opacity .12s ease,background-color .12s ease}}
/* Envelope + Dear Frank (inbox). The letter control (Cody, 2026-10-13): one flat drawing (frank-letter.png, wide transparent margins, so the 72px image sits cropped inside the 44px button); its invitation is a tooltip on hover and keyboard focus. */
.topbar-right{display:flex;align-items:center;gap:10px}
.envelope-wrap{position:relative;display:inline-grid}
.envelope{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);opacity:.85;overflow:hidden}
.envelope img{display:block;width:72px;height:72px;max-width:none;margin:-15px} /* the margins bring the 72px image's box down to the button's 42px content box, so it centres instead of aligning to the start as overflowing content does in a scroll container */
.envelope:hover{opacity:1;background:var(--hover)}
.envelope[aria-current]{opacity:1;color:var(--green);background:var(--tint);border-color:var(--tint-line)}
.envelope-tip{position:absolute;top:calc(100% + 6px);right:0;z-index:5;padding:8px 10px;border-radius:5px;background:var(--ink);color:var(--cream);font-size:12px;line-height:1.4;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0}
.envelope:hover+.envelope-tip,.envelope:focus-visible+.envelope-tip{visibility:visible;opacity:1}
@media(prefers-reduced-motion:no-preference){.envelope-tip{transition:opacity .12s ease}}
.letters-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.letters .section-heading{margin-bottom:14px}
.letter-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.letter{padding:18px 22px;background:var(--white);border:1px solid var(--line);border-radius:8px}
.letter-meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.letter-body{margin:0;font:16px/1.6 Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.letter-owner{background:var(--tint);border-color:var(--tint-line)}
.composer{display:grid;gap:12px;position:sticky;top:24px}
.composer textarea{font:16px/1.6 Georgia,serif;min-height:170px}
.composer-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:1000px){.letters-layout{grid-template-columns:1fr;gap:28px}.composer{position:static;order:-1}}
.thumbs-reply{flex-basis:100%;margin-top:2px}
/* Chief review: a true thumbs-down (180deg rotation of the same line icon, not a vertical flip) */
.thumb[data-verdict="down"] svg{transform:rotate(180deg)}
/* Cookbook marks, post-cook card, Cookbook page */
.meal-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.meal-head h2,.meal-head h4{margin:0;flex:1 1 200px;min-width:0}
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:0 0 auto;min-width:0;max-width:100%}
/* 6am walk (2026-10-09): an open note wraps under the meal name at 320 instead of pushing the page wide; the input shrinks and Dismiss drops a line. */
.mark-note,.thumbs-note{min-width:0}
.note-form{flex-wrap:wrap}.note-form input{min-width:0;flex:1 1 160px}
td button{white-space:nowrap}
.mark{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);opacity:.55}
.mark:hover{opacity:.9;background:var(--hover)}
.mark[aria-pressed="true"]{opacity:1;color:var(--green)}
.mark[data-kind="heart"][aria-pressed="true"]{color:var(--accent)}.mark[data-kind="heart"][aria-pressed="true"] svg{fill:#f3d8c8}
.mark[data-kind="someday"][aria-pressed="true"]{background:var(--tint);border-color:var(--tint-line)}
.mark-note{flex-basis:100%}
.cook-card{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cook-q{margin:0 0 8px;font-size:14px;color:var(--muted)}
.cook-choices{display:flex;flex-wrap:wrap;gap:8px}
.cook-choices .secondary{min-height:44px}
.cook-follow{margin-top:10px}
.cook-done{margin:0 0 8px;font-size:14px}
.stars{display:flex;gap:2px;margin:4px 0 8px}
.star{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);opacity:.5}
.star[data-filled],.star[aria-checked="true"]{opacity:1;color:#b8860b}.star[data-filled] svg,.star[aria-checked="true"] svg{fill:#f1dc9c}
.cook-note{margin-top:4px}
.cook-other input{max-width:360px}
.cookbook-search{max-width:640px;margin-bottom:18px}
/* One quiet field (Cody, 2026-10-10 late: the field and the button read as two heavy boxes). The input has no box of its own; the field carries the border and the focus; Search is a word inside its right end. */
.search-field{display:flex;align-items:center;min-height:44px;padding:0 4px 0 0;background:var(--white);border:1px solid var(--line-strong);border-radius:5px}
.search-field input{flex:1 1 auto;min-height:42px;padding:10px 12px;border:0;background:none;border-radius:5px}
.search-field input:focus{outline:none;box-shadow:none}
.search-field:has(input:focus){border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 0 4px #c9d3bd99}
.search-field .search-go{flex:0 0 auto;min-height:36px;padding:0 12px;font-size:14px;font-weight:600;color:var(--green);text-decoration:none;border-radius:4px;white-space:nowrap}
.search-field .search-go:hover{background:var(--hover)}
.search-field .search-go:focus-visible{outline-offset:0}
.cookbook-search label{display:block;margin-bottom:6px}
.shelves{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.shelf{min-height:44px;padding:8px 14px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted)}
.shelf[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}
.recipe-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px;border-top:1px solid var(--line)}
.recipe{padding:16px 0;border-bottom:1px solid var(--line)}
.recipe h2{font-size:18px}
.tags{margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
/* Cookbook shelves (2026-10-10 late): a collection's tab. Course chips with counts; the list grouped by course in the pantry's small-caps grammar; 44px rows on hairlines; the marks as quiet words on hover or focus. */
.courses{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--muted);font-size:14px;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--tint);border-color:var(--tint-line);color:var(--green);font-weight:600}
.chip-count{font-size:12px;font-weight:400;color:var(--muted)}
.kpk-table{width:100%;border-collapse:collapse;font-size:15px}
.kpk-table th,.kpk-table td{padding:0 10px;border-bottom:1px solid var(--line);vertical-align:middle;background:none;font-weight:400;font-size:inherit;color:inherit;text-align:left;min-width:0}
.kpk-table td:first-child,.kpk-table th:first-child{padding-left:0}.kpk-table td:last-child,.kpk-table th:last-child{padding-right:0}
.kpk-table .group-row th{height:40px;padding-top:14px;font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.kpk-table .group-count{margin-left:8px;font-weight:400;letter-spacing:0;font-size:12px}
.kpk-table .row td{height:44px}
.kpk-table .krow,.recipe-list.rows .krow.openable{cursor:pointer}
.kpk-table .krow:hover,.recipe-list.rows .krow.openable:hover{background:var(--hover)}
.krow:focus-visible{outline-offset:-2px}
.ktitle{font:17px/1.25 Georgia,serif;letter-spacing:-.2px;color:var(--ink);overflow-wrap:anywhere}
.c-kmeta{text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.kpk-table .c-kmeta{width:1%}
.kpk-table .c-actions{width:170px;text-align:right;white-space:normal}
/* the own shelves: the same row as a list (no course groups), title · muted line · the words */
.recipe-list.rows{border-top:0;max-width:none}
.recipe-list.rows .krow{display:grid;grid-template-columns:minmax(0,1fr) auto 170px;align-items:center;gap:0 10px;min-height:44px;padding:0;border-bottom:1px solid var(--line)}
.recipe-list.rows .c-actions{text-align:right;white-space:normal}
.marks-text{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px;max-width:100%}
.marks-text .mark{display:inline-flex;width:auto;height:32px;min-height:32px;padding:4px 6px;border:0;border-radius:4px;font-size:13px;color:var(--muted);opacity:1;transition:none}
.marks-text .mark:hover{opacity:1;color:var(--ink);background:none}
.krow:hover .mark,.krow:focus-within .mark,.marks-text .mark[aria-pressed="true"]{opacity:1}
.marks-text .mark[aria-pressed="true"]{font-weight:600}
.marks-text .mark-note{flex-basis:100%;text-align:left}
@media(max-width:700px){.courses{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px 14px;padding:0 18px 4px}.courses::-webkit-scrollbar{display:none}.kpk-table .krow,.kpk-table .krow td{display:block;width:100%}.kpk-table .krow .c-actions{display:none}.kpk-table .krow{padding:9px 0;border-bottom:1px solid var(--line)}.kpk-table .krow td{border:0;height:auto;padding:0}.kpk-table .c-kmeta{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.recipe-list.rows .c-kmeta{overflow:hidden;text-overflow:ellipsis}.recipe-list.rows .krow{grid-template-columns:minmax(0,1fr) fit-content(50%);padding:8px 0}.recipe-list.rows .c-actions{grid-column:1 / -1;text-align:left}.recipe-list.rows .krow:not(:focus-within) .c-actions{display:none}} /* under 700px the table's muted line folds under the title on one line, as the guest list does (beside the title it wrapped to three lines at 320); the list's stays beside its title in a fit-content(50%) track (an auto track beside 1fr sizes to its min-content and would wrap it at every space; a percentage max-width on the cell resolves against its own track and halves it); the title yields first */
/* A collection recipe (KP's Kitchen, 2026-10-10 late): one quiet page; the yield edits in place with the pantry's number grammar; unscaled lines in muted. */
.recipe-view{max-width:720px}
.recipe-view .rv-back{margin:0 0 18px}
.recipe-view .meal-head h1{flex:1 1 320px;min-width:0;margin-bottom:6px} /* the marks sit beside the title on desktop and wrap under it on the phone, as on the list */
.recipe-link{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--line-strong);text-underline-offset:4px}.recipe-link:hover{text-decoration-color:var(--ink)}
.rv-byline{color:var(--muted);font-size:14px;margin:0 0 6px}
.rv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;margin:0 0 18px;min-height:32px}
.rv-meta .serves{display:inline-flex;align-items:center;gap:6px}
.rv-meta .as-written{color:var(--muted)}
.yield{min-height:32px;padding:0 4px;background:none;border:0;font:17px/1 Georgia,serif;color:var(--ink);text-decoration:underline dotted;text-decoration-color:var(--line-strong);text-underline-offset:4px;cursor:pointer}
.yield:hover{text-decoration-color:var(--ink)}
.rv-meta .qty-input{font-size:17px;height:28px}
.rv-description{font-size:16px;max-width:640px}
.rv-section{margin-top:28px}.rv-section h2{font-size:22px;margin-bottom:12px}
.ingredient-lines{list-style:none;margin:0;padding:0;max-width:560px}
.ingredient-lines li{padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45}
.ingredient-lines li.as-written{color:var(--muted)}
.rv-legend{margin-top:10px}
.rv-steps{margin:0;padding-left:24px;max-width:640px}.rv-steps li{padding:6px 0;font-size:16px;line-height:1.6}
.rv-cook{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
/* D2 budget flexibility segmented control */
.segmented-field{margin-top:4px}
.segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--white)}
.segment{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;cursor:pointer;color:var(--muted);font-size:14px}
.segment+.segment{border-left:1px solid var(--line)}
.segment input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.segment:has(input:checked){background:var(--tint);color:var(--green);font-weight:600}
.segment:has(input:focus-visible){outline:2px solid var(--green);outline-offset:-3px;border-radius:6px}
.budget-flex-help{margin:8px 0 0}
@media(max-width:480px){.segmented{display:flex}.segment{flex:1 1 0;padding:0 8px}}
/* System colors erase the selected fill. Show the real radio above its label:
   the checked dot survives forced colors without squeezing phone-sized text. */
@media(forced-colors:active){
 .segment{flex-basis:auto;flex-direction:column;gap:4px;padding-top:6px;padding-bottom:6px}
 .segment input{position:static;inset:auto;flex:none;width:16px;height:16px;min-height:0;padding:0;opacity:1;appearance:auto}
 /* The full label already carries keyboard focus; avoid a second input ring. */
 #app .segment input:focus{outline:none;box-shadow:none}
}
.field-error{margin:6px 0 0;font-size:14px;color:var(--danger)}
/* Finish setup, three beats (2026-10-08). Beat 1: the name lands, the dot is typed last, the lede and the joke follow. Beat 2: the calendar scene builds the week. Beat 3 (.landed): the plan rises, the heading stays put. */
.setup-progress{margin:0 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.setup-progress-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:17px 4px;color:var(--ink);text-decoration:none;min-height:74px}
.setup-progress-link:hover{background:var(--hover)}
.setup-progress-kicker{font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.setup-progress-count{font-size:12px;color:var(--muted);grid-column:2;grid-row:1}
.setup-progress-link strong{font:20px/1.2 Georgia,serif;letter-spacing:-.3px;grid-column:1;grid-row:2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.setup-progress-link progress{width:min(190px,24vw);height:6px;grid-column:2;grid-row:2;appearance:none;border:0;border-radius:3px;background:var(--line);overflow:hidden;accent-color:var(--green)}
.setup-progress-link progress::-webkit-progress-bar{background:var(--line)}
.setup-progress-link progress::-webkit-progress-value{background:var(--green)}
.setup-progress-link progress::-moz-progress-bar{background:var(--green)}
@media(max-width:700px){.setup-progress-link{gap:7px 14px;padding:16px 4px}.setup-progress-link strong{font-size:18px}.setup-progress-link progress{width:min(110px,29vw)}}
.celebrate h1{font-size:clamp(44px,6vw,72px);margin-bottom:14px}.celebrate .dot{color:var(--orange);display:inline-block}.celebrate .lede{font-size:18px;color:var(--ink);margin-bottom:14px}.celebrate .proof{max-width:640px;margin:0 0 36px;font-size:14px;color:var(--muted)}.celebrate .proof .source{font-size:12px;white-space:nowrap}
.celebrate h1,.celebrate .lede,.celebrate .proof,.building{animation:frank-rise .55s ease-out both}.celebrate .lede{animation-delay:.55s}.celebrate .proof{animation-delay:.85s}.building{animation-delay:1.25s}
.celebrate .dot{animation:frank-pop .45s cubic-bezier(.2,1.5,.4,1) .5s both}
@keyframes frank-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.celebrate.landed h1,.celebrate.landed .lede,.celebrate.landed .proof,.celebrate.landed .dot{animation:none}
.building{display:grid;justify-items:start;gap:10px;max-width:640px;padding:8px 0 24px}.building .scene,.plan-scene .scene{display:block;width:min(100%,440px);height:auto}.building h2{font:30px/1.2 Georgia,serif;letter-spacing:-.4px;margin:12px 0 0}.building p{margin:0;color:var(--muted);font-size:16px}.building .primary{margin-top:14px}.building .primary[aria-busy="true"]{opacity:.55}
.building .plan-scene{width:100%;max-width:440px}.plan-scene:empty{display:none}.plan-scene{margin:4px 0 8px}
.celebrate-layout .today{animation:frank-rise .5s ease-out both}
@media(prefers-reduced-motion:reduce){.celebrate h1,.celebrate .lede,.celebrate .proof,.celebrate .dot,.building,.celebrate-layout .today{animation:none}}
.first-week{margin:36px 0 8px}.fw-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fw-card{display:grid;gap:6px;align-content:start;text-align:left;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;line-height:1.5}.fw-card strong{font:20px/1.2 Georgia,serif;letter-spacing:-.3px}.fw-card span:last-child{color:var(--muted)}.fw-card:hover{border-color:var(--moss-2)}.fw-card.done{background:var(--tint);border-color:var(--moss)}.fw-card.done .pw-mark{background:var(--green);border-color:var(--green)}.first-week #fw-hide{margin-top:8px;font-size:13px}
@keyframes frank-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.week.reveal .day{animation:frank-rise .45s ease-out both}.week.reveal .day:nth-child(2){animation-delay:110ms}.week.reveal .day:nth-child(3){animation-delay:220ms}.week.reveal .day:nth-child(4){animation-delay:330ms}.week.reveal .day:nth-child(5){animation-delay:440ms}.week.reveal .day:nth-child(6){animation-delay:550ms}.week.reveal .day:nth-child(7){animation-delay:660ms}.week.reveal .day:nth-child(8){animation-delay:770ms}.week.reveal .day:nth-child(9){animation-delay:880ms}.week.reveal .day:nth-child(10){animation-delay:990ms}.week.reveal .day:nth-child(11){animation-delay:1100ms}.week.reveal .day:nth-child(12){animation-delay:1210ms}.week.reveal .day:nth-child(13){animation-delay:1320ms}.week.reveal .day:nth-child(14){animation-delay:1430ms}
@media(prefers-reduced-motion:reduce){.week.reveal .day{animation:none}}
@media(max-width:700px){.fw-cards{grid-template-columns:1fr}}
.pw-rules{list-style:none;margin:-10px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--muted)}.pw-rules li{display:flex;align-items:center;gap:8px;min-height:22px}.pw-mark{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--moss-2);border-radius:50%;font-size:11px;line-height:1;flex-shrink:0;color:var(--cream)}.pw-mark svg{width:10px;height:10px}.pw-rules li.done{color:var(--ink)}.pw-rules li.done .pw-mark{background:var(--green);border-color:var(--green)}.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}
/* Password eye (Cody, 2026-10-13): the label and the button share one grid cell, so the 46px button lands over the input's right end and an inline field error still drops to the next row. */
.pw-field{display:grid;grid-template-columns:minmax(0,1fr)}.pw-field>label{grid-area:1/1}.pw-field input{padding-right:52px}
.pw-eye{grid-area:1/1;justify-self:end;align-self:end;width:46px;height:46px;min-height:46px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--muted);display:grid;place-items:center}
.pw-eye svg{width:20px;height:20px}.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--green)}.pw-eye:focus-visible{outline-offset:-3px}
/* Finish round: forgot-password link under the field, special-occasion control, one-screen sponsor + invite */
.field-aside{margin:-10px 0 0;font-size:13px}
.field-aside a{display:inline-flex;align-items:center;min-height:44px}
.planned-with{color:var(--muted)}
.sponsor,.invite{max-width:760px;margin-top:28px}
.sponsor-line{font-size:15px;margin:0 0 22px}
.invite textarea{font-size:14px;line-height:1.6;min-height:130px;margin-bottom:14px;field-sizing:content}
.invite .inline-actions{gap:14px}
.table-wrap .text-button{padding:8px 0;min-height:44px}
.section-note:has(.table-wrap){max-width:none}.table-wrap button{white-space:nowrap}
/* Pantry (2026-10-09): the page line; the Instacart control in the grocery list; the line under a building scene. The top-bar pantry line retired 2026-10-10 (pantry objects). */
.pantry-page-line{font:22px/1.3 Georgia,serif;letter-spacing:-.3px;max-width:640px;margin:-14px 0 28px}
.scene-line{margin:6px 0 0;font-size:15px;color:var(--muted);max-width:440px}
.instacart{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.instacart .plan-scene{margin:0 0 10px}
.instacart-status{margin:10px 0 0;font-size:14px;line-height:1.5}
.instacart-status:empty{display:none}
.instacart-status.error{color:var(--danger)}
.instacart-status a{margin-left:4px}
.instacart .secondary[aria-busy="true"]{opacity:.55}
.voice-line{font-style:italic}
/* UI walk (Cody, 2026-10-13): the week runs under tonight across the full content width; Plan ahead follows the first moves; the balance closes the page. */
.plan-ahead .hint{margin-top:12px}
@media(max-width:700px){.today .meal h1{font-size:34px}}

/* Record cards (2026-10-09, Vera 6am's residual built by Vera System): under 1000px the shared table() keeps its markup and reads as a stack of cards, so the last columns never hide in a sideways scroll. Each cell names its column from data-label in the small-caps grammar; the action cell carries no label; an empty cell takes no space. */
@media(max-width:1000px){.table-wrap{overflow:visible;border:0;border-radius:0;background:transparent}.table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%;min-width:0}.table-wrap thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.table-wrap tr{padding:6px 16px;background:var(--white);border:1px solid var(--line);border-radius:8px;margin-bottom:12px}.table-wrap tr:last-child{margin-bottom:0}.table-wrap td{display:grid;grid-template-columns:minmax(104px,.8fr) 1.2fr;gap:4px 14px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}.table-wrap td::before{content:attr(data-label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding-top:2px}.table-wrap td:last-child{border-bottom:0}.table-wrap td:empty{display:none}.table-wrap td:has(>button:only-child)::before{content:none}.table-wrap td:has(>button:only-child){grid-template-columns:1fr}.table-wrap td small{margin-top:4px}}

/* Pantry objects, the table (Vera, 2026-10-10 evening; brief: builds/frank-pantry/dispatch/vera-desktop-table.md). One real table at every width.
   Desktop: place sections, small-caps group rows, 44px item rows, hairlines from --line, no panels, no cards; controls at opacity 0 until the row
   is hovered, focused within, or opened. Phone: place tabs show one tbody; a row opens on tap with the 44px stepper and the words. */
.pantry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pantry-head h1{margin-bottom:0}
.pantry-head .primary{flex-shrink:0}
.pantry-honest{margin:0 0 8px;font-size:15px;line-height:1.6;max-width:none}
.pantry-honest .honest-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:8px}
.pantry-honest .honest-item{padding:4px 0;min-height:32px;font-size:15px;text-underline-offset:4px}
.pantry-honest .honest-days{color:var(--muted);font-size:13px}
.pantry-status{min-height:0;font-size:14px;margin:0}
.pantry-status:empty{display:none}
.pantry-status .undo-line{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.pantry-status .text-button{min-height:44px}
.pantry-empty{padding:18px 0 8px}
.pantry-empty h2{font-size:23px}
/* places: anchors (desktop) and tabs (phone) carry the same glyph, name and count */
.place-anchors{display:flex;gap:6px;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.place-anchors a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.place-anchors a:hover{color:var(--ink)}
.place-anchors .place-count,.place-tabs .place-count,.place-title .place-count{font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;color:var(--muted)}
.place-tabs{display:none}
/* the table */
.pantry-table{width:100%;border-collapse:collapse;font-size:15px;margin-top:4px}
.pantry-table th,.pantry-table td{padding:0 10px;border-bottom:1px solid var(--line);vertical-align:middle;background:none;font-weight:400;font-size:inherit;color:inherit;white-space:normal;min-width:0;text-align:left}
.pantry-table td:first-child,.pantry-table th:first-child{padding-left:0}
.pantry-table td:last-child,.pantry-table th:last-child{padding-right:0}
.pantry-table .place-row th,.pantry-table .place-row td{height:72px;padding-top:26px;border-bottom:1px solid var(--line-strong);vertical-align:bottom;padding-bottom:10px}
.place-title{display:inline-flex;align-items:baseline;gap:10px;font:28px/1.1 Georgia,serif;letter-spacing:-.4px;color:var(--ink)}
.place-mark{display:inline-grid;place-items:center;width:28px;height:28px;flex-shrink:0;align-self:center}
.place-mark img{display:block;width:28px;height:28px}
.place-anchors .place-mark,.place-tabs .place-mark{width:22px;height:22px}.place-anchors .place-mark img,.place-tabs .place-mark img{width:22px;height:22px}
.pantry-table .place-row .c-actions{text-align:right}
.pantry-table .add-open{font-size:13px;color:var(--green);min-height:44px;padding:8px 0;white-space:nowrap}
.pantry-table .group-row th{height:40px;padding-top:14px;font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
/* The outline (Cody, 2026-10-10 late: left-to-right nesting). One unit is 28px on desktop, 16px on the phone. Level 0: the place mark and title at the outer edge.
   Level 1: the group mark and label, and the add row, one unit in. Level 2: item names two units in, so they hang under the group label's text, not under its mark.
   The quantity, gauge and age columns keep their positions and the hairlines run full width; found notes and open-row controls follow their row. */
:root{--step:28px}
.pantry-table .group-row th{padding-left:var(--step)}
.pantry-table .row[data-id] .c-name,.pantry-table .row.parent .c-name{padding-left:calc(var(--step) * 2)}
.pantry-table .row.child .c-name{padding-left:calc(var(--step) * 2 + 18px)}
.group-head{display:inline-flex;align-items:center;gap:4px} /* mark + gap = one unit, so item names at level 2 hang exactly under the label's text */
.group-mark{display:inline-grid;place-items:center;width:24px;height:24px;flex-shrink:0}
.group-mark img{display:block;width:24px;height:24px}
.group-label.g-produce{color:var(--g-produce)}.group-label.g-meat{color:var(--g-meat)}.group-label.g-dairy{color:var(--g-dairy)}.group-label.g-condiments{color:var(--g-condiments)}.group-label.g-leftovers{color:var(--g-leftovers)}.group-label.g-drinks{color:var(--g-drinks)}.group-label.g-vegfruit{color:var(--g-vegfruit)}.group-label.g-prepared{color:var(--g-prepared)}.group-label.g-dried{color:var(--g-dried)}.group-label.g-canned{color:var(--g-canned)}.group-label.g-baking{color:var(--g-baking)}.group-label.g-spices{color:var(--g-spices)}.group-label.g-oils{color:var(--g-oils)}.group-label.g-snacks{color:var(--g-snacks)}.group-label.g-misc{color:var(--g-misc)}
.pantry-table .hint-row td{height:44px;font-size:13px;color:var(--muted)}
.pantry-table .row td{height:44px}
.pantry-table .row[data-id]{cursor:pointer}
.pantry-table .row[data-id]:hover{background:var(--hover)}
.pantry-table .row[data-id]:hover .qty{text-decoration:underline dotted;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.pantry-table .row.open{background:var(--hover)}
.pantry-table .row[data-id]:focus-visible{outline:2px solid var(--green);outline-offset:-2px} /* a row spans the table, so the ring sits inside the hairlines */
.pantry-table .row.parent td{height:36px;padding-top:6px;color:var(--muted);border-bottom:0;font-size:14px}
.pantry-table .row.child .c-name .name{font-size:17px}
.c-name{min-width:0}
.pantry-table .name{font:18px/1.25 Georgia,serif;letter-spacing:-.2px;color:var(--ink);overflow-wrap:anywhere}
.c-name .variant{display:inline;margin-left:8px;font-size:13px;color:var(--muted)}
.found-note{display:block;font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);margin:1px 0 4px}
.row.out .name,.row.out .qty{color:var(--muted)}
.pantry-table .c-qty{text-align:right;white-space:nowrap;width:1%}
.qty-cell{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px}
.qty-word{padding:0 6px;min-height:32px;display:inline-flex;align-items:center;gap:1px;font:15px/1 Georgia,serif;color:var(--ink);white-space:nowrap}
.tilde{color:var(--muted);font:15px/1 Georgia,serif}
.step{width:28px;height:28px;min-height:28px;padding:0;display:inline-grid;place-items:center;background:none;border:0;border-radius:4px;color:var(--muted);font:20px/1 Georgia,serif}
.step:hover{color:var(--ink)}
.pantry-table .c-age{width:84px;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.pantry-table .c-actions{width:190px;text-align:right;white-space:nowrap}
.c-actions .text-button{font-size:13px;color:var(--muted);min-height:32px;padding:4px 6px;text-decoration:none}
.c-actions .text-button:hover{color:var(--ink);text-decoration:none}
/* inline editors */
.qty-cell.editing{gap:2px}
/* the number edits in place: same Georgia, same size, a caret and one accent hairline under it; no box, no ring (the hairline is the visible focus) */
.qty-input{width:3ch;min-width:1.5ch;min-height:0;height:24px;padding:0 1px;margin:0;text-align:right;font:15px/1 Georgia,serif;color:var(--ink);border:0;border-bottom:1px solid var(--accent);border-radius:0;background:none;appearance:textfield;-moz-appearance:textfield;caret-color:var(--accent)}
.qty-input:focus,.qty-input:focus-visible{outline:none;box-shadow:none;border-bottom-color:var(--accent)}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{appearance:none;margin:0}
.qty-cell .unit{font:15px/1 Georgia,serif;color:var(--ink);margin-left:5px}
.rungs{display:inline-flex;gap:6px}
.rung{min-height:28px;padding:0 7px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--muted);font:15px/1 Georgia,serif}
.rung:hover{color:var(--ink)}
.rung[aria-checked="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.rung{border-radius:3px}.rung:focus-visible{color:var(--ink)} /* the ring from style.css; the accent hairline stays the mark of the chosen rung only */
.exact-open{margin-left:10px;font-size:13px;color:var(--muted)}.exact-open:hover{color:var(--ink)} /* the level row's door to an exact amount, beside the rungs */
.exact-form{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;white-space:normal}.exact-form select{min-height:28px;padding:0 6px;font:15px/1 Georgia,serif;color:var(--ink)}.exact-form .secondary{min-height:28px;padding:0 10px;font-size:13px}
.move-form{display:inline-flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:8px;padding:6px 0;white-space:normal}
.move-form label{font-size:12px;gap:4px;flex:0 1 140px;min-width:0}
.move-form select,.move-form .secondary{min-height:36px;padding:4px 10px;font-size:13px}
/* the level gauge */
.gauge{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 6px;margin-left:2px;border-radius:4px}
.gauge .seg{display:block;width:6px;height:12px;border-radius:1px;background:var(--line)}
.gauge .seg[data-index="0"]{background:transparent;border:1px solid var(--line)} /* the empty stop: none fills nothing, so an empty jar never reads as a fifth full; it stays clickable */
.gauge .seg.below{background:var(--line-strong)}
.gauge .seg.on{background:var(--ink)}
.gauge-tip{position:fixed;top:var(--y,0);left:var(--x,0);z-index:12;max-width:280px;padding:10px 12px;background:var(--ink);color:var(--cream);font-size:13px;line-height:1.45;border-radius:6px;box-shadow:0 10px 40px #142c2440;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;pointer-events:none}
.gauge-tip strong{font:600 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:block}
.gauge-tip img{grid-row:1/3;grid-column:2;background:var(--white);border-radius:6px;padding:4px}
.gauge-tip[hidden]{display:none}
/* KP's Kitchen guests (owner only, 2026-10-10 late): the pantry's quiet table grammar for a list of people. Under 700px the name and the date fold under the email. */
.guest-rule{margin:-8px 0 18px}
.guest-table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px} /* its own class, not .pantry-table: the pantry's phone block shows one place at a time and would hide this table */
.guest-table th,.guest-table td{padding:0 10px;border-bottom:1px solid var(--line);vertical-align:middle;background:none;font-weight:400;font-size:inherit;color:inherit;text-align:left;min-width:0}
.guest-table td:first-child,.guest-table th:first-child{padding-left:0}.guest-table td:last-child,.guest-table th:last-child{padding-right:0}
.guest-table .row td{height:44px}
.guest-table .hint-row td{height:44px;font-size:13px;color:var(--muted)}
.guest-table .c-actions .text-button{font-size:13px;color:var(--muted);min-height:32px;padding:4px 6px;text-decoration:none}.guest-table .c-actions .text-button:hover{color:var(--ink)}
.guest-table .add-tr td{padding:0;height:auto}.guest-table .add-tr:not(.open){cursor:pointer}.guest-table .add-tr:not(.open):hover{background:var(--hover)}
.guest-table thead th{height:36px;padding-bottom:8px;font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.guest-table .email{font:17px/1.25 Georgia,serif;letter-spacing:-.2px;color:var(--ink);overflow-wrap:anywhere}
.guest-table .c-guest-name{font-size:14px}
.guest-table .pending{color:var(--muted)}
.guest-table .c-added{width:120px;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.guest-table .c-actions{width:90px;text-align:right;white-space:nowrap}
.guest-table .guest-sub{display:none}
.guest-table .guest-add{max-width:680px}
.guest-table .guest-add .add-line input[name=note]{flex:1 1 160px}
@media(max-width:700px){.guest-table .c-guest-name,.guest-table .c-added{display:none}.guest-table .c-actions{width:auto}.guest-table .guest-sub{display:block;font-size:13px;color:var(--muted);margin-top:2px}.guest-table .row td{height:auto;padding-top:10px;padding-bottom:10px}.guest-table .guest-add .add-line{flex-wrap:wrap}.guest-table .guest-add .add-line input{flex:1 1 100%}}
/* the add row: the last row of every section, quiet and persistent; it becomes the input in place */
.pantry-table .add-tr td{padding:0 0 0 var(--step);height:auto}
.pantry-table .add-tr:not(.open){cursor:pointer}
.pantry-table .add-tr:not(.open):hover{background:var(--hover)}
.add-quiet{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:var(--muted);font-size:14px}
.add-quiet:hover{color:var(--green)}
.add-quiet svg{color:var(--sage)}
.add-tr.open .add-quiet{display:none}
.add-row{display:grid;gap:6px;max-width:560px;padding:8px 0 12px}
.add-row[hidden]{display:none}
.add-line{display:flex;gap:8px;align-items:center}
.add-line input{flex:1 1 auto;min-width:0;min-height:40px;padding:6px 12px;font-size:14px;border-color:var(--line)}
.add-line .secondary{min-height:40px;padding:6px 14px;flex-shrink:0}
.add-line .add-close{min-height:40px;font-size:13px;white-space:nowrap}
.add-hint{margin:0;font-size:13px;color:var(--muted)}
.add-hint:empty{display:none}
.add-hint .add-use{padding:0;min-height:32px;font-size:13px;color:var(--muted);text-decoration:underline dotted;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.add-hint .add-use:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* the guess line under a new row: thirteen-pixel muted words and one text action, the Move grammar when Change is taken */
.pantry-table .guess-tr td{height:auto;padding:0 0 8px calc(var(--step) * 2);font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);text-align:left;white-space:normal}
.guess-line{display:inline-flex;align-items:center;gap:4px;min-height:32px}
.guess-line .text-button{font-size:13px;min-height:32px;padding:4px 6px;color:var(--green)}
.pantry-table .guess-tr .move-form{justify-content:flex-start}
.add-selects{display:flex;flex-wrap:wrap;gap:10px}
.add-selects label{font-size:12px;gap:4px;flex:1 1 130px;min-width:0}
.add-selects select{min-height:40px;padding:6px 10px;font-size:14px}
.pantry-foot{display:none}
/* Update pantry: the dialog is wider than the confirm dialogs; the review sheet lives in the same element. */
dialog.pantry-update{max-width:640px}
dialog.pantry-update textarea{font:16px/1.6 Georgia,serif;min-height:150px;field-sizing:content;max-height:50dvh}
dialog.pantry-update .interim{min-height:1.4em;margin:8px 0 0;font-size:14px;font-style:italic;color:var(--muted)}
dialog.pantry-update .interim:empty{display:none}
dialog.pantry-update .form-actions{margin-top:8px}
dialog.pantry-update .form-actions .speak{margin-right:auto}
dialog.pantry-update .form-actions .speak[aria-pressed="true"]{background:var(--tint);border-color:var(--moss)}
.sheet-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:18px 0 6px}
.sheet{list-style:none;margin:0;padding:0}
.sheet-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.sheet-row:last-child{border-bottom:0}
.sheet-row .check{font-size:15px;min-width:0}
.sheet-row .check span{overflow-wrap:anywhere}
.sheet-row .sheet-qty{margin-left:8px;font:16px/1 Georgia,serif;color:var(--ink)}
.sheet-tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700;white-space:nowrap}
.sheet-row .add-selects,.sheet-row .confirm-level{grid-column:1 / -1}
.sheet-row .confirm-level{font-size:12px;gap:4px;max-width:260px}
.sheet-row .confirm-level select{min-height:44px;padding:8px 10px;font-size:14px}
.sheet-cost,.sheet-ignored{margin:14px 0 0;font-size:13px;color:var(--muted)}
.sheet-before{color:var(--muted);text-decoration-color:var(--line-strong);margin:0 6px 0 8px;font:14px/1 Georgia,serif}
.sheet-to{margin-right:6px;color:var(--muted);font:14px/1 Georgia,serif}
.sheet-row .sheet-before+.sheet-qty,.sheet-row .sheet-to+.sheet-qty{margin-left:0}
.confirm-measure{display:inline-flex;align-items:center;gap:6px}.confirm-measure input{width:90px;min-height:44px;padding:8px 10px}.confirm-measure .unit{font-size:13px;color:var(--muted)}
.pantry-pointer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:1000px){.pantry-table .c-actions{width:150px}.pantry-table .c-age{width:64px}}
/* Between the phone and the desk (an iPad at 820; Marcus, round 2) an open row's controls took the table's width and squeezed every name to one letter
   a line. An open row leaves the table grid: the name keeps the first row with the age, the controls wrap to their own row beneath, the actions below that. */
@media(min-width:701px) and (max-width:999px){
 .pantry-table .c-actions{width:1%} /* at rest the actions cell is empty; only an open row, which leaves the grid, shows its controls */
 .pantry-table .row.open{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name age" "qty qty" "actions actions";align-items:center;gap:0 10px;padding:4px 0;border-bottom:1px solid var(--line)}
 .pantry-table .row.open td{height:auto;border-bottom:0;width:auto}
 .pantry-table .row.open .c-name{grid-area:name;padding:8px 10px 8px calc(var(--step) * 2)}
 .pantry-table .row.open .c-age{grid-area:age;padding-right:0}
 .pantry-table .row.open .c-qty{grid-area:qty;text-align:left;white-space:normal;padding:2px 0 4px calc(var(--step) * 2)}
 .pantry-table .row.open .qty-cell{flex-wrap:wrap;justify-content:flex-start;width:100%;gap:6px}
 .pantry-table .row.open .c-actions{grid-area:actions;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 6px;padding:0 0 6px calc(var(--step) * 2);white-space:normal}
}
@media(max-width:700px){
 :root{--step:16px}
 .pantry-head .primary{display:none}
 .pantry-foot{display:flex;justify-content:flex-end;position:sticky;bottom:0;margin:20px -18px -24px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
 .pantry-foot .primary{width:100%}
 .place-anchors{display:none}
 .place-tabs{display:flex;gap:4px;margin:14px 56px 4px 0;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--white)} /* the strip ends 60px short of the right edge: Frank's F (56px, 16px in) rides the bottom-right and sits over the Pantry tab on an unscrolled pantry; the gutter keeps the tab's whole 44px clear (chatui, v11) */
 .place-tabs [role=tab]{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 4px;white-space:nowrap;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:13px}
 .place-tabs [role=tab][aria-selected="true"]{background:#e98550;color:#233c2f;font-weight:700}
 .place-tabs [role=tab]:focus-visible{outline-offset:-3px}
 .place-tabs [role=tab][aria-selected="true"] .place-count{color:#233c2f}
 .pantry-table,.pantry-table tbody,.pantry-table tr,.pantry-table td,.pantry-table th{display:block;width:100%;border:0;padding:0;height:auto}
 .pantry-table thead,.pantry-table .place-row{display:none}
 .pantry-table tbody{display:none}
 .pantry-table[data-active="fridge"] tbody[data-place="fridge"],.pantry-table[data-active="freezer"] tbody[data-place="freezer"],.pantry-table[data-active="pantry"] tbody[data-place="pantry"]{display:flex;flex-direction:column}
 .pantry-table .group-row th{height:auto;padding:16px 0 4px var(--step);border-bottom:0}
 .pantry-table .hint-row td{height:auto;padding:12px 0}
 .pantry-table .row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name qty" "actions actions";align-items:center;gap:0 10px;padding:4px 0;border-bottom:1px solid var(--line)}
 .pantry-table .row.open{grid-template-areas:"name name" "qty qty" "actions actions"}
 .pantry-table .row.parent{grid-template-columns:1fr;grid-template-areas:"name";padding:8px 0 0;border-bottom:0}
 .pantry-table .row.parent td{height:auto;padding:0}
 .pantry-table .row.child{border-left:0}
 .pantry-table .row td{height:auto}
 .pantry-table .c-name{grid-area:name;padding:8px 0 8px calc(var(--step) * 2);width:auto}
 .pantry-table .row.parent .c-name{padding-left:calc(var(--step) * 2)}
 .pantry-table .row.child .c-name{padding-left:calc(var(--step) * 2 + 10px)}
 .pantry-table .name{font-size:18px}
 .pantry-table .c-name .variant{display:block;margin:2px 0 0}
 .pantry-table .c-qty{grid-area:qty;width:auto;text-align:right}
 .pantry-table .c-age{display:none}
 .pantry-table .c-actions{grid-area:actions;display:none;width:auto;white-space:normal;text-align:right}
 .pantry-table .row.open .c-actions,.pantry-table .c-actions:has(form){display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 6px;padding:2px 0 6px calc(var(--step) * 2)}
 .pantry-table .c-actions .text-button{min-height:44px;padding:8px 6px}
 .pantry-table .step{width:44px;height:44px;min-height:44px}
 .pantry-table .row.open .c-qty{grid-column:1 / -1;text-align:left;padding:4px 0 4px calc(var(--step) * 2)}
 .pantry-table .row.open .qty-cell{gap:6px;padding:2px 0;flex-wrap:wrap;justify-content:flex-start;width:100%}
 .pantry-table .qty-input{height:44px;font-size:16px}
 .pantry-table .qty-word{font-size:16px;min-height:44px;padding:0 8px}
 .pantry-table .gauge{height:44px;padding:0 8px}
 .pantry-table .gauge .seg{width:7px;height:14px}
 .pantry-table .rungs{flex-wrap:wrap;gap:6px}
 .pantry-table .rung{min-height:44px;padding:0 10px;font-size:16px}
 .gauge-tip{display:none}
 .pantry-table .move-form{width:100%;justify-content:flex-start}
 .pantry-table .move-form select,.pantry-table .move-form .secondary{min-height:44px}
 .pantry-table .exact-form{width:100%;justify-content:flex-start}
 .pantry-table .exact-form select,.pantry-table .exact-form .secondary{min-height:44px}
 .pantry-table .add-tr{order:99;display:block;padding-top:4px}
 .pantry-table .add-tr td{padding:0 0 0 var(--step);height:auto}
 .pantry-table .add-line input,.pantry-table .add-line .secondary{min-height:44px}
 .pantry-table .add-row{max-width:none}
 dialog.pantry-update{padding:22px}
}
@media(prefers-reduced-motion:no-preference){.pantry-table .row[data-id]{transition:background-color .12s ease}.step,.c-actions .text-button,.rung{transition:background-color .12s ease,color .12s ease,border-color .12s ease}.gauge .seg{transition:background-color .12s ease}}
/* Frank's chat (chatui seat, 2026-10-11; lane builds/frank-pantry/dispatch/chat-lane.md). The opener is the lowercase-f mark (Cody, 2026-10-13): frank-chat-mark.png centred and scaled past the circle over the solid green, so no generated edge shows. The drawer docks at >=1000px and the page narrows beside it; 700-1000px it overlays without a backdrop; under 700px it is a full-height modal sheet. Frank's words in Georgia, yours in a quiet tint, receipts on hairlines, every control a word. Tokens only. */
.frank-f{position:fixed;right:24px;bottom:24px;z-index:20;width:56px;height:56px;min-height:56px;padding:0;border:0;border-radius:50%;background:var(--green);overflow:hidden;display:grid;place-items:center;box-shadow:0 6px 24px #142c2433}
.frank-f img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.frank-f:hover{box-shadow:0 0 0 3px var(--tint-line),0 6px 24px #142c2433}
.frank-f:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.app-layout[data-setup="true"] .page-footer{padding-bottom:96px}
@media(min-width:1200px){body.chat-docked .app-layout{padding-right:420px}}
dialog.frank-chat{position:fixed;inset:0 0 0 auto;margin:0;width:420px;max-width:100%;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--white);color:var(--ink);z-index:19;flex-direction:column}
dialog.frank-chat[open]{display:flex}
dialog.frank-chat:not(:modal){box-shadow:-12px 0 40px #142c2414}
body.chat-docked dialog.frank-chat{box-shadow:none}
dialog.frank-chat::backdrop{background:#172c2670}
.chat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow actions" "title title";align-items:center;column-gap:12px;padding:6px 12px 12px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.chat-heading{display:contents}
.chat-eyebrow{grid-area:eyebrow;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0}
.chat-head h2{grid-area:title;font:20px/1.3 Georgia,serif;letter-spacing:-.2px;margin:2px 10px 0 0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.chat-head h2:focus{outline:none}
.chat-head-actions{grid-area:actions;display:flex;gap:2px;justify-self:end}
.chat-word{background:none;border:0;border-radius:5px;color:var(--muted);font-size:13px;padding:0 9px;min-height:44px;min-width:44px}
.chat-word:hover{color:var(--green);background:var(--hover)}
.chat-word[aria-pressed="true"]{color:var(--green);font-weight:700}
.chat-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 12px}
.chat-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.msg p{margin:0}
.msg-user{align-self:flex-end;max-width:85%;background:var(--tint);border:1px solid var(--tint-line);border-radius:8px;padding:10px 14px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.msg-frank{max-width:100%;overflow-wrap:anywhere}
.msg-text{font:16px/1.6 Georgia,serif;color:var(--ink)}
.msg-text p+p,.msg-text p+ul,.msg-text ul+p{margin-top:10px}
.msg-text ul{margin:6px 0 0;padding-left:20px}
.msg-tool,.msg-note{font-size:13px;color:var(--muted);margin-top:4px}
.msg-error{font-size:14px;color:var(--danger);margin-top:6px}
.msg-error .text-button{font-size:14px;min-height:44px}
.receipts{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.receipt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:44px;border-bottom:1px solid var(--line);font-size:14px}
.receipt-text{flex:1;min-width:0;padding:10px 0}
.receipt .text-button{font-size:13px;color:var(--green);min-height:44px;padding:0 4px}
.receipt.is-undone .receipt-text{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.receipt-undone{font-size:13px;color:var(--muted)}
.receipt.is-refused .receipt-text{color:var(--muted)}
.receipt-reason{flex-basis:100%;font-size:13px;color:var(--muted);padding-bottom:10px;margin-top:-6px}
.receipt.is-failed .receipt-reason{color:var(--danger)}
.chat-more{margin-top:8px;font-size:14px;min-height:44px}
.receipt-error{flex-basis:100%;font-size:13px;color:var(--danger);padding-bottom:8px}
/* The Yes chip (A14): the Cookbook's .chip, at the 44px touch height, green because it is the answer the question asked for. */
.chat-yes-row{margin-top:10px}
.chat-ask-label{font-size:13px;color:var(--muted);margin:0 0 4px}
.chat-ask-preview{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1.45}
.chat-ask-preview li{margin:0 0 4px;overflow-wrap:anywhere}
.chat-yes{min-height:44px;padding:0 20px;color:var(--green);border-color:var(--tint-line);background:var(--tint);font-weight:600}
.chat-yes:hover{color:var(--green);border-color:var(--green)}
.chat-empty{padding-top:8px}
.chat-empty-title{font:22px/1.35 Georgia,serif;letter-spacing:-.3px;margin-bottom:8px}
.chat-empty-body{font-size:14px;color:var(--muted)}
.chat-suggestions{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.chat-suggestion{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--green);font:16px/1.4 Georgia,serif;padding:10px 0;min-height:48px}
.chat-suggestion:hover{background:var(--hover)}
.chat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.chat-row{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 4px;min-height:60px;color:var(--ink)}
.chat-row:hover{background:var(--hover)}
.chat-row[aria-current]::before{content:"";position:absolute;left:-13px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--green)}
.chat-row-title{font:16px/1.35 Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-when{font-size:12px;color:var(--muted);align-self:center}
.chat-row-last{grid-column:1/-1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list-empty,.chat-list-status{font-size:14px;color:var(--muted)}
.chat-unconfigured h3{font:22px/1.35 Georgia,serif;letter-spacing:-.3px;margin-bottom:8px}
.chat-unconfigured h3:focus{outline:none}
.chat-unconfigured p{font-size:14px;color:var(--muted)}
.chat-composer{flex-shrink:0;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:grid;gap:8px;background:var(--white)}
.chat-composer textarea{min-height:46px;max-height:160px;resize:none;field-sizing:content;font:16px/1.5 Georgia,serif}
.chat-interim{margin:0;font-size:14px;font-style:italic;color:var(--muted)}
.chat-interim:empty{display:none}
.chat-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.chat-actions #chat-speak{margin-right:auto;color:var(--green);font-size:14px;padding:0 12px}
.chat-actions #chat-speak[aria-pressed="true"]{background:var(--tint);font-weight:700}
.chat-actions .primary,.chat-actions .secondary{min-height:44px;padding:10px 20px}
@media(max-width:700px){.frank-f{right:16px;bottom:16px}body:has(#app .pantry-foot) .frank-f{bottom:calc(83px + env(safe-area-inset-bottom))}dialog.frank-chat{width:100%;border-left:0}.chat-head{padding:4px 8px 10px 18px}.chat-scroll{padding:18px 18px 12px}.chat-composer{padding-left:12px;padding-right:12px}}
/* The receipt door and the intake review sheet (Vera, First Week Magic 2026-10-12; sketch builds/frank-first-week/sketches/receipt-door.md). Two actions in the head, the empty state and the phone foot; the sheet is the Update sheet with a source badge, a sentence per row, the raw line under an unsure row, and an editor that opens under the row. */
.pantry-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pantry-waiting .pantry-pending{padding:0;min-height:44px;font-size:15px}
dialog.pantry-update.intake{max-width:720px;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
dialog.pantry-update.intake .plan-scene{margin:0 0 10px}
.sheet-wait{margin:0;font-size:14px;color:var(--muted)}
.intake-block+.intake-block{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.sheet-source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px;font-size:13px;color:var(--muted)}
.source-badge{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--green);background:var(--tint);border:1px solid var(--tint-line);border-radius:30px;padding:5px 10px}
.sheet-none{margin:10px 0 0;font-size:15px}
.intake-row{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.intake-row .check{align-items:start;padding-top:10px}
.intake-row .row-sentence{font-size:15px;line-height:1.5}
.sheet-adds{color:var(--muted);font-size:13px;margin-left:6px;white-space:nowrap}
.row-side{display:flex;align-items:center;gap:12px;min-height:44px}
.row-side .row-edit{padding:8px 0;min-height:44px;font-size:13px}
.sheet-source-line{grid-column:1 / -1;margin:-4px 0 6px 26px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.row-editor{grid-column:1 / -1;display:grid;gap:14px;margin:4px 0 10px 26px;padding:14px 16px 16px;background:var(--tint);border:1px solid var(--tint-line);border-radius:8px}
.row-editor .form-grid{gap:12px}
.row-editor label{font-size:12px}
.row-editor input,.row-editor select{min-height:44px;padding:8px 10px;font-size:14px}
.row-editor .add-hint{margin:-8px 0 0;font-size:12px;color:var(--muted)}
.row-editor .add-hint:empty{display:none}
.qty-field{margin:0}
.qty-field legend{font-size:12px;font-weight:600;margin-bottom:8px}
.qty-field .segment{min-height:40px;padding:0 14px;font-size:13px}
.qty-controls{display:flex;align-items:center;gap:8px;margin-top:10px}
.qty-controls .qty-count,.qty-controls .qty-measure,.qty-controls .qty-level{display:none}
.qty-controls[data-shape="count"] .qty-count,.qty-controls[data-shape="measure"] .qty-measure,.qty-controls[data-shape="level"] .qty-level{display:inline-flex}
.qty-controls input{width:110px}
.qty-measure{gap:8px;align-items:center}
.qty-measure select{width:auto;min-width:72px}
.intake-row .add-selects{margin:0}
.sheet-expiry{margin:16px 0 0;font-size:13px;color:var(--muted)}
.sheet-expiry:empty{display:none}
dialog.pantry-update.intake .form-actions{position:sticky;bottom:-30px;margin:14px -30px -30px;padding:16px 30px 30px;background:var(--white);border-top:1px solid var(--line)}
@media(max-width:700px){
 .pantry-head .pantry-actions{display:none}
 .pantry-foot{gap:10px}
 .pantry-foot .receipt-button,.pantry-foot .primary{flex:1 1 0;width:auto}
 .sheet-source-line,.row-editor{margin-left:0}
 .row-editor .form-grid{grid-template-columns:1fr}
 .qty-controls{flex-wrap:wrap}
 dialog.pantry-update.intake .form-actions{margin:14px -20px -20px;padding:12px 20px 20px;bottom:-20px}
}
/* The Orders step, the magic beat and the Settings connection (Vera, First Week Magic 2026-10-12; sketch builds/frank-first-week/sketches/wizard-email-step.md). Two white buttons whose only colour is the brand mark; the beat is the bag scene then two Georgia lines; the connection is one hairline row. */
.orders-step{gap:18px}
.link-buttons{display:flex;gap:12px;flex-wrap:wrap}
.link-button{display:inline-flex;align-items:center;gap:10px;padding:12px 22px 12px 16px}
.link-button svg{width:18px;height:18px;flex-shrink:0}
.orders-step #skip-orders{justify-self:start;padding:8px 0}
.orders-verify{display:grid;gap:2px;justify-items:start;margin-top:-6px}
.orders-verify .reason{margin:0}
.orders-verify .reason-link{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
/* Send it again is a button now (it sends), drawn as the link it replaced: no padding, 44px line, its status under it. */
.send-again-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
button.send-again{padding:0;font-size:13px;text-align:left}
.send-again-status{margin:0;font-size:13px}.send-again-status a{font-size:inherit}
.beat{display:grid;gap:10px;justify-items:start}
.beat .plan-scene{width:100%;max-width:440px;margin:0}
.beat-found{font:30px/1.25 Georgia,serif;letter-spacing:-.4px;margin:6px 0 4px;animation:frank-rise .55s ease-out both}
.beat-found:focus{outline:none}
.beat-line{margin:0;font-size:16px;color:var(--muted);max-width:560px}
.beat-line:empty{display:none}
.beat .inline-actions{margin-top:6px}
.beat .primary[aria-busy="true"]{opacity:.55}
.connections{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line);max-width:640px}
.connection{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.connection-mark svg{width:20px;height:20px;display:block}
.connection-text{display:grid;gap:2px;flex:1 1 auto;min-width:0;font-size:14px}
.connection-text strong{overflow-wrap:anywhere}
.connection .danger{padding:8px 14px;min-height:40px;flex-shrink:0}
.forward-line{margin:14px 0 0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.forward-address{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink);user-select:all}
.orders .orders-slot{margin-top:4px}
@media(max-width:480px){.link-buttons{display:grid}.link-button{width:100%;justify-content:center}.connection{flex-wrap:wrap}.connection .danger{margin-left:34px}}
@media(prefers-reduced-motion:reduce){.beat-found{animation:none}}
/* The Week strip (Vera, First Week Magic 2026-10-12; sketch builds/frank-first-week/sketches/week-strip.md): seven calendar columns in the plan strip's grammar, full width between tonight and the plan week since the 2026-10-13 walk; read-only; a suggestion is a chip only when the server accepts it. */
.cal-week{min-width:0;margin-top:40px}
.cal-week h2{font-size:23px}
.cal-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.cal-day{display:grid;gap:4px;align-content:start;padding:12px 12px 14px;background:var(--white);border:1px solid var(--line);border-radius:8px;min-height:84px;min-width:0}
.cal-day.today{background:var(--tint);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.cal-day.shell{min-height:96px}
.cal-eyebrow{margin:0;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.cal-travel{color:var(--accent);font-weight:700}
.cal-num{font:24px/1 Georgia,serif}
.cal-events{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px;font-size:12px;line-height:1.4;color:var(--muted)}
.cal-event{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-rest .cal-event{white-space:normal;overflow-wrap:anywhere}
.cal-time{color:var(--ink)}
.cal-free{margin:4px 0 0;font-size:12px;color:var(--muted)}
.cal-more{padding:8px 0;font-size:12px;justify-self:start}
.cal-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cal-chip{position:relative;min-height:40px;padding:0 12px;font-size:13px} /* the sr-only state span positions inside the chip, so a chip scrolled past the edge never widens the page */
.cal-suggest{font-size:12px;color:var(--muted)}
.cal-line{margin:12px 0 0;font-size:14px;color:var(--muted);max-width:640px}
.cal-line a{margin-left:4px}
@media(max-width:700px){.cal-strip{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x proximity}.cal-day{flex:0 0 132px;scroll-snap-align:start}}
/* Mom Ready (Vera, 2026-10-15): a meal's serves line and its recipe link; the plan recipe page; thumbs on a recipe; the Grocery store section and the Fred Meyer cart control. Tokens only, the 44px row grammar reused. */
.meal-serves{margin-top:-2px}
.meal-head .recipe-link{color:inherit}
.recipe-view .rv-meta{color:var(--muted);font-size:15px;margin:0 0 18px}
.rv-cook-plan{margin-top:24px}
.rv-cook-plan .cook-card{margin-top:0;padding-top:0;border-top:0}
.rv-thumbs{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.rv-thumbs .thumbs{margin:0}
.grocery-store .grocery-slot{margin-top:4px;display:grid;gap:18px}
.grocery-store .connections{margin:0}
.store-line{margin:0;font-size:15px}
.store-line .honest-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:8px}
.store-find{display:grid;gap:8px;max-width:420px}
.store-find label{margin:0}
.store-find .add-line input{min-height:44px}
.store-find .add-line .secondary{min-height:44px}
.store-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line);max-width:640px}
.store-list .connection .secondary{padding:8px 14px;min-height:40px;flex-shrink:0}
.own-app{max-width:640px}
.own-app summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--muted);border-radius:4px}
.own-app summary:hover{color:var(--ink)}
.own-app-form{margin-top:12px;gap:16px}
.kroger{margin-top:12px}
.kroger-line{margin:12px 0 0;font-size:14px}
.kroger-line a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:480px){.store-list .connection{flex-wrap:wrap}.store-list .connection .secondary{margin-left:0}}

/* Grocery panel and plan shortcuts (frank-three-personas, 2026-10-17). The money line leads the list. On a phone the two shortcuts stick under the top bar so the checklist is one tap away from anywhere on Home, and the panel scrolls in below the strip (scroll-margin). Desktop keeps the aside as it was. */
.grocery-money{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:700px){.plan-jumps{position:sticky;top:0;z-index:5;margin:0 -18px 8px;padding:6px 18px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;overflow-x:auto;white-space:nowrap}.plan-jumps a{min-height:44px;display:inline-flex;align-items:center}details.grocery,details.grocery>summary,#week-title{scroll-margin-top:64px}}
/* Ask Frank on a phone (frank-three-personas, 2026-10-17): the sheet already fills the viewport (dialog.frank-chat); while it is open the page behind it stops scrolling, so the chat reads as the screen rather than as a block under the page content. chat.js sets the class. */
html.chat-sheet{overflow:hidden}
/* Send this week (frank-three-personas round 3, lane share). share.js puts the week title and one text button on a row and a status line under them; the status reads only on the desktop fallback (PNG downloaded, sentence copied). The card itself is drawn to an off-screen canvas, never to the page. */
.week-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px}
.week-head h2{margin:0}
.share-week{font-size:14px;padding:8px 0;min-height:44px;white-space:nowrap}
.share-status{font-size:13px;color:var(--muted);margin:-8px 0 16px}
.share-status:empty{display:none}
/* The Send this week preview: the drawn card at the sheet's full width, the sentence in an editable field, Share and Save image. */
dialog.share-sheet{max-width:520px;padding:22px;display:grid;gap:14px;max-height:calc(100dvh - 24px);overflow-y:auto}
dialog.share-sheet[open]{display:grid}
dialog.share-sheet:not([open]){display:none}
.share-sheet h2{font:22px/1.2 Georgia,serif;margin:0}
.share-card{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.share-text{min-height:72px}
.share-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:700px){dialog.share-sheet{width:calc(100% - 24px);padding:16px}}
/* Grocery store page and the wizard's Store step (walkthrough, 2026-10-29): tiles first, then the panel for the one the person picked. */
.store-pick{margin:0 0 16px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0 0 24px}
.store-tile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:64px;font-size:14px;font-weight:600}
.store-tile:hover{border-color:var(--line-strong)}
.store-tile[aria-pressed="true"]{background:var(--tint);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.store-mark{width:88px;height:48px;display:grid;place-items:center;flex-shrink:0;background:#fff;border-radius:4px;padding:4px;box-sizing:border-box}
.store-tile .store-mark img{display:block;width:80px;height:40px;max-width:100%;max-height:40px;object-fit:contain}
.store-tile.other .store-mark{background:var(--blue);color:var(--green);font-size:28px}
.store-capability{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:1.4;margin-top:4px}
.store-extra{margin:0 0 24px}
.store-extra summary{min-height:44px;box-sizing:border-box;padding:12px 0;color:var(--green);cursor:pointer;font-weight:600}
.store-extra[open] summary{margin-bottom:8px}
/* Grocery store page: a short progress row until the store is ready, then that store is the hero and everything else goes quiet. */
.store-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px;padding:0;max-width:640px}
.store-steps li{border-top:2px solid var(--line);padding-top:10px;font-size:13px;line-height:1.25;color:var(--muted)}
.store-steps li.is-done{border-top:4px solid var(--green);padding-top:8px;color:var(--ink)}
.store-steps li[aria-current]{border-top:6px solid var(--red);padding-top:6px;font-weight:700;color:var(--ink)}
.store-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 16px}
.store-chosen .store-tile{min-width:min(240px,100%)}
.store-chosen .text-button,.store-quiet .text-button{min-height:44px;font-size:14px;color:var(--muted)}
.store-chosen .text-button:hover,.store-quiet .text-button:hover{color:var(--ink)}
.store-switch-note{margin:16px 0 10px;font-size:14px;color:var(--ink);max-width:560px}
.store-section .store-tiles:empty{display:none}
.store-panel.is-hero{padding:0;background:none;border:0;box-shadow:none}
.store-hero{display:grid;grid-template-columns:minmax(0,1fr) 172px;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--panel-radius);overflow:hidden}
.store-hero-main{padding:22px 24px;min-width:0}
.store-hero-name{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.store-hero-name .store-mark{width:88px;height:48px}
.store-hero-name .store-mark img{display:block;width:80px;height:40px;max-width:100%;max-height:40px;object-fit:contain}
.store-panel .store-hero-name h2{margin:0;font:400 clamp(30px,4vw,38px)/1.08 Georgia,serif;letter-spacing:-.5px;color:var(--green);overflow-wrap:anywhere}
.store-state{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;font-size:14px;font-weight:700;color:var(--green)}
.store-state.is-needed{color:var(--red)}
.store-hero-art{display:grid;place-items:center;padding:14px;background:var(--ochre)}
.store-hero-art img{display:block;width:100%;max-width:136px;height:auto}
.store-hero .store-line,.store-account{margin:0 0 6px;font-size:14px;color:var(--ink)}
.store-hero .store-line{font-size:15px}
.store-hero .store-find{margin-top:14px}
.store-hero-terms{margin:10px 0 0;font-size:14px;line-height:1.45}
.store-hero-action{margin:14px 0 0}
.store-hero-action a{min-height:44px}
.store-change{margin:12px 0 0}
.store-change summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--muted)}
.store-change summary:hover{color:var(--ink)}
.store-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:10px 0 0}
.store-held{margin:12px 0 0;font-size:14px}
.store-panel.is-hero .kguide{border-top:0;margin-top:0;padding-top:0}
.kguide.is-main>summary{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:var(--green);color:var(--white);border-radius:var(--button-radius);font-weight:600}
.kguide.is-main[open]>summary{color:var(--white)}
.kguide.is-main{border-top:0;margin-top:12px;padding-top:0}
@media(max-width:640px){.store-hero{grid-template-columns:minmax(0,1fr)}.store-hero-art{order:-1;padding:10px}.store-hero-art img{max-width:104px}.store-hero-main{padding:18px 16px}.store-chosen .store-tile{flex:1 1 100%}}
@media(forced-colors:active){.store-steps li[aria-current]{text-decoration:underline}.store-hero{border-color:CanvasText}}
.store-panel .orders-verify,.orders-email .orders-verify{margin-top:14px}
.store-name{overflow-wrap:anywhere}
.store-more{margin:-8px 0 20px}
.store-panel{max-width:760px}
.store-panel h2{margin-bottom:12px}
.store-panel h2:focus{outline:none}
.store-panel .store-connected{margin:0 0 16px;font-size:15px}
.how{margin:0 0 22px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5;max-width:560px}
.callback-url{display:block;margin-top:8px;padding:8px 10px;background:var(--tint);border-radius:5px;font:13px/1.5 ui-monospace,Menlo,monospace;overflow-wrap:anywhere;user-select:all}
.wizard-store .step-lede,.orders-email .step-lede{color:var(--muted);font-size:15px;margin:0 0 16px;max-width:640px}
.orders-email{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:22px}
.orders-email h2{font-size:22px;margin:0 0 6px}
.setup-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.setup-dismiss{font-size:13px;color:var(--muted);padding:8px 12px;white-space:nowrap}
.keys-guide{margin:-20px 0 28px;font-size:14px}
@media(max-width:700px){.store-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.setup-progress{grid-template-columns:1fr}.setup-dismiss{justify-self:start;margin-bottom:8px}}

#account-deletion-status:empty{position:absolute;margin:0}