/* ============================================================
   Hoosier Que — Inventory (production)
   Frozen design system: warm smoky-BBQ craft. Butcher-paper
   cream, charcoal ink, ember orange. Slab display + humanist
   body. Phone-first. Hand-written CSS w/ design tokens.
   Tokens & core components ported verbatim from the approved
   design-prototype (DESIGN_SYSTEM.md / styles.css).
   ============================================================ */

/* ---- Fonts (Google Fonts, load-once; degrades to system) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Surfaces — warm butcher paper */
  --paper:        #f4ece0;
  --paper-2:      #efe4d4;
  --card:         #fffaf2;
  --card-line:    #e3d5c1;

  /* Ink */
  --ink:          #241c16;
  --ink-2:        #5a4d40;
  --ink-3:        #8a7a68;

  /* Ember / brand */
  --ember:        #c0431f;   /* primary accent */
  --ember-deep:   #99320f;
  --ember-soft:   #f6d9c9;

  /* Status */
  --hot:          #b71f1f;   /* order now / out */
  --hot-bg:       #f8dede;
  --hot-ink:      #7d0f0f;

  --warn:         #b5760a;   /* getting low */
  --warn-bg:      #f9ecd0;
  --warn-ink:     #7a4e00;

  --ok:           #2f7d43;   /* you're fine */
  --ok-bg:        #dcecdd;
  --ok-ink:       #1e5c2f;

  --smoke:        #3a3a3a;

  /* Type */
  --display: 'Bitter', Georgia, 'Times New Roman', serif;
  --body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --tap: 48px;               /* touch target */
  --shadow: 0 1px 2px rgba(36,28,22,.06), 0 6px 18px rgba(36,28,22,.08);
  --shadow-lift: 0 2px 6px rgba(36,28,22,.10), 0 14px 34px rgba(36,28,22,.14);

  /* Header — warm, light, refined */
  --header-bg:   rgba(250, 244, 233, .82);
  --header-line: var(--card-line);
  --header-shadow: 0 1px 0 rgba(227,213,193,.9);
  --header-shadow-scroll: 0 1px 0 rgba(227,213,193,.9), 0 8px 20px rgba(36,28,22,.08);
  --chip-bg:     #fff7ec;
  --chip-line:   #e6d3ba;
  --chip-ink:    var(--ink-2);

  --maxw: 460px;             /* phone canvas */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, #fbf4e9 0%, var(--paper) 55%) fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.app {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--tap) + 44px); /* room for bottom nav */
}

a { color: inherit; text-decoration: none; }

/* ---------- Skip link (a11y) ---------- */
.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: #fff; padding: 10px 14px;
  border-radius: var(--r-sm); z-index: 100; transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---------- App bar (warm, light, sticky) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  color: var(--ink);
  padding: 11px 16px 11px;
  padding-top: calc(11px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--header-line);
  box-shadow: var(--header-shadow);
  transition: box-shadow .2s ease;
}
.appbar.is-scrolled { box-shadow: var(--header-shadow-scroll); }

.appbar .flame {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: var(--ember-soft);
  border: 1px solid #eec6b4;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.appbar .titles { min-width: 0; display: flex; flex-direction: column; }
.appbar .brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember-deep);
  line-height: 1.1;
}
.appbar h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .1px;
  margin: 1px 0 0;
  line-height: 1.12;
  color: var(--ink);
}
.appbar .spacer { flex: 1; }
.appbar .badge-week {
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--chip-ink);
  background: var(--chip-bg);
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--chip-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  white-space: nowrap;
}

/* ---------- Section headers ---------- */
.section {
  display: flex; align-items: baseline; gap: 10px;
  padding: 20px 18px 8px;
}
.section h2 {
  font-family: var(--display);
  font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-2); margin: 0;
}
.section .rule { flex: 1; height: 1px; background: var(--card-line); }
.section .count { font-size: 12px; color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--body); font-weight: 600; font-size: 15px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; background: none; color: var(--ink);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.btn-primary {
  background: var(--ember); color: #fff;
  box-shadow: 0 2px 0 var(--ember-deep), var(--shadow);
}
.btn-primary:active { box-shadow: 0 1px 0 var(--ember-deep); }
.btn-ghost { border-color: var(--card-line); background: var(--card); color: var(--ink); }
.btn-block { width: 100%; }

/* ---------- Bottom nav ---------- */
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw);
  background: var(--card);
  border-top: 1px solid var(--card-line);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  z-index: 30;
  box-shadow: 0 -6px 20px rgba(36,28,22,.08);
}
.navitem {
  min-height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border-radius: var(--r-md); color: var(--ink-3);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.navitem .ico { font-size: 21px; line-height: 1; }
.navitem[aria-current="page"] {
  color: var(--ember-deep);
  background: var(--ember-soft);
}
.navitem:focus-visible { outline: 3px solid var(--ember); outline-offset: -2px; }

/* ---------- Status pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.pill-hot  { background: var(--hot-bg);  color: var(--hot-ink); }
.pill-hot  .dot { background: var(--hot); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-warn .dot { background: var(--warn); }
.pill-ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.pill-ok   .dot { background: var(--ok); }

/* ============================================================
   EMPTY STATE (stub page placeholder)
   A tasteful, on-brand "coming next" state per the design system.
   ============================================================ */
.empty {
  margin: 28px 16px 8px;
  background:
    radial-gradient(120% 140% at 100% 0%, #fff6ec 0%, var(--card) 55%);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 32px 22px;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative; overflow: hidden;
}
.empty::before {
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px;
  border-radius: 4px; background: var(--ember);
}
.empty .empty-ico {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  background: var(--ember-soft);
  border: 1px solid #eec6b4;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.empty h2 {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--ink); margin: 0 0 6px; line-height: 1.15;
}
.empty p {
  font-size: 14px; color: var(--ink-2); margin: 0 auto;
  max-width: 34ch;
}
.empty .empty-kicker {
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember-deep);
  margin-bottom: 4px;
}

/* ---------- Setup: account / logout block ---------- */
.setup-block {
  margin: 16px 16px 0;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}
.setup-block .who {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.setup-block .who .avatar {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--paper-2); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink-2);
}
.setup-block .who .nm { font-weight: 700; font-size: 16px; color: var(--ink); }
.setup-block .who .role { font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   LOGIN — warm PIN pad (butcher-paper / ember, NOT dark)
   ============================================================ */
.login-app {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) 22px
           max(24px, env(safe-area-inset-bottom));
}

/* Brand lockup at top */
.login-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-top: 6vh;
}
.login-brand .flame {
  width: 62px; height: 62px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1;
  background: var(--ember-soft);
  border: 1px solid #eec6b4;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow);
}
.login-brand .eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember-deep);
}
.login-brand h1 {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  color: var(--ink); margin: 0; line-height: 1.1;
}
.login-brand .prompt {
  font-size: 14px; color: var(--ink-2); margin: 2px 0 0;
}

/* PIN dots */
.pin-dots {
  display: flex; justify-content: center; gap: 18px;
  margin: 26px 0 6px;
}
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ink-3);
  background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pin-dot.is-filled {
  background: var(--ember);
  border-color: var(--ember);
  transform: scale(1.08);
}

/* error line — text + icon, never color alone; hidden until bad PIN */
.login-error {
  min-height: 22px;
  text-align: center;
  font-size: 13.5px; font-weight: 600;
  color: var(--hot-ink);
  display: none;
  align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
.login-error.is-visible { display: flex; }
.login-error .err-ico { font-weight: 800; }

/* keypad */
.pin-pad {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 18px;
}
.pin-key {
  min-height: 64px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--display);
  font-weight: 800; font-size: 26px;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.pin-key:active {
  transform: scale(.96);
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(36,28,22,.06);
}
.pin-key:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.pin-key.key-utility {
  font-family: var(--body); font-size: 20px;
  background: var(--paper); color: var(--ink-2);
}
.pin-key.is-empty {
  background: transparent; border-color: transparent; box-shadow: none;
  cursor: default; pointer-events: none;
}

/* shake on wrong PIN */
@keyframes hq-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.pin-dots.is-shaking { animation: hq-shake .4s ease; }

/* ============================================================
   PHASE 2 — SETUP: reusable patterns (hub-list, sub-page layout,
   form-field, list-row). Later phases EXTEND these — keep the
   class contracts stable.
   ============================================================ */
/*
   Pattern reference (class contracts — keep stable across phases):

   Setup hub (a menu of navigable settings groups):
     .hub-list        — outer wrapper for one or more groups.
     .hub-group       — card surface grouping rows; sits under a
                        reused .section header. Rows inside are
                        separated by hairline dividers. Clips its
                        rows via overflow:hidden.
     .hub-row         — a REAL <a> navigation row (>=56px tall):
                        icon tile + label + chevron. First row has
                        no top divider.
     .hub-ico         — leading ~40px ember-soft icon tile
                        (matches .flame / .empty-ico exactly).
     .hub-label       — the row's title (item-name scale, 700).
     .hub-chev        — trailing right chevron affordance.

   Sub-page layout (a single Setup destination):
     .subpage-back        — container row for the back link.
     .subpage-back__link  — the tappable back <a> (>=44px); its
                            "<" glyph is part of the link text.
     .subpage-body        — content/scroll container for the page.
     .subpage-action      — optional slot for a right-side action
                            (e.g. Add) placed in the app-bar area.

   Form field (base styles for later CRUD phases):
     .form-field                 — one field block; label ABOVE control.
     .form-field label           — the field label.
     .form-field input/select/
        textarea                 — the control (full width, >=44px,
                                   16px text to avoid iOS zoom).
     .form-field .field-error    — error message (icon + text; the
                                   template supplies a glyph so status
                                   is never color-only).
     .form-field.has-error ...   — error border state on the control.

   List rows (future CRUD lists):
     .list             — vertical stack of rows with list rhythm gap.
     .list-item        — a card row.
     .list-item__meta  — secondary/meta text inside a row.

   Note: .hub-ico / icon tiles reuse the literal border color #eec6b4
   to match .flame and .empty-ico exactly — there is no token for that
   specific tile-border hue, so matching it keeps the tiles consistent.
*/

/* ---------- Setup hub ---------- */
.hub-list {
  position: relative;
}

.hub-group {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  margin: 0 16px 8px;
  overflow: hidden;
}

.hub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--body);
  transition: transform .08s ease, background .08s ease;
}
.hub-row:not(:first-child) {
  border-top: 1px solid var(--card-line);
}
.hub-row:active {
  background: var(--paper-2);
  transform: scale(.995);
}
.hub-row:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: -2px;
}

.hub-ico {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  background: var(--ember-soft);
  border: 1px solid #eec6b4;              /* matches .flame / .empty-ico */
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.hub-label {
  flex: 1; min-width: 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.hub-chev {
  flex: none;
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
}

/* ---------- Sub-page layout ---------- */
.subpage-back {
  padding: 10px 16px 2px;
}
.subpage-back__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 10px 8px 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-2);
}
.subpage-back__link:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.subpage-body {
  padding-top: 4px;
}

.subpage-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Form field ---------- */
.form-field {
  display: block;
  margin-bottom: 14px;
}
.form-field label {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 16px;                        /* avoid iOS zoom-on-focus */
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-md);
}
.form-field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-color: var(--ember);
}
.form-field .field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hot-ink);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--hot);
}

/* ---------- List rows (CRUD lists) ---------- */
.list {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.list-item__meta {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
}

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

/* ======= PHASE 3 — ITEMS ======= */

/* ---------- Shared: hint + inline link ---------- */
.hint {
  padding: 8px 20px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.inline-link {
  color: var(--ember-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inline-link:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Flash / toast banners (icon + text, never color-only) ---------- */
.flash-region {
  margin: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.flash__ico {
  flex: none;
  font-weight: 800;
  line-height: 1.4;
}
.flash__msg { min-width: 0; }
.flash-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.flash-success .flash__ico { color: var(--ok-ink); }
.flash-error { background: var(--hot-bg); border-color: var(--hot); color: var(--hot-ink); }
.flash-error .flash__ico { color: var(--hot-ink); }
.flash-info { background: var(--paper-2); border-color: var(--card-line); color: var(--ink-2); }

/* ---------- Info banner (inside forms) ---------- */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px dashed var(--ember);
  background: var(--ember-soft);
  color: var(--ember-deep);
  font-size: 13px;
  line-height: 1.5;
}
.info-banner__ico { flex: none; font-weight: 800; }
.info-banner b { color: var(--ember-deep); }

/* ---------- Items count chip (falls back if .badge-week changes) ---------- */
.items-count {
  font-size: 12px; font-weight: 600;
  color: var(--chip-ink);
  background: var(--chip-bg);
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--chip-line);
  white-space: nowrap;
}

/* ---------- Items list ---------- */
.searchbar { padding: 12px 14px 4px; }
.searchbar input {
  width: 100%;
  min-height: var(--tap);
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 0 14px;
  font-size: 16px;                 /* avoid iOS zoom */
  font-family: var(--body);
  color: var(--ink);
}
.searchbar input:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 1px;
  border-color: var(--ember);
}

.itemlist { list-style: none; margin: 0; padding: 0 12px; }
.irow {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  margin: 8px 0;
  box-shadow: var(--shadow);
}
.irow__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 12px 14px;
  color: var(--ink);
  border-radius: var(--r-md);
  transition: background .08s ease, transform .08s ease;
}
.irow__link:active { background: var(--paper-2); transform: scale(.995); }
.irow__link:focus-visible { outline: 3px solid var(--ember); outline-offset: -2px; }
.irow .ico {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.irow .body { flex: 1; min-width: 0; }
.irow .nm {
  font-weight: 700; font-size: 15.5px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.irow .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.irow .recipe-link {
  font-size: 12.5px; font-weight: 700; color: var(--ember-deep);
  border: 1.5px solid var(--ember-soft); background: var(--ember-soft);
  padding: 8px 12px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.irow .stock-note {
  font-size: 11.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.irow .stock-note .chk { color: var(--ok); font-weight: 800; }

/* archived row — text tag + muted style (not color-only) */
.irow.is-archived { opacity: .72; }
.irow.is-archived .ico { filter: grayscale(1); }
.archived-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--card-line);
  padding: 2px 6px; border-radius: 5px;
}

/* no-results row */
.irow.no-results .nm { color: var(--ink-2); }

/* add-item CTA block */
.add-cta { padding: 6px 14px 8px; }

/* empty state */
.empty-state {
  margin: 20px 16px 8px;
  text-align: center;
  background: radial-gradient(120% 140% at 100% 0%, #fff6ec 0%, var(--card) 55%);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 32px 22px;
  box-shadow: var(--shadow);
}
.empty-state__ico {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: var(--ember-soft); border: 1px solid #eec6b4;
  border-radius: 16px;
}
.empty-state__title {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--ink); margin: 0 0 6px;
}
.empty-state__text {
  font-size: 14px; color: var(--ink-2); margin: 0 auto 18px; max-width: 34ch;
}

/* ---------- Item form / detail head ---------- */
.rhead { padding: 8px 18px 2px; }
.rhead .kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-deep); font-weight: 700;
}
.rhead h2 {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  margin: 2px 0 2px; color: var(--ink);
}
.rhead .desc { font-size: 13.5px; color: var(--ink-2); margin: 0; }

.item-form { display: block; }
.form-field__label {
  display: block;
  font-family: var(--body); font-weight: 600; font-size: 14px;
  color: var(--ink-2); margin-bottom: 6px;
}
.form-field__control {
  width: 100%; min-height: var(--tap);
  padding: 10px 12px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-md);
}
.form-field__control:focus,
.form-field__control:focus-visible {
  outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember);
}
.form-field.has-error .form-field__control { border-color: var(--hot); }
.form-field__optional { font-weight: 500; color: var(--ink-3); }
.form-field__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.field-error__ico { font-weight: 800; }

.form-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ---------- Cards (detail) ---------- */
.card {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg); margin: 12px; padding: 14px;
  box-shadow: var(--shadow);
}
.card > .card-t {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 0 0 4px;
}
.card > .card-help { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }

/* ---------- Recipe toggle ---------- */
.togglecard { display: flex; align-items: center; gap: 12px; }
.togglecard .tinfo { flex: 1; }
.togglecard .tinfo .tt { font-weight: 700; font-size: 15px; }
.togglecard .tinfo .td { font-size: 12.5px; color: var(--ink-3); }
.switch { position: relative; width: 58px; height: 34px; flex: none; }
.switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.switch .track {
  position: absolute; inset: 0; background: var(--card-line);
  border-radius: 999px; transition: background .18s; cursor: pointer;
}
.switch .track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: var(--shadow);
}
.switch input:checked + .track { background: var(--ember); }
.switch input:checked + .track::before { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 3px solid var(--ember); outline-offset: 2px; }

/* ---------- Components ---------- */
.comp {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--card-line);
}
.comp:last-of-type { border-bottom: none; }
.comp .ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.comp .cbody { flex: 1; min-width: 0; }
.comp .cn { font-weight: 700; font-size: 15px; color: var(--ink); }
.comp .camt {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: var(--ember-deep); font-variant-numeric: tabular-nums;
}
.comp .cx {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line); background: var(--paper);
  color: var(--ink-3); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.comp .cx:focus-visible,
.pack-row .cx:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* ---------- Add-row inline forms (components + packs) ---------- */
.addrow--form { display: block; margin-top: 14px; }
.addrow__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.addrow__field { display: flex; flex-direction: column; gap: 4px; }
.addrow__lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.addrow__field select,
.addrow__field input {
  width: 100%; min-height: var(--tap);
  padding: 8px 12px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-md);
}
.addrow__field select:focus-visible,
.addrow__field input:focus-visible {
  outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember);
}
@media (min-width: 380px) {
  .addrow__fields {
    grid-template-columns: 1fr auto auto;
    align-items: end;
  }
  .addrow__field--qty { width: 92px; }
  .addrow__field--unit { width: 96px; }
  .addrow__fields--packs { grid-template-columns: 1fr 1fr; }
}

.pack-default-check {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); margin-bottom: 6px;
  font-size: 14px; color: var(--ink-2);
}
.pack-default-check input {
  width: 22px; height: 22px; accent-color: var(--ember); flex: none;
}
.pack-default-check input:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* ---------- Yield control ---------- */
.yield-box { display: flex; align-items: center; gap: 14px; }
.yield-dial {
  width: 78px; height: 78px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--ember) 0 50%, var(--paper-2) 50% 100%);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.yield-dial::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--card);
}
.yield-dial .v {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink);
}
.yield-txt { font-size: 13.5px; color: var(--ink-2); }
.yield-txt b { color: var(--ink); }
.slider {
  width: 100%; margin: 14px 0 2px; accent-color: var(--ember); height: var(--tap);
}
.slider:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; border-radius: var(--r-sm); }
.slider-ticks {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3);
}
.yield-eg {
  margin: 8px 0 14px; font-size: 12.5px; color: var(--ink-3);
  background: var(--paper); border-radius: var(--r-sm); padding: 8px 10px;
  border: 1px dashed var(--card-line);
}
.yield-eg b { color: var(--ember-deep); }

/* ---------- Purchase packs list ---------- */
.packs { display: flex; flex-direction: column; margin-bottom: 8px; }
.pack-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--card-line);
}
.pack-row:last-of-type { border-bottom: none; }
.pack-row__body { flex: 1; min-width: 0; }
.pack-row__nm {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pack-row__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.pack-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ember-deep); background: var(--ember-soft);
  border: 1px solid #eec6b4; padding: 2px 6px; border-radius: 5px;
}

/* ---------- Archived banner ---------- */
.archived-banner {
  margin: 12px 16px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn-ink);
  display: flex; flex-direction: column; gap: 12px;
}
.archived-banner__msg { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.archived-banner__ico { flex: none; }

/* ---------- Danger zone (destructive, separated) ---------- */
.danger-zone {
  margin: 24px 16px 12px;
  padding: 16px 14px;
  border: 1.5px dashed var(--hot);
  border-radius: var(--r-lg);
  background: var(--card);
}
.danger-zone__label {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--hot-ink); margin: 0 0 10px;
}
.btn-danger {
  background: var(--card); color: var(--hot-ink);
  border: 1.5px solid var(--hot);
}
.btn-danger:active { background: var(--hot-bg); }
.btn-danger:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }

/* ---------- Accessibility helper ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Re-assert reduced-motion AFTER the global rule above, since these
   Phase 3 additions introduce their own transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  .irow__link,
  .switch .track,
  .switch .track::before,
  .slider,
  .btn,
  .btn-danger,
  .yield-dial { transition: none !important; animation: none !important; }
}

/* ======= PHASE 4 — LISTS ======= */
/*
   Pick-list management (Categories / Units / Locations). One card per
   entry: an inline rename form (label-less input + Save) on the left,
   a clearly SEPARATED destructive delete on the right. Reuses the
   Phase 3 .btn / .btn-ghost / .btn-danger contracts — Save is a benign
   .btn-ghost, Delete is the existing token-based .btn-danger (hot family,
   never ember). Only NEW layout classes + a compact-delete modifier +
   the blocked-delete alert are defined here.
*/

/* ---------- One pick-list entry (card row) ---------- */
.list-manage-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                         /* wrap gracefully when cramped @390 */
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

/* ---------- Inline rename form (input grows + Save) ---------- */
.list-manage-row__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 220px;                         /* grows; allowed to wrap under actions */
  min-width: 0;
}
.list-manage-row__form input[type="text"],
.list-manage-row__form input {
  flex: 1 1 140px;
  min-width: 0;
  width: 100%;
  min-height: 44px;                        /* >=44px tap target */
  padding: 8px 12px;
  font-family: var(--body);
  font-size: 16px;                         /* avoid iOS zoom-on-focus */
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-md);
}
.list-manage-row__form input:focus,
.list-manage-row__form input:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-color: var(--ember);
}
/* Save button beside the input: never shrink below its label; benign = ghost. */
.list-manage-row__form .btn {
  flex: 0 0 auto;
  padding: 0 16px;
}

/* ---------- Actions wrapper: SEPARATE delete from the rename form ---------- */
.list-manage-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;                       /* push destructive control to the far edge */
  padding-left: 10px;
  border-left: 1px solid var(--card-line); /* subtle divider between benign & destructive */
}
/* When the row wraps to a new line the left divider reads oddly full-width;
   keep it, but let the actions sit right-aligned on their own line. */
.list-manage-row__actions .btn-danger {
  flex: 0 0 auto;
}

/* Compact delete variant — smaller than Save yet still >=44px tap target.
   Reuses the existing .btn-danger token styling (hot outline). */
.btn-danger.btn-compact {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}

/* ---------- Blocked-delete alert (active items still use this name) ---------- */
.delete-blocked {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--hot);
  border-radius: var(--r-md);
  background: var(--hot-bg);
  color: var(--hot-ink);
  box-shadow: var(--shadow);
}
.delete-blocked__ico {
  flex: none;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  color: var(--hot);
}
.delete-blocked__body {
  min-width: 0;
  flex: 1;
}
.delete-blocked__title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  color: var(--hot-ink);
  margin: 0 0 4px;
}
.delete-blocked p {
  margin: 0;
  font-size: 13px;
  color: var(--hot-ink);
}
/* The <ul> of item names still using the name — readable, indented, chunked. */
.delete-blocked ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.delete-blocked li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hot-ink);
  background: var(--card);
  border: 1px solid var(--hot);
  border-radius: var(--r-sm);
  padding: 3px 9px;                        /* chip treatment for scannability */
  white-space: nowrap;
}

/* ======= PHASE 5 — COUNTING ======= */
/*
   Counting setup screens: Roles reorder, Shifts list, per-shift item editor,
   and the weekly schedule grid. All classes below are NEW and created by the
   four templates (roles / assignments / assignment_detail / schedule).
   House rules honored throughout:
     - phone-first @390px: NOTHING makes the PAGE scroll horizontally
       (day tabs WRAP, schedule chips WRAP).
     - every interactive element is >=var(--tap)/44px.
     - visible focus ring: 3px solid var(--ember), offset 2px (destructive
       controls keep the existing .btn-danger --hot ring).
     - no hover-only affordances; hover only enhances.
     - state is never color-only — every on/off/active state pairs an icon
       AND a word supplied by the template; styles keep both legible.
   Reuses tokens + existing contracts (.btn, .btn-ghost, .btn-danger,
   .list, .list-item, flash-*).
*/

/* ---------- Flash: warning variant (amber) — mirrors success/error ---------- */
.flash-warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.flash-warning .flash__ico { color: var(--warn-ink); }

/* ---------- Roles: reorder controls (▲ / ▼) ---------- */
/* Two square ghost buttons stacked; each >=44px, visible focus, calm.
   The row uses .list-manage-row so these sit between the meta + the
   separated delete action. */
.count-role-move {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.count-role-move form { margin: 0; display: flex; }
.count-role-move__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-2);
}
.count-role-move__btn:active { transform: scale(.94); }
.count-role-move__btn:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}
/* Disabled / end-of-list state (attribute OR class), muted but still sized. */
.count-role-move__btn[disabled],
.count-role-move__btn.is-disabled {
  color: var(--ink-3);
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* ---------- Shifts list: role group + tappable shift cards ---------- */
.count-role-group {
  margin-bottom: 6px;
}
.count-role-group__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

/* A shift is a whole-card LINK (>=44px) with a chevron affordance —
   built on the .list-item look but tappable end-to-end. */
.shift-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .08s ease, background .08s ease, box-shadow .12s ease;
}
.shift-row:active {
  background: var(--paper-2);
  transform: scale(.995);
}
.shift-row:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}
.shift-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shift-row__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.shift-row__meta {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
}

/* Status pill on the shift card — icon + word, so never color-only. */
.shift-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--card-line);
  white-space: nowrap;
}
.shift-status__ico { font-weight: 800; line-height: 1; }
.shift-status--active {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok-ink);
}
.shift-status--inactive {
  background: var(--paper-2);
  border-color: var(--card-line);
  color: var(--ink-3);
}

/* ---------- Assignment detail: weekday picker (WRAPS @390, no page scroll) ---------- */
.count-daypicker {
  display: flex;
  flex-wrap: wrap;                          /* 2 rows @390px is fine; never page scroll */
  gap: 6px;
  margin: 10px 16px 4px;
}
.count-day-tab {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .03em;
  transition: transform .08s ease, background .08s ease;
}
.count-day-tab:active { transform: scale(.96); }
.count-day-tab:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}
/* Selected day: ember fill + heavier weight (not color alone — it also
   carries aria-current and is the visibly filled one). */
.count-day-tab--active {
  background: var(--ember);
  border-color: var(--ember-deep);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 0 var(--ember-deep);
}

/* Copy-to-all convenience button — full-width benign ghost, roomy tap. */
.count-copyall {
  margin: 6px 16px 10px;
}
.count-copyall .btn {
  width: 100%;
}

/* ---------- Item checklist ---------- */
.count-item-list {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.count-item-cat {
  margin: 12px 0 2px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Each row is a form; the button inside is the full-width >=44px tap target. */
.count-item-row { margin: 0; }
.count-item-toggle {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--card-line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
  transition: transform .08s ease, background .1s ease, border-color .1s ease;
}
.count-item-toggle:active { transform: scale(.995); }
.count-item-toggle:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}
/* OFF-state icon tile: a hollow "+" chip so the affordance reads as "add". */
.count-item-toggle__ico {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.count-item-toggle__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
}
.count-item-toggle__state {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}
/* ON state: soft ember fill + filled ✓ tile + ember-deep word — icon AND
   text change, never color alone. */
.count-item-toggle--on {
  background: var(--ember-soft);
  border-color: var(--ember);
}
.count-item-toggle--on .count-item-toggle__ico {
  background: var(--ember);
  border-color: var(--ember-deep);
  color: #fff;
}
.count-item-toggle--on .count-item-toggle__state {
  color: var(--ember-deep);
}

/* ---------- Danger zone: separated deactivate/reactivate region ---------- */
.count-danger-zone {
  margin: 22px 16px 0;
  padding: 14px 14px 16px;
  border: 1.5px solid var(--hot);
  border-radius: var(--r-md);
  background: var(--hot-bg);
}
.count-danger-zone h2 {
  color: var(--hot-ink);
}
.count-danger-zone .rule { background: color-mix(in srgb, var(--hot) 40%, transparent); }
.count-danger-zone form { margin-top: 8px; }
.count-danger-zone .btn-danger {
  background: var(--card);
}

/* ---------- Weekly schedule grid ---------- */
.sched-grid {
  margin: 0;
}
.sched-role-head { margin-top: 6px; }
.sched-role {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.sched-row {
  margin: 0 16px 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.sched-row__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}

/* 7 day chips that WRAP (2 rows @390px is fine) — never page horizontal scroll. */
.sched-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* The chip class is on the <form>; its <button> is the tap target. */
.sched-chip {
  margin: 0;
  flex: 1 1 auto;
  min-width: 44px;
  display: flex;
}
.sched-chip button {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--body);
  transition: transform .08s ease, background .1s ease, border-color .1s ease;
}
.sched-chip button:active { transform: scale(.96); }
.sched-chip button:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}
.sched-chip__day {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}
.sched-chip__state {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
  white-space: nowrap;
}
.sched-chip__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 0 5px;
  line-height: 1.5;
}
/* ON state: green fill + ✓ icon + "ON" word (icon AND text, not color alone). */
.sched-chip--on button {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok-ink);
}
.sched-chip--on .sched-chip__state { color: var(--ok-ink); }
.sched-chip--on .sched-chip__count {
  background: var(--card);
  color: var(--ok-ink);
}

/* PHASE 6-7 — STAFF & SETTINGS */
/*
   Setup > Staff screen. Each person is a card (Law of Common Region) holding a
   header line (name + admin/status badges), an inline edit form, and a
   separated active/restore action. Status + admin are ALWAYS icon + word — never
   color alone. Inactive rows dim so the eye can triage at a glance.
*/
.staff-list {
  padding: 0 14px;
}
.staff-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.staff-row--inactive {
  opacity: .72;
  background: var(--paper-2);
}

/* Header line: name + badges, wrapping gracefully on narrow screens. */
.staff-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.staff-row__name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-right: auto;               /* push badges to the trailing edge */
}

/* Badges: pill with icon + word so meaning survives grayscale / color-blind. */
.staff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.staff-badge--admin {
  background: var(--ember-soft);
  color: var(--ember-deep);
  border-color: var(--ember);
}
.staff-badge--active {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-color: var(--ok);
}
.staff-badge--inactive {
  background: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--card-line);
}

/* Inline edit form inside a row. Single column, labels above (form rules). */
.staff-row__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--card-line);
}
.staff-row__form .form-field { margin: 0; }

/* Admin / Active checkboxes: big tap targets, icon-free but clearly labelled. */
.staff-row__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.staff-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.staff-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--ember);
  cursor: pointer;
}
.staff-check:focus-within {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}

/* Destructive/restore action, visually separated from the Save button above
   it (Fitts's + destructive-action rules). */
.staff-row__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px dashed var(--card-line);
}
.staff-row__actions .btn-danger {
  color: var(--hot-ink);
  border-color: var(--hot);
  background: var(--hot-bg);
}

/* Add-staff form: same card language as a row, sitting under the add-cta. */
.staff-add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.staff-add-form .form-field { margin: 0; }
.staff-add-form .staff-check { align-self: flex-start; }

/* ---- Settings form (single card, one column, labels above) ------------- */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.settings-form .form-field { margin: 0; }
/* Save button spans the card so it's an easy tap target on phone. */
.settings-form .btn { width: 100%; min-height: var(--tap); margin-top: 2px; }

/* ============================================================
   PHASE 8 — COUNT
   The counting flow: assignment picker (carryover banners, date bar,
   status cards) + the count sheet (sticky progress, per-item rows with a
   +/− stepper, numeric qty, note, and a Confirm ✓ that fills solid green,
   sticky submit bar, incomplete modal). Phone-first @390px; every tap
   target >=44px; state is icon + word (never color alone); focus rings
   reuse the ember token; prefers-reduced-motion honored at the bottom.
   Reuses tokens + .btn / .empty-state / .visually-hidden contracts.
   ============================================================ */

/* ---------- Carryover banners (who left a count unfinished) ---------- */
.carry-region {
  margin: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carry-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: var(--tap);
  border-radius: var(--r-md);
  border: 1.5px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn-ink);
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .12s ease;
}
.carry-banner:active { transform: scale(.995); }
.carry-banner:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.carry-banner__ico {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: var(--card);
  border: 1px solid var(--warn);
  border-radius: 10px;
}
.carry-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carry-banner__title { font-weight: 700; font-size: 14.5px; color: var(--warn-ink); }
.carry-banner__meta { font-size: 12.5px; color: var(--warn-ink); opacity: .9; }
.carry-banner__cta {
  flex: none; font-weight: 700; font-size: 13px; color: var(--warn-ink);
  white-space: nowrap;
}

/* ---------- Date bar ---------- */
.count-datebar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 14px 16px 6px;
}
.count-datebar__label {
  font-family: var(--body); font-weight: 600; font-size: 13px;
  color: var(--ink-2); padding-bottom: 12px; white-space: nowrap;
}
.count-datebar__input {
  flex: 1; min-width: 0;
  min-height: var(--tap);
  padding: 8px 12px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-md);
}
.count-datebar__input:focus-visible {
  outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember);
}
.count-datebar__today {
  flex: none; min-height: var(--tap);
  display: inline-flex; align-items: center;
  padding: 0 14px;
  border: 1.5px solid var(--card-line); border-radius: var(--r-md);
  background: var(--card); color: var(--ember-deep);
  font-weight: 600; font-size: 14px;
}
.count-datebar__today:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* ---------- Assignment cards ---------- */
.count-cards {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.count-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .08s ease, box-shadow .12s ease, background .1s ease;
}
.count-card:active { transform: scale(.995); background: var(--paper-2); }
.count-card:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.count-card--empty { opacity: .68; cursor: default; }

.count-card__head {
  display: flex; align-items: flex-start; gap: 10px;
}
.count-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.count-card__role {
  font-family: var(--body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.count-card__name {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  color: var(--ink); line-height: 1.15;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.count-card__now {
  font-family: var(--body); font-weight: 700; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--ember);
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 1px 0 var(--ember-deep);
}

/* Status pill — icon + word, so meaning survives grayscale. */
.count-status {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 12px;
  border: 1px solid transparent; white-space: nowrap;
}
.count-status__ico { font-weight: 800; line-height: 1; }
.count-status--ok       { background: var(--ok-bg);   color: var(--ok-ink);   border-color: var(--ok); }
.count-status--progress { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn); }
.count-status--idle     { background: var(--paper-2); color: var(--ink-2);    border-color: var(--card-line); }
.count-status--muted    { background: var(--paper-2); color: var(--ink-3);    border-color: var(--card-line); }

.count-card__foot { display: flex; align-items: center; gap: 10px; }
.count-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.count-progress__track {
  height: 8px; border-radius: 999px;
  background: var(--paper-2); overflow: hidden;
  border: 1px solid var(--card-line);
}
.count-progress__fill {
  display: block; height: 100%;
  background: var(--ember); border-radius: 999px;
  transition: width .25s ease;
}
.count-progress__fill.is-complete { background: var(--ok); }
.count-progress__txt { font-size: 12px; color: var(--ink-3); }
.count-card__chev { flex: none; font-size: 24px; color: var(--ink-3); line-height: 1; }

/* ============================================================
   COUNT SHEET
   ============================================================ */
.count-sheet { padding-bottom: 8px; }

/* Back chip in the app bar */
.count-back {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 12px;
  font-family: var(--body); font-weight: 600; font-size: 14px;
  color: var(--ember-deep);
  background: var(--chip-bg); border: 1px solid var(--chip-line);
  border-radius: 999px; white-space: nowrap;
}
.count-back:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* Sticky progress header (n of m confirmed) — sits under the app bar. */
.count-topbar {
  position: sticky; top: 0; z-index: 15;
  margin: 0; padding: 10px 16px 12px;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--header-line);
}
.count-topbar__row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 7px;
}
.count-topbar__label {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
}
.count-topbar__nums {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.count-topbar__track {
  height: 8px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--card-line);
  overflow: hidden;
}
.count-topbar__fill {
  display: block; height: 100%;
  background: var(--ember); border-radius: 999px;
  transition: width .25s ease;
}

/* Sticky category headers */
.count-cat {
  position: sticky; top: 63px; z-index: 10;
  margin: 0;
  padding: 8px 16px 6px;
  font-family: var(--body); font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper);
  border-bottom: 1px solid var(--card-line);
}

.count-rows { padding: 0 12px; }

/* One countable item */
.count-row {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  margin: 8px 0;
  box-shadow: var(--shadow);
  transition: background .18s ease, border-color .18s ease;
}
.count-row.is-confirmed {
  background: var(--ok-bg);
  border-color: var(--ok);
}
.count-row__main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}
.count-row__info { flex: 1; min-width: 0; }
.count-row__name {
  display: block;
  font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.2;
}
.count-row.is-confirmed .count-row__name { color: var(--ok-ink); }
.count-row__loc { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.count-row__controls {
  flex: none;
  display: flex; align-items: center; gap: 5px;
}

/* +/− stepper: big thumb-friendly squares (>=44px). */
.count-step {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line);
  background: var(--paper-2);
  color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .08s ease, background .1s ease;
}
.count-step:active { transform: scale(.94); background: var(--card-line); }
.count-step:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* Quantity input — the biggest control, tabular, easy to read. */
.count-row__qty {
  width: 56px; height: 44px; flex: none;
  text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-sm);
  -moz-appearance: textfield;
}
.count-row__qty::-webkit-outer-spin-button,
.count-row__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count-row__qty:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember); }
.count-row.is-confirmed .count-row__qty { border-color: var(--ok); }

/* % of Container select */
.count-row__pct {
  height: 44px; flex: none; min-width: 74px;
  padding: 0 8px;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-sm);
}
.count-row__pct:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember); }

.count-row__unit {
  flex: none; width: 34px; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.1;
}

/* Note button — icon square, benign. */
.count-note-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line); background: var(--paper);
  color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.count-note-btn:active { transform: scale(.94); }
.count-note-btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* Confirm ✓ — muted outline that FILLS solid green on tap. Smaller than qty
   input per the design rule (44px min touch target still honored via padding
   ancestor spacing; the visible chip is 40px but the hit area is padded). */
.count-confirm {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  border: 2px solid var(--ink-3);
  background: var(--card);
  color: var(--ink-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.count-confirm__check { font-size: 20px; font-weight: 900; line-height: 1; }
.count-confirm:active { transform: scale(.94); }
.count-confirm:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.count-confirm.is-on {
  background: var(--ok);
  border-color: var(--ok-ink);
  color: #fff;
  box-shadow: 0 2px 0 var(--ok-ink);
}

/* Note area under the row */
.count-row__note { padding: 0 12px 10px; }
.count-row__note.is-hidden { display: none; }
.count-row__note-input {
  width: 100%; min-height: 44px;
  padding: 8px 10px;
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-line); border-radius: var(--r-sm);
  resize: vertical; line-height: 1.4;
}
.count-row__note-input:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-color: var(--ember); }
.count-row__note-input[readonly] {
  background: var(--paper-2); color: var(--ink-2); border-style: dashed;
}

/* ---------- Sticky submit bar ---------- */
.count-submitbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--card-line);
  box-shadow: 0 -6px 20px rgba(36,28,22,.08);
  z-index: 25;
}
.count-submit {
  width: 100%; min-height: 52px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  color: #fff; background: var(--warn);
  border: none; border-radius: var(--r-md);
  box-shadow: 0 2px 0 var(--warn-ink);
}
.count-submit[data-all-confirmed="1"] {
  background: var(--ok); box-shadow: 0 2px 0 var(--ok-ink);
}
.count-submit:active { transform: scale(.99); }
.count-submit:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.count-submit:disabled { opacity: .7; }
/* The submit bar floats over content; give the sheet room so the last row
   isn't hidden behind it (the .app already reserves bottom-nav space, but the
   count pages hide the nav under the submit bar visually — add breathing room). */
.count-sheet + .count-submitbar { }

/* ---------- Incomplete modal ---------- */
.count-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.count-modal.is-hidden { display: none; }
.count-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(36,28,22,.5);
}
.count-modal__panel {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin: 0 12px 12px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lift);
  animation: count-modal-in .18s ease;
}
@keyframes count-modal-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.count-modal__title {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--ink); margin: 0 0 8px;
}
.count-modal__body { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }
.count-modal__actions { display: flex; flex-direction: column; gap: 10px; }
.count-modal__actions .btn { width: 100%; }

/* Reduced motion for the additions above (re-assert after global rule). */
@media (prefers-reduced-motion: reduce) {
  .count-card, .count-step, .count-confirm, .count-note-btn,
  .count-progress__fill, .count-topbar__fill, .carry-banner,
  .count-submit, .count-modal__panel {
    transition: none !important; animation: none !important;
  }
}

/* On the count SHEET the sticky submit bar is the single primary action, so it
   replaces the bottom nav (which would otherwise sit on top of it and steal
   taps). Hide the nav and reclaim its reserved space; the submit bar reserves
   its own room below. */
.count-focus .bottomnav { display: none; }
.count-focus .app { padding-bottom: calc(52px + 44px); }

/* ============================================================
   PHASE 8a — ORDER
   The par-based "what to order" payoff screen. Ports the approved
   design-prototype order components (.summary hero, .orow rows with
   status pills + left edge stripe, add-to-order check-off, .toast)
   verbatim in look, adapted to the production markup: the suggested
   quantity is DISPLAY-ONLY (no +/- stepper yet), so the .qty column
   shows the number + unit label but carries no controls. The
   Square sales-driven version is a later phase.
   ============================================================ */

.order-screen { position: relative; }

/* At-a-glance hero — warm dashboard card, urgent count dominates */
.summary {
  margin: 16px 16px 6px;
  background:
    radial-gradient(120% 140% at 100% 0%, #fff6ec 0%, var(--card) 55%);
  color: var(--ink);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* thin ember spine on the left encodes "attention" (paired w/ icon + text) */
.summary::before {
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  border-radius: 4px; background: var(--ember);
}
.summary .hero-stat {
  display: flex; align-items: baseline; gap: 12px; padding-left: 8px;
}
.summary .big {
  font-family: var(--display); font-weight: 800; font-size: 52px;
  line-height: .9; color: var(--ember-deep);
  font-variant-numeric: tabular-nums;
}
.summary .hero-lbl {
  font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px; line-height: 1.2;
}
.summary .hero-lbl .ic { font-size: 15px; }
.summary .progress-wrap {
  margin-top: 14px; padding-left: 8px;
  display: flex; align-items: center; gap: 10px;
}
.summary .bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--card-line);
  overflow: hidden;
}
.summary .bar > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ember), var(--ember-deep));
  border-radius: 999px;
  transition: width .3s ease;
}
.summary .prog-txt {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.summary .prog-txt b { color: var(--ink); }

/* ---------- Order list + rows ---------- */
.orderlist { list-style: none; margin: 0; padding: 0 12px; }

.orow {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  margin: 8px 0;
  padding: 12px 12px 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  box-shadow: var(--shadow);
}
/* left edge stripe encodes urgency (redundant w/ pill, not color-only) */
.orow::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px;
  border-radius: 4px; background: var(--card-line);
}
.orow.is-hot::before  { background: var(--hot); }
.orow.is-warn::before { background: var(--warn); }
.orow.is-ok::before   { background: var(--ok); }

.orow .name {
  font-weight: 700; font-size: 16px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.orow .meta { grid-column: 1 / 2; font-size: 13px; color: var(--ink-2); }
.orow .meta b { color: var(--ink); font-weight: 600; }

/* suggested quantity (display-only in v1) */
.orow .qty {
  grid-column: 2 / 3; grid-row: 1 / 3;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 84px; flex: none;
}
.orow .qty .num {
  min-width: 34px; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 26px;
  color: var(--ember-deep); font-variant-numeric: tabular-nums; line-height: 1;
}
.orow .qty .unit {
  font-size: 11px; color: var(--ink-3); letter-spacing: .02em;
  text-align: center; width: 100%; overflow-wrap: anywhere;
}

/* checked-off / handled */
.orow.done { opacity: .55; }
.orow.done .name { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.orow.done .qty .num { color: var(--ink-3); }

.checkwrap {
  grid-column: 1 / 3; display: flex; align-items: center; gap: 10px;
  margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--card-line);
}
.check {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--card-line); background: var(--paper);
  font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.check:active { transform: scale(.98); }
.check:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.check .box {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800; background: transparent;
}
.orow.done .check { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.orow.done .check .box { background: var(--ok); border-color: var(--ok); }

/* ---------- Toast (icon + text; success styling; ARIA live) ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tap) + 100px); z-index: 40;
  background: var(--ok-ink); color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 8px; max-width: calc(var(--maxw) - 40px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast__ico { font-weight: 800; }

/* Reduced motion for the additions above (re-assert after global rule). */
@media (prefers-reduced-motion: reduce) {
  .summary .bar > i, .check, .toast { transition: none !important; animation: none !important; }
}