/* taste-gate: allow T7 T2 T12 because Frank's setup already uses the serif pencil, and the radio mark inside a full-size label is 18px on purpose. Household setup (Vera, 2026-11-01 walkthrough). Scoped to .setup so Settings and the rest of the app are untouched.
   Tokens come from design-tokens.css. The current step is brick red. Chosen days are sage. Ordinary primary actions stay green. */

/* ---- Hero: a serif title much larger than any field, one picture on a colored patch ---- */
.setup-hero h1 { flex: 1; }
.setup-hero { display: flex; align-items: center; gap: 22px; margin: 0 0 32px; }
#app .setup-hero h1 { margin: 0; font: 400 clamp(40px, 5.4vw, 60px)/1.04 Georgia, serif; letter-spacing: -1.2px; color: var(--green); text-wrap: balance; min-width: 0; overflow-wrap: break-word; }
.setup-hero .wizard-art { order: 1; flex: none; box-sizing: border-box; width: 96px; height: 96px; padding: 10px; border-radius: 12px; object-fit: contain; background: var(--wheat); }
.setup[data-step="food"] .wizard-art { background: var(--ochre); }
.setup[data-step="rhythm"] .wizard-art { background: var(--blue); }
.setup[data-step="style"] .wizard-art { background: var(--ochre); }
.setup[data-step="stores"] .wizard-art { background: #f6dfb0; }
.setup[data-step="money"] .wizard-art { background: var(--wheat); }
.setup[data-step="frank"] .wizard-art { background: var(--sage); }
.setup[data-step="review"] .wizard-art { background: var(--sage); }

/* ---- Progress: eight steps. Two rows of four on a phone, one row from 720px, stuck to the top while the page scrolls ---- */
html:has(.wizard.setup) { scroll-padding-top: 128px; }
@media (min-width: 720px) { html:has(.wizard.setup) { scroll-padding-top: 64px; } }
.setup-rail { position: sticky; top: 0; z-index: 16; margin: 0 0 20px; padding: 6px 0; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--paper); }
body.form-keyboard-open .setup-rail { position: static; }
.setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; list-style: none; margin: 0; padding: 0; width: 100%; }
@media (min-width: 720px) { .setup-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; } }
.setup-step { min-width: 0; position: relative; }
.step-link, .step-body { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.15; text-align: center; }
.step-link { color: var(--ink); cursor: pointer; }
.step-link:hover .step-name { text-decoration: underline; text-underline-offset: 4px; }
.step-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 9px; }
.step-mark { display: none; }
.step-line { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--line); }
.step-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-step[data-state="done"] .step-line { height: 4px; background: var(--green); }
.setup-step[data-state="current"] .step-line { height: 6px; background: var(--red); }
.setup-step[data-state="current"] .step-name { color: var(--ink); font-weight: 700; }
.setup-current-name { display: none; }
.setup-steps[data-fit="tight"] .step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.setup-rail[data-fit="tight"] .setup-current-name { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; line-height: 1.3; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }

/* ---- Fields ---- */
.setup-form { gap: 22px; }
.setup-form label { margin: 0; }
.setup-form textarea { min-height: 88px; resize: none; }
.setup .optional { margin-left: 4px; font-weight: 400; color: var(--muted); }
.setup-form .check { margin: 0; }
.pantry-pointer { margin: 0; color: var(--muted); }
/* Kitchen photos (Cody, 2026-11-05): the camera sits inside the kitchen box, bottom right, on the Food step's ochre.
   The text keeps clear of it. The result line reads as part of the box above and is gone while empty. */
.setup-form .kitchen-note { position: relative; }
.setup-form .kitchen-note textarea { padding-right: 60px; padding-bottom: 14px; }
.setup-form .kitchen-camera { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; background: var(--ochre); color: var(--ink); border: 1px solid var(--wheat-line, #d5bd75); border-radius: var(--button-radius, 9px); }
.setup-form .kitchen-camera:hover { background: var(--wheat); }
.setup-form .kitchen-camera:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.setup-form .kitchen-camera:disabled { opacity: .6; }
.setup-form .kitchen-photo-status { margin: -14px 0 0; color: var(--green); font-size: 14px; }
.setup-form .kitchen-photo-status:empty { display: none; }
@media (forced-colors: active) { .setup-form .kitchen-camera { border-color: ButtonText; } }

/* ---- Cooking days and prep days: equal cells, 44px targets. Dinner nights stay sage; they do not change color with style. ---- */
.setup-form fieldset { margin: 0; }
.cooking-days, .prep-day-picker { container-type: inline-size; display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; justify-content: start; margin: 0 0 22px; }
@container (min-width: 332px) {
  .cooking-days, .prep-day-picker { grid-template-columns: repeat(7, minmax(44px, 1fr)); max-width: 504px; }
}
.day-chip, .prep-day-picker .check { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; width: 100%; height: 56px; min-height: 56px; min-width: 44px; margin: 0; padding: 4px 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink); font-size: 14px; line-height: 1.1; text-align: center; }
#app .day-chip > input, #app .prep-day-picker .check > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; opacity: 0.02; cursor: pointer; }
.day-tick, .day-tick svg { display: grid; width: 16px; height: 16px; place-items: center; pointer-events: none; }
.day-chip:not(:has(input:checked)) .day-tick { visibility: hidden; }
.cooking-days .day-chip:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; }
.prep-day-picker .check:has(input:checked) { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.day-chip:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.setup .day-tag { display: none; }
.cooking-days[data-fit="tight"], .prep-day-picker[data-fit="tight"] { grid-template-columns: minmax(44px, 1fr); max-width: none; }
.prep-day-field { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.meal-prep-targets { border: 0; padding: 0; margin-top: 24px; min-width: 0; }
.meal-prep-targets legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.meal-prep-targets[hidden], .prep-day-field[hidden] { display: none !important; }
.prep-day-field legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 600; }
.prep-day-picker .check { min-height: 44px; }

/* ---- Stores: tiles are toggles; chosen ones are filled and carry a tick ---- */
.stores-step .step-lede { max-width: 640px; margin: 0 0 18px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.stores-step .store-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); margin-bottom: 10px; }
.stores-step .store-tile { grid-template-columns: auto minmax(0, 1fr) 22px; min-height: 64px; border-radius: 9px; }
.stores-step .store-tile[aria-pressed="true"] { background: var(--sage); border-color: var(--green); box-shadow: none; }
.stores-step .store-tile.is-summary { grid-template-columns: minmax(0, 1fr) 22px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.stores-step .store-tile.is-summary .store-mark { display: none; }
.stores-step .store-summary { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.35; }
.store-check { width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--white); display: grid; place-items: center; color: var(--white); font-size: 18px; font-weight: 700; line-height: 1; }
.store-tile[aria-pressed="true"] .store-check { background: var(--green); border-color: var(--green); }
.store-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.main-tag { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--red); }
.main-store { margin: 8px 0 0; }
.main-store-slot:empty { display: none; }
.stores-step .store-panel { margin-top: 22px; }

/* ---- Receipts: a separate, optional section after the stores ---- */
.setup-receipts { display: grid; gap: 14px; justify-items: start; border-top: 1px solid var(--line); padding-top: 24px; }
.setup-receipts h2 { margin: 0; font-size: 24px; }
.setup-receipts .h2-aside { display: block; margin-top: 4px; font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--muted); }
.setup-receipts .link-buttons { margin: 0; }

/* ---- Review: editable paper, a quiet Change beside each answer ---- */
.setup-review { margin: 0; }
.setup-review > div { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 6px 0; min-height: 48px; }
.setup-review dt { margin: 0; }
.setup-review dd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.setup-review .review-change { flex: none; padding: 8px 4px; font-size: 14px; }

/* ---- Pantry proposal review (style only): editable paper with a quiet original note and the ordinary green Put it away ---- */
dialog.pantry-update.intake .sheet-source { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
dialog.pantry-update.intake .source-badge { padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: italic 400 15px/1.4 Georgia, serif; letter-spacing: 0; text-transform: none; }
dialog.pantry-update.intake .row-editor { border: 0; border-left: 2px solid var(--line); border-radius: 0; background: transparent; }
dialog.pantry-update.intake .dialog-error:empty { display: none; }
dialog.pantry-update.intake #intake-title:is(:focus, :focus-visible) { outline-style: none; outline-width: 0; box-shadow: none; }
dialog.pantry-update.intake .sheet-expiry { display: none; }

/* A connected store can be folded for later and opened again. The control is rendered by the page. */
.setup-connect.is-later .store-panel,
.setup-connect.is-later .setup-receipts .link-buttons,
.setup-connect.is-later .setup-receipts .connections { display: none; }
.setup-later { min-height: 44px; }

/* ---- Phone: the same horizontal progress, no side gutter ---- */
@media (max-width: 700px) {
  .setup { padding-right: 0; }
  .notebook:has(.wizard.setup) .workspace { padding-left: 16px; padding-right: 16px; }
  .setup-hero { align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  #app .setup-hero h1 { font-size: 36px; }
  .setup-hero .wizard-art { width: 80px; height: 80px; }
  .setup[data-fit="tight"] .setup-hero { flex-direction: column; }
  #app .setup-form.panel { border: 0; padding: 0; background: transparent; box-shadow: none; }
  .stores-step .store-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-review > div { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .setup *, .setup-rail * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .setup .step-line { forced-color-adjust: none; background: GrayText; }
  .setup-step[data-state="done"] .step-line { background: CanvasText; }
  .setup-step[data-state="current"] .step-line, .cooking-days .day-chip:has(input:checked), .prep-day-picker .check:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .store-tile[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Preserve group spacing inside the setup form reset, and use real square checkboxes for saved restrictions. */
.setup-form .meal-prep-targets, .setup-form .prep-day-field { margin-top: 24px; }
#app .choice-rows.saved-allergies input[type=checkbox] { appearance: auto; -webkit-appearance: auto; border-radius: 3px; padding: 0; accent-color: var(--green); }

.meal-prep-targets input[type=number] { font-size: 16px; }

/* Setup v4: available tools and two independent, optional cooking preferences. */
.setup-cooking-profile { display:grid; gap:22px; padding-top:24px; border-top:1px solid var(--line); }
.setup-cooking-profile > header { display:flex; gap:18px; align-items:center; }
.setup-cooking-profile > header img { width:76px; height:76px; object-fit:contain; background:var(--blue); border-radius:45% 52% 40% 48%; padding:6px; }
.setup-cooking-profile h2 { margin:0 0 6px; }
.setup-cooking-profile header p { margin:0; }
.cooking-equipment { display:grid; gap:12px; }
.cooking-equipment > .hint { margin:0; }
.cooking-tool-groups { display:grid; gap:22px; min-width:0; }
.cooking-tool-group { --tool-patch:var(--blue); min-width:0; }
.cooking-tool-group[data-tone="countertop"] { --tool-patch:var(--wheat); }
.cooking-tool-group[data-tone="sear"] { --tool-patch:var(--ochre); }
.cooking-tool-group[data-tone="slow"] { --tool-patch:var(--sage); }
.cooking-tool-group h3 { display:table; margin:0 0 11px; font:normal 22px/1.2 Georgia,serif; color:var(--ink); background:linear-gradient(transparent 74%,var(--tool-patch) 74%); }
.equipment-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; min-width:0; }
.cooking-tool { position:relative; display:flex; align-items:center; gap:11px; min-width:0; min-height:72px; padding:9px 34px 9px 10px; border:1.5px solid var(--line); border-radius:var(--panel-radius); background:var(--white); color:var(--ink); cursor:pointer; font-size:15px; line-height:1.2; transition:border-color .15s,background-color .15s; }
.cooking-tool:hover { border-color:var(--green); }
.cooking-tool:has(input:checked) { border-color:var(--green); background:var(--sage); box-shadow:inset 0 0 0 1px var(--green); }
.cooking-tool:focus-within { outline:3px solid var(--focus); outline-offset:2px; }
.cooking-tool input { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:pointer; }
.cooking-tool-art { display:grid; flex:none; place-items:center; width:50px; height:50px; border-radius:43% 52% 45% 49%; background:var(--tool-patch); transform:rotate(-2deg); }
.cooking-tool-icon { width:39px; height:39px; color:var(--ink); transform:rotate(2deg); }
.cooking-tool-name { min-width:0; font-weight:600; overflow-wrap:break-word; }
.cooking-tool-tick { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--green); color:var(--white); font-size:15px; font-weight:700; opacity:0; }
.cooking-tool-tick svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cooking-tool:has(input:checked) .cooking-tool-tick { opacity:1; }
.cooking-tool-none { justify-self:start; min-height:48px; margin:4px 0 0; padding:7px 12px; border:1px dashed var(--line); border-radius:var(--button-radius); background:var(--white); }
.cooking-tool-none:has(input:checked) { border-color:var(--green); background:var(--sage); }
.cooking-tool-none:focus-within { outline:3px solid var(--focus); outline-offset:2px; }
@media(max-width:700px) { .equipment-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } .cooking-tool { gap:8px; padding-right:26px; } .cooking-tool-art { width:42px; height:42px; } .cooking-tool-icon { width:34px; height:34px; } }
@media(max-width:350px) { .equipment-choices { grid-template-columns:1fr; } .cooking-tool-art { width:50px; height:50px; } .cooking-tool-icon { width:39px; height:39px; } }
@media(prefers-reduced-motion:reduce) { .cooking-tool { transition:none; } }
@media(forced-colors:active) { .cooking-tool:has(input:checked),.cooking-tool-none:has(input:checked) { border:2px solid Highlight; } .cooking-tool-tick { color:HighlightText; background:Highlight; } .cooking-tool-art { border:1px solid CanvasText; } }
.cooking-comfort { display:grid; gap:8px; }
.comfort-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.comfort-choices label { display:flex; align-items:center; gap:8px; min-height:54px; padding:10px; border:1px solid var(--line); border-radius:var(--button-radius); font-size:15px; cursor:pointer; }
.comfort-choices input { flex:none; width:18px; height:18px; min-height:0; accent-color:var(--green); }
.comfort-choices label:has(:checked) { background:var(--wheat); border-color:var(--ink); }

.cooking-comfort .text-button { justify-self:start; min-height:44px; }
.setup-frank-note { display:flex; align-items:center; gap:20px; padding:22px 0 6px; border-top:1px solid var(--line); }
.setup-frank-mark { flex:none; font:64px Georgia,serif; line-height:1; color:var(--green); background:var(--wheat); padding:14px 22px; border-radius:48% 42% 52% 38%; }
.setup-frank-mark > span { color:var(--red); }
.setup-frank-note h2 { margin:0; }
.setup-frank-note p { margin:8px 0 12px; }
.setup-frank-note a,.setup-style-return { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.setup-style-return { margin-bottom:20px; }
@media(max-width:700px){ .comfort-choices { grid-template-columns:1fr; } .comfort-choices label { min-height:48px; font-size:16px; } .setup-frank-note { gap:14px; align-items:flex-start; } .setup-frank-mark { font-size:48px; padding:12px 14px; } }
@media(forced-colors:active){ .comfort-choices label:has(:checked) { border:2px solid Highlight; } }

.cook-help { margin: 4px 0 8px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.cook-sliders { display: grid; gap: 22px; }
.cook-slider { display: grid; gap: 4px; min-width: 0; }
.cook-slider label { font-weight: 700; font-size: 16px; }
.cook-slider-row { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; gap: 8px; align-items: center; }
.cook-slider-end { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--wheat); color: var(--ink); }
.cook-slider-row .cook-slider-end:last-child { background: var(--ochre); }
.cook-slider-icon { width: 36px; height: 36px; object-fit: contain; }
#app .cook-slider input[type=range] { width: 100%; min-height: 44px; margin: 0; padding: 0; accent-color: var(--red); }
.cook-slider-value { margin: 0; font-size: 16px; font-weight: 600; }
.cook-slider.is-unset .cook-slider-value { color: var(--muted); font-weight: 500; }
.cook-slider.is-unset input[type=range] { opacity: .55; }
.cooking-other { display: block; margin-top: 14px; font-weight: 700; }
#cooking-equipment-other { width: 100%; min-height: 44px; font-size: 16px; }
.cook-slider .text-button { justify-self: start; min-height: 44px; }
@media(forced-colors:active){ .cook-slider input[type=range] { opacity: 1; } .cook-slider-end { border: 1px solid CanvasText; } }