/* pka-mealboard guided weekly flow (spec: Deliverables/2026-10-17-mealboard-
   guided-flow-spec.md v8). Layout and values are lifted from the approved
   mockups (Deliverables/2026-10-17-mealboard-guided-flow-*.html) and use the
   app's ratified light-theme tokens from app.css :root only. Every flow class
   is prefixed fl- so nothing here can collide with the side screens' app.css
   classes (pantry, settings). Mobile-first, 390px is the design width. */

#flowPage{
  --fl-ink:var(--charcoal);
  --fl-soft:var(--charcoal-soft);
  --fl-faint:#6F675C;
  --fl-card:var(--cream-card);
  --fl-chip:var(--neutral-chip-bg);
  --fl-head:var(--font-head);
  --fl-body:var(--font-body);
  width:100%; max-width:560px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; background:var(--cream); position:relative;
  color:var(--fl-ink); font-family:var(--fl-body); font-size:16px; line-height:1.45;
}
#flowPage *{box-sizing:border-box;}
#flowPage h1,#flowPage h2,#flowPage h3{font-family:var(--fl-head); margin:0;}

.fl-top{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#2E2A26; color:#fff; flex:none;}
.fl-top b{font-family:var(--fl-head); font-size:18px; font-weight:700;}
.fl-more{background:none; border:1px solid #8a8175; color:#fff; border-radius:999px; padding:6px 12px; font-size:14px; min-height:44px; cursor:pointer;}

.fl-prog{background:var(--fl-card); border-bottom:1px solid var(--line); padding:12px 16px 10px; flex:none;}
.fl-dots{display:flex; gap:12px; align-items:flex-start; margin:-12px 0 -24px;}  /* done dots are 44px-tall buttons; the 8px bar is drawn inside, the negative margin keeps the bar where it was */
.fl-dot{flex:1; height:8px; border-radius:99px; background:var(--line);}
/* Non-tappable dots use the SAME 44px box + 8px drawn bar as tap dots, so the container's negative margins
   always have 44px to eat. Before (8px dot + margin-top 12) the box was 20px tall, the -24px bottom margin
   pulled the "Step N of 5" text up 4px into the bar and crossed it out (Step 1, no done dots). */
.fl-dot:not(.tap){height:44px; position:relative; background:none;}
.fl-dot:not(.tap)::before{content:""; position:absolute; left:0; right:0; top:12px; height:8px; border-radius:99px; background:var(--line);}
.fl-dot.cur:not(.tap)::before{background:var(--terracotta);}
.fl-dot.part:not(.tap)::before{background:var(--amber-tint-text);}
.fl-dot.done:not(.tap)::before{background:var(--sage);}
.fl-dot.tap{cursor:pointer; border:0; padding:0; height:44px; min-height:44px; min-width:44px; background:none; position:relative;}
.fl-dot.tap::before{content:""; position:absolute; left:0; right:0; top:12px; height:8px; border-radius:99px; background:var(--line);}
.fl-dot.tap.done::before{background:var(--sage);}
.fl-dot.tap.part::before{background:var(--amber-tint-text);}
.fl-dot.tap.cur::before{background:var(--terracotta);}
.fl-where{display:block; margin-top:8px; font-size:14px;}
.fl-where b{display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-where span{display:block; color:var(--fl-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#flowPage main{padding:14px 16px 24px; flex:1; min-width:0; max-width:none; overflow:visible; margin:0;}
.fl-back{display:inline-block; color:var(--terracotta-dark); font-weight:600; font-size:15px; padding:6px 0; min-height:44px; min-width:44px; background:none; border:0; cursor:pointer; text-align:left;}
.fl-wk{font-size:13px; color:var(--fl-faint); margin-bottom:6px;}
#flowPage h2{font-size:26px; line-height:1.2; margin-bottom:6px;}
.fl-lead{color:var(--fl-soft); margin:0 0 16px;}
.fl-sub{color:var(--fl-soft); font-size:14px; margin:0 0 8px;}
.fl-card{background:var(--fl-card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px;}
.fl-card h3{font-size:18px; margin-bottom:4px;}
.fl-card label,.fl-label{display:block; font-weight:700; font-size:14px; margin:12px 0 4px;}
.fl-card label:first-child{margin-top:0;}
#flowPage input,#flowPage textarea,#flowPage select{width:100%; font:inherit; padding:12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; min-height:48px; color:var(--fl-ink);}

.fl-cta{position:sticky; bottom:0; background:var(--cream); box-shadow:0 -10px 0 var(--cream); border-top:1px solid var(--line); padding:14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); margin-top:auto; z-index:5; flex:none;}
.fl-cta.fl-cta-plain{border-top:0;}
.fl-sub.fl-hint{margin-top:12px;} /* 12px clear of the link or button above it (gate G4) */
/* In-sentence links (step 5: install page, Turn on email): one style, underlined, still a 44px target. */
.fl-sub .fl-link.inline{font-family:inherit; font-size:inherit; font-weight:600; line-height:inherit; text-decoration:underline; text-underline-offset:2px; color:var(--terracotta-dark);}
.fl-btn{display:block; width:100%; min-height:54px; border:0; border-radius:14px; background:#2E2A26; color:#fff; font:700 17px var(--fl-body); padding:14px; cursor:pointer;}
.fl-btn[disabled]{background:#7A7266; color:#fff; opacity:1; cursor:default;}
#flowMain{padding-bottom:calc(var(--fl-cta-h,0px) + 12px);}
/* while a toast is up, the end of the page leaves room for it too, so nothing is ever hidden under toast or bar */
body.has-toast #flowMain{padding-bottom:calc(var(--fl-cta-h,0px) + 12px + 76px);}
.nw{white-space:nowrap;}
.fl-cta .fl-link{margin-top:12px;}
.fl-btn.fl-sec{background:transparent; color:var(--fl-ink); border:1px solid #bdb19b; min-height:48px; font-weight:600; font-size:15px; margin-top:10px;}
.fl-link{display:block; width:100%; text-align:center; margin-top:10px; color:var(--terracotta-dark); font-weight:600; font-size:15px; background:none; border:0; cursor:pointer; padding:10px 4px; min-height:44px;}
.fl-link.run{display:inline; width:auto; margin:0; padding:13px 0; min-height:0; text-align:left; font-weight:600; font-size:inherit;}
.fl-lc{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid rgba(122,84,16,.18); padding:2px 0; line-height:1.35;}
.fl-lc:first-of-type{border-top:0;}
.fl-lc .fl-link.inline{flex:none; white-space:nowrap; padding:10px 0;}
.fl-mini.block{width:100%;}
/* the summary is cut at 2 lines; the toddler version is a decision input, so it is never cut (it wraps in full) */
.fl-meal-tap .fl-sub{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.fl-meal-tap .fl-sub.fl-meal-toddler{display:block; overflow:visible; -webkit-line-clamp:unset;}
.fl-link.inline{display:inline-block; width:auto; margin:0; padding:10px 0; min-height:44px; text-align:left;}
.fl-chip{display:inline-block; background:var(--fl-chip); border-radius:99px; padding:3px 10px; font-size:13px; margin:4px 6px 0 0;}
.fl-chip.gf{background:var(--sage-tint); color:var(--sage-tint-text);}
.fl-note{border-radius:12px; padding:12px; font-size:15px; margin-bottom:12px;}
.fl-amber{background:var(--amber-tint); color:var(--amber-tint-text);}
.fl-rust{background:var(--rust-tint); color:var(--rust-tint-text);}
.fl-sage{background:var(--sage-tint); color:var(--sage-tint-text);}
.fl-amber-text{color:var(--amber-tint-text);}
.fl-rust-text{color:var(--rust-tint-text);}

.fl-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line);}
.fl-row:first-child{border-top:0;}
.fl-row > div:first-child{min-width:0; flex:1;}
.fl-row .n{font-weight:700; overflow-wrap:anywhere;}
.fl-row .d{font-size:13px; color:var(--fl-faint); overflow-wrap:anywhere;}
.fl-row.stk{flex-direction:column; align-items:stretch;}
.fl-row.has-chip{flex-wrap:wrap;}
.fl-row-chip{flex:0 0 100%; min-width:0;}
.fl-row-chip .fl-chip{margin:0;}
/* phone: the item text takes the full width, buttons on the next row */
@media (max-width:480px){
  .fl-row:has(> .fl-acts){flex-wrap:wrap;}
  .fl-row:has(> .fl-acts) > div:first-child{flex:0 0 100%;}
}
.fl-row.removed .n{text-decoration:line-through; color:var(--fl-faint);}
.fl-acts{display:flex; gap:12px; flex:none; align-items:center;}
.fl-mini{display:grid; place-items:center; text-align:center; border:1px solid #bdb19b; border-radius:10px; padding:10px 12px; min-height:44px; color:var(--terracotta-dark); font-weight:600; font-size:15px; background:#fff; cursor:pointer; font-family:inherit;}
.fl-mini.sm{min-width:64px;}
/* per-row Edit and Remove: text weight, no box, so the single primary button owns the screen (tap area stays 44px) */
.fl-txt{background:#fff; border:1px solid #bdb19b; border-radius:10px; padding:0 12px; min-height:44px; min-width:56px; font:600 14px var(--fl-body); color:var(--fl-ink); cursor:pointer;}
.fl-txt.neutral{color:var(--rust-tint-text);}  /* Remove: same surface, outline, weight, height and radius as Edit; only the text is rust */
.fl-txt[disabled]{opacity:.5; cursor:default;}
.fl-txt[aria-busy=true]{opacity:.6;}
.fl-mini.rm{color:var(--rust-tint-text); border-color:#d9aaa3; min-width:84px;}
.fl-mini.buy{min-width:110px; flex:none;}
.fl-mini.emph{background:var(--terracotta-tint); border-color:var(--terracotta); color:var(--terracotta-dark);}
.fl-mini[disabled]{opacity:.5; cursor:default;}
.fl-seg{display:flex; gap:12px; width:100%;}
.fl-seg button{flex:1; min-width:0; min-height:48px; text-align:center; padding:11px 6px; border:1px solid #bdb19b; border-radius:12px; font-weight:700; font-size:15px; background:#fff; color:var(--fl-ink); cursor:pointer; font-family:inherit;}
.fl-seg button[data-action="pantry-answer"]{border-radius:999px;}
.fl-seg button.on{background:#2E2A26; color:#fff; border-color:#2E2A26;}
.fl-seg button[disabled]{opacity:.6; cursor:default;}
/* Usuals: a chosen answer stays lighter than the page's one primary button (Confirm). */
.fl-seg-usual button.on{background:var(--sage-tint); color:var(--sage-tint-text); border-color:var(--sage-tint-text);}

.fl-st{list-style:none; margin:0; padding:0;}
.fl-st li{display:flex; gap:12px; align-items:flex-start; padding:10px 0; font-size:16px;}
.fl-ic{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; border:2px solid var(--line); color:var(--fl-faint);}
.fl-ic.ok{background:var(--sage); border-color:var(--sage); color:#fff;}
.fl-ic.run{border-color:var(--terracotta); color:var(--terracotta); animation:fl-sp 1s linear infinite; border-top-color:transparent;}
.fl-ic.bad{border-color:var(--rust-tint-text); color:var(--rust-tint-text);}
.fl-ic.hid{visibility:hidden;}
.fl-ic.pend{border-color:#a89f90; background:transparent;}
.fl-st li.later{color:var(--fl-faint);}
.fl-st li.later b{font-weight:400;}
@keyframes fl-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.fl-ic.run{animation:none;}}
.fl-bar{height:10px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0 4px;}
.fl-bar i{display:block; height:100%; background:var(--terracotta);}

.fl-meal{padding:12px 0; border-top:1px solid var(--line);}
.fl-meal:first-child{border-top:0;}
.fl-meal-tap{display:block; width:100%; text-align:left; background:none; border:0; padding:2px 0; cursor:pointer; font-family:inherit; color:inherit; min-height:44px;}
.fl-meal-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.fl-meal-head b{font-family:var(--fl-head); font-size:18px; overflow-wrap:anywhere;}
.fl-chev{color:var(--fl-faint); font-size:22px; flex:none;}
.fl-swap{color:var(--terracotta-dark); font-weight:600; font-size:14px; background:none; border:0; padding:8px 0; margin-top:12px; min-height:44px; cursor:pointer; font-family:inherit; text-align:left;}
.fl-big{font-size:56px; text-align:center; margin:20px 0 6px;}
.fl-circle{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--amber-tint); color:var(--amber-tint-text); font:700 30px var(--fl-head);}
.fl-center{text-align:center;}

.fl-tb{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:10px; align-items:center; margin:8px 0;}
.fl-tbi{display:inline-flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; min-width:32px;}
.fl-tbi small{font-size:12px; line-height:1.2; color:var(--fl-faint);}
.fl-mi{width:24px; height:24px; border-radius:5px; background:var(--terracotta); outline:3px solid var(--terracotta-tint); display:inline-grid; place-items:center;}

.fl-menu{padding:0 14px;}
.fl-menu button{display:block; width:100%; text-align:left; padding:16px 0; border:0; border-top:1px solid var(--line); background:none; font:600 16px var(--fl-body); color:var(--fl-ink); min-height:48px; cursor:pointer;}
.fl-menu button:first-child{border-top:0;}
.fl-menu button:disabled{color:var(--fl-faint); cursor:not-allowed;}
#screen-more > h3{font-size:16px; margin:18px 0 8px;}
.fl-less label{display:block; font-weight:700; margin:2px 0 6px;}
.fl-less-err{color:var(--rust-tint-text); font-size:14px; margin-top:8px;}
.fl-less-acts{margin-top:10px;}
.fl-less-acts .fl-link{margin-top:2px;}
.fl-hs{margin-top:4px;}
.fl-add{display:flex; gap:12px;}
.fl-add input{flex:1; min-width:0;}
.fl-add .fl-mini{min-width:92px;}

/* bottom sheet (Edit quantity, swap options) */
/* The sheet lives in <body>, outside #flowPage, so the flow's custom properties are declared here too (without them the sheet
   surface resolved to transparent and its text lost the body font). Above the sticky footer (z 5) and below the toast (z 900). */
.fl-scrim{--fl-ink:var(--charcoal); --fl-soft:var(--charcoal-soft); --fl-faint:#6F675C; --fl-card:var(--cream-card); --fl-chip:var(--neutral-chip-bg); --fl-head:var(--font-head); --fl-body:var(--font-body);
  position:fixed; inset:0; background:rgba(46,42,38,.45); z-index:850; display:flex; align-items:flex-end; justify-content:center; font-family:var(--fl-body); color:var(--fl-ink); font-size:16px; line-height:1.45;}
.fl-scrim *{box-sizing:border-box;}
.fl-sheet{background:#FFFDF8; border-radius:22px 22px 0 0; padding:18px 16px calc(28px + env(safe-area-inset-bottom, 0px)); width:100%; max-width:560px; box-shadow:0 -12px 30px rgba(0,0,0,.25); max-height:85vh; max-height:85dvh; overflow:auto; overscroll-behavior:contain;}
/* while a sheet is open the sticky footer is out of the way (not painted, not tappable) */
body:has(#flSheet) .fl-cta{visibility:hidden;}
.fl-sheet h3{font-family:var(--fl-head); font-size:20px; margin:0 0 8px;}
.fl-sheet .fl-btn{margin-top:12px;}
/* a long sheet keeps its title and Close in view while it scrolls; the negative margins cancel the sheet's own padding */
.fl-sheet-head{position:sticky; top:-18px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-18px -16px 8px; padding:12px 16px 8px; background:#FFFDF8;}
.fl-sheet-head h3{margin:0;}
/* spec rule 6: 3 second toast; sits above the sticky primary so it never covers it */
body #toast{bottom:calc(var(--fl-cta-h, 90px) + 10px); left:16px; right:16px; max-width:none; width:auto; box-sizing:border-box; transform:translateY(8px); border-radius:14px; background:#2E2A26; color:#fff; font-size:15px; line-height:1.35; padding:14px 16px; box-shadow:0 6px 18px rgba(0,0,0,.28); z-index:900;}
body #toast.show{transform:translateY(0);}

/* side screens reuse app.css classes inside the flow page */
#sideRoot{padding:14px 0 24px; flex:1; min-width:0;} /* the page main already carries the 16px gutter */
#sideRoot .screen-title{margin-bottom:6px;}

@media (min-width: 900px){
  #flowPage{box-shadow:0 0 0 1px var(--line);}
}

.fl-link + .fl-link{margin-top:12px;}

/* the reason a disabled primary is disabled, right above it */
.fl-why{margin:0 0 8px; font-size:15px; font-weight:600; color:var(--amber-tint-text);}
.fl-why .fl-link.inline{display:inline; min-height:0; padding:0 0 0 4px; font-size:15px; text-decoration:underline;}
/* inline error under the page, above the primary: stays until the person acts again (a toast fades and is gone) */
.fl-err{margin:0 0 10px; padding:10px 12px; border-radius:12px; background:var(--rust-tint); color:var(--rust-tint-text); font-size:15px; font-weight:600;}
.fl-offline{position:sticky; top:0; z-index:6; margin:-14px -16px 12px; padding:8px 16px; background:var(--amber-tint); color:var(--amber-tint-text); font-size:14px; font-weight:600; text-align:center; border-bottom:1px solid var(--line);}
.fl-btn[aria-busy=true]{cursor:progress;}

/* pick N of 2N: one card per candidate dinner. The whole card body is the tap target (aria-pressed); "See the recipe" is a
   separate button so a button never sits inside a button. Selected = terracotta outline + a filled check. */
.fl-cand{padding:0; overflow:hidden;}
.fl-cand.on{border:2px solid var(--terracotta); background:var(--terracotta-tint);}
.fl-cand-tap{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; background:none; border:0; padding:14px 14px 4px; cursor:pointer; font-family:inherit; color:inherit; min-height:44px;}
.fl-cand-mark{flex:none; width:28px; height:28px; border-radius:50%; border:2px solid #a89f90; display:grid; place-items:center; font-size:16px; font-weight:700; color:#fff; background:#fff; margin-top:2px;}
.fl-cand.on .fl-cand-mark{background:var(--terracotta); border-color:var(--terracotta);}
.fl-cand-body{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.fl-cand-name{font-family:var(--fl-head); font-size:18px; overflow-wrap:anywhere;}
.fl-cand-hook{display:block;}
.fl-cand-chips{display:flex; flex-wrap:wrap; gap:0;}
.fl-cand .fl-link.inline{margin:12px 0 6px 54px; padding:10px 0;}  /* 12px clear of the pick button above (gate G4) */
/* Recipe vault (2026-10-26): "Repeat a previous meal" dropdowns on the pick step, and the My recipes rows */
.fl-meal .fl-link.inline{display:block; width:auto; text-align:left; margin:12px 0 0; padding:10px 0; font-size:14px;}  /* Save to my recipes: 12px under Swap (gate G4) */
.fl-vault h3{margin:0 0 4px;}
.fl-vault-slot{display:block; margin-top:12px;}
.fl-vault-label{display:block; font-size:14px; font-weight:600; color:var(--fl-soft); margin-bottom:4px;}
.fl-vault select{width:100%; min-height:44px; font-family:inherit; font-size:16px; color:var(--fl-ink); padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff;}
.fl-vault-acts{display:flex; gap:20px; flex-wrap:wrap;}
.fl-vault-acts .fl-link.inline{width:auto; margin:0; padding:10px 0;}

/* Step 5 recovery: the closed "Still stuck?" disclosure above the action bar, and the by-hand shopping list */
.fl-stuck{background:var(--fl-card); border:1px solid var(--line); border-radius:16px; padding:0 14px; margin:12px 0;}
.fl-stuck > summary{cursor:pointer; font-weight:700; min-height:48px; display:flex; align-items:center; list-style:none;}
.fl-stuck > summary::-webkit-details-marker{display:none;}
.fl-stuck > summary::after{content:"+"; margin-left:auto; font-size:20px; color:var(--fl-faint);}
.fl-stuck[open] > summary::after{content:"-";}
.fl-stuck-steps{margin:0 0 8px; padding-left:22px;}
.fl-stuck-steps li{margin:0 0 12px;}
.fl-stuck-steps .fl-mini{margin-top:8px;}
.fl-hand{display:flex; flex-direction:column; gap:12px; margin:8px 0 12px;}
.fl-dept{font-size:14px; font-weight:700; margin:14px 0 6px;}
.fl-hand-row{display:flex; gap:12px; align-items:flex-start; min-height:48px;}
.fl-hand-row input{width:24px; height:24px; min-height:24px; flex:none; margin-top:2px;}

/* Step 3 pantry: three one-tap answers per row; long labels wrap inside the 48px buttons */
.fl-seg3 button{font-size:14px; line-height:1.2;}
/* the gluten-free label question: three answers stacked, one line each (three across wrapped "Not gluten- / free" at 390px) */
.fl-seg.fl-seg-gf{flex-direction:column; gap:12px;}
.fl-seg-gf button{flex:none; width:100%; white-space:nowrap;}

/* Talk to Mealboard (flow/voice.js). Tall and tinted, so it is easy to hit one-handed and still reads as second to the screen's dark primary. */
.fl-btn.fl-talk{display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; margin-top:10px; background:var(--terracotta-tint); color:var(--terracotta-dark); border:1px solid var(--terracotta);}
.fl-add .fl-talk-mini{min-width:76px; padding:6px 8px; line-height:1.15;}
.fl-rec{display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 0 10px; font:700 44px/1 var(--fl-body); font-variant-numeric:tabular-nums;}
.fl-rec-dot{width:16px; height:16px; border-radius:50%; background:var(--rust-tint-text); animation:fl-rec-pulse 1.4s ease-in-out infinite;}
@keyframes fl-rec-pulse{50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){.fl-rec-dot{animation:none;}}
.fl-sheet .fl-btn.fl-rec-done{min-height:88px; font-size:24px;}
.fl-sheet textarea,.fl-vr input{width:100%; font:16px var(--fl-body); padding:12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; color:var(--fl-ink);}
.fl-vr{display:flex; align-items:center; gap:8px; margin-top:8px;}
.fl-vr input{flex:1; width:auto; min-width:0; min-height:44px;}
.fl-vt{margin:4px 0 12px; font-size:15px;}
.fl-vt summary{min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--terracotta-dark); cursor:pointer;}
.fl-vt p{margin:0 0 8px; color:var(--fl-soft);}