/* ops.chipcookies.co: one stylesheet for every staff screen.
 * Source of truth: docs/prototypes/game-plan/v2-design/DESIGN_SPEC.md + V2Home.dc.html + V2Bake.dc.html (approved v2 mockup).
 * Values are the spec's tokens; anything the mockup doesn't cover (forms, steppers, photo, undo) is built from the same
 * tokens and parts, and each one is listed in docs/proposals/ui_side_by_side.md.
 * Quicksand: 500 body, 600 headings/labels, 700 numbers + buttons. Never 400.
 */
:root{
  --black:#000;--white:#fff;--ink:#2a2a2a;--muted:#5c5650;--on-black-muted:#d9d2bf;
  --gold:#aa8a40;--gold-text:#7d6224;--tint:#f5eedc;--line:#e4dcc6;--line-strong:#857d6f;
  --success:#2f6b3a;--danger:#a3341f;--danger-bg:#f8ece8;--danger-line:#e3c3b8;--decided:#f7f5ef;
  --r-card:16px;--r-btn:4px;--r-tab:8px;--r-alert:8px;
  --pad:20px;                                   /* page side padding (v2: 20px) */
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--white);color:var(--ink);font:500 16px/22px Quicksand,Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
button,input,select{font:inherit;color:inherit}
a{color:var(--gold-text)}a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,label:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

/* ---- page frame: phone column, 20px sides, room for Safari's toolbar + the home indicator ---- */
.pg{max-width:430px;margin:0 auto;padding:0 0 calc(32px + var(--safe-b));display:flex;flex-direction:column}
.px{padding-left:var(--pad);padding-right:var(--pad)}

/* top row (V2Home): store/day + plan meta */
.toprow{padding:20px var(--pad) 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.picker{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--r-btn);background:var(--white);font-size:15px;font-weight:600}
.meta{font-size:13px;line-height:16px;color:var(--muted);text-align:right}

/* page head (V2Bake): back link, title, lead */
.head{padding:20px var(--pad) 12px;display:flex;flex-direction:column;gap:6px}
.backlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:600;text-decoration:none;color:var(--gold-text);background:none;border:0;padding:0;cursor:pointer;align-self:flex-start}
.h1{font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.01em}
.lead{font-size:15px;line-height:22px;color:var(--muted)}

/* black hero card */
.hero{margin:0 12px;padding:20px;background:var(--black);color:var(--white);border-radius:var(--r-card);display:flex;flex-direction:column;gap:16px}
.hero .k{font-size:14px;line-height:20px;color:var(--on-black-muted)}
.hero .big{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.01em}
.hero .sub{font-size:15px;line-height:22px;color:var(--on-black-muted)}
.hero .stack{display:flex;flex-direction:column;gap:4px}

/* sections */
.sec{padding:24px var(--pad) 8px;display:flex;flex-direction:column;gap:10px}
.sec.tight{padding-top:16px}
.sech{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.h2{font-size:20px;line-height:26px;font-weight:600}
.hint{font-size:14px;line-height:20px;color:var(--muted)}
.fine{font-size:13px;line-height:16px;color:var(--muted)}

/* buttons: 52px, 4px radius, 14px 700 caps .12em */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 16px;border-radius:var(--r-btn);border:2px solid transparent;background:var(--white);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:var(--black);text-align:center}
.btn.gold{background:var(--gold);color:var(--black)}
.btn.line{border-color:var(--black)}
.btn.outline{border-color:var(--line-strong);color:var(--ink)}
.btn.sm{min-height:48px;font-size:13px}
.btn:disabled{background:var(--decided);border-color:var(--line);color:#9b948a;cursor:default}
.btns{display:flex;flex-direction:column;gap:10px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* heads-up alerts */
.alert{display:flex;gap:12px;padding:14px;border-radius:var(--r-alert);background:var(--tint)}
.alert.red{background:var(--danger-bg);border:1px solid var(--danger-line)}
.alert svg{flex:none;margin-top:2px}
.alert .t{display:block;font-size:16px;line-height:22px;font-weight:600}
.alert .s{display:block;font-size:14px;line-height:20px;color:var(--muted)}

/* rows (who's on) */
.person{display:flex;align-items:center;gap:14px;min-height:60px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-align:left;width:100%;cursor:pointer;color:var(--ink)}
.person.me{border:2px solid var(--gold);background:var(--tint)}
.disc{width:40px;height:40px;flex:none;border-radius:9999px;background:var(--tint);color:var(--gold-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.person.me .disc{background:var(--gold);color:var(--black)}
.person .nm{display:flex;flex-direction:column;flex-grow:1;min-width:0}
.person .n{font-size:17px;line-height:22px;font-weight:600}
.person .r{font-size:14px;line-height:20px;color:var(--muted)}
.person .tm{font-size:15px;font-weight:600;white-space:nowrap}

/* cards (V2Bake pan card): white, 1px border, 16px radius, 14px padding; decided = #f7f5ef */
.cards{padding:0 12px;display:flex;flex-direction:column;gap:8px}
.card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--white)}
.card.done{background:var(--decided)}
.card .row{display:flex;align-items:center;gap:12px}
.card .col{display:flex;flex-direction:column;flex-grow:1;gap:2px;min-width:0}
.card .ttl{font-size:19px;line-height:24px;font-weight:600}
.card .sub{font-size:14px;line-height:20px;color:var(--muted)}
.card .state{font-size:14px;font-weight:600}
.card .state.ok{color:var(--success)}
.trig{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.trig small{font-size:12px;line-height:16px;color:var(--muted)}
.trig b{font-size:30px;line-height:34px;font-weight:700;color:var(--black)}
.btn.oven{background:var(--success);border-color:var(--success);color:var(--white)}
.btn.skipped{background:var(--muted);border-color:var(--muted);color:var(--white)}
.note{margin:0 12px;padding:14px 16px;border-radius:var(--r-card);background:var(--tint);display:flex;flex-direction:column;gap:2px}
.note .t{font-size:16px;line-height:22px;font-weight:600}
.note .s{font-size:14px;line-height:20px;color:var(--muted)}

/* choices: the v2 bake-wave tab style (white + 2px #e4dcc6, 8px radius; selected = black fill, white text) */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.choices.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{min-height:56px;padding:6px 8px;border-radius:var(--r-tab);background:var(--white);color:var(--ink);border:2px solid var(--line);font-size:16px;line-height:20px;font-weight:600;cursor:pointer;overflow-wrap:anywhere}
.choice small{display:block;font-size:12px;line-height:16px;font-weight:600;color:var(--muted)}
.choice.on{background:var(--black);border-color:var(--black);color:var(--white)}
.choice.on small{color:var(--on-black-muted)}
.choice.shift{border-color:var(--gold)}
.choice.on.shift{border-color:var(--black)}
/* a follow-up question for the chosen flavor sits in its own row under the grid, never over it */
.follow{margin-top:4px;padding:12px;border-radius:var(--r-card);background:var(--tint);display:flex;flex-direction:column;gap:8px}
.follow .q{font-size:15px;line-height:20px;font-weight:600}

/* stepper (numbers without a keyboard) */
.stepper{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:8px}
.stepper button{height:56px;border-radius:var(--r-tab);border:2px solid var(--line-strong);background:var(--white);font-size:26px;font-weight:700;line-height:1;cursor:pointer}
.stepper b{text-align:center;font-size:30px;line-height:34px;font-weight:700}
.stepper b small{display:block;font-size:13px;line-height:16px;font-weight:600;color:var(--muted)}

/* fixed value (store comes from the login) */
.fixed{display:flex;align-items:center;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-tab);background:var(--decided);font-size:16px;font-weight:600}

/* photo */
.photo{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:var(--r-btn);border:2px solid var(--black);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:var(--white)}
.prev{width:100%;border-radius:var(--r-tab);display:block}
.linkbtn{min-height:44px;background:none;border:0;padding:0;font-size:15px;font-weight:600;color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}

/* help toggle (the batch log's "?") */
.qb{flex:none;width:44px;height:44px;border-radius:9999px;border:2px solid var(--line);background:var(--white);color:var(--gold-text);font-size:16px;font-weight:700;cursor:pointer}
.help{padding:12px 14px;border-radius:var(--r-alert);background:var(--tint);font-size:14px;line-height:20px;color:var(--ink)}
.help ul{margin:6px 0 0;padding-left:18px}.help b{font-weight:700}

/* inputs (login only) */
.field{width:100%;min-height:52px;padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--r-btn);background:var(--white);font-size:17px;font-weight:600}
.field:focus{outline:none;border-color:var(--black)}
.lbl{font-size:15px;line-height:20px;font-weight:600}

/* queue banner + saved card + undo */
.qbar{margin:12px 12px 0;padding:12px 14px;border-radius:var(--r-alert);background:var(--tint);font-size:14px;line-height:20px;font-weight:600}
.qbar.red{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger)}
.saved{margin:0 12px;padding:16px;border-radius:var(--r-card);background:var(--tint);border:2px solid var(--success);display:flex;flex-direction:column;gap:6px}
.saved .t{font-size:19px;line-height:24px;font-weight:600}
.saved .s{font-size:14px;line-height:20px;color:var(--muted)}

/* manager links (V2Home footer) */
.mgr{margin:16px var(--pad) 0;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
.mgr .fine{width:100%}
.mgr button,.mgr a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;color:var(--gold-text);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}