/* ============================================================
   Chit Check — design system
   OLED-true black base, SF Pro font stack, tabular numerals,
   spring transitions, platform tints as accent only.
   ============================================================ */

@layer reset, tokens, base, components, utilities;

/* ---------- reset --------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    padding: 0;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.45;
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ul,
  ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 4px;
  }
  ::selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text-1);
  }
}

/* ---------- tokens -------------------------------------------------------- */
@layer tokens {
  :root {
    /* type stack — system first, Inter as a fallback */
    --font-sans:
      -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono:
      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* surfaces */
    --bg: #000;
    --surface-1: #0c0c0e;
    --surface-2: #131316;
    --surface-3: #1c1c20;
    --surface-elev: rgba(255, 255, 255, 0.04);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* text */
    --text-1: #f5f5f7;
    --text-2: #c8c8ce;
    --text-3: #8e8e93;
    --text-4: #6b6b71;

    /* accents */
    --accent: #0a84ff;
    --ring: color-mix(in srgb, var(--accent) 70%, transparent);

    /* verdict palette */
    --v-ok: #30d158;
    --v-bad: #ff453a;
    --v-warn: #ffd60a;
    --v-muted: #8e8e93;

    /* platform tints */
    --t-uber: #06c167;
    --t-doordash: #ef3340;
    --t-skip: #ff8000;
    --t-today: #0a84ff;
    --t-search: #c8c8ce;

    /* spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;

    /* radius */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* motion */
    --spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 180ms;
    --t-med: 280ms;
    --t-slow: 380ms;

    /* shadows */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sh-3: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* layout */
    --max-w: 720px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
    /* Topbar height — referenced by every other sticky element (date bar,
       filter bar, segmented nav, back-link). Mobile overrides this in
       the @media block to make room for the stacked brand logo. */
    --topbar-h: 65px;
  }
}

/* ---------- base ---------------------------------------------------------- */
@layer base {
  html {
    background: var(--bg);
    color-scheme: dark;
  }
  body {
    font-family: var(--font-sans);
    font-size: 17px;
    color: var(--text-1);
    background: var(--bg);
    background-image:
      radial-gradient(
        1200px 600px at 50% -200px,
        rgba(10, 132, 255, 0.07),
        transparent 70%
      );
    background-attachment: fixed;
    overscroll-behavior-y: contain;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bot);
  }
  .tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv11" 1;
  }
  h1,
  h2,
  h3 {
    margin: 0;
    letter-spacing: -0.022em;
    color: var(--text-1);
  }
  p {
    margin: 0;
  }
}

/* ---------- components ---------------------------------------------------- */
@layer components {
  /* layout shell */
  .shell {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-9);
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
  }

  /* topbar */
  .topbar {
    position: sticky;
    top: var(--safe-top);
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    backdrop-filter: saturate(160%) blur(22px);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
    border-bottom: 1px solid var(--border);
  }
  /* Mobile topbar — stacked layout so the original wordmark logo has
     its own row and full horizontal space (the wordmark is 4.5:1 aspect
     and gets cramped fighting the search bar at narrow widths). Row 1
     = brand centered, Row 2 = search + logout. --topbar-h bumps to
     match so every downstream sticky element (date bar, segmented nav,
     back-link) sits in the right place. */
  @media (max-width: 560px) {
    :root { --topbar-h: 112px; }
    .topbar {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "brand brand"
        "search logout";
      gap: var(--sp-2) var(--sp-3);
      padding: var(--sp-2) var(--sp-4) var(--sp-3);
    }
    /* Brand slot is always the FIRST child of the topbar (the
       topbar_brand block — either .topbar__brand or .topbar__back on
       detail pages). Target by position so both work without juggling
       multiple class rules. */
    .topbar > :first-child {
      grid-area: brand;
      justify-self: center;
      padding-top: 2px;
    }
    .topbar__back {
      /* Back-link variant — pull to the left edge so it's reachable
         and reads as navigation, not centered branding. */
      justify-self: start !important;
    }
    .topbar__search { grid-area: search; }
    .topbar__right  { grid-area: logout; }
    .brand-logo { height: 40px; }
  }
  .topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-1);
    transition: transform var(--t-fast) var(--spring);
  }
  .topbar__brand:active {
    transform: scale(0.97);
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    display: inline-block;
  }
  .brand-mark svg {
    width: 100%;
    height: 100%;
  }
  .brand-word {
    font-weight: 700;
    letter-spacing: -0.022em;
    font-size: 17px;
  }
  .brand-logo {
    height: 32px;
    width: auto;
    display: block;
  }

  /* search field (iOS pill) */
  .topbar__search,
  .inline-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out);
  }
  .topbar__search:focus-within,
  .inline-search:focus-within {
    border-color: var(--border-strong);
    background: var(--surface-3);
  }
  .topbar__search input,
  .inline-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--text-1);
    height: 100%;
    font-size: 15px;
  }
  .topbar__search input::placeholder,
  .inline-search input::placeholder {
    color: var(--text-3);
  }
  .topbar__search input:focus,
  .inline-search input:focus {
    outline: none;
  }
  .search-glyph {
    width: 16px;
    height: 16px;
    color: var(--text-3);
    flex-shrink: 0;
  }
  .search-clear {
    width: 18px;
    height: 18px;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
  }
  .topbar__search:focus-within .search-clear[type="reset"],
  .topbar__search input:not(:placeholder-shown) ~ .search-clear {
    display: inline-flex;
  }

  .inline-search {
    width: 100%;
    margin-top: var(--sp-4);
  }

  /* top-bar right cluster */
  .topbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    transition:
      transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .ghost-btn:active {
    transform: scale(0.97);
    background: var(--surface-3);
  }
  .ghost-btn--icon {
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
  .ghost-btn--sm {
    padding: 6px 12px;
    font-size: 13px;
  }
  .ghost-btn svg {
    width: 16px;
    height: 16px;
  }
  .logout-form {
    margin: 0;
  }

  /* segmented control */
  .segmented {
    position: sticky;
    top: calc(var(--safe-top) + var(--topbar-h));
    z-index: 20;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--sp-3) var(--sp-5);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border);
  }
  .segmented::-webkit-scrollbar {
    display: none;
  }
  .segmented__item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 10px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
    background: transparent;
    border: 1px solid transparent;
    transition:
      color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .segmented__item--logo {
    padding: 6px 14px;
  }
  /* Mobile — tighten the segmented items so all 4 (Uber / DoorDash /
     Skip / Admin) fit on a typical phone viewport (≤ 390 CSS px) without
     horizontal scrolling. The 'Today' tab moved out to the filter bar.
     Wordmark logos swap to colored letter badges, and Admin drops its
     "Admin" text label so the gear icon stands alone. Each item ends up
     ~60–70px wide; total comfortably under 350px. */
  @media (max-width: 560px) {
    .segmented {
      padding: var(--sp-2) var(--sp-3);
      gap: 4px;
      justify-content: space-around;
      overflow-x: visible; /* no scroll fallback — they HAVE to fit */
    }
    .segmented__item {
      padding: 6px 10px;
      font-size: 13px;
    }
    .segmented__item--logo {
      padding: 5px 8px;
    }
    /* Swap wide wordmark → compact colored letter badge */
    .segmented__logo--wide { display: none; }
    .segmented__logo--mark { display: inline-flex; }
    /* Admin: icon only, no text */
    .segmented__item.t-admin .segmented__label { display: none; }
    .segmented__item.t-admin { padding: 6px 10px; }
  }
  .segmented__logo {
    height: 18px;
    width: auto;
    display: block;
    pointer-events: none;
  }
  /* Default desktop view: show the wide wordmark, hide the compact mark. */
  .segmented__logo--mark { display: none; }
  .segmented__logo--mark svg { width: 22px; height: 22px; display: block; }
  /* Small count badge to the right of the platform logo — today's order
     count for that platform. Hidden when zero. */
  .segmented__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: color-mix(in srgb, var(--accent) 35%, var(--surface-2));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
    pointer-events: none;
  }
  .segmented__item.is-active .segmented__count {
    background: rgba(255, 255, 255, 0.18);
  }
  .segmented__icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    color: currentColor;
  }
  .segmented__item.t-today.is-active {
    color: var(--t-today);
  }
  .segmented__item.t-admin {
    color: var(--text-3);
  }
  .segmented__item.t-admin.is-active {
    color: var(--text-1);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-3) 90%, white 10%),
      var(--surface-3));
  }
  .segmented__item:active {
    transform: scale(0.96);
  }
  .segmented__item:hover {
    color: var(--text-1);
  }
  .segmented__item.is-active {
    background: var(--surface-3);
    color: var(--text-1);
    border-color: var(--border-strong);
    box-shadow: var(--sh-1);
  }
  .segmented__item.is-active.t-uber_eats {
    color: var(--t-uber);
  }
  .segmented__item.is-active.t-doordash {
    color: var(--t-doordash);
  }
  .segmented__item.is-active.t-skip {
    color: var(--t-skip);
  }

  /* filter bar (store + date), sticky under the segmented nav */
  .filter-bar {
    position: sticky;
    top: calc(var(--safe-top) + var(--topbar-h) + 49px);
    z-index: 15;
    padding: var(--sp-2) var(--sp-5);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border);
  }
  .filter-bar__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 14px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 14px;
    cursor: pointer;
  }
  .filter-pill__label {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .filter-pill select {
    background: transparent;
    border: 0;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 18px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
      linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
  }
  /* "Today" pill — same pill family as the store/date controls. Pulls
     the date filter back to today's date in one tap so the operator
     doesn't have to step day-by-day or open the date picker. */
  .filter-today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .filter-today:hover {
    background: var(--surface-3);
  }
  .filter-today:active {
    transform: scale(0.96);
  }
  /* When the selected date IS today, the pill goes solid + accent-colored
     so the operator can see at a glance whether they're on today or a
     past day. */
  .filter-today.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
  }
  .filter-date {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0 4px;
  }
  .filter-date input[type="date"] {
    background: transparent;
    border: 0;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    padding: 0 6px;
    outline: none;
    color-scheme: dark;
    font-variant-numeric: tabular-nums;
  }
  .filter-date__nudge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-2);
    font-size: 18px;
    line-height: 1;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .filter-date__nudge:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .filter-date__nudge:active {
    transform: scale(0.94);
  }
  /* Mobile filter bar — drop the uppercase 'STORE' label (the dropdown
     options "All stores" / "Wimpy's…" already convey what it is) and
     shrink the date input so Store + Today + Date fit on a single row
     instead of wrapping. */
  @media (max-width: 560px) {
    .filter-bar {
      padding: var(--sp-2) var(--sp-3);
    }
    .filter-bar__inner {
      gap: 6px;
      flex-wrap: nowrap;
      overflow-x: visible;
    }
    .filter-pill {
      padding: 0 10px 0 12px;
      flex: 0 1 auto;
      min-width: 0;
    }
    .filter-pill__label { display: none; }
    .filter-pill select {
      max-width: 110px;
      padding-right: 14px;
      background-position: calc(100% - 6px) 50%, calc(100% - 2px) 50%;
    }
    .filter-today {
      padding: 0 10px;
      font-size: 13px;
    }
    .filter-date {
      padding: 0 2px;
      min-width: 0;
    }
    .filter-date input[type="date"] {
      padding: 0 2px;
      font-size: 13px;
      max-width: 110px;
    }
    .filter-date__nudge {
      width: 24px;
      height: 24px;
      font-size: 16px;
    }
  }

  /* tap-to-tag picker (inside #tag-sheet) */
  .tag-section {
    margin-top: var(--sp-4);
  }
  .tag-section__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin: 0 0 10px;
  }
  .tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .tag-pill:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .tag-pill:active {
    transform: scale(0.96);
  }
  .tag-pill.is-selected {
    background: var(--surface-3);
    color: var(--text-1);
    border-color: var(--text-1);
    box-shadow: 0 0 0 1px var(--text-1);
  }
  .tag-pill__badge {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
  }
  .tag-pill__badge svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .tag-pill--add {
    border-style: dashed;
    color: var(--text-3);
  }
  .tag-pill--platform.is-selected.t-uber_eats {
    border-color: var(--t-uber);
    box-shadow: 0 0 0 1px var(--t-uber);
  }
  .tag-pill--platform.is-selected.t-doordash {
    border-color: var(--t-doordash);
    box-shadow: 0 0 0 1px var(--t-doordash);
  }
  .tag-pill--platform.is-selected.t-skip {
    border-color: var(--t-skip);
    box-shadow: 0 0 0 1px var(--t-skip);
  }

  /* store tag on order detail */
  .store-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .store-tag:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .store-tag:active {
    transform: scale(0.97);
  }
  .store-tag svg {
    width: 13px;
    height: 13px;
    color: var(--text-3);
  }

  /* no_ticket verdict treatment */
  .verdict-pill.v-muted .verdict-pill__dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 22%, transparent);
  }

  /* hero */
  .hero {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }
  .hero__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .hero__eyebrow {
    color: var(--text-3);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .hero__title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  /* stat tiles */
  .stat-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 540px) {
    .stat-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .stat-tile {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
    isolation: isolate;
    color: var(--text-1);
    transition:
      transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  a.stat-tile:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }
  a.stat-tile:active {
    transform: scale(0.985);
  }
  .stat-tile__chev {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    color: var(--text-4);
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    transition: transform var(--t-fast) var(--spring),
      color var(--t-fast) var(--ease-out);
  }
  a.stat-tile:hover .stat-tile__chev {
    transform: translateX(2px);
    color: var(--text-2);
  }
  .stat-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      120% 100% at 0% 0%,
      rgba(255, 255, 255, 0.05),
      transparent 60%
    );
    pointer-events: none;
    z-index: -1;
  }
  .stat-tile__label {
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .stat-tile__value {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text-1);
  }
  .stat-tile.v-ok .stat-tile__value {
    color: var(--v-ok);
  }
  .stat-tile.v-bad .stat-tile__value {
    color: var(--v-bad);
  }
  .stat-tile.v-warn .stat-tile__value {
    color: var(--v-warn);
  }
  .stat-tile.v-muted .stat-tile__value {
    color: var(--text-2);
  }
  .stat-tile.v-ok {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-ok) 14%, transparent);
  }
  .stat-tile.v-bad {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-bad) 16%, transparent);
  }

  /* sections */
  .section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .section__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.022em;
  }
  .section__more {
    color: var(--text-3);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--t-fast) var(--ease-out);
  }
  .section__more:hover {
    color: var(--text-1);
  }
  /* "Flagged for review" section — operator-curated pile at the top of
     the dashboard. The star icon next to the title and the soft amber
     glow set it apart from the standard Orders list so it reads as
     "your saved pile" at a glance. */
  .section--flagged .section__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFC857;
  }
  .section__title-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 200, 87, 0.16);
    color: #FFC857;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  /* Flag toggle button on order detail. The "off" state matches the
     sibling ghost-btns. The "on" state lights up amber so the operator
     can see at a glance that this order is in the review pile. */
  .ghost-btn--flag[data-flagged="on"] {
    color: #FFC857;
    background: rgba(255, 200, 87, 0.12);
    border-color: rgba(255, 200, 87, 0.4);
  }
  .ghost-btn--flag[data-flagged="on"] .flag-star {
    fill: currentColor;
  }
  .ghost-btn--flag:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  /* ── Polish-with-AI button + suggestion panel (teach-sheet) ── */
  .polish-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: calc(var(--sp-2) * -1);
    flex-wrap: wrap;
  }
  .polish-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, rgba(170, 130, 255, 0.16), rgba(120, 180, 255, 0.16));
    border: 1px solid rgba(170, 130, 255, 0.4);
    color: #C8B5FF;
    font-size: 13px;
    font-weight: 500;
    transition: transform var(--t-fast) var(--spring), background var(--t-fast) var(--ease-out);
  }
  .polish-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(170, 130, 255, 0.24), rgba(120, 180, 255, 0.24));
  }
  .polish-btn:active {
    transform: scale(0.97);
  }
  .polish-btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  .polish-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .polish-hint {
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.3;
  }
  .polish-suggestion {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-md, 8px);
    background: rgba(170, 130, 255, 0.08);
    border: 1px solid rgba(170, 130, 255, 0.25);
  }
  .polish-suggestion__head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #C8B5FF;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .polish-suggestion__icon {
    width: 13px;
    height: 13px;
  }
  .polish-suggestion__body {
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--sp-3) 0;
    white-space: pre-wrap;
  }
  .polish-suggestion__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  .polish-suggestion__use {
    background: rgba(170, 130, 255, 0.18);
    border-color: rgba(170, 130, 255, 0.5);
    color: #C8B5FF;
  }

  /* ─── Vision's Eyes audit overlay (master only) ─────────────────── */
  /* Full-screen audit overlay: photo + drawn bboxes + match-status
     color coding. Reuses the bbox-positioning pattern from the manual
     labeling overlay (.manual-pre) — boxes are positioned via % on a
     parent that mirrors the image's intrinsic aspect ratio, so they
     scale with viewport changes without ever drifting off the food. */
  /* CRITICAL: respect the HTML `hidden` attribute. Without this
     [hidden] override, the explicit `display: flex` below wins over
     the browser's user-agent `[hidden] { display: none }`, and the
     overlay shows on every page load instead of opening only when
     the operator taps the eye button. */
  .vis-eyes[hidden] {
    display: none !important;
  }
  .vis-eyes {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .vis-eyes__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.5);
  }
  .vis-eyes__close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .vis-eyes__close:hover {
    background: rgba(255, 255, 255, 0.18);
  }
  .vis-eyes__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
  }
  .vis-eyes__title svg {
    width: 18px;
    height: 18px;
  }
  .vis-eyes__photoswitch {
    margin-left: auto;
    display: flex;
    gap: 6px;
  }
  .vis-eyes__photoswitch-btn {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    cursor: pointer;
  }
  .vis-eyes__photoswitch-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
  }
  .vis-eyes__legend {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.3);
  }
  .vis-eyes__chip {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }
  .vis-eyes__chip--match    { background: rgba(48, 209, 88, 0.22); color: #6BE099; }
  .vis-eyes__chip--extra    { background: rgba(255, 159, 10, 0.22); color: #FFC857; }
  .vis-eyes__chip--unmatched{ background: rgba(160, 160, 170, 0.22); color: #BCBCC8; }
  .vis-eyes__chip--dismissed{ background: rgba(150, 150, 150, 0.18); color: #A0A0A8; }
  .vis-eyes__chip--ticket   { background: rgba(170, 130, 255, 0.22); color: #C8B5FF; }
  .vis-eyes__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3);
    min-height: 0;
  }
  .vis-eyes__loading,
  .vis-eyes__empty {
    color: var(--text-3);
    font-size: 14px;
  }
  /* Photo container — position:relative so absolute bboxes anchor to
     the image rect. The image itself fills the container; max-width
     keeps it readable on big screens. */
  .vis-eyes__photo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: calc(100vh - 260px);
    line-height: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  }
  .vis-eyes__photo img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 260px);
    height: auto;
    width: auto;
  }
  /* Bbox base — every drawn rect uses absolute positioning + %
     coordinates. Pointer-events:none so the photo is still
     long-pressable/zoomable behind the boxes if iOS users want a
     closer look. Badge re-enables pointer events for the tooltip.

     Border thickness: 4px (bumped from 2px). With food photos this
     dense and a busy stainless-steel kitchen pass behind them, a
     thin line gets lost in JPEG noise. Thick borders read as
     deliberate "this is what vision is pointing at." */
  .vis-eyes__bbox {
    position: absolute;
    border-radius: 5px;
    border-width: 4px;
    border-style: solid;
    pointer-events: none;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.55),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
  }
  /* Badge: explicit per-status background AND text color (no more
     currentColor on background — that bug made text and bg the same
     dark color, leaving labels invisible). Bigger font for legibility
     on the kitchen pass photos. */
  .vis-eyes__bbox-badge {
    position: absolute;
    top: -30px;
    left: -2px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
  }
  /* When the bbox is too close to the top of the photo, the
     outside-top badge would clip off-frame — flip it just inside
     the top-left corner of the box. Same trick as .manual-pre. */
  .vis-eyes__bbox[data-badge-inside="1"] .vis-eyes__bbox-badge {
    top: 3px;
    left: 3px;
  }
  /* Per-status: explicit background + text color so the badge always
     has clean contrast against itself. Border color set via the
     same per-status rules on the parent (via currentColor). */
  .vis-eyes__bbox--match     { border-color: rgba(48, 209, 88, 1); }
  .vis-eyes__bbox--match .vis-eyes__bbox-badge {
    background: rgba(48, 209, 88, 0.98);
    color: #002400;
  }
  .vis-eyes__bbox--extra     { border-color: rgba(255, 159, 10, 1); }
  .vis-eyes__bbox--extra .vis-eyes__bbox-badge {
    background: rgba(255, 159, 10, 0.98);
    color: #1a1100;
  }
  .vis-eyes__bbox--unmatched { border-color: rgba(200, 200, 215, 0.95); border-style: dashed; }
  .vis-eyes__bbox--unmatched .vis-eyes__bbox-badge {
    background: rgba(220, 220, 230, 0.98);
    color: #1a1a1d;
  }
  .vis-eyes__bbox--labeled   { border-color: rgba(120, 200, 255, 1); }
  .vis-eyes__bbox--labeled .vis-eyes__bbox-badge {
    background: rgba(120, 200, 255, 0.98);
    color: #001824;
  }
  .vis-eyes__bbox--dismissed { border-color: rgba(150, 150, 150, 0.7); border-style: dashed; opacity: 0.7; }
  .vis-eyes__bbox--dismissed .vis-eyes__bbox-badge {
    background: rgba(130, 130, 130, 0.95);
    color: #ffffff;
  }
  .vis-eyes__bbox--ticket    {
    border-color: rgba(170, 130, 255, 1);
    border-style: dashed;
    border-width: 3px;
  }
  .vis-eyes__bbox--ticket .vis-eyes__bbox-badge {
    background: rgba(170, 130, 255, 0.95);
    color: #1a0033;
  }
  /* Confidence — narrower dashed border on low confidence so the
     operator sees at a glance which boxes vision is shaky about. */
  .vis-eyes__bbox--conf-low { border-width: 2.5px; border-style: dashed; }
  .vis-eyes__meta {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
  }
  .vis-eyes__meta p {
    margin: 0 0 4px 0;
  }
  .vis-eyes__meta p:last-child {
    margin-bottom: 0;
    color: var(--text-3);
    font-size: 12px;
  }
  /* ─── Photo search page (/photos) ──────────────────────────────── */
  .ph-search {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-2);
  }
  .ph-search__head {
    margin-bottom: var(--sp-3);
  }
  .ph-search__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
    color: var(--text-1);
  }
  .ph-search__title-icon {
    width: 22px;
    height: 22px;
  }
  .ph-search__sub {
    color: var(--text-3);
    font-size: 14px;
    margin: 0;
  }
  .ph-search__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    padding: 0 14px;
    margin-bottom: var(--sp-3);
    transition: border-color var(--t-fast) var(--ease-out);
  }
  .ph-search__input-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.35);
  }
  .ph-search__glyph {
    width: 18px;
    height: 18px;
    color: var(--text-3);
    flex-shrink: 0;
    margin-right: 12px;
  }
  .ph-search__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-1);
    font-size: 17px;
    font-weight: 500;
    padding: 14px 0;
    font-family: inherit;
  }
  .ph-search__clear {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-3);
  }
  .ph-search__clear svg {
    width: 18px;
    height: 18px;
  }
  /* Suggestions dropdown */
  .ph-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    max-height: 320px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 4px;
  }
  .ph-suggest__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-1);
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
  }
  .ph-suggest__item:hover,
  .ph-suggest__item.is-active {
    background: rgba(255, 255, 255, 0.06);
  }
  .ph-suggest__count {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }
  /* Status line above the grid */
  .ph-search__status {
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: var(--sp-2);
  }
  .ph-search__status--warn {
    color: #FFC857;
  }
  .ph-search__status--ok {
    color: var(--text-2);
  }
  /* Photo grid — auto-fill with min thumb width 220px */
  .ph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
  }
  .ph-grid__card {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    transition: transform var(--t-fast) var(--spring), border-color var(--t-fast) var(--ease-out);
  }
  .ph-grid__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .ph-grid__thumb-wrap {
    aspect-ratio: 16 / 9;
    background: var(--surface-1);
    overflow: hidden;
  }
  .ph-grid__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ph-grid__meta {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ph-grid__matched {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ph-grid__sub {
    font-size: 12px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ph-grid__dot {
    color: var(--text-3);
    opacity: 0.6;
  }
  .ph-grid__store {
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }
  /* Topbar photo-search shortcut button */
  .topbar__photo-search {
    color: var(--text-2);
  }
  .topbar__photo-search:hover {
    color: var(--text-1);
  }

  /* The eye button on the action row — slightly distinct gold tint so
     "admin tool" reads at a glance. */
  .ghost-btn--vision-eyes {
    color: #C8B5FF;
    background: rgba(170, 130, 255, 0.10);
    border-color: rgba(170, 130, 255, 0.35);
  }
  .ghost-btn--vision-eyes:hover {
    background: rgba(170, 130, 255, 0.18);
  }
  /* Tighten (free) — green-tinted, leftmost of the two action buttons
     so the operator reaches for FREE first. Same shape as refine. */
  .vis-eyes__tighten-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: rgba(48, 209, 88, 0.18);
    color: #6BE099;
    border: 1px solid rgba(48, 209, 88, 0.45);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .vis-eyes__tighten-btn:hover:not(:disabled) {
    background: rgba(48, 209, 88, 0.28);
  }
  .vis-eyes__tighten-btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  .vis-eyes__tighten-btn svg {
    width: 13px;
    height: 13px;
  }
  /* When tighten is present, refine sits next to it (not auto-left) */
  .vis-eyes__tighten-btn + .vis-eyes__refine-btn {
    margin-left: 6px;
  }

  /* Refine button in the legend — slightly louder than the legend chips
     so it reads as actionable, not decorative. Subtle Sonnet-ish tint
     to match the cookbook-polish button. */
  .vis-eyes__refine-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, rgba(170, 130, 255, 0.22), rgba(120, 180, 255, 0.22));
    color: #C8B5FF;
    border: 1px solid rgba(170, 130, 255, 0.45);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .vis-eyes__refine-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(170, 130, 255, 0.30), rgba(120, 180, 255, 0.30));
  }
  .vis-eyes__refine-btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  .vis-eyes__refine-btn svg {
    width: 13px;
    height: 13px;
  }

  /* platform picker grid */
  .platform-grid {
    display: grid;
    gap: var(--sp-3);
  }
  @media (min-width: 540px) {
    .platform-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .platform-card {
    --tint: var(--text-3);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    color: var(--text-1);
    transition:
      transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  .platform-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--tint) 16%, transparent),
      transparent 60%
    );
    opacity: 0.6;
    pointer-events: none;
  }
  .platform-card.t-uber_eats {
    --tint: var(--t-uber);
  }
  .platform-card.t-doordash {
    --tint: var(--t-doordash);
  }
  .platform-card.t-skip {
    --tint: var(--t-skip);
  }
  .platform-card:hover {
    border-color: color-mix(in srgb, var(--tint) 40%, var(--border));
    background: var(--surface-2);
  }
  .platform-card:active {
    transform: scale(0.985);
  }
  .platform-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tint) 14%, transparent);
    color: var(--tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .platform-card__icon svg {
    width: 22px;
    height: 22px;
  }
  .platform-card--logo {
    align-items: center;
    padding-left: var(--sp-4);
  }
  .platform-card__logo {
    height: 26px;
    width: auto;
    flex-shrink: 0;
  }
  .platform-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .platform-card__label {
    font-size: 16px;
    font-weight: 600;
  }
  .platform-card__count {
    color: var(--text-3);
    font-size: 13px;
    margin-top: 2px;
  }
  .platform-card__count small {
    color: var(--text-4);
    margin-left: 4px;
  }
  .platform-card__chev {
    color: var(--text-4);
  }
  .platform-card__chev svg {
    width: 18px;
    height: 18px;
  }

  /* order list */
  .order-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .order-card {
    --tint: var(--text-3);
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text-1);
    transition:
      transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .order-card.t-uber_eats {
    --tint: var(--t-uber);
  }
  .order-card.t-doordash {
    --tint: var(--t-doordash);
  }
  .order-card.t-skip {
    --tint: var(--t-skip);
  }
  .order-card:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }
  .order-card:active {
    transform: scale(0.985);
  }
  .order-card__thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-3);
    flex-shrink: 0;
    color: var(--text-4);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .order-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .order-card__thumb svg {
    width: 32px;
    height: 32px;
  }
  .platform-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 0 2px var(--surface-1);
  }
  .platform-badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--surface-1), 0 1px 3px rgba(0, 0, 0, 0.4);
    line-height: 0;
  }
  .platform-badge svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .order-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .order-card__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    justify-content: space-between;
  }
  .new-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1px;
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 0%, transparent); }
  }

  /* "TAG" badge — pairs with NEW, but amber. Marks an order that needs a
     store tag because vision couldn't read the store from the ticket and
     menu inference couldn't tell which restaurant the items came from.
     Tapping the card opens the order detail page where the operator can
     pick the store from the existing store-tag pill in the header. */
  .tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: 999px;
    background: #FF9F0A;
    color: #1a1a1d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1px;
    animation: pulse-amber 1.6s ease-in-out infinite;
  }
  @keyframes pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 159, 10, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.00); }
  }

  .order-card__num {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .order-card__total {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  /* Store name + address line, sits between the order-number row
     and the customer/platform row. Subtle tint of accent so it
     reads as connected-to-store but doesn't compete with the
     primary order info. Single-line truncate via ellipsis since
     full store names with addresses can be ~50+ chars. */
  .order-card__store {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-card__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    overflow: hidden;
  }
  .order-card__customer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dot-sep {
    color: var(--text-4);
    flex-shrink: 0;
  }
  .order-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: var(--sp-3);
  }
  .order-card__time {
    color: var(--text-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-left: auto; /* keep time anchored right when needs-tag appears */
  }
  /* "Tag store" chip on order cards. Amber so it pulls the eye without
     reading as an error. Sits between the verdict pill and the time. */
  .needs-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: rgba(255, 159, 10, 0.16);
    color: #ffd699;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .needs-tag svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
  .order-card__chev {
    color: var(--text-4);
    align-self: center;
  }
  .order-card__chev svg {
    width: 16px;
    height: 16px;
  }

  /* verdict pill */
  .verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
  }
  .verdict-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
  }
  .verdict-pill.v-ok {
    color: var(--v-ok);
    background: color-mix(in srgb, var(--v-ok) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-ok) 26%, transparent);
  }
  .verdict-pill.v-bad {
    color: var(--v-bad);
    background: color-mix(in srgb, var(--v-bad) 12%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-bad) 30%, transparent);
  }
  .verdict-pill.v-warn {
    color: var(--v-warn);
    background: color-mix(in srgb, var(--v-warn) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-warn) 26%, transparent);
  }
  .verdict-pill.v-muted {
    color: var(--text-3);
  }
  .verdict-pill--lg {
    font-size: 13px;
    padding: 6px 14px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .verdict-pill--floating {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
  }

  /* order detail head */
  /* Back link lives in the sticky topbar (see .topbar__back) so it
     never moves. This rule hides the older inline .back-link element
     by collapsing it — left in the global rule chain so any straggler
     templates that still emit the inline element stay safe and silent
     instead of double-rendering a back affordance. */
  .back-link {
    display: none;
  }

  /* Sticky-topbar back chevron. Replaces the brand on detail pages so
     the operator has a permanent, predictable spot to navigate up,
     identical on desktop and mobile. iOS-native pattern. */
  .topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-1);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 14px 8px 6px;
    margin-left: -6px; /* nudge flush with brand position */
    border-radius: 999px;
    background: transparent;
    transition: background var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
    -webkit-tap-highlight-color: transparent;
  }
  .topbar__back:hover {
    background: var(--surface-2);
  }
  .topbar__back:active {
    transform: translateX(-2px);
  }
  .topbar__back svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  /* On narrow viewports, drop the label so the search bar has room. */
  @media (max-width: 560px) {
    .topbar__back__label {
      display: none;
    }
    .topbar__back {
      padding: 8px 8px 8px 4px;
    }
  }

  /* In-page navigation row that sits right above the order header.
     Back to Main on the left, Previous + Next on the right. Puts the
     navigation affordance next to where the operator is already looking
     instead of forcing them up to the corner of the screen. */
  .order-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-3);
    flex-wrap: wrap;
    /* Sticky BELOW the segmented platform nav (Uber/DoorDash/Skip/
       Admin) so Back / Previous / Next stay reachable while scrolling
       through a long order — without colliding with the platform
       tabs above. The +49px is the same offset the filter bar uses
       on the dashboard; it accounts for the segmented nav's height. */
    position: sticky;
    top: calc(var(--safe-top) + var(--topbar-h) + 49px);
    z-index: 20;
    /* Translucent background + blur so order content scrolling
       underneath doesn't bleed through and clash with the buttons. */
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    /* Breathing room so the buttons don't kiss the topbar edge or
       the next content block on the page. */
    padding: var(--sp-2) 0;
    /* Negative margin pulls the bar full-bleed inside .main so the
       blur runs edge-to-edge instead of leaving a stripe of bare
       content showing on either side. */
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .order-nav__spacer {
    flex: 1 1 auto;
    min-width: 8px;
  }
  .order-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .order-nav__btn:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--text-1) 16%, var(--border));
  }
  .order-nav__btn:active {
    transform: translateY(1px);
  }
  .order-nav__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .order-nav__btn--back {
    padding-left: 10px;
  }
  .order-nav__btn--next {
    padding-right: 10px;
  }
  /* Subtle visual demotion for the secondary prev/next pair so Back
     stays the dominant action — operators most often want to bail to
     the dashboard. */
  .order-nav__btn--prev,
  .order-nav__btn--next {
    background: transparent;
  }
  @media (max-width: 560px) {
    .order-nav__btn {
      padding: 7px 12px;
      font-size: 13.5px;
    }
  }

  .order-head {
    --tint: var(--text-3);
    position: relative;
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    background: var(--surface-1);
    border: 1px solid var(--border);
    overflow: hidden;
    isolation: isolate;
  }
  .order-head.t-uber_eats {
    --tint: var(--t-uber);
  }
  .order-head.t-doordash {
    --tint: var(--t-doordash);
  }
  .order-head.t-skip {
    --tint: var(--t-skip);
  }
  .order-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        100% 60% at 100% 0%,
        color-mix(in srgb, var(--tint) 18%, transparent),
        transparent 65%
      ),
      radial-gradient(
        80% 60% at 0% 100%,
        color-mix(in srgb, currentColor 8%, transparent),
        transparent 70%
      );
    pointer-events: none;
    z-index: -1;
  }
  .order-head.v-bad::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      80% 60% at 50% 0%,
      color-mix(in srgb, var(--v-bad) 10%, transparent),
      transparent 65%
    );
    pointer-events: none;
    z-index: -1;
  }
  .order-head__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    align-items: flex-start;
  }
  .order-head__eyebrow {
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }
  .order-head__num {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  /* Editable-code button variant — looks like normal text by default
     but invites a click via the small pencil hint. Operator types
     the real code (from the tablet) when vision landed a CAM-xxx
     placeholder. */
  .order-head__num--editable {
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    padding: 2px 6px 2px 0;
    margin: 0;
    cursor: text;
    border-radius: 6px;
    transition: background var(--t-fast) var(--ease-out);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  .order-head__num--editable:hover {
    background: color-mix(in srgb, var(--text-1) 6%, transparent);
  }
  .order-head__num-edit-hint {
    font-size: 14px;
    color: var(--text-3);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
    font-family: var(--font-body);
    letter-spacing: 0;
  }
  .order-head__num--editable:hover .order-head__num-edit-hint,
  .order-head__num--editable:focus-visible .order-head__num-edit-hint {
    opacity: 0.9;
  }
  /* Inline-edit input that replaces the button during editing. */
  .order-head__num-input {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    background: var(--surface-1);
    color: var(--text-1);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 2px 8px;
    width: 14ch;
    max-width: 100%;
    text-transform: uppercase;
  }

  /* Merge candidates list inside the merge-sheet */
  .merge-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .merge-list__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .merge-list__item:hover,
  .merge-list__item:focus-visible {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    outline: none;
  }
  .merge-list__item:active {
    transform: translateY(1px);
  }
  .merge-list__item--likely {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset;
  }
  .merge-list__main {
    flex: 1 1 auto;
    min-width: 0;
  }
  .merge-list__code {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
  }
  .merge-list__meta {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
  }
  .merge-list__likely-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 4px;
    flex-shrink: 0;
  }
  .order-head__customer {
    color: var(--text-2);
    font-size: 14px;
    margin-top: 6px;
  }
  .order-head__verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
  }
  .order-head__note {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: 13px;
    border: 1px solid var(--border);
  }

  /* ============= Lightbox ============= */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* No padding — the stage spans the full viewport so the JS-computed
       fit-to-viewport size matches the stage dimensions exactly. The
       close button and zoom controls float over the photo with their
       own absolute positioning (safe-area offsets), so they don't need
       the container to provide breathing room. */
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out);
  }
  .lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* Stage architecture (rewritten to mirror manual-photo pattern):
     - `overflow: auto` means native scroll handles pan when the inner
       wrapper is bigger than the viewport. No more clipping during zoom.
     - `place-items: safe center` centers the inner when it fits inside
       the stage (small image, low zoom) but falls back to start-align
       when it overflows — so scrollLeft/scrollTop work from (0, 0) at
       the top-left of the image as expected.
     - Touch panning is native — `touch-action: pan-x pan-y pinch-zoom`
       lets the browser handle single-finger drag and avoids the
       gesture lock-ups the custom translate-based pan code used to hit. */
  .lightbox__stage {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    place-items: safe center;
    /* No `touch-action: none` — we want native scroll panning. JS still
       intercepts wheel for cursor-anchored zoom and pinch for zoom. */
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior: contain;
  }
  /* Inner wrapper. JS sets explicit pixel width / height that grow with
     zoom. Image inside fills 100% — the browser re-samples from the
     high-res source jpeg at the new pixel size for crisp text. */
  .lightbox__inner {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
  }
  .lightbox__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r-lg);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
  }
  .lightbox.is-zoomed .lightbox__img {
    cursor: grab;
  }
  .lightbox.is-interacting .lightbox__img {
    cursor: grabbing;
  }
  /* Zoom controls live in the bottom-right corner so they never sit on top
     of the receipt (which is almost always centered in the photo). Frosted
     pill, tappable but unobtrusive. */
  .lightbox__zoom-controls {
    position: absolute;
    bottom: calc(var(--safe-bot) + 16px);
    right: 16px;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }
  .zoom-btn {
    min-width: 40px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .zoom-btn:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  .zoom-btn:active {
    transform: scale(0.94);
  }
  /* Mobile: tighter controls and drop the hint text — they were eating
     vertical space on top of the photo. Pinch/double-tap still work,
     and the corner buttons stay reachable. */
  @media (max-width: 560px) {
    .lightbox__zoom-controls {
      bottom: calc(var(--safe-bot) + 12px);
      right: 12px;
      gap: 2px;
      padding: 3px;
    }
    .zoom-btn {
      min-width: 36px;
      height: 32px;
      padding: 0 8px;
      font-size: 14px;
    }
    .lightbox__hint { display: none; }
  }
  .lightbox__close {
    position: absolute;
    top: calc(var(--safe-top) + 16px);
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out);
  }
  .lightbox__close:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.2);
  }
  .lightbox__close svg {
    width: 18px;
    height: 18px;
  }
  .lightbox__hint {
    position: absolute;
    bottom: calc(var(--safe-bot) + 16px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
  }

  /* footer with destructive action — quiet, accessible, hard to misclick */
  .order-footer {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
  }
  .danger-link {
    background: transparent;
    color: var(--text-4);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    transition: color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out);
  }
  .danger-link:hover {
    color: var(--v-bad);
    background: color-mix(in srgb, var(--v-bad) 8%, transparent);
  }
  .danger-link:disabled {
    opacity: 0.5;
    cursor: progress;
  }

  /* dispute message generator */
  #dispute-textarea {
    width: 100%;
    min-height: 280px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-1);
    padding: var(--sp-3) var(--sp-4);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    font-family: var(--font-mono);
    resize: vertical;
  }
  #dispute-textarea:focus {
    outline: none;
    border-color: var(--ring);
    background: var(--surface-3);
  }
  .dispute-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--sp-3);
  }
  .dispute-actions .ghost-btn {
    flex: 1;
    min-width: 160px;
    justify-content: center;
  }

  /* duplicate-order warning banner at top of order detail */
  .dupe-banner {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-2) 0 0;
    background: color-mix(in srgb, var(--v-warn) 10%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--v-warn) 28%, transparent);
    border-radius: var(--r-md);
    color: var(--text-1);
  }
  .dupe-banner__body {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* "These aren't duplicates" dismiss affordance. Operator-confirmed
     not-dupes get remembered server-side so the same false-positive
     pair doesn't keep nagging. */
  .dupe-banner__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: -2px;
    margin-right: -4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--v-warn) 70%, var(--text-2));
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
    -webkit-tap-highlight-color: transparent;
  }
  .dupe-banner__close:hover {
    background: color-mix(in srgb, var(--v-warn) 18%, transparent);
    color: var(--v-warn);
  }
  .dupe-banner__close:active {
    transform: scale(0.9);
  }
  .dupe-banner__close svg {
    width: 14px;
    height: 14px;
  }
  .dupe-banner.is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
    pointer-events: none;
  }

  /* "Needs review" banner — sister of the dupe-banner. Shows when the
     order verdict isn't a clean match and gives the operator a single
     "Mark Reviewed" button to confirm everything's actually fine. */
  .review-banner {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-2) 0 0;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: var(--r-md);
    color: var(--text-1);
  }
  .review-banner__icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .review-banner__icon svg {
    width: 100%;
    height: 100%;
  }
  .review-banner__body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .review-banner__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 2px;
  }
  .review-banner__sub {
    font-size: 13.5px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.45;
  }
  .review-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--text-on-accent, #fff);
    border: none;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    align-self: center;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring),
      opacity var(--t-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .review-banner__btn:hover {
    background: color-mix(in srgb, var(--accent) 88%, white);
  }
  .review-banner__btn:active {
    transform: translateY(1px);
  }
  .review-banner__btn:disabled {
    opacity: 0.55;
    cursor: progress;
  }
  .review-banner__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .review-banner.is-approving {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
    pointer-events: none;
  }

  /* No-Fly Zones admin editor — drawable canvas overlay on the latest
     camera photo so the operator can paint exclusion rectangles. */
  .zones-editor__wrap {
    position: relative;
    width: 100%;
    margin: var(--sp-3) 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
    touch-action: none; /* let the canvas own touch gestures */
    -webkit-user-select: none;
    user-select: none;
  }
  .zones-editor__photo {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .zones-editor__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
  }
  .zones-editor__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
  }
  .zones-editor__count {
    font-size: 14px;
    color: var(--text-2);
  }
  .zones-editor__count #zones-count {
    color: var(--text-1);
    font-weight: 700;
  }
  .zones-editor__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  @media (max-width: 560px) {
    .zones-editor__bar {
      flex-direction: column;
      align-items: stretch;
    }
    .zones-editor__actions {
      justify-content: stretch;
    }
    .zones-editor__actions .btn,
    .zones-editor__actions .ghost-btn {
      flex: 1;
      justify-content: center;
    }
  }
  @media (max-width: 560px) {
    .review-banner {
      flex-wrap: wrap;
    }
    .review-banner__btn {
      width: 100%;
      justify-content: center;
      margin-top: var(--sp-2);
    }
  }
  .dupe-banner__icon {
    width: 22px;
    height: 22px;
    color: var(--v-warn);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .dupe-banner__icon svg {
    width: 100%;
    height: 100%;
  }
  .dupe-banner__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--v-warn);
    margin: 0 0 2px;
  }
  .dupe-banner__sub {
    font-size: 13.5px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.4;
  }
  .dupe-banner__link {
    color: var(--text-1);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--v-warn);
    text-underline-offset: 3px;
  }
  .dupe-banner__link:hover {
    color: var(--v-warn);
  }

  /* customer special request callout — high-priority info, can't miss it */
  .customer-request {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    background: color-mix(in srgb, var(--v-warn) 10%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--v-warn) 32%, transparent);
    border-radius: var(--r-lg);
    color: var(--text-1);
  }
  .customer-request__icon {
    width: 28px;
    height: 28px;
    color: var(--v-warn);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .customer-request__icon svg {
    width: 100%;
    height: 100%;
  }
  .customer-request__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v-warn);
    margin: 0 0 2px;
  }
  .customer-request__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-1);
    margin: 0;
    font-style: italic;
  }
  .customer-request__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .customer-request__list .customer-request__text {
    padding-left: 14px;
    position: relative;
  }
  .customer-request__list .customer-request__text::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--v-warn);
    font-style: normal;
  }

  /* photo grid */
  .photo-grid {
    display: grid;
    gap: var(--sp-3);
  }
  @media (min-width: 540px) {
    .photo-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-3);
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
  }
  .photo__btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
    position: relative;
  }
  .photo__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-med) var(--ease-out);
  }
  .photo__btn:hover img {
    transform: scale(1.03);
  }
  .photo__zoom {
    position: absolute;
    bottom: var(--sp-3);
    right: var(--sp-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .photo:hover .photo__zoom,
  .photo__btn:focus-visible .photo__zoom {
    opacity: 1;
    transform: translateY(0);
  }
  @media (hover: none) {
    .photo__zoom {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .photo__zoom svg {
    width: 16px;
    height: 16px;
  }
  /* Remove-photo overlay button. Sits in the top-right of each photo.
     Only rendered when the order has more than 1 attachment (template
     guards). Operator taps it to detach a stray photo (camera button
     pressed by mistake, photo merged into wrong order via dedup). */
  .photo__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 20, 22, 0.78);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
  }
  .photo:hover .photo__remove,
  .photo__remove:focus-visible {
    opacity: 1;
    transform: scale(1);
  }
  @media (hover: none) {
    .photo__remove {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* "Make primary" affordance on non-primary photos of a multi-photo
     order. Sits at the BOTTOM-left so it doesn't fight with the
     verdict pill (bottom-right) or the remove × (top-right). Always
     visible on touch devices — operators shouldn't have to hover to
     discover the option. */
  .photo__make-primary {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(20, 20, 22, 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast) ease, background var(--t-fast) ease,
      transform var(--t-fast) var(--spring);
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .photo:hover .photo__make-primary,
  .photo__make-primary:focus-visible {
    opacity: 1;
  }
  @media (hover: none) {
    .photo__make-primary { opacity: 1; }
  }
  .photo__make-primary:hover {
    background: rgba(48, 209, 88, 0.95);
    color: #002400;
    border-color: rgba(48, 209, 88, 1);
  }
  .photo__make-primary:active {
    transform: scale(0.96);
  }
  .photo__make-primary svg {
    width: 12px;
    height: 12px;
  }
  /* Primary tag — purely informational. Shown on the first photo
     when there are 2+ attachments so the operator can see at a glance
     which one Right ticket etc. will work against. */
  .photo__primary-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(48, 209, 88, 0.92);
    color: #002400;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .photo__primary-tag svg {
    width: 12px;
    height: 12px;
  }
  .photo__remove:hover,
  .photo__remove:focus-visible {
    background: var(--c-bad, #ff453a);
  }
  .photo__remove svg {
    width: 14px;
    height: 14px;
  }
  .photo__remove[disabled] {
    opacity: 0.35;
    pointer-events: none;
  }

  /* cards */
  .card {
    padding: var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .card--quiet {
    background: transparent;
    border-style: dashed;
    border-color: var(--border);
  }
  .card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .card__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.018em;
  }
  .card__sub {
    color: var(--text-3);
    font-size: 14px;
  }
  .card__label {
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--sp-2);
  }

  /* receipt list */
  .receipt-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .receipt-item {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
  }
  .receipt-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .receipt-item__row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
  }
  .receipt-item__qty {
    color: var(--text-3);
    font-size: 14px;
    font-weight: 600;
    min-width: 30px;
  }
  .receipt-item__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
    letter-spacing: -0.012em;
  }
  .receipt-item__name--editable {
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: -6px;
    border-radius: 6px;
    transition: background var(--t-fast) var(--ease-out);
  }
  .receipt-item__name--editable:hover {
    background: var(--surface-2);
  }
  .receipt-item__name--editable:active {
    background: var(--surface-3);
  }
  .receipt-item__mods {
    padding-left: calc(30px + var(--sp-3));
    margin-top: 6px;
  }
  .receipt-item__qty {
    font-size: 16px;
  }

  /* receipt-line breakdown (what's expected on the plate for each item) */
  .breakdown {
    margin-top: 8px;
    padding-left: calc(30px + var(--sp-3));
  }
  .breakdown__label {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .breakdown .chip-row {
    margin-top: 0;
  }

  /* chips */
  .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .chip-pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .chip-dismiss {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .chip-dismiss:hover {
    background: var(--surface-3);
    color: var(--text-1);
    border-color: var(--border-strong);
  }
  .chip-dismiss:active {
    transform: scale(0.92);
  }
  .chip-dismiss:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    line-height: 1.3;
  }
  .chip--clickable {
    cursor: pointer;
    transition: transform var(--t-fast) var(--spring),
      filter var(--t-fast) var(--ease-out);
  }
  .chip--clickable:hover {
    filter: brightness(1.1);
  }
  .chip--clickable:active {
    transform: scale(0.96);
  }
  .chip--clickable {
    box-shadow: inset 0 0 0 0 transparent;
  }
  .chip--clickable:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
  }
  .card__hint {
    color: var(--text-4);
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
  }
  .chip--side {
    color: var(--text-3);
    background: transparent;
  }
  .chip--ok {
    color: var(--v-ok);
    background: color-mix(in srgb, var(--v-ok) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-ok) 24%, transparent);
  }
  .chip--bad {
    color: var(--v-bad);
    background: color-mix(in srgb, var(--v-bad) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-bad) 26%, transparent);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  .chip--warn {
    color: var(--v-warn);
    background: color-mix(in srgb, var(--v-warn) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-warn) 24%, transparent);
  }
  .chip--count b {
    color: var(--text-1);
    margin-right: 2px;
    font-weight: 700;
  }

  /* matched-items check-list, shown beneath the confirmed-row on match */
  .check-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .check-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--v-ok) 6%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--v-ok) 18%, transparent);
    border-radius: var(--r-md);
    font-size: 16px;
    color: var(--text-1);
    line-height: 1.35;
  }
  .check-list__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
  }
  .check-list__icon svg {
    width: 100%;
    height: 100%;
  }
  .check-list__text {
    flex: 1;
    font-weight: 500;
  }
  /* Multi-quantity badge that sits inline with the parent item name.
     "3 Buttermilk Pancakes × 2" or "Hollandaise Sauce × 2" reads at a
     glance — quantity gets a slightly muted color + monospace tint so
     it doesn't compete with the dish name. */
  .check-list__qty {
    color: var(--v-ok);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
  }
  /* Nested modifier rows under a matched parent. Indented + smaller +
     fainter background so the visual hierarchy reads:
       ✓  Peameal Benedict
          ▸ Add Side Sausage (4 pcs)
          ▸ Orange Juice
     The operator sees every paid add-on accounted for without it
     looking like a separate item. */
  .check-list__item--mod {
    margin-left: 22px;
    padding: 6px 12px;
    font-size: 14px;
    background: color-mix(in srgb, var(--v-ok) 3%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-ok) 10%, transparent);
  }
  .check-list__icon--sm {
    width: 16px;
    height: 16px;
  }
  .check-list__text--mod {
    color: var(--text-2);
    font-weight: 500;
  }

  /* ── Bad / missing variant (red) — same structure as the matched
     check-list, tinted red. Each row is clickable so the operator can
     tap a missing item to teach "this was actually present" or trigger
     the dispute flow. The whole <li> carries data-teach-about so the
     existing JS handler (originally on chip buttons) fires the same
     way without code changes. */
  .check-list__item--bad {
    background: color-mix(in srgb, var(--v-bad) 6%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-bad) 18%, transparent);
  }
  .check-list__item--bad.check-list__item--mod {
    background: color-mix(in srgb, var(--v-bad) 3%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-bad) 10%, transparent);
  }
  .check-list__qty--bad { color: var(--v-bad); }

  /* Warn / extras variant (orange). Same idea as bad, different hue. */
  .check-list__item--warn {
    background: color-mix(in srgb, var(--v-warn) 6%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-warn) 18%, transparent);
  }
  .check-list__item--warn.check-list__item--mod {
    background: color-mix(in srgb, var(--v-warn) 3%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-warn) 10%, transparent);
  }
  .check-list__qty--warn { color: var(--v-warn); }

  /* Clickable affordance — whole row acts as a teach trigger.
     Cursor + subtle hover lift tell the operator the row is
     interactive. Used on missing-item rows (the parent rows specifically;
     modifier rows are intentionally not clickable — they teach as
     a side-effect of teaching the parent). */
  .check-list__item--clickable {
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
  }
  .check-list__item--clickable:hover {
    background: color-mix(in srgb, var(--v-bad) 12%, var(--surface-1));
  }
  .check-list__item--clickable:active { transform: scale(0.99); }

  /* For extras, the parent line has a separate teach button (the text
     itself) AND a separate × dismiss button. Styled to be inline with
     the row, not stacked. */
  .check-list__text--clickable {
    flex: 1;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
  }
  .check-list__text--clickable:hover {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--v-warn) 60%, transparent);
    text-underline-offset: 3px;
  }
  .check-list__dismiss {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--v-warn) 25%, transparent);
    background: transparent;
    color: var(--v-warn);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease-out);
  }
  .check-list__dismiss:hover {
    background: color-mix(in srgb, var(--v-warn) 15%, transparent);
  }
  .check-list__dismiss:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* green outline + check badge on the ticket the model verified —
     thin, clean, evidence-grade */
  .photo__ticket-mark {
    position: absolute;
    border: 1.5px solid var(--v-ok);
    border-radius: 2px;
    pointer-events: none;
  }
  .photo__ticket-check {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--v-ok);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .photo__ticket-check svg {
    width: 10px;
    height: 10px;
  }

  /* confirmation row for orders verified as 'match' */
  .confirmed-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-top: var(--sp-2);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--v-ok) 8%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--v-ok) 26%, transparent);
    color: var(--v-ok);
  }
  .confirmed-row__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--v-ok);
  }
  .confirmed-row__icon svg {
    width: 100%;
    height: 100%;
  }
  .confirmed-row__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
  }
  .confirmed-row__sub {
    color: var(--text-3);
    font-size: 13px;
    margin: 2px 0 0;
  }

  /* polished plate summary (replaces dev-y quote block) */
  .plate-summary {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-1);
    margin: 0 0 var(--sp-2);
  }

  /* detection blocks — clean, well-separated, no labels-as-DEV vibes */
  .detect-block {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border);
  }
  .detect-block:first-of-type {
    border-top: 0;
    padding-top: var(--sp-2);
  }
  .detect-block__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-2);
    margin: 0 0 8px;
  }
  .detect-block--bad .detect-block__label > span:first-child {
    color: var(--v-bad);
  }
  .detect-block--warn .detect-block__label > span:first-child {
    color: var(--v-warn);
  }
  .detect-block--ok .detect-block__label > span:first-child {
    color: var(--v-ok);
  }
  .detect-block__hint {
    color: var(--text-4);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }

  /* collapsed "Show ticket text" — engineering detail, out of sight by default */
  .ticket-details {
    margin-top: var(--sp-3);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
  }
  .ticket-details > summary {
    list-style: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: color var(--t-fast) var(--ease-out);
  }
  .ticket-details > summary::-webkit-details-marker {
    display: none;
  }
  .ticket-details > summary:hover {
    color: var(--text-1);
  }
  .ticket-details__caret {
    display: inline-block;
    transition: transform var(--t-fast) var(--spring);
    color: var(--text-4);
    font-size: 16px;
    line-height: 1;
  }
  .ticket-details[open] > summary .ticket-details__caret {
    transform: rotate(90deg);
  }
  .ticket-text {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-2);
    margin: var(--sp-2) 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }
  .ticket-details__hint {
    color: var(--text-3);
    font-size: 12.5px;
    margin: 8px 0 0;
  }

  /* quote */
  .quote {
    margin: 0;
    padding: var(--sp-4);
    background: var(--surface-2);
    border-left: 3px solid var(--text-4);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-size: 16px;
    line-height: 1.55;
    font-style: normal;
  }

  /* page head */
  .page-head {
    --tint: var(--text-3);
    padding: var(--sp-4) var(--sp-1);
  }
  .page-head.t-uber_eats {
    --tint: var(--t-uber);
  }
  .page-head.t-doordash {
    --tint: var(--t-doordash);
  }
  .page-head.t-skip {
    --tint: var(--t-skip);
  }
  .page-head__eyebrow {
    color: var(--text-1);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .page-head__title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  .page-head__logo {
    height: 38px;
    width: auto;
    display: block;
    margin-top: 4px;
  }
  .page-head__sub {
    color: var(--text-3);
    font-size: 14px;
    margin-top: 6px;
  }

  /* empty state */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    gap: var(--sp-2);
  }
  .empty-state__art {
    width: 120px;
    height: 120px;
    margin-bottom: var(--sp-3);
  }
  .empty-state__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-2);
  }
  .empty-state__sub {
    color: var(--text-3);
    font-size: 14px;
    max-width: 36ch;
  }
  .empty-state--inline {
    padding: var(--sp-5);
  }

  /* ---------- login screen ---------------------------------------------- */
  .login-body {
    background: #000;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    overflow: hidden;
  }
  .login {
    position: relative;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    isolation: isolate;
  }
  .login__halo {
    position: absolute;
    inset: -60px;
    z-index: -1;
    background:
      radial-gradient(
        50% 40% at 50% 35%,
        rgba(10, 132, 255, 0.22),
        transparent 60%
      ),
      radial-gradient(
        40% 40% at 80% 80%,
        rgba(48, 209, 88, 0.10),
        transparent 70%
      );
    filter: blur(30px);
    opacity: 0.9;
    pointer-events: none;
  }
  .login__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }
  .login__logo {
    width: 240px;
    height: auto;
    max-width: 80vw;
    display: block;
    margin-bottom: var(--sp-1);
  }
  .login__mark {
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 12px 24px rgba(48, 209, 88, 0.12));
  }
  .login__wordmark {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-1);
  }
  .login__tagline {
    color: var(--text-3);
    font-size: 14px;
    letter-spacing: -0.005em;
  }
  .login__card {
    width: 100%;
    padding: var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .field__label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-3);
    padding-left: 2px;
  }
  .field input {
    height: 48px;
    padding: 0 var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-size: 16px;
    transition:
      border-color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out);
  }
  .field input:focus {
    outline: none;
    border-color: var(--ring);
    background: var(--surface-3);
  }
  .login__error {
    color: var(--v-bad);
    background: color-mix(in srgb, var(--v-bad) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--v-bad) 24%, transparent);
    border-radius: var(--r-md);
    padding: 10px var(--sp-4);
    font-size: 13.5px;
    font-weight: 500;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 var(--sp-5);
    border-radius: var(--r-md);
    background: var(--surface-3);
    color: var(--text-1);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    transition:
      transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      filter var(--t-fast) var(--ease-out);
  }
  .btn:active {
    transform: scale(0.97);
  }
  .btn--lg {
    height: 52px;
    font-size: 17px;
    margin-top: var(--sp-2);
  }
  .btn--primary {
    background: linear-gradient(180deg, #fff 0%, #d8d8db 100%);
    color: #000;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.12);
  }
  .btn--primary:hover {
    filter: brightness(1.02);
  }
  .btn__icon {
    width: 16px;
    height: 16px;
  }
  .login__footnote {
    color: var(--text-4);
    font-size: 12px;
  }
  .login__forgot {
    display: inline-block;
    margin-top: var(--sp-3);
    align-self: center;
    color: var(--text-3);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
  }
  .login__forgot:hover {
    color: var(--text-1);
  }

  /* skeletons */
  .skel {
    background: linear-gradient(
      90deg,
      var(--surface-2) 0%,
      var(--surface-3) 50%,
      var(--surface-2) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--r-sm);
    animation: shimmer 1.4s linear infinite;
  }
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* page entrance animation */
  .shell > * {
    animation: rise var(--t-slow) var(--spring) both;
  }
  .shell > *:nth-child(1) {
    animation-delay: 0ms;
  }
  .shell > *:nth-child(2) {
    animation-delay: 40ms;
  }
  .shell > *:nth-child(3) {
    animation-delay: 80ms;
  }
  .shell > *:nth-child(4) {
    animation-delay: 120ms;
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

  /* order head actions cluster */
  .order-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }

  /* ============= Bottom sheet ============= */
  .sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
  }
  .sheet[hidden] {
    display: none;
  }
  .sheet.is-open {
    pointer-events: auto;
  }
  .sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-out);
  }
  .sheet.is-open .sheet__backdrop {
    opacity: 1;
  }
  .sheet__panel {
    position: relative;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    border-radius: 28px 28px 0 0;
    padding: 8px var(--sp-5) calc(var(--sp-5) + var(--safe-bot));
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--spring);
    box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.65);
    max-width: var(--max-w);
    margin: 0 auto;
    width: 100%;
  }
  .sheet.is-open .sheet__panel {
    transform: translateY(0);
  }
  .sheet__grip {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 6px auto 14px;
  }
  .sheet__head {
    margin-bottom: var(--sp-4);
  }
  .sheet__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .sheet__sub {
    color: var(--text-3);
    font-size: 13.5px;
    margin-top: 4px;
    line-height: 1.45;
  }
  .sheet__sub a {
    color: var(--text-1);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
  }
  .sheet__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .sheet__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
  }
  .sheet__foot--split {
    justify-content: space-between;
    align-items: center;
  }
  .sheet__foot-right {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
  }
  .sheet textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-1);
    padding: var(--sp-3) var(--sp-4);
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    resize: none;
    transition: border-color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out);
  }
  .sheet textarea:focus {
    outline: none;
    border-color: var(--ring);
    background: var(--surface-3);
  }

  /* verdict choice row */
  .choice-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  @media (min-width: 480px) {
    .choice-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .choice:active {
    transform: scale(0.96);
  }
  .choice.is-selected {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
    box-shadow: var(--sh-1);
  }
  .choice__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
  }
  .choice.v-ok {
    color: var(--v-ok);
  }
  .choice.v-bad {
    color: var(--v-bad);
  }
  .choice.v-warn {
    color: var(--v-warn);
  }
  .choice.v-muted {
    color: var(--text-3);
  }

  /* ============= Learn page (admin) ============= */
  .learn-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .learn-card {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: opacity var(--t-fast) var(--ease-out);
  }
  .learn-card.is-off {
    opacity: 0.55;
  }
  .learn-card__body {
    flex: 1;
    min-width: 0;
  }
  .learn-card__text {
    color: var(--text-1);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
  }
  .learn-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
  }
  .tag--on {
    color: var(--v-ok);
    border-color: color-mix(in srgb, var(--v-ok) 28%, transparent);
    background: color-mix(in srgb, var(--v-ok) 10%, var(--surface-1));
  }
  .tag--off {
    color: var(--text-3);
  }
  .tag--link:hover {
    color: var(--text-1);
    text-decoration: underline;
  }
  .learn-card__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
  }
  .ghost-btn.danger {
    color: var(--v-bad);
    border-color: color-mix(in srgb, var(--v-bad) 24%, transparent);
  }
  .ghost-btn.danger:active {
    background: color-mix(in srgb, var(--v-bad) 12%, var(--surface-2));
  }

  /* toast */
  .toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bot) + 24px);
    transform: translate(-50%, 100px);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    padding: 10px 18px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--sh-3);
    opacity: 0;
    transition: transform var(--t-slow) var(--spring),
      opacity var(--t-med) var(--ease-out);
    z-index: 100;
    pointer-events: none;
  }
  .toast.is-shown {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  .toast.v-ok {
    color: var(--v-ok);
    border-color: color-mix(in srgb, var(--v-ok) 30%, transparent);
  }

  /* ============= Admin landing ============= */
  .admin-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
  }
  @media (min-width: 540px) {
    .admin-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .admin-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    color: var(--text-1);
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .admin-card:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }
  .admin-card:active {
    transform: scale(0.985);
  }
  .admin-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-3);
    color: var(--text-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .admin-card__icon svg {
    width: 24px;
    height: 24px;
  }
  .admin-card__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.018em;
    margin: 0 0 2px;
  }
  .admin-card__sub {
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0;
  }
  .admin-card__chev {
    color: var(--text-4);
    margin-left: auto;
  }
  .admin-card__chev svg {
    width: 18px;
    height: 18px;
  }

  /* trash list — restore + hard-delete actions stacked on the right */
  .trash-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    align-self: center;
    flex-shrink: 0;
  }
  .order-card.is-archived {
    opacity: 0.78;
  }
  .order-card.is-archived .order-card__thumb {
    filter: grayscale(0.4);
  }

  /* store filter pills on /learn */
  .store-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-3) 0 var(--sp-5);
  }
  .store-filter__pill {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .store-filter__pill:hover {
    color: var(--text-1);
    background: var(--surface-3);
  }
  .store-filter__pill.is-selected {
    background: var(--text-1);
    color: #000;
    border-color: var(--text-1);
  }

  /* store-tag pill used in rule/example cards */
  .tag--store {
    color: var(--text-1);
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  }

  /* ============= Menu admin (iPhone-style) ============= */
  .menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .menu-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text-1);
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .menu-card:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }
  .menu-card:active {
    transform: scale(0.985);
  }
  .menu-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .menu-card__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
  }
  .menu-card__sub {
    font-size: 13px;
    color: var(--text-3);
  }
  .menu-card__chev {
    color: var(--text-4);
  }
  .menu-card__chev svg {
    width: 18px;
    height: 18px;
  }

  /* floating add button */
  .fab {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 20px);
    bottom: calc(var(--safe-bot) + 24px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px 14px 18px;
    border-radius: 999px;
    background: var(--text-1);
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform var(--t-fast) var(--spring),
      filter var(--t-fast) var(--ease-out);
  }
  .fab:hover {
    filter: brightness(0.96);
  }
  .fab:active {
    transform: scale(0.96);
  }
  .fab svg {
    width: 22px;
    height: 22px;
  }

  /* edit form */
  .hint {
    color: var(--text-3);
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0 0 var(--sp-3);
  }
  .chip-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .chip-editor__chips {
    display: contents;
  }
  .edit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-1);
  }
  .edit-chip__text {
    line-height: 1.2;
  }
  .edit-chip__remove,
  .edit-chip__confirm {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-3) 24%, transparent);
    color: var(--text-1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease-out);
  }
  .edit-chip__remove:hover {
    background: var(--v-bad);
  }
  .edit-chip__confirm {
    background: var(--v-ok);
    color: #000;
  }
  .edit-chip--input {
    background: var(--surface-3);
    padding: 4px 6px 4px 12px;
  }
  .edit-chip--input input {
    background: transparent;
    border: 0;
    color: var(--text-1);
    font-size: 15px;
    width: 160px;
    outline: none;
  }
  .add-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .add-chip:hover {
    background: var(--surface-2);
    color: var(--text-1);
  }
  .add-chip:active {
    transform: scale(0.96);
  }
  .add-chip svg {
    width: 14px;
    height: 14px;
  }
  .add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    margin-top: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    color: var(--text-1);
    font-size: 15px;
    font-weight: 600;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out);
  }
  .add-row:hover {
    background: var(--surface-3);
  }
  .add-row:active {
    transform: scale(0.99);
  }
  .add-row svg {
    width: 16px;
    height: 16px;
  }

  /* variant group */
  .variant-row {
    padding: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-3);
  }
  .variant-row__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .variant-row__name {
    flex: 1;
    height: 44px;
    padding: 0 var(--sp-3);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-size: 16px;
    font-weight: 600;
  }
  .variant-row__name:focus {
    outline: none;
    border-color: var(--ring);
  }
  .variant-row__del {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .variant-row__del:hover {
    background: var(--v-bad);
    color: #fff;
  }
  .variant-row__del svg {
    width: 14px;
    height: 14px;
  }

  /* pick stepper */
  .pick-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-bottom: var(--sp-3);
  }
  .pick-stepper__btn {
    width: 40px;
    height: 36px;
    color: var(--text-1);
    font-size: 18px;
    font-weight: 600;
    transition: background var(--t-fast) var(--ease-out);
  }
  .pick-stepper__btn:hover {
    background: var(--surface-2);
  }
  .pick-stepper__value {
    min-width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* toggle */
  .toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
  }
  .toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .toggle__track {
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    position: relative;
    transition: background var(--t-fast) var(--ease-out);
    flex-shrink: 0;
  }
  .toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--text-1);
    transition: transform var(--t-med) var(--spring);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .toggle input:checked + .toggle__track {
    background: var(--v-ok);
  }
  .toggle input:checked + .toggle__track .toggle__thumb {
    transform: translateX(20px);
    background: #fff;
  }
  .toggle__label {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--text-1);
  }

  .menu-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }
  .btn--ghost-danger {
    background: transparent;
    color: var(--v-bad);
    border-color: color-mix(in srgb, var(--v-bad) 28%, transparent);
  }
  .btn--ghost-danger:hover {
    background: color-mix(in srgb, var(--v-bad) 10%, transparent);
  }

  /* ============= Annotate-to-teach overlay ============= */
  .annotate {
    position: fixed;
    inset: 0;
    z-index: 220;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bot) + 16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .annotate__stage {
    flex-shrink: 0;
  }
  .annotate__img {
    max-height: 60vh;
  }
  .annotate__form {
    flex-shrink: 0;
    scroll-margin-bottom: 16px;
  }
  .annotate.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .annotate__head {
    text-align: center;
    margin-bottom: 12px;
  }
  /* Photo switcher tabs — visible on multi-photo orders. Operator
     taps Photo 1 / Photo 2 / etc. to flip which attachment is
     displayed (and saved against) without closing the annotate
     overlay. */
  .annotate__photo-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .annotate__photo-tab {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
  }
  .annotate__photo-tab:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
  }
  .annotate__photo-tab:active {
    transform: scale(0.96);
  }
  .annotate__photo-tab.is-active {
    background: var(--accent);
    color: var(--text-on-accent, #fff);
    border-color: var(--accent);
  }
  .annotate__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .annotate__sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
    margin-top: 4px;
  }
  .annotate__stage {
    position: relative;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    place-items: center;
  }
  .annotate__img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--r-lg);
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }
  .annotate__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--r-lg);
    cursor: crosshair;
    touch-action: none;
  }
  .annotate__form {
    margin-top: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-4);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .suggest-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-3);
  }
  .suggest-chip {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    font-size: 13.5px;
    font-weight: 500;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .suggest-chip:hover {
    background: var(--surface-3);
  }
  .suggest-chip:active {
    transform: scale(0.96);
  }
  .suggest-chip--bad {
    color: var(--v-bad);
    background: color-mix(in srgb, var(--v-bad) 10%, var(--surface-1));
    border-color: color-mix(in srgb, var(--v-bad) 32%, transparent);
  }
  .field__hint {
    color: var(--text-4);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
  }
  .annotate__form .field input {
    height: 48px;
    font-size: 17px;
  }
  .annotate__close {
    position: absolute;
    top: calc(var(--safe-top) + 12px);
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out);
  }
  .annotate__close:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.2);
  }
  .annotate__close svg {
    width: 18px;
    height: 18px;
  }

  /* visual examples gallery on /learn */
  .examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
  }
  .example-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity var(--t-fast) var(--ease-out);
  }
  .example-card.is-off {
    opacity: 0.45;
  }
  .example-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--surface-3);
  }
  .example-card__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .example-card__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.25;
  }
  .example-card__actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
  }
  .example-card__actions .ghost-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    justify-content: center;
  }

  /* pull-to-refresh indicator */
  .ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: calc(var(--safe-top) + 8px);
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    display: grid;
    place-items: center;
    transform: translate(-50%, -60px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-med) var(--spring), opacity var(--t-fast);
    z-index: 100;
  }
  .ptr-indicator svg {
    width: 16px;
    height: 16px;
  }
  .ptr-indicator.is-spinning {
    animation: spin 0.9s linear infinite;
  }
  .is-spinning {
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .ptr-indicator.is-spinning {
    transform: translate(-50%, 16px);
    opacity: 1;
  }

  /* tap-feedback override (some platforms swallow :active) */
  .is-pressed {
    transform: scale(0.97) !important;
  }
  .order-card.is-pressed,
  .platform-card.is-pressed {
    transform: scale(0.985) !important;
  }

  /* admin/users page */
  .form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
  }
  .banner {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-1);
  }
  .banner--ok {
    border-color: color-mix(in srgb, var(--t-uber) 50%, var(--border));
    background: color-mix(in srgb, var(--t-uber) 12%, var(--surface-1));
  }
  .banner--bad {
    border-color: color-mix(in srgb, var(--t-doordash) 50%, var(--border));
    background: color-mix(in srgb, var(--t-doordash) 12%, var(--surface-1));
  }
  .btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
  }
  .btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text-1);
  }
  .btn--danger {
    color: var(--t-doordash);
    border-color: color-mix(in srgb, var(--t-doordash) 40%, var(--border));
  }
  .btn--danger:hover {
    background: color-mix(in srgb, var(--t-doordash) 10%, transparent);
    color: var(--t-doordash);
  }
  .user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .user-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
  }
  .user-list__item:first-child {
    border-top: none;
  }
  .user-list__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .user-list__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
  }
  .user-list__you {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    margin-left: 4px;
  }
  .user-list__meta {
    font-size: 13px;
    color: var(--text-3);
  }
  .user-list__details {
    position: relative;
  }
  .user-list__details > summary {
    list-style: none;
    cursor: pointer;
  }
  .user-list__details > summary::-webkit-details-marker {
    display: none;
  }
  .user-list__details[open] > summary {
    background: var(--surface-2);
  }
  .user-list__edit {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 240px;
  }
  .user-list__remove {
    margin-top: var(--sp-2);
    display: flex;
    justify-content: flex-end;
  }
  .btn--sm {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* distill rules modal */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .modal[hidden] { display: none; }
  .modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
    pointer-events: auto;
  }
  .modal.is-open .modal__backdrop { opacity: 1; }
  .modal__panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 60px);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 280ms var(--spring), opacity 240ms var(--ease-out);
    pointer-events: auto;
  }
  @media (min-width: 640px) {
    .modal { align-items: center; }
    .modal__panel { border-radius: var(--r-xl); }
  }
  .modal.is-open .modal__panel {
    transform: translateY(0);
    opacity: 1;
  }
  .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
  }
  .modal__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0;
  }
  .modal__close {
    background: transparent;
    border: none;
    color: var(--text-3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .modal__close svg { width: 16px; height: 16px; }
  .modal__close:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .modal__body {
    padding: var(--sp-5);
    overflow-y: auto;
  }
  .modal__intro {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--sp-4);
  }
  .modal__intro--bad {
    color: var(--t-doordash);
  }
  .modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .modal__loader {
    width: 32px;
    height: 32px;
    border: 3px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: var(--sp-5) auto;
  }
  .distill-summary {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: var(--sp-3);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .distill-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  @media (min-width: 720px) {
    .distill-cols { grid-template-columns: 1fr 1fr; }
  }
  .distill-col__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--sp-2);
  }
  .distill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .distill-list li {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.45;
  }
  .distill-list--editable li {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--text-1);
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .distill-item__text {
    flex: 1;
    outline: none;
    min-height: 1.4em;
  }
  .distill-item__text:focus {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .distill-item__remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    cursor: pointer;
    line-height: 0;
    font-size: 14px;
  }
  .distill-item__remove:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .distill-hint {
    font-size: 12px;
    color: var(--text-4);
    margin-top: var(--sp-2);
  }

  .model-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 4px;
  }
  .current-model {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 var(--sp-5) var(--sp-3);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--text-1);
  }
  .current-model__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
    flex-shrink: 0;
    animation: pulse-dot 2.4s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.75; }
  }
  .current-model__provider {
    color: var(--text-3);
    font-size: 13px;
    margin-left: 4px;
  }

  /* admin/stats page */
  .period-switcher {
    display: flex;
    gap: 6px;
    margin-bottom: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .period-switcher::-webkit-scrollbar {
    display: none;
  }
  .period-switcher__item {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  }
  .period-switcher__item.is-active {
    color: var(--text-1);
    background: var(--surface-3);
    border-color: var(--border-strong);
  }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
  .stat-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stat-card__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .stat-card__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
  }
  .stat-card__sub {
    font-size: 12.5px;
    color: var(--text-4);
  }
  .token-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .token-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
  }
  .token-list li:first-child {
    border-top: none;
  }
  .token-list__label {
    color: var(--text-3);
    font-size: 14px;
  }
  .token-list__value {
    color: var(--text-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: var(--sp-5);
    height: 160px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar-chart::-webkit-scrollbar {
    display: none;
  }
  .bar-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 0 22px;
    height: 100%;
    min-width: 22px;
  }
  .bar-chart__bar {
    width: 100%;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--surface-2)));
    border-radius: 3px 3px 0 0;
    min-height: 2px;
  }
  .bar-chart__tick {
    font-size: 10px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
  }
  .verdict-list {
    list-style: none;
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .verdict-list__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .verdict-list__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
  }
  .verdict-list__value {
    font-size: 13px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }
  .verdict-list__bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
  }
  .verdict-list__fill {
    height: 100%;
    background: var(--text-3);
    transition: width 400ms var(--ease-out);
  }
  .verdict-list__fill--match { background: var(--t-uber); }
  .verdict-list__fill--missing { background: var(--t-doordash); }
  .verdict-list__fill--extra { background: var(--t-skip); }
  .verdict-list__fill--unclear { background: var(--text-3); }
  .verdict-list__fill--pending { background: var(--text-4); }
  .verdict-list__fill--error { background: var(--t-doordash); }
  .store-usage {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .store-usage__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
  }
  .store-usage__item:first-child {
    border-top: none;
  }
  .store-usage__name {
    font-size: 14px;
    color: var(--text-1);
    font-weight: 500;
  }
  .store-usage__calls, .store-usage__cost {
    font-size: 13px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }
  .store-usage__cost {
    font-weight: 600;
    color: var(--text-1);
  }

  /* scope picker (Brand vs Location, used in Teach + Highlight) */
  .scope-picker {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .scope-picker[hidden] {
    display: none;
  }
  .scope-picker > legend {
    padding: 0;
    margin-bottom: 4px;
  }
  .scope-picker__option {
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    gap: 2px var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
      background var(--t-fast) var(--ease-out);
  }
  .scope-picker__option:hover {
    border-color: var(--border-strong);
  }
  .scope-picker__option input[type="radio"] {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .scope-picker__option:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  }
  .scope-picker__title {
    grid-row: 1;
    grid-column: 2;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.25;
  }
  .scope-picker__sub {
    grid-row: 2;
    grid-column: 2;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.3;
  }

  /* ---------- Sales reporting ---------------------------------------- */
  .sales-filters {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
  .sales-filters__row {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
  }
  .sales-filters__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sales-filters__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
  }
  .sales-filters__pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sales-filters__pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
  }
  .sales-filters__pill:hover {
    background: var(--surface-2);
    color: var(--text-1);
  }
  .sales-filters__pill.is-on {
    background: color-mix(in srgb, var(--accent) 30%, var(--surface-1));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    color: var(--text-1);
  }
  .sales-filters__pill--clear {
    background: transparent;
    border-style: dashed;
  }
  .sales-filters__date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-3);
  }
  .sales-filters__date input {
    padding: 8px 10px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 14px;
  }
  .sales-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    max-width: 760px;
  }
  .sales-summary__tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-4);
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 8%, var(--surface-1)),
      var(--surface-1) 70%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
  .sales-summary__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
  }
  .sales-summary__value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
  }
  .sales-summary__sub {
    font-size: 12px;
    color: var(--text-3);
  }
  .sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .sales-table th,
  .sales-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .sales-table th {
    font-weight: 600;
    color: var(--text-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sales-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .sales-footnote {
    font-size: 12px;
    color: var(--text-3);
    margin-top: var(--sp-5);
    max-width: 720px;
  }

  /* Per-store delivery-platforms checkboxes on the store create / edit
     form. Three checkboxes in a row at desktop, wrapping on phone. */
  .field--platforms {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    border: 0;
    margin: 0;
    padding: 0;
  }
  .field--platforms .field__label {
    margin-bottom: var(--sp-2);
  }
  .platform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
    font-size: 14px;
    margin-right: 8px;
  }
  .platform-check:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  }
  .platform-check input {
    accent-color: var(--accent);
  }

  /* ---------- Menu scrape status (Admin → Stores) ---- */
  .scrape-status {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
  }
  .scrape-status__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  .scrape-status__chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .scrape-status__chip--ok { background: #145a32; color: #b8f5d6; }
  .scrape-status__chip--empty { background: #5a4214; color: #fad7a0; }
  .scrape-status__chip--no_urls { background: var(--surface-3); color: var(--text-3); }
  .scrape-status__chip--error { background: #5a1a1a; color: #f5b6b6; }
  .scrape-status__chip--never,
  .scrape-status__chip--unknown { background: var(--surface-3); color: var(--text-3); }
  .scrape-status__meta {
    margin: 6px 0 0;
    color: var(--text-3);
    font-size: 12px;
  }
  .scrape-status__msg {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: var(--surface-1);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ---------- AI Library: overview + per-store + calibration overlay ---- */

  /* Library-AI model picker — lives at the top of /admin/library and lets
     master operators flip which model labels food during calibration. The
     cost preview per option uses the operator's actual 7-day call volume
     so the dollar figures reflect their real usage, not a synthetic
     benchmark. Card layout keeps the four options visually parallel even
     though Sonnet's monthly cost is ~10× Flash. */
  .lib-ai-panel {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    max-width: 720px;
  }
  .lib-ai-panel__head {
    margin-bottom: var(--sp-3);
  }
  .lib-ai-panel__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-1);
  }
  .lib-ai-panel__sub {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
    line-height: 1.45;
  }
  .lib-ai-panel__usage {
    font-size: 13px;
    color: var(--text-2);
    margin: var(--sp-2) 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--r-md);
    line-height: 1.5;
  }
  .lib-ai-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .lib-ai-option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
  }
  .lib-ai-option:hover {
    border-color: var(--text-4);
  }
  .lib-ai-option.is-current {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  }
  .lib-ai-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--accent);
    flex-shrink: 0;
  }
  .lib-ai-option__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .lib-ai-option__top {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    justify-content: space-between;
  }
  .lib-ai-option__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
  }
  .lib-ai-option__provider {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-4);
    margin-left: 6px;
  }
  .lib-ai-option__tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
  }
  .lib-ai-option__blurb {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.45;
  }
  .lib-ai-option__cost {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 2px;
  }
  .lib-ai-option__per-call {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-4);
    margin-left: 6px;
  }
  .lib-ai-picker__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
  }
  .lib-ai-picker__saved {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
  }

  .library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-3);
    max-width: 720px;
  }
  .library-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 8%, var(--surface-1)),
      var(--surface-1) 70%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    color: var(--text-1);
    text-decoration: none;
    transition: transform var(--t-fast) var(--spring),
      border-color var(--t-fast) var(--ease-out);
  }
  .library-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
    transform: translateY(-1px);
  }
  .library-card__brand {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 4px;
  }
  .library-card__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0;
    line-height: 1.2;
  }
  .library-card__addr {
    font-size: 12.5px;
    color: var(--text-3);
    margin: 4px 0 0;
  }
  .library-card__meter-track {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
  }
  .library-card__meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent),
      color-mix(in srgb, var(--accent) 70%, white 30%));
    border-radius: 4px;
    transition: width 600ms var(--ease-out);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .library-card__meter-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
  }
  .library-card__meter-pct {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
  }
  .library-card__meter-sub {
    font-size: 12px;
    color: var(--text-3);
  }
  .library-card__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
  }
  .library-card__cta svg { width: 11px; height: 11px; opacity: 0.75; }

  .calibration-hero {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-5);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 10%, var(--surface-1)),
      var(--surface-1) 60%);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--r-xl);
    margin-bottom: var(--sp-5);
    position: relative;
    overflow: hidden;
  }
  .calibration-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      transparent 70%);
    pointer-events: none;
  }
  /* Intelligent smoke drift inside the Train Chit Check card.
     Three soft radial blobs at very low opacity, each drifting on
     its own path so they never align. mix-blend-mode: screen layers
     them as light vapor over the dark-blue card background.
     Underneath children (.calibration-hero__ring and
     .calibration-hero__body) which have position-static so they
     naturally stack above the pseudo-element. */
  .calibration-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 55% 40% at 20% 30%,
        rgba(180, 215, 255, 0.07) 0%,
        transparent 62%),
      radial-gradient(ellipse 50% 55% at 70% 70%,
        rgba(150, 195, 250, 0.06) 0%,
        transparent 66%),
      radial-gradient(ellipse 40% 35% at 50% 85%,
        rgba(130, 185, 240, 0.05) 0%,
        transparent 62%);
    background-size: 220% 220%, 240% 240%, 190% 190%;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: hero-smoke-drift 26s linear infinite;
    filter: blur(2px);
  }
  @keyframes hero-smoke-drift {
    0%   { background-position:   0%   0%, 100% 100%,  50%  50%; }
    33%  { background-position:  60%  40%,  50%   0%,   0% 100%; }
    66%  { background-position: 100%  60%,   0%  50%, 100%   0%; }
    100% { background-position:   0%   0%, 100% 100%,  50%  50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .calibration-hero::after {
      animation: none;
    }
  }
  @media (max-width: 640px) {
    .calibration-hero {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .calibration-hero__ring { margin: 0 auto; }
  }
  .calibration-hero__ring {
    position: relative;
    width: 180px;
    height: 180px;
  }
  .cal-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .cal-ring__track {
    fill: none;
    stroke: var(--surface-3);
    stroke-width: 8;
  }
  .cal-ring__fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    transition: stroke-dashoffset 800ms var(--ease-out);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
  }
  .calibration-hero__num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .calibration-hero__pct {
    font-size: 44px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .calibration-hero__pct-sym {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 2px;
    vertical-align: top;
  }
  .calibration-hero__sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 6px;
  }
  /* Credential row — input + Copy button side by side. Used on the
     store edit form for FTP username + password. The Copy button is
     the master operator's only way to retrieve a stored password
     (the input itself stays write-only) so it can be pasted into
     the Hikvision FTP config. */
  .cred-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .cred-row > input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cred-copy {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text-1) 16%, transparent);
    background: color-mix(in srgb, var(--text-1) 6%, transparent);
    color: var(--text-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, transform 0.06s ease;
  }
  .cred-copy:hover {
    background: color-mix(in srgb, var(--text-1) 12%, transparent);
  }
  .cred-copy:active {
    transform: scale(0.97);
  }
  .cred-copy.is-copied {
    background: color-mix(in srgb, #30D158 25%, transparent);
    border-color: color-mix(in srgb, #30D158 45%, transparent);
    color: #30D158;
  }
  .cred-copy--secret {
    /* visually mark the secret-revealing button slightly differently
       so the operator knows they're about to put a password on the
       clipboard, even though the page is master-only */
    border-style: dashed;
  }

  /* Toggle row — single boolean setting with a label + sub-copy. Used
     on /admin/stats for the brand-pool sharing toggle. Sized to feel
     comfortable on touch (44px+ click target). */
  .toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-1) 4%, transparent);
    cursor: pointer;
  }
  .toggle-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #06C167);
    flex: 0 0 auto;
  }
  .toggle-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .toggle-row__title {
    font-weight: 600;
    color: var(--text-1);
    font-size: 14px;
  }
  .toggle-row__sub {
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.45;
  }

  /* Brand-pool inheritance hint: a small chip below the dishes count
     so the operator knows their % includes teaches from sibling
     stores of the same brand. Helps explain why a brand-new location
     reads above 0% without any local teaches. */
  .calibration-hero__brand-hint {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-3);
    background: color-mix(in srgb, var(--text-3) 8%, transparent);
    border-radius: 6px;
    line-height: 1.3;
    cursor: help;
  }
  .calibration-hero__body { position: relative; }
  .calibration-hero__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0 0 var(--sp-2);
  }
  .calibration-hero__copy {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--sp-4);
  }
  .calibration-hero__hint {
    margin-top: var(--sp-2);
    font-size: 12px;
    color: var(--text-4);
  }

  .dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    padding: var(--sp-4) var(--sp-5);
  }
  .dish-chip {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13.5px;
  }
  .dish-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-4);
  }
  .dish-chip__name {
    color: var(--text-2);
    line-height: 1.3;
  }
  .dish-chip__count {
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
  }
  .dish-chip__slash {
    color: var(--text-4);
    margin: 0 1px;
  }
  .dish-chip.is-cold { opacity: 0.62; }
  .dish-chip.is-partial .dish-chip__dot {
    background: var(--t-skip);
    box-shadow: 0 0 8px color-mix(in srgb, var(--t-skip) 60%, transparent);
  }
  .dish-chip.is-partial { border-color: color-mix(in srgb, var(--t-skip) 30%, var(--border)); }
  .dish-chip.is-calibrated .dish-chip__dot {
    background: var(--t-uber);
    box-shadow: 0 0 8px color-mix(in srgb, var(--t-uber) 80%, transparent);
  }
  .dish-chip.is-calibrated {
    background: color-mix(in srgb, var(--t-uber) 6%, var(--surface-1));
    border-color: color-mix(in srgb, var(--t-uber) 40%, var(--border));
  }
  .dish-chip.is-calibrated .dish-chip__name { color: var(--text-1); }

  /* Both AI-assisted (.cal-overlay) and manual (.manual-overlay) use
     the same fullscreen-dim backdrop pattern. */
  .cal-overlay,
  .manual-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
    pointer-events: auto;
  }
  .manual-overlay[hidden] { display: none; }
  .manual-overlay.is-open { opacity: 1; }

  /* Two-button row for AI vs Manual mode selection on the hero. */
  .calibration-hero__buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
  }
  /* Per-device button priority swap.
     - Desktop (default): AI is primary, Manual is secondary. Operators
       with a mouse can redraw bad bboxes, so AI's speed wins.
     - Touch (hover:none + pointer:coarse): Manual is primary, AI is
       secondary. The bbox-redraw gesture conflicts with native scroll
       on touch — so manual labeling (operator draws box, picks menu
       name) is the reliable mobile path. AI stays accessible but
       de-emphasized.
     This avoids hiding either button (the operator might want to
     switch on a given device) while clearly signalling which one is
     the recommended action. */
  .cal-hero-btn--ai { /* desktop default: primary */ }
  .cal-hero-btn--ai {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
  }
  .cal-hero-btn--manual {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
  }
  /* Two activation paths:
     - @media: real touch hardware (iPad, iPhone). The proper signal.
     - .is-touch body class: JS-set fallback for environments where
       the media query doesn't fire reliably (some hybrids, testing
       tools, etc.). app.js sets this at boot via feature detection.
     CSS uses whichever fires first. */
  @media (hover: none) and (pointer: coarse) {
    .cal-hero-btn--ai {
      background: transparent;
      color: var(--text-2);
      border: 1px solid var(--border);
    }
    .cal-hero-btn--manual {
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent);
    }
    /* Reverse visual order so Manual sits on the LEFT where the eye
       lands first. flex-direction: row-reverse keeps the underlying
       DOM order unchanged so keyboard / screen-reader sequence is
       unaffected. */
    .calibration-hero__buttons {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
  }
  body.is-touch .cal-hero-btn--ai {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
  }
  body.is-touch .cal-hero-btn--manual {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
  }
  body.is-touch .calibration-hero__buttons {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  /* Tool toggle: Draw / Pan. Mutually-exclusive radio buttons styled
     as a segmented pill so the active mode is unmistakable. */
  .manual-tool-bar {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: max-content;
  }
  .tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
      color var(--t-fast) var(--ease-out);
  }
  .tool-btn:hover {
    color: var(--text-1);
  }
  .tool-btn.is-active {
    background: var(--accent);
    color: #000;
  }
  .tool-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* Zoom controls — pill row above the photo, plus a discoverability
     hint to the right so the operator knows about wheel/right-drag. */
  .manual-zoom-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
  }
  .manual-zoom-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: max-content;
  }
  .manual-zoom-hint {
    color: var(--text-3);
    font-size: 12px;
  }

  /* Full-photo container for manual labeling. Scrolls in both axes when
     the inner wrapper is bigger than the visible area (i.e. zoomed in).
     Native scroll panning. */
  .manual-photo {
    position: relative;
    display: block;
    background: #0a0a0c;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: auto;
    max-height: 75vh;
    margin: var(--sp-2) 0 var(--sp-4);
    line-height: 0;
    font-size: 0;
    user-select: none;
    -webkit-user-select: none;
    /* Default = none so the JS touchstart/move handlers receive every
       finger-drag without iOS Safari first claiming it as a native
       scroll. Without this the operator's drag-to-draw silently does
       nothing on iPad — iOS eats the touch before our handler fires.
       Pan mode overrides this via the [data-tool] selector below.

       Verified end-to-end with the preview-browser tools at tablet
       viewport: with touch-action:auto the drawn rect never appeared
       on real finger drags (only on synthetic ones bypassing the OS).
       Switching to touch-action:none in Draw mode fixed it. */
    touch-action: none;
  }
  /* Pan mode: hand control back to native scroll so a finger-drag
     moves the viewport around the zoomed photo. */
  .manual-photo[data-tool="pan"] {
    touch-action: pan-x pan-y pinch-zoom;
  }
  /* Inner wrapper. Width tracks the zoom factor via --manual-zoom CSS
     variable set by JS. Position relative so the .manual-draw inside
     it gets positioned in the IMAGE's coordinate space (not the
     scrolled-container's viewport space) — drag-rect stays pinned to
     the image even when the operator scrolls during zoom panning. */
  .manual-photo__inner {
    position: relative;
    width: calc(100% * var(--manual-zoom, 1));
    cursor: crosshair;
  }
  .manual-photo__inner img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: auto;
    -webkit-user-drag: none;
  }
  /* The active drag-rectangle. Coords are percentages of the inner
     wrapper so the rect grows with zoom along with the image. */
  .manual-draw {
    position: absolute;
    box-sizing: border-box;
    /* Was pointer-events: none — but we now want the box body to be
       a "move handle" for the operator to drag the whole rectangle.
       The drag handlers below stop propagation so it doesn't trigger
       a new drag-to-draw on the photo behind it. */
    pointer-events: auto;
    cursor: move;
    border: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 4px;
    transition: opacity 180ms ease-out;
    z-index: 8;
  }
  .manual-draw[hidden] { display: none; }
  .manual-draw.is-saved {
    border-color: #30D158;
    background: color-mix(in srgb, #30D158 22%, transparent);
  }
  /* Corner resize handles — appear on every visible drawRect so the
     operator can tighten/expand the bbox before saving. Touch + mouse
     friendly. 20px round target on top of a 14px filled dot. */
  .manual-draw-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(48, 209, 88, 0.98);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 11;
    pointer-events: auto;
    touch-action: none;
  }
  .manual-draw-handle--nw {
    top: -12px; left: -12px;
    cursor: nwse-resize;
  }
  .manual-draw-handle--ne {
    top: -12px; right: -12px;
    cursor: nesw-resize;
  }
  .manual-draw-handle--sw {
    bottom: -12px; left: -12px;
    cursor: nesw-resize;
  }
  .manual-draw-handle--se {
    bottom: -12px; right: -12px;
    cursor: nwse-resize;
  }
  /* Slight pulse on the handles when the box first appears, so the
     operator immediately notices they're draggable. */
  @keyframes manual-handle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
  }
  .manual-draw:not([hidden]) .manual-draw-handle {
    animation: manual-handle-pulse 1.6s ease-in-out 2;
  }
  @media (max-width: 560px) {
    /* Bigger touch targets on phones */
    .manual-draw-handle {
      width: 30px;
      height: 30px;
      border-width: 3px;
    }
    .manual-draw-handle--nw,
    .manual-draw-handle--ne { top: -15px; }
    .manual-draw-handle--sw,
    .manual-draw-handle--se { bottom: -15px; }
    .manual-draw-handle--nw,
    .manual-draw-handle--sw { left: -15px; }
    .manual-draw-handle--ne,
    .manual-draw-handle--se { right: -15px; }
  }
  /* Pre-existing labels summary chip — informational, not interactive. */
  /* Puzzle-style pre-detection overlay on the manual-labeling photo.
     Each box is a vision-detected item from the AI Library queue —
     operator clicks to confirm/correct. Pending = green outline,
     answered = solid green check, dismissed = greyed and unclickable. */
  .manual-pre {
    position: absolute;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 2px solid rgba(48, 209, 88, 0.85);
    border-radius: 6px;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35),
                0 0 18px rgba(48, 209, 88, 0.3) inset;
    transition: background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out),
      transform var(--t-fast) var(--spring);
    -webkit-tap-highlight-color: transparent;
    /* CRITICAL: pointer-events:none on the box itself so the operator
       can drag-to-draw a NEW box over an area that has a pre-detection
       (vision might have missed a side dish hiding inside a combo
       box). The label badge re-enables pointer events for clicks. */
    pointer-events: none;
  }
  .manual-pre:hover,
  .manual-pre:focus-visible {
    background: rgba(48, 209, 88, 0.18);
    border-color: rgba(48, 209, 88, 1);
    outline: none;
  }
  .manual-pre:active {
    transform: scale(0.98);
  }
  .manual-pre__badge {
    position: absolute;
    /* Sit ABOVE the box (negative top) so the bigger text doesn't
       cover the food inside the bbox. Falls back to inside-top when
       the box is near the top edge of the image. */
    top: -28px;
    left: -1px;
    max-width: calc(100% + 2px);
    padding: 5px 12px;
    background: rgba(48, 209, 88, 0.97);
    color: #002400;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The badge is the click target — re-enables pointer events that
       the parent .manual-pre disabled so drag-to-draw can pass
       through the box outline. Tap the badge to confirm/relabel. */
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    min-height: 26px;
    letter-spacing: 0.01em;
  }
  /* Slight grow on hover so it's clearly the actionable element */
  .manual-pre__badge:hover {
    background: rgba(48, 209, 88, 1);
    padding-right: 18px;
  }
  /* When the box is so close to the top edge that the outside-top
     badge would clip off-frame, flip the badge to sit just inside
     the top-left corner of the box instead. */
  .manual-pre[data-badge-inside="1"] .manual-pre__badge {
    top: 2px;
    left: 2px;
  }
  /* Answered crops: solid fill, no hover invitation */
  .manual-pre--answered {
    background: rgba(48, 209, 88, 0.12);
    border-color: rgba(48, 209, 88, 0.6);
    border-style: solid;
  }
  .manual-pre--answered .manual-pre__badge {
    background: rgba(48, 209, 88, 0.75);
  }
  /* Dismissed crops: muted, non-interactive */
  .manual-pre--dismissed {
    border-color: rgba(150, 150, 150, 0.45);
    border-style: dashed;
    cursor: default;
    opacity: 0.55;
  }
  .manual-pre--dismissed .manual-pre__badge {
    background: rgba(120, 120, 120, 0.8);
    color: #fff;
  }
  .manual-pre--dismissed:hover {
    background: transparent;
  }
  /* Confidence-based badge tinting. Operator can prioritize visually:
     bright green badge = high confidence (likely correct), amber =
     medium (worth a glance), red-tinted = low (probably needs a real
     look). Box outline stays the state color so quick-scanning shape
     still works. */
  .manual-pre--conf-high .manual-pre__badge {
    background: rgba(48, 209, 88, 0.95);  /* green */
    color: #002400;
  }
  .manual-pre--conf-medium .manual-pre__badge {
    background: rgba(255, 159, 10, 0.95);  /* amber */
    color: #1a1100;
  }
  .manual-pre--conf-low .manual-pre__badge {
    background: rgba(255, 99, 99, 0.92);   /* salmon — flags low signal */
    color: #1a0000;
  }
  /* Also nudge the box border on low confidence — thinner + dashed so
     the operator can see at a glance which detections vision is shaky
     about. */
  .manual-pre--conf-low {
    border-width: 1.5px;
    border-style: dashed;
  }

  .manual-existing {
    margin: var(--sp-2) 0 0;
  }
  .manual-existing__summary {
    color: var(--text-3);
    font-size: 12px;
    padding: 6px 10px;
    background: var(--surface-1);
    border-radius: var(--r-md);
  }
  /* Self-teaching label card. Holds the typeahead input + dropdown,
     the "already labeled here" hint, and the Save / Discard buttons
     as a single visual unit. Sticks to the bottom of the viewport
     so it's always reachable while the operator is zooming + panning
     a tall food photo — no more scrolling to the bottom of the page
     to type a label.

     Mobile UX win: header row shows a live thumbnail of the active
     bbox + a "What is this?" prompt, so the operator never loses
     context when the keyboard covers the photo above. */
  .manual-label-row {
    position: sticky;
    bottom: var(--sp-3);
    z-index: 30;
    margin: var(--sp-3) 0;
    padding: var(--sp-4);
    background: color-mix(in srgb, var(--surface-2) 96%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
  }
  .manual-label-row__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  /* Live thumbnail of the active bbox. JS sets background-image to
     the source photo URL + background-size/position so just the
     bbox area is visible. Updated on every paintDrawRect call —
     so when the operator drag-resizes the box, the thumbnail
     tracks. 64px square on desktop, 72px on mobile (touch target). */
  .manual-active-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #1a1a1a center / cover no-repeat;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
  /* Empty state (no bbox set yet) — shows a subtle question-mark icon
     instead of a dark void. */
  .manual-active-thumb:empty[style=""],
  .manual-active-thumb:not([style*="background-image"]) {
    background: linear-gradient(135deg, var(--surface-1), var(--surface-2));
  }
  .manual-label-row__prompt {
    flex: 1 1 auto;
    min-width: 0;
  }
  .manual-label-row__title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
  }
  .manual-label-row__sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.35;
  }
  /* Input wrap inside the manual label row gets position:relative so
     the typeahead dropdown anchors directly below the input via its
     top: calc(100% + 4px) rule. Without this wrap, the dropdown
     escapes to an outer positioned ancestor and floats in mid-page. */
  .manual-label-row .cal-question__custom-input-wrap {
    width: 100%;
  }
  /* The dropdown defaults to appearing BELOW the input. Inside the
     sticky-bottom label row, that would push the suggestions
     off-screen. Flip them UP so they appear above the input where
     the operator can actually see + tap them. */
  .manual-label-row .cal-question__menu-list {
    top: auto;
    bottom: calc(100% + 4px);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.5);
  }
  .manual-label-row .manual-existing {
    margin-top: var(--sp-2);
  }
  .manual-label-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
  }
  .manual-label-actions .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    min-height: 44px;  /* Apple's recommended touch-target floor */
    font-size: 15px;
    font-weight: 600;
  }
  /* Boost the input readability — bigger text, lighter background
     so pre-filled values are clearly visible against the dark card. */
  .manual-label-row .cal-question__custom-input {
    background: var(--surface-1);
    color: var(--text-1);
    font-size: 16px;       /* prevents iOS auto-zoom on focus */
    padding: 12px 14px;
    min-height: 48px;
  }
  @media (max-width: 560px) {
    .manual-label-row {
      /* Tighter padding + edge-to-edge sticky bar on phones, with
         rounded top corners like an iOS sheet. */
      padding: var(--sp-3);
      bottom: 0;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      margin: var(--sp-3) calc(-1 * var(--sp-3)) 0;
    }
    /* Bigger thumbnail on mobile = bigger context preview for the
       operator while their thumb is on the keyboard. */
    .manual-active-thumb {
      width: 72px;
      height: 72px;
    }
    .manual-label-row__title {
      font-size: 17px;
    }
    .manual-label-row__sub {
      font-size: 12px;
    }
    /* STACK action buttons vertically on phones. Wider buttons with
       proper touch height = fewer mistaps with thumbs. Order: primary
       (Save) on top, "Not an item" below it (most-used dismissal),
       Discard at the bottom (least frequent, least visible). */
    .manual-label-actions {
      flex-direction: column;
      gap: 8px;
    }
    .manual-label-actions .btn {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      font-size: 16px;
    }
    /* Cancel button is least important — visually demote */
    .manual-label-actions [data-manual-cancel-draw] {
      opacity: 0.78;
    }
  }
  .manual-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-3);
  }
  .cal-overlay[hidden] { display: none; }
  .cal-overlay.is-open { opacity: 1; }
  .cal-overlay__close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .cal-overlay__close svg { width: 16px; height: 16px; }
  .cal-overlay__close:hover {
    background: var(--surface-3);
    color: var(--text-1);
  }
  .cal-overlay__inner {
    width: 100%;
    /* Bumped from 700px → 1200px. The old cap made the photo viewer a
       postage-stamp in the middle of a wide screen; operators couldn't
       see what vision was highlighting and couldn't tell food from
       background. With 1200px the photo can actually breathe and the
       fit-both-dims "Fit" zoom shows the full frame at a usable size. */
    max-width: 1200px;
    padding: 56px var(--sp-5) var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }
  .cal-overlay__progress {
    padding: var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
  }
  .cal-overlay__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .cal-overlay__progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cal-overlay__store {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
  }
  .cal-overlay__progress-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
  }
  .cal-overlay__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent),
      color-mix(in srgb, var(--accent) 60%, white 40%));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: width 500ms var(--ease-out),
                box-shadow 350ms var(--ease-out);
  }
  /* Brief glow + pulse when the bar advances after an answer */
  .cal-overlay__progress-fill.is-bumped {
    animation: cal-bar-bump 700ms ease-out;
  }
  @keyframes cal-bar-bump {
    0%   { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
    40%  { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 95%, transparent); }
    100% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
  }
  /* Same brief pulse on the big percent number on the page */
  .calibration-hero__pct.is-bumped {
    animation: cal-pct-bump 600ms ease-out;
  }
  @keyframes cal-pct-bump {
    0%   { transform: scale(1); color: var(--accent); }
    35%  { transform: scale(1.16); color: color-mix(in srgb, var(--accent) 70%, white 30%); }
    100% { transform: scale(1); color: var(--text-1); }
  }
  .cal-overlay__progress-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .cal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-4) 0;
    /* Transparent — the orb sits on the overlay's dark background,
       no container, no card. */
    background: transparent;
    color: var(--text-3);
  }
  /* ── Sentient orb v5 — neon blue + purple cinematic ─────────────
     Ethereal AI orb suspended in the dark calibration overlay.

     Body gradient runs white-cyan core → electric blue mid → violet
     → deep purple edge. Outer halo is dual-layered: blue inner glow
     (closer, sharper) and purple outer halo (wider, softer) — that's
     the chromatic-aberration feel.

     Stack (z-order):
       0 (body) .cal-loading__pulse — orb shell + dual halo
       1        .cal-orb-gas--a     — cyan cloud, top-left orbit
       1        .cal-orb-gas--b     — violet cloud, bottom-right
       1        .cal-orb-gas--c     — magenta cloud, bottom rise
       2        .cal-orb-swirl      — rotating multi-hue conic ribbons
       3        .cal-orb-highlight  — top-left glass specular
       4        .cal-orb-core       — pulsing white-cyan spark (heart)

     Six simultaneous animations (orb-alive, orb-swirl, orb-core-pulse,
     cal-orb-gas-a/b/c, highlight-drift). None aligned with another —
     the visual never repeats exactly inside a 60-second window.

     Honors prefers-reduced-motion: motion pauses, sphere remains. */
  .cal-loading__pulse {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    isolation: isolate;
    overflow: hidden;
    /* clip-path locks the silhouette to a clean circle. Crucially,
       it does NOT clip box-shadow — so the ethereal outer halo still
       extends past the orb (mask-image WOULD clip the halo, which is
       why it's NOT here). The blur leak risk is handled per-child
       below: each .cal-orb-gas / .cal-orb-swirl carries its own
       mask-image, so blur can't escape any individual layer. */
    clip-path: circle(50%);
    background:
      radial-gradient(
        circle at 34% 28%,
        rgba(255, 255, 255, 1)        0%,
        rgba(195, 240, 255, 0.97)     5%,    /* cyan-white halo */
        rgba(110, 195, 255, 0.95)    14%,    /* electric cyan-blue */
        rgba( 70, 130, 245, 0.95)    30%,    /* deep electric blue */
        rgba(110,  85, 235, 0.95)    50%,    /* blue-violet transition */
        rgba(155,  75, 240, 0.92)    72%,    /* electric purple */
        rgba( 95,  35, 175, 0.95)    90%,    /* deep violet */
        rgba( 35,  10,  70, 1)      100%     /* near-black rim */
      );
    /* Dual-color cinematic halo: blue inner (sharper, closer) +
       purple outer (wider, softer). Together they read as a chromatic
       bleed — the orb's blue light slightly offset from its purple
       light, exactly like a real ethereal energy source filmed at
       high ISO. */
    box-shadow:
      /* Blue inner halo */
      0 0 28px rgba(110, 195, 255, 0.65),
      0 0 60px rgba( 70, 140, 240, 0.40),
      /* Purple outer halo */
      0 0  95px rgba(155,  85, 240, 0.42),
      0 0 150px rgba(120,  60, 220, 0.22),
      /* Inner shaping */
      inset -16px -16px 36px rgba( 20,  5, 50, 0.62),
      inset  10px  10px 22px rgba(255, 255, 255, 0.24);
    animation: orb-alive 8s ease-in-out infinite;
  }
  /* Multi-hue conic ribbons inside the sphere. inset:0 (was -8%) so
     the swirl matches the orb's footprint exactly + carries its own
     mask-image to hard-clip any blur leak past its circle. */
  .cal-orb-swirl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 0deg,
      transparent                       0%,
      rgba(210, 245, 255, 0.58)        12%,  /* cyan */
      transparent                      25%,
      rgba(170,  95, 245, 0.52)        45%,  /* purple */
      transparent                      58%,
      rgba(140, 200, 255, 0.55)        72%,  /* electric blue */
      transparent                      85%,
      rgba(220, 135, 255, 0.50)       100%   /* magenta-violet */
    );
    mix-blend-mode: screen;
    filter: blur(6px);
    -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 50%);
            mask-image: radial-gradient(circle, #000 50%, transparent 50%);
    z-index: 2;
    animation: orb-swirl 8s linear infinite;
  }
  /* Top-left glass specular smear. */
  .cal-orb-highlight {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
      ellipse 38% 26% at 32% 22%,
      rgba(255, 255, 255, 0.60) 0%,
      rgba(255, 255, 255, 0.14) 38%,
      transparent              72%
    );
    z-index: 3;
    animation: cal-orb-highlight-drift 7s ease-in-out infinite;
  }
  /* The "arc-reactor heart" — a small bright white-cyan dot near the
     top-left interior that pulses on its own beat. Adds a focal point
     that suggests something powering the orb from inside. Blurred so
     it reads as light bloom, not a flat dot. */
  .cal-orb-core {
    position: absolute;
    top: 28%;
    left: 32%;
    width: 18%;
    height: 18%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 1)   0%,
      rgba(200, 240, 255, 0.7) 30%,
      rgba(150, 220, 255, 0.3) 55%,
      transparent              75%
    );
    filter: blur(3px);
    mix-blend-mode: screen;
    z-index: 4;
    animation: orb-core-pulse 2.4s ease-in-out infinite;
  }
  /* Three counter-rotating internal cloud layers — cyan, violet,
     magenta. Cranked-up version: peak opacity ~0.85 (was 0.55),
     orbits 4-5s (were 7-10s), 12-14% orbital swing (was 6-8%) so the
     swirling is clearly visible, not subtle ambient tinting.
     mix-blend-mode: screen lightens where they overlap. */
  .cal-orb-gas {
    /* Each cloud is sized exactly to the orb (inset:0) AND carries
       its own mask-image circle, so its blur can't escape its own
       circular footprint. The translate animation moves the cloud's
       center, which shifts the bright radial peak inside the orb
       visibly (the gas-moves-around effect) — but the cloud's
       boundary is always masked to a circle. Result: visible gas
       motion, zero possibility of square corners. */
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
    filter: blur(5px);
    -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 50%);
            mask-image: radial-gradient(circle, #000 50%, transparent 50%);
  }
  .cal-orb-gas--a {
    /* bright cyan plume */
    background: radial-gradient(
      circle at 25% 35%,
      rgba(180, 240, 255, 0.85) 0%,
      rgba(100, 200, 255, 0.50) 22%,
      rgba( 60, 160, 250, 0.22) 42%,
      transparent              60%
    );
    animation: cal-orb-gas-a 4.5s ease-in-out infinite;
  }
  .cal-orb-gas--b {
    /* electric violet plume */
    background: radial-gradient(
      circle at 75% 60%,
      rgba(200, 130, 255, 0.82) 0%,
      rgba(150,  90, 245, 0.48) 25%,
      rgba(100,  60, 220, 0.20) 45%,
      transparent              62%
    );
    animation: cal-orb-gas-b 5.5s ease-in-out infinite;
  }
  .cal-orb-gas--c {
    /* magenta-pink plume */
    background: radial-gradient(
      circle at 50% 78%,
      rgba(240, 150, 255, 0.78) 0%,
      rgba(200, 110, 245, 0.45) 28%,
      rgba(150,  80, 220, 0.18) 48%,
      transparent              62%
    );
    animation: cal-orb-gas-c 5s ease-in-out infinite;
  }
  @keyframes orb-core-pulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
  }
  /* The keystone animation — combines float, wobble, scale, rotate
     so the orb is never the same shape twice in a single cycle.
     Five keyframes (instead of two) make the motion feel organic
     rather than metronomic. */
  /* orb-alive: float + subtle scale. border-radius morph removed —
     the silhouette is now locked to a circle by clip-path, and the
     visible "alive" motion comes entirely from the swirling gas
     clouds + spinning conic ribbons + pulsing core inside. Less
     wobble outside means more focus on the dramatic internal motion. */
  @keyframes orb-alive {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-13px) scale(1.03);
    }
  }
  @keyframes orb-swirl {
    to { transform: rotate(360deg); }
  }
  @keyframes cal-orb-gas-a {
    0%   { transform: rotate(0deg)   translate(-14%,  9%); }
    50%  { transform: rotate(180deg) translate( 15%, -7%); }
    100% { transform: rotate(360deg) translate(-14%,  9%); }
  }
  @keyframes cal-orb-gas-b {
    0%   { transform: rotate(0deg)    translate( 12%, -11%); }
    50%  { transform: rotate(-180deg) translate(-15%,  11%); }
    100% { transform: rotate(-360deg) translate( 12%, -11%); }
  }
  @keyframes cal-orb-gas-c {
    0%   { transform: rotate(0deg)   translate( 4%,  13%); }
    50%  { transform: rotate(140deg) translate(-7%, -13%); }
    100% { transform: rotate(280deg) translate( 4%,  13%); }
  }
  @keyframes cal-orb-highlight-drift {
    0%, 100% { opacity: 0.95; transform: translate(0,    0); }
    50%      { opacity: 0.78; transform: translate(2%, -1%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cal-loading__pulse,
    .cal-orb-gas,
    .cal-orb-swirl,
    .cal-orb-highlight,
    .cal-orb-core {
      animation: none;
    }
  }
  .cal-question__prompt {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.025em;
    margin: 0 0 var(--sp-4);
    text-align: center;
  }
  /* NEW: full-photo viewer (replaces the tight .cal-question__crop).
     Mirrors the .manual-photo pattern: outer wrap is the scrollable
     viewport (overflow:auto), inner is a relatively-positioned box
     whose pixel width grows with --cal-zoom. The img inside is
     width:100% of the inner — at zoom=1 it fits the wrap exactly, at
     higher zooms it overflows and the wrap's native scroll handles
     panning. No object-fit:contain → no letterboxing → highlight
     positioning is straightforward.

     The legacy .cal-question__crop rules below are kept for the
     fallback path where the server couldn't sign a full-photo token. */
  /* "Vision saw: X" chip — shown under the question prompt so the
     operator can see vision's raw label, not just the resolved menu
     pick. Helps catch hallucinations: when vision says "orange slice
     on plate" but the resolver maps to "Simply Orange Juice (12 oz)",
     the operator sees the mismatch and rejects. */
  .cal-question__rawguess {
    margin: -8px auto var(--sp-3);
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    max-width: 600px;
  }
  .cal-question__rawguess[hidden] { display: none; }
  .cal-question__rawguess strong {
    color: var(--text-2);
    font-weight: 600;
  }

  /* Draw / Pan tool toggle for the AI calibration photo viewer.
     Same look as the manual-labeling tool bar so the two modes feel
     consistent. Default = Draw (finger drags redraw the bbox); Pan
     mode lets the operator scroll a zoomed photo with their finger. */
  .cal-tool-bar {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: fit-content;
  }
  .cal-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
  }
  .cal-tool-btn svg { width: 14px; height: 14px; }
  .cal-tool-btn.is-active {
    background: var(--accent);
    color: #fff;
  }
  .cal-tool-btn:not(.is-active):hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-1);
  }

  .cal-question__photo-wrap {
    position: relative;
    /* Grid with safe-center: when the inner is smaller than the wrap
       (typical at zoom=Fit), it centers nicely. When the inner is
       larger (zoomed in), `safe center` falls back to start-align so
       scrollLeft/scrollTop work correctly. Same pattern as lightbox. */
    display: grid;
    place-items: safe center;
    background: #0a0a0c;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: auto;
    /* Desktop: 60vh gives the operator a generous view. On smaller
       screens (tablet/phone) the photo gets capped down below so the
       answer buttons stay above the fold — see the @media block
       further down in this file. */
    height: 60vh;
    margin-bottom: var(--sp-3);
    line-height: 0;
    font-size: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Default Draw mode: iOS must hand finger drags to our JS so the
       operator can redraw the bbox. Without this, touch drags get
       eaten by Safari as native page-scroll BEFORE touchstart fires.
       Same fix that landed earlier for manual-labeling mode.

       Pan mode override below restores native scroll/pinch when the
       operator wants to navigate a zoomed-in photo. */
    touch-action: none;
  }
  .cal-question__photo-wrap[data-tool="pan"] {
    touch-action: pan-x pan-y pinch-zoom;
  }
  /* iPad / tablet / phone fix.
     The original 60vh photo viewer ate basically the entire visible
     area on iPad. The choices buttons were below the fold AND iOS
     Safari's nested-scroll-container behavior captured every touch
     inside the photo wrap for its own pan/pinch — so the operator
     literally couldn't scroll down to the buttons. The page LOOKED
     unresponsive ("clicked but nothing happens") when really the
     buttons just couldn't be reached.

     Fix: cap the photo at a smaller fraction of the viewport so the
     answer buttons land above the fold. The operator can still pinch
     or tap (+) to inspect details if they need a closer look. */
  @media (max-width: 1024px) {
    .cal-question__photo-wrap {
      height: 38vh;
    }
  }
  @media (max-width: 560px) {
    .cal-question__photo-wrap {
      height: 32vh;
    }
  }
  .cal-question__photo-inner {
    position: relative;
    /* Pixel width / height are set by JS (calApplyZoom): the base
       fits BOTH dimensions of the wrap so zoom=1 always shows the
       entire frame, regardless of image aspect ratio. CSS-side
       fallback uses natural aspect at full wrap width. */
    width: 100%;
  }
  .cal-question__photo-inner img {
    display: block;
    width: 100%;
    height: 100%;
    background: #0a0a0c;
    -webkit-user-drag: none;
    user-select: none;
  }
  /* Desktop hint that the highlight box is draggable. Hidden on
     touch devices because drag-to-redraw is intentionally disabled
     there (the gesture conflicts with native scroll/pan). Touch
     operators use Skip when vision's bbox is wrong. */
  .cal-question__redraw-hint {
    margin: 0 0 var(--sp-3);
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .cal-question__redraw-hint strong {
    color: var(--text-1);
    font-weight: 700;
  }
  .cal-question__redraw-hint em {
    color: var(--text-1);
    font-style: normal;
    font-weight: 600;
  }
  /* Touch-device detection via media query: hover:none = no fine
     pointer = treat as touch device and hide the click-drag hint. */
  @media (hover: none) and (pointer: coarse) {
    .cal-question__redraw-hint[data-desktop-only] {
      display: none;
    }
  }

  /* Viewer bar with zoom controls + "skip whole photo" escape hatch. */
  .cal-question__viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
  }
  .cal-question__zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    border-radius: 999px;
  }
  .cal-question__zoom-controls .zoom-btn {
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
  }
  .cal-question__zoom-controls .zoom-btn:hover {
    background: rgba(255, 255, 255, 0.10);
  }
  .cal-skip-photo {
    font-size: 13px;
    padding: 8px 14px;
  }
  /* Legacy crop layout — used only when photo_token is missing
     (orphan attachments, etc.). Same look as before. */
  .cal-question__crop {
    position: relative;
    display: block;
    background: #0a0a0c;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: var(--sp-5);
    line-height: 0;
    font-size: 0;
  }
  .cal-question__crop img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: #0a0a0c;
  }
  /* Highlight box showing exactly which item in the crop vision is
     asking about. JS positions it (in px) relative to the rendered
     image so it aligns precisely even when object-fit:contain letterboxes. */
  .cal-question__highlight {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    border: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42),
                0 0 22px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: opacity 220ms ease, left 220ms ease, top 220ms ease,
                width 220ms ease, height 220ms ease;
    z-index: 2;
  }
  .cal-question__highlight[hidden] {
    display: none !important;
  }
  /* Small "Tap the item you're labeling" hint in the top-right of the crop */
  .cal-question__hint {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: var(--r-pill);
    font-size: 11px;
    color: var(--text-2);
    backdrop-filter: blur(6px);
    z-index: 3;
    pointer-events: none;
  }
  .cal-question__chip {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
    backdrop-filter: blur(6px);
    z-index: 3;
    user-select: none;
    -webkit-backdrop-filter: blur(6px);
  }
  /* When vision had a guess we make the chip clickable so the operator
     can confirm with one tap instead of typing the label. */
  .cal-question__chip--clickable {
    cursor: pointer;
    color: var(--text-1);
    font-style: normal;
    background: color-mix(in srgb, var(--accent) 24%, rgba(0,0,0,0.78));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    transition: background 120ms ease, transform 120ms ease;
  }
  .cal-question__chip--clickable:hover {
    background: color-mix(in srgb, var(--accent) 40%, rgba(0,0,0,0.78));
    transform: translateY(-1px);
  }
  .cal-question__chip--clickable::after {
    content: " · click to use";
    color: var(--text-3);
    font-weight: 400;
    margin-left: 2px;
  }
  /* Option A: BIG primary confirm CTA. Shown above the choices grid when
     vision has a guess. One tap to label this crop. */
  .cal-confirm {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 18px 20px;
    margin-top: var(--sp-4);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 28%, var(--surface-1)),
      color-mix(in srgb, var(--accent) 18%, var(--surface-1)) 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    border-radius: var(--r-lg);
    color: var(--text-1);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      box-shadow var(--t-fast) var(--ease-out);
  }
  .cal-confirm:hover {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 38%, var(--surface-1)),
      color-mix(in srgb, var(--accent) 24%, var(--surface-1)) 70%);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .cal-confirm:active { transform: scale(0.99); }
  .cal-confirm[hidden] { display: none !important; }
  .cal-confirm__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-accent, #0a0a0c);
  }
  .cal-confirm__check svg { width: 22px; height: 22px; }
  .cal-confirm__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .cal-confirm__lead {
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500;
  }
  .cal-confirm__guess {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
    line-height: 1.2;
    word-break: break-word;
  }
  .cal-question__or {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin: var(--sp-4) 0 var(--sp-2);
    font-weight: 600;
  }
  .cal-question__or[hidden] { display: none !important; }

  .cal-question__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
  }
  /* Single-column choices on small/portrait screens for easy thumb taps */
  @media (max-width: 560px) {
    .cal-question__choices {
      grid-template-columns: 1fr;
    }
    .cal-confirm__guess { font-size: 17px; }
    .cal-question__custom-row {
      flex-direction: column;
      align-items: stretch;
    }
    .cal-question__custom-input-wrap {
      flex: 1 1 auto;
    }
  }
  .cal-choice {
    padding: 16px 18px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: transform var(--t-fast) var(--spring),
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
    line-height: 1.3;
  }
  .cal-choice:hover {
    background: var(--surface-2);
    border-color: var(--accent);
  }
  .cal-choice:active { transform: scale(0.985); }
  .cal-choice:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .cal-choice.is-selected {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
    border-color: var(--accent);
    color: var(--text-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .cal-choice--skip,
  .cal-choice--none {
    color: var(--text-3);
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
  }
  .cal-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-7) 0;
    color: var(--text-2);
  }
  .cal-done__art {
    width: 64px;
    height: 64px;
    color: var(--t-uber);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--t-uber) 50%, transparent));
  }
  .cal-done h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
  }
  .cal-done p {
    font-size: 14px;
    max-width: 380px;
    margin: 0;
  }
  .cal-error {
    text-align: center;
    padding: var(--sp-7) 0;
    color: var(--text-3);
  }
  .cal-error p { margin-bottom: var(--sp-4); }
  /* "Something else…" choice + custom text-input */
  .cal-choice--custom {
    color: var(--text-2);
    border-style: dashed;
  }
  .cal-question__custom {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
  }
  .cal-question__custom-label {
    font-size: 13px;
    color: var(--text-3);
    margin: 0 0 var(--sp-2);
  }
  .cal-question__custom-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
  }
  .cal-question__custom-input-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
  }
  .cal-question__custom-input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 15px;
  }
  .cal-question__custom-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  /* Typeahead dropdown — appears below the input as the operator types,
     filtered against the full store menu. Click or arrow-key + Enter to
     pick. Anything not in the list is still saved as a free-form label. */
  .cal-question__menu-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 50;
  }
  .cal-question__menu-list[hidden] {
    display: none !important;
  }
  .cal-question__menu-item {
    padding: 8px 12px;
    border-radius: var(--r-xs);
    color: var(--text-1);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }
  .cal-question__menu-item.is-highlighted,
  .cal-question__menu-item:hover {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
    color: var(--text-1);
  }
  /* Honor the HTML `hidden` attribute. Without these, the explicit
     display:flex above wins over the user-agent [hidden]{display:none},
     causing all states to render at once. */
  .cal-loading[hidden],
  .cal-question[hidden],
  .cal-done[hidden],
  .cal-error[hidden] {
    display: none !important;
  }

  /* Dashboard auto-prompt banner */
  .calib-prompt {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 14%, var(--surface-1)),
      var(--surface-1) 80%);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: var(--r-xl);
    margin-bottom: var(--sp-4);
    position: relative;
  }
  .calib-prompt__pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
    flex-shrink: 0;
    animation: cal-pulse 2s ease-in-out infinite;
  }
  .calib-prompt__body {
    flex: 1;
    min-width: 0;
  }
  .calib-prompt__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
  }
  .calib-prompt__sub {
    font-size: 12.5px;
    color: var(--text-3);
    margin: 2px 0 0;
  }
  .calib-prompt__cta {
    flex-shrink: 0;
  }
  .calib-prompt__dismiss {
    background: transparent;
    border: none;
    color: var(--text-4);
    font-size: 18px;
    line-height: 0;
    cursor: pointer;
    padding: 4px 8px;
  }
  .calib-prompt__dismiss:hover { color: var(--text-1); }
}

/* ---------- utilities ----------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================================
   Admin / Stores page — redesigned layout (2026-05-25)
   Sectioned form structure, store-list cards with status chips,
   inheriting consistent spacing tokens. Loaded after other
   component rules so it overrides any older selectors on this
   page. Reuses .field, .platform-check, .btn primitives.
   ============================================================ */
@layer components {
  /* ── Settings sections (group of fields under a clear heading) ── */
  .settings-section {
    padding: var(--sp-3) 0;
    border-top: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
  }
  .settings-section:first-child {
    border-top: none;
    padding-top: 0;
  }
  .settings-section__header {
    margin-bottom: var(--sp-2);
  }
  .settings-section__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .settings-section__sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
  }
  .settings-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  /* Sub-grouping inside a section (e.g. Gmail subsection inside
     Camera Intake) — visually nests but doesn't add another border. */
  .settings-sub {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 12px 14px;
    background: color-mix(in srgb, var(--text-1) 3%, transparent);
    border-radius: 10px;
  }
  .settings-sub__title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  /* Callout — used for the sibling-sync notice */
  .settings-callout {
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-1) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-1) 10%, transparent);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
  }
  .settings-callout strong { color: var(--text-1); }
  .settings-callout__siblings { color: var(--text-1); }

  /* ── Brand chips on the new-store form ─────────────────── */
  .brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
  }
  .brand-chip {
    border: 1px solid color-mix(in srgb, var(--text-1) 16%, transparent);
    background: color-mix(in srgb, var(--text-1) 6%, transparent);
    color: var(--text-1);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12.5px;
    cursor: pointer;
    line-height: 1.4;
    transition: background-color 0.12s ease;
  }
  .brand-chip:hover {
    background: color-mix(in srgb, var(--text-1) 12%, transparent);
  }
  .brand-chip__count {
    margin-left: 6px;
    color: var(--text-3);
    font-size: 11.5px;
  }

  /* ── Inherit-from-siblings list ─────────────────────────── */
  .inherit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  /* ── Status hint in field labels (green chip) ───────────── */
  .field__hint--ok {
    color: #7fd47a;
  }

  /* Monospace textarea (menu URLs) */
  .textarea--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
  }

  /* Multi-brand additional brands at same address */
  .platform-check__sub {
    opacity: 0.55;
    font-size: 11.5px;
    margin-left: 4px;
  }

  /* ── Store list (was .user-list — dedicated class so we can
     evolve the store page without touching the users page) ── */
  .store-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .store-list__item {
    border: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
    border-radius: 12px;
    background: var(--surface-1, #0a0a0a);
    overflow: hidden;
  }
  .store-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  .store-card__name-block {
    flex: 1 1 auto;
    min-width: 0;
  }
  .store-card__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
  }
  .store-card__meta {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.4;
  }
  .store-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .store-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-1) 8%, transparent);
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .store-chip--ok {
    background: color-mix(in srgb, #30D158 22%, transparent);
    color: #6FE08A;
  }
  .store-chip--neutral {
    color: var(--text-2);
  }
  .store-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Expandable Edit area */
  .store-card__details[open] {
    border-top: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
    background: color-mix(in srgb, var(--text-1) 2%, transparent);
  }
  .store-card__summary {
    cursor: pointer;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .store-card__summary::-webkit-details-marker { display: none; }
  .store-card__summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
    color: var(--text-3);
  }
  .store-card__details[open] .store-card__summary::before {
    transform: rotate(90deg);
  }
  .store-card__summary:hover {
    background: color-mix(in srgb, var(--text-1) 4%, transparent);
    color: var(--text-1);
  }
  .store-card__form {
    padding: var(--sp-3) 16px;
  }
  /* AI Library subsection lives outside the main edit form so it has
     its own padding once shown. */
  .settings-section--ai {
    padding: var(--sp-3) 16px;
    border-top: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
  }

  /* Count chip next to "All locations" title */
  .card__count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-1) 10%, transparent);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
  }

  /* Mobile tweaks — keep the store card readable on phones */
  @media (max-width: 560px) {
    .store-card__head {
      padding: 12px 14px;
    }
    .store-card__actions {
      width: 100%;
    }
    .store-card__form {
      padding: var(--sp-3) 14px;
    }
    .settings-sub {
      padding: 10px 12px;
    }
  }
}