/* ═══════════════════════════════════════════════════════════════════
   ordering-system.css — Duties tab strip + Ordering pane styles
   ═══════════════════════════════════════════════════════════════════
   Two surfaces:

   1. .duties-tabs / .duties-tab — the sub-view switcher at the top
      of the Duties view (inside #cleanView). Two tabs: Cleaning,
      Ordering. Gold-underline editorial style consistent with the
      equipment tab strip.

   2. Everything else (.ord-*) — the Ordering pane content: header
      with location pills, recent orders list, vendor list grouped by
      manager, search input.

   All colors use design-system tokens so light/dark themes follow.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── DUTIES TAB STRIP ──────────────────────────────────────────── */

.duties-tabs {
  display: flex;
  gap: 0;
  background: var(--nx-bg);
  border-bottom: 1px solid var(--nx-gold-line);
  padding: 0 16px;
  /* Sticky just below the masthead. The masthead is ~53px on mobile.
     If the masthead height ever changes, this anchor adjusts in
     concert with the .clean-header sticky logic the cleaning module
     already uses. z-index above clean-header so it doesn't disappear
     under it. */
  position: sticky;
  top: 0;
  z-index: 6;
}

.duties-tab {
  flex: 1 1 0;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* overlap the strip's own bottom border */
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}

.duties-tab:hover {
  color: var(--nx-text);
}

.duties-tab.active {
  color: var(--nx-gold);
  border-bottom-color: var(--nx-gold);
}

/* Hidden panes don't take up space — the parent uses [hidden] which
   sets display:none, but adding the rule here too prevents a brief
   flicker if a pane is rendered before the hidden attribute is read. */
.duties-pane[hidden] {
  display: none !important;
}


/* ─── ORDERING — HEADER ────────────────────────────────────────── */

.ord-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 8px;
  flex-wrap: wrap;
}

.ord-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--nx-faint);
  text-transform: uppercase;
}

/* Location picker — three small pills (Este / Toti / Suerte). The
   active one is gold-filled. Sits next to the title. */
/* ─── Location pill picker — the primary "profile selector".
   Tapping a pill switches the active restaurant: vendor email lists,
   per-location team names, recent orders, all swap to that location's
   profile. Bigger size + bolder treatment than a typical sub-filter
   reflects that this is an identity-level switch, not a filter. */
.ord-loc-picker {
  display: flex;
  gap: 4px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 4px;
}

.ord-loc-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-faint);
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ord-loc-btn:hover {
  color: var(--nx-text);
}

.ord-loc-btn.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  box-shadow: 0 0 0 1px var(--nx-gold), 0 0 14px rgba(212, 164, 78, 0.32);
}

[data-theme="light"] .ord-loc-btn.active {
  color: var(--surface);
}


/* ─── ORDERING — SECTION LABELS ────────────────────────────────── */

.ord-section-label,
.ord-vgroup-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 16px 8px;
}

.ord-section-label {
  color: var(--nx-faint);
}

.ord-vgroup-label {
  color: var(--nx-gold);
  padding: 14px 16px 6px;
}


/* ─── ORDERING — RECENT ORDERS ─────────────────────────────────── */

.ord-recent-row,
.ord-vendor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 28px);
  margin: 8px 14px;
  padding: 16px 18px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 22px;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}

/* Vendor cards specifically read taller and roomier — they're the
   primary navigation surface in the Ordering pane and benefit from
   weight that matches the rest of the editorial design language. */
.ord-vendor-row {
  padding: 20px 18px;
  min-height: 88px;
}

.ord-recent-row:hover,
.ord-vendor-row:hover {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

.ord-recent-row:active,
.ord-vendor-row:active {
  transform: scale(0.99);
}

.ord-recent-main,
.ord-vendor-main {
  flex: 1 1 auto;
  min-width: 0;
}

.ord-recent-vendor,
.ord-vendor-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ord-recent-meta,
.ord-vendor-meta {
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.1px;
}


/* ─── Recent-orders pagination controls ─────────────────────────────
   Three states: collapsed (3 + "show more"), expanded (10 + page nav),
   single-page (10 + just "show less"). All controls live INSIDE the
   #ordRecent container so they re-render with the row list. */

.ord-recent-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 4px 14px 8px;
  padding: 11px 16px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line);
  border-radius: 18px;
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--nx-press), border-color var(--nx-press), background var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ord-recent-more:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold-line-2);
  background: var(--nx-gold-mist);
}
.ord-recent-more:active {
  transform: scale(0.985);
}
.ord-recent-more-arrow {
  font-size: 14px;
  letter-spacing: 0;
}

.ord-recent-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 28px);
  margin: 4px 14px 8px;
  padding: 6px 4px;
}
.ord-recent-collapse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 6px 4px;
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ord-recent-collapse:hover { color: var(--nx-gold); }
.ord-recent-collapse-arrow { font-size: 14px; letter-spacing: 0; }

.ord-recent-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ord-recent-page-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--nx-gold-line);
  background: transparent;
  color: var(--nx-gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ord-recent-page-btn:hover:not(:disabled) {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold-line-2);
}
.ord-recent-page-btn:disabled {
  color: var(--nx-faintest);
  border-color: var(--nx-gold-line);
  cursor: not-allowed;
  opacity: 0.5;
}
.ord-recent-page-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  min-width: 40px;
  text-align: center;
}


/* Status pill inside a recent-order row — small inline tag */

.ord-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ord-status-draft {
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-gold);
}

.ord-status-sent {
  background: var(--nx-green-soft, rgba(63, 160, 143, 0.10));
  color: var(--nx-green, var(--green));
}

.ord-status-confirmed {
  /* Confirmed = vendor acknowledged. Slightly more saturated green
     than 'sent' so the eye reads it as "further along" in the flow. */
  background: rgba(91, 138, 76, 0.14);
  color: #5b8a4c;
  border: 1px solid rgba(91, 138, 76, 0.3);
}
[data-theme="light"] .ord-status-confirmed {
  background: rgba(75, 120, 60, 0.12);
  color: #4b7838;
}

.ord-status-delivered {
  /* Delivered = goods arrived. Calmer blue-green to contrast against
     the gold/green earlier states — feels resolved, not in progress. */
  background: rgba(76, 122, 138, 0.12);
  color: #4c7a8a;
  border: 1px solid rgba(76, 122, 138, 0.3);
}
[data-theme="light"] .ord-status-delivered {
  background: rgba(60, 102, 117, 0.1);
  color: #3c6675;
}

.ord-status-closed {
  /* Closed = archived. Most muted state; nothing left to do. */
  background: var(--nx-surface-2);
  color: var(--nx-faint);
  border: 1px solid var(--nx-gold-line);
}

.ord-status-cancelled {
  background: var(--nx-red-soft, var(--nx-red-soft));
  color: var(--nx-red, var(--red));
}


/* ─── ORDERING — VENDOR LIST ───────────────────────────────────── */

.ord-vendors-wrap {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  /* Bottom padding clears the bottom-nav so the last vendor is fully
     visible above the nav bar. */
}

.ord-vendors {
  /* Container — all rows live here, possibly with .ord-vgroup wrappers */
}

.ord-vgroup {
  /* No special styling — just a wrapper for hide/show during search */
}

.ord-vendor-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nx-amber-soft, var(--nx-gold-soft));
  color: var(--nx-amber, var(--accent));
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--nx-gold-line);
}

.ord-arrow {
  color: var(--nx-faint);
  font-size: 18px;
  flex-shrink: 0;
}


/* ─── ORDERING — SEARCH ─────────────────────────────────────────── */

.ord-search-wrap {
  padding: 0 16px 4px;
}

.ord-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
}

.ord-search:focus {
  outline: none;
  border-color: var(--nx-gold);
}

.ord-search::placeholder {
  color: var(--nx-faint);
}


/* ─── ORDERING — EMPTY STATE ───────────────────────────────────── */

.ord-empty {
  margin: 4px 16px;
  padding: 16px;
  background: var(--nx-surface-1);
  border: 1px dashed var(--nx-gold-line);
  border-radius: 16px;
  color: var(--nx-faint);
  font-size: 13px;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   ORDER ENTRY OVERLAY
   ═══════════════════════════════════════════════════════════════════
   Full-screen modal that opens when the user taps a vendor. Two view
   modes: item entry (default) and cart review (after Review tap). A
   single overlay container — content swaps between the two states.
   ═══════════════════════════════════════════════════════════════════ */

.ord-entry-overlay {
  position: fixed;
  /* v18.16 — full takeover: overlay covers entire viewport including
     the masthead area. The user reported only being able to see ~2
     items at a time because the masthead + bottom-nav + entry header
     ate too much vertical space. Hiding the masthead during entry
     mode gives back ~60px of list real estate. The overlay's own
     header contains the X close button + vendor name + add-item, so
     the masthead's hamburger menu / day-time / persona coin aren't
     needed during ordering. Safe-area padding handles iPhone notch. */
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  /* Extends to viewport bottom because the bottom-nav is hidden via
     body.ord-overlay-open. Safe-area padding is taken internally by
     the CTA wrap so the Send button sits above the home indicator. */
  bottom: 0;
  z-index: 60;          /* above masthead (z:50) so it cleanly covers */
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ordOverlayIn .18s ease-out;
  /* Disable double-tap zoom across the entire ordering overlay. Users
     interact rapidly with item rows (tap to +1, etc.); double-tap zoom
     was firing on adjacent taps and zooming the page accidentally.
     `manipulation` keeps tap + pan + pinch-zoom; drops double-tap zoom
     and the 300ms tap delay. */
  touch-action: manipulation;
}
@keyframes ordOverlayIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lock body scroll when overlay open */
body.ord-overlay-open { overflow: hidden; }

/* Hide the bottom-nav AND the masthead during overlay mode for full
   screen takeover. Previous attempts kept the masthead visible (top:
   var(--nx-mast-h)) but the user reported they could only see ~2
   items at a time. Hiding both nav bars gives the order list the
   full viewport. The overlay's own X close button + Send CTA cover
   all navigation needs while ordering. */
body.ord-overlay-open .bottom-nav,
body.ord-overlay-open .nav {
  display: none;
}

/* Also apply manipulation touch-action to the vendor editor and
   vendor detail overlays so the double-tap-zoom kill is consistent
   across the entire ordering surface. */
.ord-veditor-overlay,
.ord-vdetail-overlay,
#dutiesOrderingPane {
  touch-action: manipulation;
}

.ord-entry-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ─── Header ───────────────────────────────────────────────────── */

.ord-entry-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  background: var(--nx-bg);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}

.ord-entry-close {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ord-entry-close:hover,
.ord-entry-close:active {
  border-color: var(--nx-gold);
  background: var(--nx-gold-soft);
  color: var(--nx-gold);
}
.ord-entry-close:active { transform: scale(0.92); }

.ord-entry-title {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-entry-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.ord-entry-vendor {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-entry-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: var(--nx-faint);
  text-transform: uppercase;
  margin-top: 3px;
}
.ord-entry-spacer {
  width: 38px;
  flex-shrink: 0;
}

/* ─── Meta row (delivery date) ─────────────────────────────────── */

.ord-entry-meta {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-bg);
  flex-shrink: 0;
}

.ord-meta-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ord-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.ord-meta-field input[type="date"] {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  padding: 8px 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s;
}
.ord-meta-field input[type="date"]:focus {
  outline: none;
  border-color: var(--nx-gold);
  background: var(--nx-bg);
}

/* ─── Search ───────────────────────────────────────────────────── */

.ord-entry-search-wrap {
  position: relative;
  padding: 10px 16px;
  background: var(--nx-bg);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.ord-entry-search-wrap::before {
  /* Inline search-glass icon as data URI so we don't have to thread an
     SVG into the JS for every render. Positioned absolute inside the
     padded wrap. Color fixed mid-tone gold so it reads on both bg
     surfaces without theme overrides. */
  content: '';
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857f75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
  pointer-events: none;
  opacity: 0.7;
}

.ord-entry-search {
  width: 100%;
  padding: 10px 14px 10px 36px;     /* extra left padding for the icon */
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s;
}
.ord-entry-search:focus {
  outline: none;
  border-color: var(--nx-gold);
  background: var(--nx-bg);
}
.ord-entry-search::placeholder { color: var(--nx-faint); }

/* ─── Item list ────────────────────────────────────────────────── */

.ord-entry-list {
  flex: 1 1 auto;
  overflow-y: auto;
  /* v18.27 — iOS no-rogue-h-scroll. .ord-entry-overlay already has
     overflow:hidden so the page can't scroll horizontally, but if a
     descendant overflows the list's own scroll container can pick it
     up and show a horizontal scrollbar inside. Explicit overflow-x
     hidden keeps everything pinned to the viewport width. */
  overflow-x: hidden;
  /* v18.28 (round 2) — bottom padding clears the floating CTA. Prior
     96px wasn't enough on iPhones with home-indicator safe area (button
     height 54 + wrap padding 14 + safe-area ~34 ≈ 102px). Bumped to
     120 + safe area so the last item never gets clipped. Applied also
     to .ord-review-body so the notes textarea on the review screen
     isn't covered by the Send Order CTA. */
  padding: 12px 12px calc(120px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
/* v294 — cap the reading width on wide/desktop screens so the list stops
   spanning the whole monitor and reads as a tidy centered column. Full
   width still on phones (the max-width simply never binds there). */
.ord-entry-list > * {
  max-width: 780px;
  margin-inline: auto;
}

/* ─── Section card (matches catalog aesthetic) ────────────────────────
   Each section is a bordered card with a gold-tinted header bar. The
   header shows: name (bold), count chip, collapse chevron. Items live
   inside the card with a 1px hairline between them. This mirrors the
   catalog editor in Image 2 — same visual language, different content
   (quantity steppers instead of edit chevrons). */
.ord-entry-section {
  background: var(--nx-surface, var(--surface));
  border: 1px solid var(--nx-gold-line, var(--border));
  border-radius: 16px;                                          /* matches catalog .ved-section-block */
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.ord-entry-section:last-child {
  margin-bottom: 0;
}

.ord-entry-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  /* Flat gold-tint matches catalog editor's section-row treatment.
     The previous gradient (gold-soft → transparent) read fine in
     isolation but didn't tie visually with the catalog editor — when
     flipping between catalog → ordering the section heads looked like
     two different design systems. Flat tint is consistent + softer. */
  background: var(--nx-gold-faint, var(--elevated));
  border-bottom: 1px solid var(--nx-gold-line, var(--border));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background .15s ease;
}
.ord-entry-section-head:active {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

.ord-entry-section-name {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* v280 — sections are wayfinding, not action; they don't get the
     accent voice. Muted reads calmer and makes the few remaining gold
     marks (set-row bar, CTA) actually stand out. */
  color: var(--nx-muted, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ord-entry-section-count {
  flex-shrink: 0;
  min-width: 24px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v280 — neutral pill (was gold-on-gold); a count is information,
     not a call to action. */
  background: var(--nx-surface-1, var(--elevated));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nx-muted, var(--muted));
}

.ord-entry-section-collapse {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--nx-faint, var(--muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, color .15s ease, background .15s ease;
}
.ord-entry-section-collapse:hover {
  color: var(--nx-gold, var(--accent));
  background: var(--nx-bg, var(--bg));
}
.ord-entry-section.is-collapsed .ord-entry-section-collapse {
  transform: rotate(-90deg);
}
.ord-entry-section.is-collapsed .ord-entry-section-items {
  display: none;
}

.ord-entry-section-items {
  /* Items inside a section card. The first item shouldn't have a top
     border (the card header provides the separation). */
}

/* The old flat label is no longer rendered, but keep its rule out of the
   cascade — strip its sticky positioning so if it ever appears it doesn't
   break the new layout. */
.ord-entry-section-label {
  display: none;
}

.ord-item-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;   /* v294 — tightened from 14px 16px so rows read denser */
  border-bottom: 1px solid var(--nx-gold-line);
  background: transparent;
  transition: background .18s;
}
/* Last row in section sheds the bottom border so it sits flush with the
   card's rounded corner. */
.ord-entry-section .ord-item-row:last-child {
  border-bottom: none;
}
.ord-item-row.has-qty {
  /* v280 — the row-wide gold wash stacked with the (then-solid) gold
     stepper into a wall of yellow. The 3px left bar alone marks a set
     row perfectly well; the background stays quiet. */
  background: transparent;
  box-shadow: inset 3px 0 0 0 var(--nx-gold);
}
.ord-item-row.is-disabled {
  opacity: 0.45;
  background: var(--nx-bg);
}

.ord-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-item-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  /* v18.28 — single line. Truncation only kicks in for extremely long
     names; most ("BLACK TRASH BAGS", "DEGREASER SPRAY BOTTLE", etc.)
     fit fully after the right-column tightening below. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.ord-item-meta {
  /* v18.28 (polish) — was wrapping to 3-4 lines because vendor codes
     like "CAN LINER 56 GA XHW BLK 43X47 · SKU 194628 · FRST MRK" are
     just naturally long. The wrap made each row feel like a data dump
     and inflated row height by ~40px. Single line with ellipsis. If
     the chef needs to verify a SKU mid-order, the full meta still
     shows in the review screen and on the item detail. */
  font-size: 10.5px;
  color: var(--nx-faint);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Quantity control — pill-shaped, three segments: -, input, + */
.ord-qty {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  background: var(--nx-surface-1);
  overflow: hidden;
  transition: border-color .15s;
}
.ord-item-row.has-qty .ord-qty {
  /* v280 — the v18.28 solid gold-gradient fill made every set row a
     glowing yellow blob; four set items + the gold CTA and the screen
     read as "all yellow" (Alfredo, by screenshot). A set item now says
     so quietly: gold border, whisper of gold behind, the NUMBER in gold.
     One screen, one loud gold thing — the Send button. */
  border-color: var(--nx-gold);
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.10));
  box-shadow: none;
}
.ord-item-row.has-qty .ord-qty-btn {
  color: var(--nx-text);
  font-weight: 600;
}
.ord-item-row.has-qty .ord-qty-btn:hover {
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.16));
  color: var(--nx-gold);
}
.ord-item-row.has-qty .ord-qty-btn:active {
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.24));
}
.ord-item-row.has-qty .ord-qty-input {
  color: var(--nx-gold);
  font-weight: 700;
  border-left-color: var(--nx-gold-line);
  border-right-color: var(--nx-gold-line);
}
.ord-item-row.has-qty .ord-qty-input:focus {
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.12));
}
.ord-qty-btn {
  /* v18.28 (round 2) — shrunk from 32→28px wide. The 34px height keeps
     the tap target at iOS minimum (44px is for square targets; tall-thin
     buttons remain comfortable). Saves 8px total from the qty pill. */
  width: 28px;
  height: 34px;
  background: transparent;
  border: none;
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.ord-qty-btn:hover {
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-gold);
}
.ord-qty-btn:active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
}
.ord-qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.ord-qty-input {
  /* v18.28 (round 2) — shrunk 38→32px. Still fits 2 digits with breathing
     room; restaurants very rarely order 100+ of a single item per cycle. */
  width: 32px;
  height: 34px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  border-left: 1px solid var(--nx-gold-line);
  border-right: 1px solid var(--nx-gold-line);
}
.ord-qty-input::-webkit-outer-spin-button,
.ord-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ord-qty-input:focus {
  outline: none;
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}
/* (Older .has-qty rules for the input — color: gold — removed in v18.28
   polish. They conflicted with the new dark-on-gold treatment above
   that applies when the entire pill fills with the gold gradient.) */

.ord-item-unit {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--nx-faint);
  text-transform: uppercase;
  width: 26px;
  text-align: center;
}

/* ─── Sticky bottom CTA ────────────────────────────────────────── */

.ord-entry-cta-wrap {
  flex-shrink: 0;
  /* v18.28 — was a docked toolbar with a solid background and a
     top border. Orion's note: "the black box stays" when the
     button hides. Reworked as a true floating layer:
       • No background, no border — fully transparent wrapper
       • position: absolute over the bottom of the overlay so it
         doesn't reserve layout space (full width for item rows)
       • The button itself carries the shadow for elevation
     When .is-hidden slides the wrap down, nothing visual lingers. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: none;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;          /* allow taps to pass through wrap */
  z-index: 5;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  will-change: transform;
}
.ord-entry-cta-wrap > * { pointer-events: auto; }   /* but the button itself catches */

.ord-entry-cta-wrap.is-hidden {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.ord-entry-cta {
  width: 100%;
  height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-gold-on, #101626);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  /* v18.28 — beefier shadow now that the button is floating without a
     toolbar to anchor it. The shadow gives the elevation cue that
     this is an above-the-page primary action. */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 2px 8px var(--nx-gold-soft, rgba(212, 164, 78, 0.35)),
    0 0 0 1px rgba(212, 164, 78, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s, opacity .15s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.ord-entry-cta:active { transform: scale(0.985); }
.ord-entry-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
[data-theme="light"] .ord-entry-cta { color: var(--surface); }

.ord-entry-save-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--nx-faint);
  letter-spacing: 0.3px;
  text-align: center;
  height: 14px;
}

/* ─── Discard draft button ──────────────────────────────────────────
   Quiet text-only ghost button below the save status, well clear of
   the primary "Review & Send" CTA so the user has to deliberately
   reach for it. Color shifts to danger-red on hover/press to confirm
   the destructive nature.
   ─────────────────────────────────────────────────────────────────── */
.ord-entry-discard {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-entry-discard:hover,
.ord-entry-discard:active,
.ord-entry-discard:focus-visible {
  color: var(--nx-danger, #d04a4a);
  border-color: var(--nx-danger-line, color-mix(in srgb, var(--nx-danger, #d04a4a) 35%, transparent));
  background: color-mix(in srgb, var(--nx-danger, #d04a4a) 8%, transparent);
}
.ord-entry-discard:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ord-entry-discard svg { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════
   CART REVIEW
   ═══════════════════════════════════════════════════════════════════ */

.ord-review-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* v18.28 — bottom padding mirrors .ord-entry-list. Without it the
     Notes textarea at the bottom of the review screen sits behind the
     floating "Send Order" button when the user has scrolled to it. */
  padding: 8px 0 calc(120px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.ord-review-section {
  padding: 8px 16px 12px;
}

/* Recipient section */
.ord-recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
}
.ord-recipient-email {
  flex: 1 1 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--nx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-recipient-edit {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--nx-faint);
  font-size: 11px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ord-recipient-edit:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}

.ord-recipient-missing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--nx-amber-soft, var(--nx-gold-faint));
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
}
.ord-recipient-warn {
  font-size: 12px;
  color: var(--nx-amber, var(--accent));
  font-family: 'Outfit', sans-serif;
}
.ord-recipient-input {
  flex: 1 1 auto;
  padding: 9px 12px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.ord-recipient-input:focus {
  outline: none;
  border-color: var(--nx-gold);
}
.ord-recipient-save {
  align-self: flex-end;
  padding: 7px 14px;
  background: var(--nx-gold);
  border: none;
  border-radius: 999px;
  color: var(--nx-gold-on, #101626);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
[data-theme="light"] .ord-recipient-save { color: var(--surface); }

/* Subject preview */
.ord-subject-preview {
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--nx-text);
  word-break: break-word;
}

/* Review line list */
.ord-review-section-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--nx-gold);
  text-transform: uppercase;
  padding: 10px 0 4px;
}

.ord-review-line {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--nx-gold-line);
}
.ord-review-line:last-child { border-bottom: none; }

.ord-review-qty {
  flex-shrink: 0;
  width: 64px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--nx-gold);
  letter-spacing: 0.3px;
}
.ord-review-name {
  flex: 1 1 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--nx-text);
}
.ord-review-sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--nx-faint);
  margin-left: 6px;
}

/* Notes */
.ord-notes-input {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-appearance: none;
  appearance: none;
}
.ord-notes-input:focus {
  outline: none;
  border-color: var(--nx-gold);
}
.ord-notes-input::placeholder { color: var(--nx-faint); }

/* Send CTA — same as Review CTA but always visible */
.ord-send-cta {
  /* Inherits .ord-entry-cta styles */
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE B — VENDOR + ITEM EDITOR
   ═══════════════════════════════════════════════════════════════════
   Two new UX surfaces:

   • .ord-section-label-with-action  — header row with "+ Add" affordance
   • .ord-vendor-row-wrap            — vendor row + edit-pencil pair
   • .ord-veditor-overlay            — full-screen vendor editor
   • .ord-vitem-row / .ord-vitem-editing — items list (read / inline edit)

   Same theming constraints as the rest of this file: tokens flip via
   data-theme="light" overrides defined in nx-system.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Section label with inline action (Vendors / + Add) ──────── */

.ord-section-label-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.ord-section-label-with-action > span:first-child {
  /* Inherits .ord-section-label visual */
}
.ord-add-vendor-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-add-vendor-btn:hover {
  background: var(--nx-gold);
  color: var(--nx-gold-on);
  border-color: var(--nx-gold);
}
[data-theme="light"] .ord-add-vendor-btn:hover { color: var(--surface); }

/* ─── Vendor row + edit pencil pair ─────────────────────────────── */

.ord-vendor-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 4px 16px;
}
.ord-vendor-row-wrap .ord-vendor-row {
  flex: 1 1 auto;
  margin: 0;                  /* override default ord-vendor-row margin */
  width: auto;                /* override default 100%-32px width */
}
.ord-vendor-menu {
  /* Subtle ⋮ overflow button — minimal so it doesn't compete with the
     vendor name. Just ghosts in the corner; the row itself is the
     primary tap target (opens order entry). */
  flex-shrink: 0;
  width: 40px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--nx-faint);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vendor-menu:hover,
.ord-vendor-menu:active {
  color: var(--nx-gold);
  border-color: var(--nx-gold-line);
  background: var(--nx-gold-soft);
}

/* ─── Vendor Editor Overlay ─────────────────────────────────────── */

.ord-veditor-overlay {
  position: fixed;
  /* Covers the masthead too — the underlying view (vendor list) was
     bleeding through above the overlay because top was offset by the
     masthead height. Full-bleed instead, with safe-area-inset-top
     padding on the head so the close button isn't behind the iOS
     status bar / browser chrome. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ordOverlayIn .18s ease-out;
}

.ord-veditor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(12px, calc(env(safe-area-inset-top, 0) + 6px)) 14px 12px;
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.ord-veditor-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-veditor-close:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-soft);
}
.ord-veditor-title {
  flex: 1 1 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}
.ord-veditor-spacer {
  width: 40px;
  flex-shrink: 0;
}

.ord-veditor-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* More breathing room — content was crammed at 16/16. */
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ord-veditor-foot {
  display: flex;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.ord-veditor-cancel,
.ord-veditor-save {
  flex: 1 1 0;
  height: 44px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-veditor-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
}
.ord-veditor-cancel:hover {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}
.ord-veditor-save {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: none;
  color: var(--nx-gold-on, #101626);
  box-shadow: var(--nx-shadow-pill, 0 2px 10px var(--nx-gold-soft));
}
[data-theme="light"] .ord-veditor-save { color: var(--surface); }
.ord-veditor-save:active { transform: scale(0.985); }

/* ─── Form fields (shared by vendor editor + item editor) ───────── */

.ord-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ord-form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.ord-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ord-form-label-count {
  color: var(--nx-gold);
  margin-left: 4px;
}
.ord-form-label-hint {
  /* Inline secondary text inside a label — for "Logo URL — optional" style.
     Lower weight, normal-case, lower-letterspacing so it reads as
     a parenthetical rather than part of the field name. */
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-faintest);
  margin-left: 4px;
}

/* ─── Vendor editor head — avatar preview alongside name/email ─────
   Lays out a 56px avatar preview on the left and the two primary
   identity fields (name + email) stacked on the right. Updates live
   when the user types. */
.ved-vendor-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ved-avatar-preview {
  flex-shrink: 0;
  margin-top: 4px;   /* roughly aligns with the first field's input top */
}
.ved-avatar-preview .ord-vendor-avatar {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

/* Tappable avatar button — wraps the preview circle and adds a small
   camera badge in the corner so people see it as an upload affordance.
   No background, no border on the button itself; the circle inside
   provides all the visual weight. */
.ved-avatar-btn {
  position: relative;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;       /* same top-align as the bare preview */
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: transform .12s ease;
}
.ved-avatar-btn:active { transform: scale(0.96); }
.ved-avatar-btn .ved-avatar-preview { margin-top: 0; }
.ved-avatar-btn .ord-vendor-avatar {
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.ved-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nx-gold);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nx-surface-1);
  pointer-events: none;
}
.ved-avatar-badge svg {
  width: 12px;
  height: 12px;
  margin: 0 !important;   /* override the inline margin in cameraIcon() */
}

/* Photo action row — paired Upload / Remove buttons sit under the
   "Photo" label. Equal weight, gold-tinted Upload, transparent
   Remove. Stacked on narrow screens. */
.ved-photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ved-photo-action-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--nx-gold-soft, var(--nx-gold-faint));
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  border-radius: var(--nx-radius-card);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.ved-photo-action-btn:active { transform: scale(0.98); }
.ved-photo-action-btn:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.ved-photo-action-btn.ved-photo-action-clear {
  background: transparent;
  color: var(--nx-faint);
}
.ved-photo-action-btn.ved-photo-action-clear:hover {
  background: var(--nx-surface-2);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.ved-vendor-head-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ord-form-input,
.ord-form-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s;
}
.ord-form-input:focus,
.ord-form-textarea:focus {
  outline: none;
  border-color: var(--nx-gold);
  background: var(--nx-bg);
}
.ord-form-input::placeholder,
.ord-form-textarea::placeholder {
  color: var(--nx-faint);
}
.ord-form-textarea {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
}
.ord-form-hint {
  font-size: 10.5px;
  color: var(--nx-faint);
  line-height: 1.4;
  padding-top: 2px;
}
.ord-form-hint code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: var(--nx-gold-soft);
  color: var(--nx-gold);
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 1px;
}
.ord-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ─── Pack/Size + Default par stacked rows ──────────────────────────
   Pack lives on its own row (label + 3 horizontal inputs). Default
   par sits below as its own row with a narrow input — left-aligned
   so the label sits next to it cleanly without floating right.
   ─────────────────────────────────────────────────────────────────── */
.ord-form-pack-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ord-form-input--mini {
  width: 50px;
  flex: 0 0 50px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.ord-form-pack-x {
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  flex: 0 0 auto;
  user-select: none;
}
.ord-form-input--unit {
  flex: 1 1 auto;
  min-width: 60px;
  /* Native select arrow on mobile keeps the affordance obvious — we
     don't override appearance here so the OS picker is friendly. */
}
.ord-form-input--unit-custom {
  margin-top: 6px;
}
.ord-form-input--par {
  /* maxlength=3 + small width — keeps pars readable without a 5-digit
     accidental input that triggers visual alarm bells. */
  width: 90px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.ord-form-field--par-row .ord-form-label {
  /* Label sits above a small input — nothing wider than 90px below
     it, so the label matches the natural stacked-row spacing of the
     rest of the form. */
}

/* ─── Day-of-week toggle pills (delivery_days) ──────────────────── */

.ord-day-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ord-day-pill {
  flex: 1 1 0;
  min-width: 38px;
  padding: 8px 4px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-day-pill:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
.ord-day-pill.active {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
}
[data-theme="light"] .ord-day-pill.active { color: var(--surface); }

/* ─── Day-of-week pars (per-item, with input fields) ───────────── */

.ord-day-pars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ord-day-par {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ord-day-par > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.ord-day-par > input {
  width: 100%;
  height: 32px;
  text-align: center;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 10px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
.ord-day-par > input::-webkit-outer-spin-button,
.ord-day-par > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ord-day-par > input:focus {
  outline: none;
  border-color: var(--nx-gold);
}

/* ─── Items section in vendor editor ────────────────────────────── */

.ord-veditor-items-section {
  border-top: 1px solid var(--nx-gold-line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ord-veditor-add-item-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--nx-gold-soft);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}
.ord-veditor-add-item-btn:hover {
  background: var(--nx-gold);
  color: var(--nx-gold-on);
}
[data-theme="light"] .ord-veditor-add-item-btn:hover { color: var(--surface); }

.ord-veditor-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ord-vitem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vitem-row:not(.ord-vitem-editing):hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-soft);
}
.ord-vitem-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-vitem-name {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--nx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-vitem-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--nx-faint);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.ord-vitem-edit-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--nx-faint);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vitem-edit-btn:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold-line);
  background: var(--nx-gold-soft);
}

/* Inline edit mode — row expands into a form */
.ord-vitem-editing {
  display: block;
  cursor: default;
  padding: 16px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold);
  box-shadow: var(--nx-shadow-pill, 0 2px 10px var(--nx-gold-soft));
  /* v363 — smooth entrance so opening an item doesn't pop the list. */
  animation: vedEditIn .26s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: top center;
}
@keyframes vedEditIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.ord-vitem-editing .ord-form-field {
  margin-bottom: 12px;
}
.ord-vitem-editing .ord-form-row-2 {
  margin-bottom: 12px;
}
.ord-vitem-editing .ord-form-row-2 .ord-form-field {
  margin-bottom: 0;
}

.ord-vitem-edit-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.ord-vitem-cancel-btn,
.ord-vitem-save-btn,
.ord-vitem-delete-btn {
  height: 38px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vitem-cancel-btn {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
}
.ord-vitem-cancel-btn:hover {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}
.ord-vitem-save-btn {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: none;
  color: var(--nx-gold-on, #101626);
}
[data-theme="light"] .ord-vitem-save-btn { color: var(--surface); }
.ord-vitem-delete-btn {
  background: transparent;
  border: 1px solid var(--nx-red, var(--red));
  color: var(--nx-red, var(--red));
  padding: 0 10px;
}
.ord-vitem-delete-btn:hover {
  background: var(--nx-red, var(--red));
  color: var(--nx-bg);
}

/* ─── Archive vendor button ─────────────────────────────────────── */

.ord-veditor-archive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--nx-red, var(--red));
  border-radius: 999px;
  color: var(--nx-red, var(--red));
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-veditor-archive-btn:hover {
  background: var(--nx-red, var(--red));
  color: var(--nx-bg);
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE D — POLISH
   ═══════════════════════════════════════════════════════════════════
   • Vendor row ⋮ overflow menu (bottom sheet)
   • Section dividers in the vendor editor
   • Polished editor header (title + email subtitle + item-count chip)
   • Prominent Add Item button
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Bottom-sheet menu (⋮ on vendor row) ──────────────────────── */

.ord-vmenu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;                /* above masthead so menu can sit on top */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: vmenuFadeIn .15s ease-out;
}
@keyframes vmenuFadeIn { from { opacity: 0 } to { opacity: 1 } }

.ord-vmenu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[data-theme="light"] .ord-vmenu-backdrop {
  background: rgba(70, 60, 40, 0.42);
}

.ord-vmenu-sheet {
  position: relative;
  background: var(--nx-bg);
  border-top: 1px solid var(--nx-gold-line);
  border-radius: 16px 16px 0 0;
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: vmenuSlideIn .22s cubic-bezier(.2, 0, .2, 1);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .ord-vmenu-sheet {
  box-shadow: 0 -8px 24px rgba(60, 50, 30, 0.15);
}
@keyframes vmenuSlideIn {
  from { transform: translateY(100%) }
  to   { transform: translateY(0) }
}

.ord-vmenu-handle {
  width: 36px;
  height: 4px;
  background: var(--nx-gold-line-2, var(--nx-gold-line));
  border-radius: 2px;
  align-self: center;
  margin-bottom: 6px;
}

.ord-vmenu-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  text-align: center;
  padding: 4px 8px 0;
}

.ord-vmenu-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--nx-faint);
  text-align: center;
  padding-bottom: 8px;
  letter-spacing: 0.3px;
}
.ord-vmenu-sub-warn {
  color: var(--nx-amber, var(--accent));
}

.ord-vmenu-divider {
  height: 1px;
  background: var(--nx-gold-line);
  margin: 4px 0 6px;
}

.ord-vmenu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vmenu-item > svg {
  margin: 0;
  flex-shrink: 0;
  color: var(--nx-gold);
}
.ord-vmenu-item:hover,
.ord-vmenu-item:active {
  background: var(--nx-gold-soft);
  border-color: var(--nx-gold);
}
.ord-vmenu-item.ord-vmenu-danger {
  color: var(--nx-red, #c95a5a);
}
.ord-vmenu-item.ord-vmenu-danger > svg {
  color: var(--nx-red, #c95a5a);
}
.ord-vmenu-item.ord-vmenu-danger:hover,
.ord-vmenu-item.ord-vmenu-danger:active {
  background: rgba(200, 70, 70, 0.12);
  border-color: var(--nx-red, #c95a5a);
}

.ord-vmenu-cancel {
  margin-top: 8px;
  padding: 13px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ord-vmenu-cancel:hover {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}

/* ─── Vendor editor — section dividers ──────────────────────────── */

.ved-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 -2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-gold);
}
.ved-section-divider:first-child { margin-top: 0; }
.ved-section-divider > span {
  flex-shrink: 0;
}
.ved-section-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right,
    var(--nx-gold-line-2, var(--nx-gold-line)) 0%,
    var(--nx-gold-line) 60%,
    transparent 100%);
}
.ved-section-divider-danger {
  color: var(--nx-red, #c95a5a);
}
.ved-section-divider-danger::after {
  background: linear-gradient(to right,
    rgba(200, 70, 70, 0.4) 0%,
    rgba(200, 70, 70, 0.18) 60%,
    transparent 100%);
}

/* ─── Vendor editor — header polish ─────────────────────────────── */

.ord-veditor-title-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}
.ord-veditor-title {
  /* Override the centered alignment we set earlier — title block
     centers everything. */
  text-align: center;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-veditor-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: 0.3px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-veditor-subtitle-warn {
  color: var(--nx-amber, var(--accent));
}

.ord-veditor-count-chip {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  background: var(--nx-gold-soft);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-gold);
  line-height: 1;
}
.ord-veditor-count-chip > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.85;
}

/* ─── Vendor editor — Add Item promotion ────────────────────────── */

/* Bigger, more prominent "Add item" button. Full-width inside the
   items section, gold-tinted background, plus icon + label. Replaces
   the tiny outlined version. */
.ord-veditor-add-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  margin: 6px 0 10px;
  background: var(--nx-gold-soft);
  border: 1px dashed var(--nx-gold);
  border-radius: 16px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ord-veditor-add-item-btn:hover {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-style: solid;
}
[data-theme="light"] .ord-veditor-add-item-btn:hover { color: var(--surface); }
.ord-veditor-add-item-btn:active { transform: scale(0.985); }

/* Reset the styling on the items-section wrapper that used to host the
   inline header — sections now stand alone with their dividers. */
.ord-veditor-items-section {
  border-top: none;
  padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE E — MASTHEAD SYNC + QUICK-ADD ITEM
   ═══════════════════════════════════════════════════════════════════
   Adds:
   • .ord-entry-add — the + button in the order entry header that opens
     a quick-add modal so the chef can add a missing item to the
     catalog without leaving the order they're working on.
   • .ord-qadd-* — the modal itself (centered card, not full-screen
     because the user is mid-order — keeps the entry visually intact
     behind a scrim).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Entry-header "+ Add item" button ──────────────────────────── */

.ord-entry-add {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nx-gold-soft);
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ord-entry-add:hover,
.ord-entry-add:active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
}
[data-theme="light"] .ord-entry-add:hover,
[data-theme="light"] .ord-entry-add:active { color: var(--surface); }
.ord-entry-add:active { transform: scale(0.92); }
.ord-entry-add svg {
  /* Bumped from 18→20px and overriding the inline 14px the SVG ships
     with. The icon felt small + faint inside the 40px circle; bigger
     glyph reads as a proper button affordance. */
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  stroke-width: 2.4;
}

/* ─── Quick-add modal (centered card with scrim) ────────────────── */

.ord-qadd-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;          /* above entry overlay (z=40), below bottom-sheet menu (z=80) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vmenuFadeIn .15s ease-out;
}

.ord-qadd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
[data-theme="light"] .ord-qadd-backdrop {
  background: rgba(70, 60, 40, 0.45);
}

.ord-qadd-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 100px);
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  animation: qaddPop .22s cubic-bezier(.2, 0, .2, 1);
}
[data-theme="light"] .ord-qadd-card {
  box-shadow: 0 16px 48px rgba(60, 50, 30, 0.18);
}
@keyframes qaddPop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ord-qadd-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--nx-gold-line);
  text-align: center;
}
.ord-qadd-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.2px;
}
.ord-qadd-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.ord-qadd-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ord-qadd-foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--nx-gold-line);
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE G — VENDOR EDITOR ITEMS RESKIN
   ═══════════════════════════════════════════════════════════════════
   Inspirations:
   • Linear — clean tappable rows with monospace numbers and hover bg
   • Notion — friendly empty state with icon + message
   • Stripe — primary action buttons that feel substantial
   • GitHub — section "card" container that elevates the catalog area

   The catalog now lives directly under the Vendor section (Name +
   Email), promoted from "below the fold" to the primary content. The
   advanced settings (delivery days, email composition, internal
   notes) sit below the catalog as configure-once-then-leave-it
   secondary content.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Section divider — count badge variant ─────────────────────── */

.ved-section-divider-count {
  /* Sits inline with the section title, before the trailing rule.
     Visually a small mono pill that calls out the row count without
     fighting the section label for attention. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-left: -4px;            /* tighter to the label text */
}
[data-theme="light"] .ved-section-divider-count { color: var(--surface); }

/* ─── Items "card" — the elevated container ─────────────────────── */

.ved-items-card {
  /* Box that gives the catalog area visual weight against the form
     fields above and below. Subtle gold-tinted bg + border so it
     reads as a dedicated work area, not just another form section. */
  position: relative;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ved-items-card-disabled {
  opacity: 0.6;
  background: transparent;
  border-style: dashed;
}

/* ─── Primary "Add item" button — substantial, unmissable ──────── */

.ved-add-item-primary {
  /* Big primary CTA, not the previous dashed-outline. This is the
     hero action of the editor when the chef is on the catalog tab.
     Scales down on press for tactile feedback. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: none;
  border-radius: 15px;
  color: var(--nx-gold-on, #101626);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--nx-shadow-pill, 0 2px 10px var(--nx-gold-soft));
  transition: transform .1s, box-shadow .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .ved-add-item-primary { color: var(--surface); }
.ved-add-item-primary:hover { filter: brightness(1.05); }
.ved-add-item-primary:active { transform: scale(0.98); }
.ved-add-item-primary svg {
  width: 16px;
  height: 16px;
  margin-right: 0;
}

/* ─── Items list ─────────────────────────────────────────────────── */

.ved-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;   /* v363 — more breathing room between item cards (was 4px) */
}

/* ─── Item row — Linear-style: row IS the action ────────────────── */

.ved-item-row {
  /* Whole row is a button — no separate edit pencil. Tap anywhere on
     the row to enter edit mode. Subtle hover bg, gold accent on
     active. Numbers in meta line are monospace for visual alignment. */
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.ved-item-row:hover {
  background: var(--nx-bg);
  border-color: var(--nx-gold-line);
}
.ved-item-row:active {
  background: var(--nx-gold-soft);
  border-color: var(--nx-gold);
  transform: scale(0.997);
}

.ved-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ved-item-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ved-item-meta {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ved-meta-sku {
  /* SKU gets a subtle gold tint to differentiate from section/par */
  color: var(--nx-gold);
  opacity: 0.85;
}
.ved-meta-sep {
  color: var(--nx-faintest, var(--nx-faint));
  opacity: 0.6;
}

.ved-item-chevron {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 300;
  color: var(--nx-faint);
  line-height: 1;
  transition: color .14s, transform .14s;
}
.ved-item-row:hover .ved-item-chevron {
  color: var(--nx-gold);
  transform: translateX(2px);
}

/* ─── Empty state ────────────────────────────────────────────────── */

.ved-items-empty {
  /* Notion-style empty state. Friendly icon, 2-line message. The big
     primary "+ Add item" button sits ABOVE this empty state, so the
     CTA is already obvious. This block just confirms "yes, the list
     is empty, here's what to do." */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 22px;
  text-align: center;
  gap: 8px;
}
.ved-items-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-gold-soft);
  border: 1px solid var(--nx-gold-line);
  border-radius: 22px;
  color: var(--nx-gold);
  margin-bottom: 4px;
}
.ved-items-empty-icon svg {
  width: 28px;
  height: 28px;
}
.ved-items-empty-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nx-text);
}
.ved-items-empty-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  max-width: 240px;
  line-height: 1.45;
}
.ved-items-empty-msg b {
  color: var(--nx-gold);
  font-weight: 600;
}

/* ─── Inline edit form — refined ─────────────────────────────────── */

/* Re-target the form (still uses .ord-vitem-editing on the wrapper)
   to live inside .ved-items-list with the new card aesthetic. */
.ved-items-list .ord-vitem-editing {
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold);
  border-radius: 16px;
  padding: 14px;
  margin: 4px 0;
  box-shadow: var(--nx-shadow-pill, 0 2px 10px var(--nx-gold-soft));
}

/* Tighten the action bar — three buttons: Delete (left, danger),
   Cancel (mid, ghost), Save (right, primary). */
.ved-items-list .ord-vitem-edit-actions {
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE H — VENDOR AVATARS + GLASS + LARGER TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════
   BlueCart-inspired upgrades:
   • Circular initial avatars on vendor rows + bottom-sheet header
   • Proper frosted-glass effect on modal backdrops (blur 20px+)
   • Larger fonts everywhere (50+ user accessibility)
   • Rounder pills, more generous spacing
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Vendor avatar (circular initial OR custom image) ──────────── */

.ord-vendor-avatar {
  /* Deterministic per-vendor color via --avatar-hue (set inline by JS).
     Saturation/lightness fixed so all avatars belong to the same
     visual family — warm, gold-adjacent. The initial sits on top in
     near-white. 72px is the vendor-list size — large enough that
     uploaded logos read clearly and the row carries the visual weight
     of the editorial card system. Smaller-context overrides
     (recent list 28px, bottom sheet 48px, etc.) live further down. */
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--avatar-hue, 35), 28%, 32%);
  border: 1px solid hsl(var(--avatar-hue, 35), 35%, 50%);
  color: #f5ecd6;
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.5px;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
[data-theme="light"] .ord-vendor-avatar {
  /* In light theme, avatars get a brighter saturation so they pop on
     the cream background. */
  background: hsl(var(--avatar-hue, 35), 32%, 92%);
  border-color: hsl(var(--avatar-hue, 35), 35%, 60%);
  color: hsl(var(--avatar-hue, 35), 35%, 28%);
}

/* Image variant — when vendor.image_url is set, the avatar renders
   that image as a cropped, contained background. The hue-driven
   colors above don't apply (background-image overrides background-
   color). Border stays neutral so a logo against any color works. */
.ord-vendor-avatar.ord-vendor-avatar-img {
  background-color: var(--nx-surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--nx-gold-line);
  color: transparent;       /* hide any fallback initial text */
  font-size: 0;
}
[data-theme="light"] .ord-vendor-avatar.ord-vendor-avatar-img {
  background-color: var(--nx-elevated);
  border-color: var(--nx-gold-line);
}

/* Smaller avatar variant for use in the bottom-sheet header where
   it sits next to the vendor name. */
.ord-vmenu-header .ord-vendor-avatar {
  width: 48px;
  height: 48px;
  font-size: 19px;
}

/* ─── Bottom sheet — glass + bigger header ──────────────────────── */

/* Override the older backdrop blur — proper frosted glass at 20px+
   with saturation boost. */
.ord-vmenu-backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
}
[data-theme="light"] .ord-vmenu-backdrop {
  background: rgba(70, 60, 40, 0.32) !important;
}

/* Sheet itself gets a slightly translucent gold-tinted bg with a
   secondary blur — the sheet floats as a frosted surface above the
   blurred backdrop. */
.ord-vmenu-sheet {
  background: rgba(24, 34, 54, 0.92) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
[data-theme="light"] .ord-vmenu-sheet {
  background: rgba(252, 248, 240, 0.94) !important;
}

/* Sheet header with avatar — replaces the old separate title + sub */
.ord-vmenu-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px 10px;
}
.ord-vmenu-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-vmenu-header .ord-vmenu-title {
  text-align: left;
  padding: 0;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-vmenu-header .ord-vmenu-sub {
  text-align: left;
  padding: 0;
  margin-top: 2px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bigger menu items for accessibility — bump from 14.5 → 15.5px,
   pad from 14 → 16px vertical. */
.ord-vmenu-item {
  padding: 16px 16px;
  font-size: 15.5px;
  border-radius: 18px;
}
.ord-vmenu-cancel {
  padding: 15px;
  font-size: 15px;
  border-radius: 18px;
}

/* ─── Quick-add modal — glass backdrop ──────────────────────────── */

.ord-qadd-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
}
[data-theme="light"] .ord-qadd-backdrop {
  background: rgba(70, 60, 40, 0.36) !important;
}

.ord-qadd-card {
  /* Slightly translucent gold-tinted card surface. Already has its
     own bg, but tweak for the glass aesthetic. */
  background: rgba(34, 46, 70, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border-radius: 24px;
}
[data-theme="light"] .ord-qadd-card {
  background: rgba(252, 248, 240, 0.96);
}
.ord-qadd-title {
  font-size: 18.5px;        /* up from 17 */
}
.ord-qadd-sub {
  font-size: 11.5px;        /* up from 10.5 */
  letter-spacing: 0.4px;
}

/* ─── Form fields — larger for accessibility ───────────────────── */

.ord-form-input,
.ord-form-textarea {
  padding: 12px 14px;       /* up from 10/12 */
  font-size: 15px;          /* up from 14 */
  border-radius: 16px;      /* up from 10 */
}
.ord-form-textarea {
  font-size: 13.5px;        /* up from 12.5 */
}
.ord-form-label {
  font-size: 10.5px;        /* up from 9.5 */
  letter-spacing: 1.6px;
}
.ord-form-hint {
  font-size: 11.5px;        /* up from 10.5 */
  line-height: 1.5;
}
.ord-form-hint code {
  font-size: 11.5px;        /* up from 10.5 */
  padding: 2px 6px;
  border-radius: 5px;
}

/* ─── Vendor editor — bigger title + buttons ───────────────────── */

.ord-veditor-title { font-size: 18px; }      /* up from 16 */
.ord-veditor-subtitle { font-size: 11.5px; } /* up from 10.5 */
.ord-veditor-cancel,
.ord-veditor-save {
  height: 50px;             /* up from 44 */
  font-size: 15px;          /* up from 14 */
}

/* ─── Order entry — bigger title + items ───────────────────────── */

.ord-entry-vendor { font-size: 18.5px; }     /* up from 17 */
.ord-entry-sub { font-size: 10.5px; }        /* up from 9.5 */

.ord-item-name { font-size: 15.5px; }        /* up from 14.5 */
.ord-item-meta { font-size: 11.5px; }        /* up from 10.5 */

.ord-entry-search {
  font-size: 15px;          /* up from 13.5 */
  padding: 12px 14px 12px 38px;
}
.ord-meta-field input[type="date"] {
  font-size: 14.5px;        /* up from 13.5 */
  padding: 10px 14px;
}
.ord-meta-label { font-size: 10.5px; }       /* up from 9.5 */

/* v18.30 — same tablet-scope fix as the block near line 8619.
   This block lives in an earlier readability section but had the
   same issue: unconditional widths bigger than the phone tightening,
   causing huge qty buttons on every viewport. */
@media (min-width: 501px) {
  .ord-qty-btn { width: 38px; height: 38px; font-size: 20px; }
  .ord-qty-input { width: 50px; height: 38px; font-size: 15px; }
}

/* Bigger entry CTA */
.ord-entry-cta {
  height: 54px;             /* up from 50 */
  font-size: 15.5px;        /* up from 14.5 */
}

/* ─── Section labels — slightly bigger for hierarchy ────────────── */

.ord-section-label, .ord-entry-section-label {
  font-size: 11px;          /* up from 10 */
  letter-spacing: 1.7px;
}
.ved-section-divider {
  font-size: 10.5px;        /* up from 9.5 */
}

/* ─── Items list (vendor editor) — bigger names ────────────────── */

.ved-item-row {
  padding: 18px 16px;       /* v363 — roomier card (was 14px) */
  border-radius: 16px;
  gap: 14px;
}
.ved-item-name {
  font-size: 15.5px;        /* up from 14 */
}
.ved-item-meta {
  font-size: 11.5px;        /* up from 10.5 */
  margin-top: 4px;
}

/* ─── Add-vendor button — pillier ──────────────────────────────── */

.ord-add-vendor-btn {
  padding: 7px 14px;
  font-size: 12px;          /* up from 11 */
}

/* ─── Vendor editor's primary "Add item" — bigger ──────────────── */

.ved-add-item-primary {
  padding: 16px 16px;       /* up from 14 */
  font-size: 14.5px;        /* up from 13.5 */
  border-radius: 18px;
}

/* ─── Row meta — better hierarchy ──────────────────────────────── */

.ord-vendor-meta {
  /* (Re-asserted to override earlier rules — meta styling now sits
     here as the canonical version.) */
  font-size: 12.5px !important;
  margin-top: 4px;
}

.ord-arrow {
  font-size: 22px;          /* up from 18 */
  font-weight: 300;
  color: var(--nx-faint);
}

/* ─── Generic ord-empty bumped ─────────────────────────────────── */

.ord-empty {
  font-size: 13.5px;
  padding: 20px 16px;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — VENDOR LIST ENRICHMENTS
   ═══════════════════════════════════════════════════════════════════
   Activity preview, draft state, pin indicator, and the date dividers
   used inside both #ordRecent and the vendor detail overlay.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Date dividers (shared by recent list and vendor detail) ────── */

.ord-recent-divider {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  padding: 14px 22px 6px;
  margin: 0;
}
/* Tighten the first divider's top padding when it's the very first row */
.ord-recent-divider:first-child,
.ord-recent-divider:has(+ *) {
  /* :has support is sufficient here — fallback is just slightly more padding,
     not a layout break, so the rule is safe. */
}

/* ─── Vendor card avatar wrapper (avatar + pin overlay) ──────────── */

.ord-vendor-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Pin indicator — small gold star/pin tucked into the avatar's
   top-right corner. Only shown for pinned vendors. */
.ord-vendor-pin {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nx-gold);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nx-surface-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 2;
}
[data-theme="light"] .ord-vendor-pin {
  background: var(--nx-gold-strong, var(--nx-gold));
  color: #fff;
  border-color: var(--nx-elevated);
}

/* ─── Vendor name + timestamp row ────────────────────────────────── */

.ord-vendor-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.ord-vendor-when {
  flex-shrink: 0;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--nx-faintest);
  text-transform: uppercase;
}

/* ─── Vendor activity preview line ──────────────────────────────── */

.ord-vendor-meta {
  display: flex;
  align-items: flex-start;     /* was center — pill aligns to first line of preview */
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.1px;
}
.ord-vendor-preview {
  /* Allow up to 2 lines so long status messages
     ("Sent · awaiting confirmation · deliver Mon, May 11") don't get
     clipped by the absolute-positioned ⋮ menu on the right. The
     -webkit-line-clamp pattern is well-supported across mobile mail
     and browser surfaces; older fallback is just overflow:hidden. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  /* white-space removed — needs to wrap */
}

/* Inline pill for status callouts on vendor cards. The DRAFT variant
   is gold to draw the eye — it's the most actionable state. */
.ord-vendor-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ord-vendor-pill-draft {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border: 1px solid var(--nx-gold-line-2, var(--nx-gold-line));
}

/* Whole-row gold accent when the vendor has an open draft — the card
   itself becomes a "this is your active thread with this vendor" cue. */
.ord-vendor-row.has-draft {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
  background: var(--nx-gold-mist);
}
.ord-vendor-row.has-draft:hover {
  background: var(--nx-gold-soft, var(--nx-gold-mist));
}

/* Pinned vendors get a slightly heavier border to set them apart at
   a glance — alongside the corner pin icon, this is two redundant
   cues so the pinned section never feels arbitrary. */
.ord-vendor-row.is-pinned {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 — VENDOR DETAIL OVERLAY
   ═══════════════════════════════════════════════════════════════════
   Full-screen overlay opened when tapping a vendor row. Shows past
   orders, a sticky "Start new order" CTA, and the pin/edit affordances.
   Sits at the same z-layer as the entry overlay, but lower than the
   editor (which is reached from inside detail).
   ═══════════════════════════════════════════════════════════════════ */

.ord-vdetail-overlay {
  position: fixed;
  /* Full-screen takeover — covers the masthead and the ORDERING header
     underneath (was inset below the masthead, so the page header kept
     peeking above the vendor screen). Safe-area padding keeps the back
     button clear of the status bar, matching the editor + entry overlays. */
  inset: 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 200;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: ord-vdetail-in 220ms ease-out;
  overflow: hidden;
}

@keyframes ord-vdetail-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Detail head (back, identity, pin, gear) ───────────────────── */

.ord-vdetail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.ord-vdetail-back,
.ord-vdetail-pin,
.ord-vdetail-gear {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ord-vdetail-back:hover,
.ord-vdetail-pin:hover,
.ord-vdetail-gear:hover {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
.ord-vdetail-pin.is-pinned {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}

.ord-vdetail-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.ord-vdetail-identity .ord-vendor-avatar {
  width: 44px;
  height: 44px;
  font-size: 17px;
}
.ord-vdetail-identity-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-vdetail-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord-vdetail-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--nx-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord-vdetail-sub-warn {
  color: var(--nx-warn, var(--nx-faint));
  font-style: italic;
}

/* ─── Detail body (orders list) ─────────────────────────────────── */

.ord-vdetail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 100px;     /* bottom padding leaves room for sticky CTA */
}
.ord-vdetail-loading,
.ord-vdetail-empty {
  padding: 36px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
}
.ord-vdetail-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.ord-vdetail-empty-msg {
  font-size: 13.5px;
  color: var(--nx-faint);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}
.ord-vdetail-orders {
  /* Reuses .ord-recent-row for individual order cards — same visual
     vocabulary as the main pane's recent list so users don't have to
     re-learn. */
  padding: 0;
}

/* Slightly different .ord-recent-row layout inside detail: status pill
   moves up to the title row, order ID becomes the secondary text. */
.ord-vdetail-orders .ord-recent-vendor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.ord-vdetail-orders .ord-recent-when {
  margin-left: auto;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--nx-faintest);
  text-transform: uppercase;
}
.ord-vdetail-orders .ord-recent-meta {
  font-size: 12.5px;
  color: var(--nx-faint);
  display: block;
}
.ord-vdetail-orders .ord-recent-id {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.6px;
  color: var(--nx-faintest);
  text-transform: uppercase;
}

/* ─── Detail footer — sticky Start new order CTA ────────────────── */

.ord-vdetail-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--nx-bg) 70%, transparent);
  pointer-events: none;       /* let the body scroll behind the gradient */
  flex-shrink: 0;
}
.ord-vdetail-cta {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--nx-gold) 0%, var(--nx-gold-strong, var(--nx-gold)) 100%);
  color: var(--nx-bg);
  border: 1px solid var(--nx-gold-strong, var(--nx-gold));
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  transition: transform var(--nx-press), box-shadow var(--nx-press), filter var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .ord-vdetail-cta {
  color: #fff;
}
.ord-vdetail-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ord-vdetail-cta:active {
  transform: scale(0.98);
}
.ord-vdetail-cta-arrow {
  font-size: 18px;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 — EDITOR EXTENSIONS (hue picker + pin toggle)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hue picker — 12 colored swatches + auto ───────────────────── */

.ved-hue-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.ved-hue-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: hsl(var(--avatar-hue, 35), 28%, 48%);
  cursor: pointer;
  transition: border-color var(--nx-press), transform var(--nx-press), box-shadow var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  font-size: 0;     /* hide auto's "A" label by default */
}
[data-theme="light"] .ved-hue-swatch {
  background: hsl(var(--avatar-hue, 35), 45%, 60%);
}
.ved-hue-swatch:hover {
  transform: scale(1.05);
}
.ved-hue-swatch.active {
  border-color: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 0 4px var(--nx-gold);
}
.ved-hue-auto {
  background: var(--nx-surface-2);
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px !important;     /* override the size:0 above */
  font-weight: 600;
  border-color: var(--nx-gold-line);
}
[data-theme="light"] .ved-hue-auto {
  background: var(--nx-elevated);
  color: var(--nx-faint);
}

/* ─── Editor toggle (Pin to top) ───────────────────────────────── */

.ord-form-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  -webkit-tap-highlight-color: transparent;
}
.ord-form-toggle input[type="checkbox"] {
  /* Hide the native checkbox — the .ord-form-toggle-track is the visual */
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.ord-form-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 15px;
  background: var(--nx-surface-3, var(--nx-surface-2));
  border: 1px solid var(--nx-gold-line);
  transition: background var(--nx-press), border-color var(--nx-press);
}
.ord-form-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nx-faint);
  transition: transform var(--nx-press), background var(--nx-press);
}
.ord-form-toggle input:checked ~ .ord-form-toggle-track {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
}
.ord-form-toggle input:checked ~ .ord-form-toggle-track .ord-form-toggle-thumb {
  transform: translateX(16px);
  background: var(--nx-bg);
}
.ord-form-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ord-form-toggle-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nx-text);
}
.ord-form-toggle-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 — ORDER DETAIL OVERLAY
   ═══════════════════════════════════════════════════════════════════
   Read-only card view for sent / delivered orders. Modeled after
   BlueCart's order detail screen — vendor + order ID at the top, a
   stack of "fact cards" (location, delivery date, sent timestamp,
   notes), then the products list, and a sticky bottom action bar
   with Reorder + Report Issues.
   ═══════════════════════════════════════════════════════════════════ */

.ord-odetail-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;       /* above vendor detail (200), below editor (240+) */
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: ord-odetail-in 220ms ease-out;
  overflow: hidden;
}
@keyframes ord-odetail-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Detail head (close, identity, more) ─────────────────────────── */

.ord-odetail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.ord-odetail-close,
.ord-odetail-menu {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ord-odetail-close:hover,
.ord-odetail-menu:hover {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
.ord-odetail-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-odetail-vendor {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.ord-odetail-id {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}
.ord-odetail-id .ord-status {
  margin-left: 4px;
}

/* ─── Detail body (fact cards + products) ─────────────────────────── */

.ord-odetail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 110px;     /* bottom space for sticky CTAs */
}

.ord-odetail-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  margin-bottom: 10px;
}
.ord-odetail-card-faint {
  background: transparent;
  border-style: dashed;
  border-color: var(--nx-gold-line);
}
.ord-odetail-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ord-odetail-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-odetail-card-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-bottom: 4px;
}
.ord-odetail-card-value {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.ord-odetail-card-value-pre {
  white-space: pre-wrap;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nx-text);
}
.ord-odetail-card-notes {
  /* Notes card stretches taller — body is multi-line */
  align-items: flex-start;
}

/* ─── Products section ──────────────────────────────────────────── */

.ord-odetail-section-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 18px 4px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ord-odetail-section-count {
  color: var(--nx-gold);
  font-weight: 600;
}

.ord-odetail-lines {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  overflow: hidden;
}
.ord-odetail-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
}
.ord-odetail-line:last-child {
  border-bottom: 0;
}
.ord-odetail-line-qty {
  flex-shrink: 0;
  width: 44px;
  height: 36px;
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-bg);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
}
.ord-odetail-line-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-odetail-line-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.ord-odetail-line-unit {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}
.ord-odetail-line-note {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-style: italic;
  color: var(--nx-faint);
  margin-top: 4px;
}
.ord-odetail-empty-lines {
  padding: 28px 16px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
  font-size: 13px;
}

/* ─── Detail footer — Reorder + Report Issues ─────────────────── */

.ord-odetail-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--nx-bg) 75%, transparent);
  pointer-events: none;
  flex-shrink: 0;
}
.ord-odetail-action {
  pointer-events: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform var(--nx-press), filter var(--nx-press), box-shadow var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
}
.ord-odetail-action:active {
  transform: scale(0.98);
}

/* Reorder — gold-soft secondary, less weight than the issue button */
.ord-odetail-action-secondary {
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.ord-odetail-action-secondary:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}

/* Report Issues — amber/orange-tinted, primary visual weight. The
   color comes from a delivery-issue palette that's distinct from the
   gold "good action" family — when something is wrong, it should
   read as urgent without screaming red. */
.ord-odetail-action-issue {
  background: linear-gradient(135deg, #d6912e 0%, #b87420 100%);
  color: #fff;
  border-color: #b87420;
  box-shadow: 0 4px 14px rgba(184, 116, 32, 0.25);
}
.ord-odetail-action-issue:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(184, 116, 32, 0.32);
}
[data-theme="light"] .ord-odetail-action-issue {
  background: linear-gradient(135deg, #c4811f 0%, #a96612 100%);
  border-color: #a96612;
  box-shadow: 0 4px 12px rgba(169, 102, 18, 0.25);
}

/* ─── Danger variant for soft-delete on closed/draft orders ─────────
   Sits in the secondary slot (right side, where Report issues lives
   for active orders). Reads as muted red-on-dark so it doesn't
   scream — destructive intent is clear without being aggressive,
   and the soft-delete is recoverable from "Show archived" anyway. */
.ord-odetail-action-danger {
  background: linear-gradient(135deg, #b04545 0%, #8a3434 100%);
  color: #fff;
  border-color: #8a3434;
  box-shadow: 0 4px 14px rgba(138, 52, 52, 0.25);
}
.ord-odetail-action-danger:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(138, 52, 52, 0.32);
}
.ord-odetail-action-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
[data-theme="light"] .ord-odetail-action-danger {
  background: linear-gradient(135deg, #a13a3a 0%, #7d2828 100%);
  border-color: #7d2828;
  box-shadow: 0 4px 12px rgba(125, 40, 40, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 6 — ORDER LIFECYCLE (timeline + transitions + issues)
   ═══════════════════════════════════════════════════════════════════
   Visual stack on the order detail view, between the head and the
   first fact card:

     1. Issue banner (if active)
     2. Status timeline   (5-step horizontal progress bar)
     3. Transition button (forward-only "Mark X" CTA)

   Plus styling for the new ISSUE pill on vendor cards and the
   sender attribution text in the detail header.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Status timeline ──────────────────────────────────────────────
   5 steps in a horizontal row, joined by 4 short bars. Each step has
   a circular marker (filled gold + checkmark when reached, hollow
   when pending) and a 2-line label (status name + reached timestamp).
   The current step gets a slightly emphasized marker. */

.ord-odetail-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding: 14px 4px 18px;
  margin-bottom: 4px;
}
.ord-odetail-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  text-align: center;
  width: 64px;        /* fixed step width keeps bars visually equal */
  min-width: 0;
}
.ord-odetail-tl-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--nx-gold-line);
  background: var(--nx-bg);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
}
.ord-odetail-tl-step.is-reached .ord-odetail-tl-marker {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
  color: var(--nx-bg);
}
[data-theme="light"] .ord-odetail-tl-step.is-reached .ord-odetail-tl-marker {
  background: var(--nx-gold-strong, var(--nx-gold));
  border-color: var(--nx-gold-strong, var(--nx-gold));
  color: #fff;
}
.ord-odetail-tl-step.is-current .ord-odetail-tl-marker {
  /* Current step gets a subtle outer ring so the user can see "you are here" */
  box-shadow: 0 0 0 4px var(--nx-gold-mist);
  transform: scale(1.05);
}
.ord-odetail-tl-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ord-odetail-tl-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  white-space: nowrap;
}
.ord-odetail-tl-step.is-reached .ord-odetail-tl-label {
  color: var(--nx-text);
}
.ord-odetail-tl-step.is-current .ord-odetail-tl-label {
  color: var(--nx-gold);
  font-weight: 600;
}
.ord-odetail-tl-ts {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--nx-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ord-odetail-tl-bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--nx-gold-line);
  margin: 11px 0 0 0;       /* aligns with marker vertical center */
  border-radius: 1px;
  min-width: 8px;
  transition: background var(--nx-press);
}
.ord-odetail-tl-bar.is-reached {
  background: var(--nx-gold);
}
[data-theme="light"] .ord-odetail-tl-bar.is-reached {
  background: var(--nx-gold-strong, var(--nx-gold));
}

/* ─── Transition button ──────────────────────────────────────────
   "Mark confirmed" / "Mark delivered" / "Mark closed" — full-width
   gold-soft button, less weight than the sticky CTAs at the bottom
   so the user reads it as a state-management action, not a primary
   "send something" action. */

.ord-odetail-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-text);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ord-odetail-transition:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.ord-odetail-transition:active {
  transform: scale(0.99);
}

/* ─── Issue banner ───────────────────────────────────────────────
   Surfaced at the top of the body when issue_at is set. Amber-tinted
   to match the REPORT ISSUES button family. Shows the issue note (if
   any) and a Resolve button to clear it. */

.ord-odetail-issue-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(214, 145, 46, 0.08);
  border: 1px solid rgba(214, 145, 46, 0.35);
  border-left: 3px solid #d6912e;
  border-radius: 16px;
}
[data-theme="light"] .ord-odetail-issue-banner {
  background: rgba(196, 129, 31, 0.07);
  border-color: rgba(196, 129, 31, 0.4);
  border-left-color: #c4811f;
}
.ord-odetail-issue-banner-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(214, 145, 46, 0.18);
  color: #d6912e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .ord-odetail-issue-banner-icon {
  background: rgba(196, 129, 31, 0.18);
  color: #c4811f;
}
.ord-odetail-issue-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ord-odetail-issue-banner-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #d6912e;
  letter-spacing: 0.2px;
}
[data-theme="light"] .ord-odetail-issue-banner-title {
  color: #c4811f;
}
.ord-odetail-issue-banner-note {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-text);
  margin-top: 3px;
  line-height: 1.4;
}
.ord-odetail-issue-banner-resolve {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(214, 145, 46, 0.5);
  color: #d6912e;
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .ord-odetail-issue-banner-resolve {
  border-color: rgba(196, 129, 31, 0.5);
  color: #c4811f;
}
.ord-odetail-issue-banner-resolve:hover {
  background: rgba(214, 145, 46, 0.12);
}

/* ─── Sender attribution in detail header ────────────────────── */

.ord-odetail-attribution {
  /* "by Cameron" — shown next to the order ID + status pill in the head.
     Keeps the same mono kicker styling but lower contrast. */
  color: var(--nx-faintest);
  text-transform: none;
  letter-spacing: 0.4px;
  font-style: italic;
}

/* ─── ISSUE pill on vendor cards ─────────────────────────────── */

.ord-vendor-pill-issue {
  background: rgba(214, 145, 46, 0.14);
  color: #d6912e;
  border: 1px solid rgba(214, 145, 46, 0.4);
}
[data-theme="light"] .ord-vendor-pill-issue {
  background: rgba(196, 129, 31, 0.12);
  color: #c4811f;
  border-color: rgba(196, 129, 31, 0.45);
}

/* Vendor cards with issue get an amber accent on the LEFT border
   so the issue is visible at-a-glance even when scrolling. */
.ord-vendor-row.has-issue {
  border-color: rgba(214, 145, 46, 0.45);
  border-left-width: 3px;
  border-left-color: #d6912e;
  padding-left: 16px;     /* keep avatar centered with the wider left border */
}
[data-theme="light"] .ord-vendor-row.has-issue {
  border-color: rgba(196, 129, 31, 0.5);
  border-left-color: #c4811f;
}

/* When a row is BOTH draft AND issue, issue wins on the left bar
   (drafts are routine; issues are exceptional and need the eye). */
.ord-vendor-row.has-draft.has-issue {
  background: rgba(214, 145, 46, 0.05);
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 7 — VENDOR SORT + REORDER + RECIPIENT LIST
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sort selector header ──────────────────────────────────────── */

.ord-vendor-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 16px 10px;
  margin: 0;
}
.ord-vendor-sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ord-vendor-sort-pill:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.ord-vendor-sort-label {
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ord-vendor-sort-value {
  color: var(--nx-gold);
  font-weight: 600;
}
.ord-vendor-sort-pill svg {
  color: var(--nx-faint);
  margin-left: 2px;
}

.ord-vendor-reorder-btn {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ord-vendor-reorder-btn:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
}
.ord-vendor-reorder-btn.is-active {
  background: var(--nx-gold);
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .ord-vendor-reorder-btn.is-active {
  color: #fff;
}

/* Visual change for active sort row in the bottom-sheet menu. */
.ord-vmenu-action.is-active {
  background: var(--nx-gold-mist);
}
.ord-vmenu-action.is-active svg {
  color: var(--nx-gold);
  flex-shrink: 0;
  margin-left: 8px;
}

/* ─── Drag handle + reorder visual state ─────────────────────────── */

.ord-vendor-drag-handle {
  /* Sits to the left of the vendor row in custom-sort + reorder mode.
     Replaces the absent ⋮ menu button. Touch target 44x44 minimum.
     Cursor + touch styling signal "drag me". */
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  color: var(--nx-faint);
  cursor: grab;
  touch-action: none;       /* prevents iOS scroll-while-drag conflicts */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ord-vendor-drag-handle:active {
  cursor: grabbing;
  color: var(--nx-gold);
}

/* When in reorder mode, the row button itself becomes inert — no hover,
   no transform on tap. The drag handle is the only active control. */
.ord-vendor-row.is-reordering {
  pointer-events: none;
  opacity: 0.92;
  transition: none;
}

/* The wrapping row gets visual treatment when its handle is being held. */
.ord-vendor-row-wrap {
  transition: transform 80ms ease;
  position: relative;
}
.ord-vendor-row-wrap.is-dragging {
  transition: none;
  z-index: 5;
  /* Lift the dragged row visually — slight scale + shadow tells the
     user "you've grabbed this". The transform from JS is additive. */
}
.ord-vendor-row-wrap.is-dragging .ord-vendor-row {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
[data-theme="light"] .ord-vendor-row-wrap.is-dragging .ord-vendor-row {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

/* ─── Recipient list (CC / BCC / ALT) ────────────────────────────── */

.ved-recipients {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.ved-recipients-empty {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  font-style: italic;
  padding: 6px 2px;
}
.ved-recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Kind badge — cycles between CC / BCC / ALT on tap. Color-coded so
   the user can scan a long list at a glance. */
.ved-recipient-kind {
  flex-shrink: 0;
  width: 52px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--nx-gold-line);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ved-recipient-kind-cc {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
.ved-recipient-kind-bcc {
  /* BCC = blind. Cooler tone, slightly muted, hints at "hidden". */
  background: rgba(76, 122, 138, 0.14);
  color: #4c7a8a;
  border-color: rgba(76, 122, 138, 0.4);
}
[data-theme="light"] .ved-recipient-kind-bcc {
  background: rgba(60, 102, 117, 0.12);
  color: #3c6675;
}
.ved-recipient-kind-alt {
  /* ALT = manual / not auto-included. Neutral gray. */
  background: var(--nx-surface-2);
  color: var(--nx-faint);
}

.ved-recipient-email {
  flex: 1 1 auto;
  height: 38px;
  padding: 0 12px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color var(--nx-press);
}
.ved-recipient-email:focus {
  border-color: var(--nx-gold);
}

.ved-recipient-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--nx-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ved-recipient-remove:hover {
  background: var(--nx-red-soft, rgba(180, 60, 60, 0.1));
  color: var(--nx-red, #b43c3c);
  border-color: var(--nx-red-soft, rgba(180, 60, 60, 0.3));
}
.ved-recipient-remove svg {
  width: 14px;
  height: 14px;
}

.ved-recipient-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.ved-recipient-add-btn:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
  border-style: solid;
}
.ved-recipient-add-btn svg {
  margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog reordering — vendor editor
   Section grouping, drag handles for items + sections, inline rename.
   Mirrors the vendor-list drag pattern (.ord-vendor-drag-handle, etc.).
   ═══════════════════════════════════════════════════════════════════════ */

/* Toolbar above the items list — holds Add item + Reorder toggle */
.ved-items-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
}
.ved-items-toolbar .ved-add-item-primary {
  flex: 1;
  margin: 0;
}
.ved-items-toolbar .ved-add-item-primary[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* Reorder toggle pill — mirrors .ord-vendor-reorder-btn styling */
.ved-reorder-toggle {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--rp);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
  min-height: 36px;
}
.ved-reorder-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ved-reorder-toggle.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* While in reorder mode, the items card itself gets a subtle wash so
   the user can tell at a glance the surface is in a different mode. */
.ved-items-card.is-reordering {
  background: var(--nx-gold-faint, transparent);
  outline: 1px solid var(--nx-gold-line, var(--border));
  outline-offset: 0;
}

/* ─── Section block (header + items wrap) ──────────────────────────── */
.ved-section-block {
  position: relative;
  margin-top: 4px;
  transition: transform 80ms ease;
}
.ved-section-block.is-dragging {
  transition: none;
  z-index: 10;
  opacity: 0.95;
}
.ved-section-block.is-dragging .ved-section-row {
  background: var(--nx-gold-mist, var(--surface));
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
[data-theme="light"] .ved-section-block.is-dragging .ved-section-row {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

/* ─── Section header row ───────────────────────────────────────────── */
.ved-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  border-radius: var(--rs);
  background: transparent;
  border-bottom: 1px solid var(--nx-gold-line, var(--border));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ved-section-row.is-reordering {
  border-bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}

.ved-section-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ved-section-name[data-section] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.ved-section-name[data-section]:hover {
  color: var(--text);
}
.ved-section-name[data-section]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.ved-section-name.is-uncat {
  color: var(--faint);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}

.ved-section-count {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--nx-gold-faint, var(--elevated));
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  min-width: 22px;
  text-align: center;
}

/* Section drag handle (in reorder mode) */
.ved-section-drag {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  color: var(--accent);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 4px;
}
.ved-section-drag:active {
  cursor: grabbing;
  background: var(--nx-gold-faint, transparent);
}

/* Section pencil rename button — small, on the right of the header */
.ved-section-rename-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--faint);
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}
.ved-section-rename-btn:hover {
  color: var(--accent);
  border-color: var(--border);
}
.ved-section-rename-btn svg { width: 13px; height: 13px; }

/* Section delete button — same shell as rename-btn so the header
   stays visually balanced. Default state is muted (faint color, no
   border) so it doesn't shout; hover state turns muted-red so the
   destructive intent reads before the click. The two-step confirm
   inside deleteSection() is the actual safety net; the visual cue
   is just a hint. */
.ved-section-delete-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--faint);
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ved-section-delete-btn:hover,
.ved-section-delete-btn:active {
  color: #c45a5a;
  border-color: rgba(196, 90, 90, 0.35);
  background: rgba(196, 90, 90, 0.08);
}
.ved-section-delete-btn svg { width: 15px; height: 15px; }

/* Inline rename form (replaces the header content while editing) */
.ved-section-rename-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--rs);
  color: var(--text);
  font: inherit;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
  min-width: 0;
}
.ved-section-rename-save,
.ved-section-rename-cancel {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
}
.ved-section-rename-save {
  border-color: var(--accent);
  color: var(--accent);
}
.ved-section-rename-save:hover {
  background: var(--accent);
  color: var(--bg);
}
.ved-section-rename-cancel:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ─── Item drag handle (in reorder mode) ──────────────────────────── */
.ved-item-drag-handle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 4px;
}
.ved-item-drag-handle:active {
  cursor: grabbing;
  color: var(--accent);
}

/* Item row treated as inert div in reorder mode (drag handle is the
   only active control). Keeps tap-on-row from triggering edit. */
.ved-item-row.is-reordering {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
}
.ved-item-row.is-reordering:hover {
  background: inherit;
  transform: none;
}
.ved-item-row.is-dragging {
  z-index: 9;
  background: var(--nx-gold-mist, var(--elevated));
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: none;
}
[data-theme="light"] .ved-item-row.is-dragging {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* The default item row is a button; ensure transform works on the
   wrapper too without double-effects when not in reorder mode. */
.ved-item-row {
  transition: transform 80ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — full-screen overlay accessed from the vendor ⋮ menu
   or from "Manage catalog" inside the vendor metadata editor. Mirrors
   the .ord-entry-overlay positioning model so it slots in below the
   masthead and above the now-hidden bottom-nav.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-catalog-overlay {
  position: fixed;
  /* Full-screen takeover — was pinned below the masthead, which left
     the ORDERING header + location pills peeking above the catalog. */
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  left: 0; right: 0; bottom: 0;
  z-index: 240;      /* above vendor detail (200), below the vendor
                        editor (250) which can sit on top of it */
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ordOverlayIn .18s ease-out;
  touch-action: manipulation;   /* v18.16 — kill double-tap zoom */
}

/* Header reuses .ord-entry-head — modifier here in case we want to tune. */
.ord-catalog-head {
  /* No additional changes today; left as a stable hook for future tweaks. */
}

/* ─── Toolbar: + Section, + Item, Reorder ────────────────────────────── */
.ord-cat-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-bg);
}
.ord-cat-tool-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ord-cat-tool-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ord-cat-tool-btn:active {
  transform: translateY(1px);
}
.ord-cat-tool-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.ord-cat-tool-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ord-cat-tool-primary {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--nx-gold-faint);
}
.ord-cat-reorder {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ord-cat-reorder:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ord-cat-reorder.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ─── Add-section inline form (between toolbar and search) ───────────── */
.ord-cat-addsection {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-gold-faint);
}
.ord-cat-addsection-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--rs);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.ord-cat-addsection-save,
.ord-cat-addsection-cancel {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
  min-height: 36px;
}
.ord-cat-addsection-save {
  border-color: var(--accent);
  color: var(--accent);
}
.ord-cat-addsection-save:hover {
  background: var(--accent);
  color: var(--bg);
}
.ord-cat-addsection-cancel:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ─── Search wrap inside catalog ─────────────────────────────────────── */
.ord-cat-search-wrap {
  flex: 0 0 auto;
  padding: 10px 14px 6px;
}

/* ─── Items list ─────────────────────────────────────────────────────── */
.ord-cat-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px calc(40px + env(safe-area-inset-bottom, 0px));
}
/* v294 — cap reading width on desktop so the catalog reads as a centered
   column instead of stretching across the whole monitor. */
.ord-cat-list > * {
  max-width: 780px;
  margin-inline: auto;
}

/* ─── Empty section placeholder (pending sections + emptied groups) ── */
.ved-section-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  margin: 4px 0 8px;
  background: var(--nx-gold-faint);
  border: 1px dashed var(--nx-gold-line);
  border-radius: var(--rs);
}
.ved-section-empty-text {
  flex: 1;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.ved-section-empty-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ved-section-empty-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--rs);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.ved-section-empty-add:hover {
  background: var(--accent);
  color: var(--bg);
}
.ved-section-empty-add svg { width: 12px; height: 12px; }
.ved-section-empty-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .15s ease;
}
.ved-section-empty-remove:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ─── Manage Catalog CTA in vendor editor (replaces inline list) ─────── */
.ved-catalog-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px;
  background: var(--surface);
  border: 1px solid var(--nx-gold-line);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ved-catalog-cta:hover {
  border-color: var(--accent);
  background: var(--nx-gold-faint);
}
.ved-catalog-cta:active {
  transform: scale(0.997);
}
.ved-catalog-cta-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.ved-catalog-cta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nx-gold-faint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ved-catalog-cta-icon svg { width: 18px; height: 18px; }
.ved-catalog-cta-main {
  flex: 1;
  min-width: 0;
}
.ved-catalog-cta-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ved-catalog-cta-sub {
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ved-catalog-cta-arrow {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--faint);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — section-card visual (round 2)
   Each section is a self-contained card with its own border + shadow.
   Drag handles are always-on (no reorder mode). Tap-to-edit and drag are
   sibling controls inside each item row. These rules supersede the
   earlier .ved-section-block / .ved-item-row rules for the catalog
   overlay only — other surfaces still use the older styles.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-catalog-overlay .ved-section-block {
  background: var(--surface);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  margin: 0 0 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 80ms ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}
[data-theme="dark"] .ord-catalog-overlay .ved-section-block {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.ord-catalog-overlay .ved-section-block.is-dragging {
  transition: none;
  z-index: 12;
  box-shadow: 0 12px 32px rgba(0,0,0,0.30);
  border-color: var(--accent);
}

/* Header — gold-tinted strip at top of the card */
.ord-catalog-overlay .ved-section-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0;
  background: var(--nx-gold-faint);
  border: 0;
  border-bottom: 1px solid var(--nx-gold-line);
  border-radius: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Section drag handle — always visible, opacity hint that it's interactive */
.ord-catalog-overlay .ved-section-drag {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 4px;
  opacity: 0.75;
}
.ord-catalog-overlay .ved-section-drag:active {
  opacity: 1;
  cursor: grabbing;
  background: var(--nx-gold-mist);
}

/* Items wrapper inside the card */
.ord-catalog-overlay .ved-section-items {
  display: block;
  padding: 0;
  background: transparent;
}

/* Item row — wrapper div containing drag handle + tap area.
   Overrides the older .ved-item-row floating-chip styles. */
.ord-catalog-overlay .ved-item-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  transition: background .12s ease, transform 80ms ease, box-shadow .15s ease;
}
.ord-catalog-overlay .ved-section-items > .ved-item-row:first-child {
  border-top: 0;
}
.ord-catalog-overlay .ved-item-row:hover {
  background: var(--nx-gold-faint);
}
.ord-catalog-overlay .ved-item-row.is-dragging {
  transition: none;
  z-index: 11;
  background: var(--nx-gold-mist);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border-radius: 12px;
  border: 1px solid var(--accent);
}
.ord-catalog-overlay .ved-item-row.is-dragging:hover {
  background: var(--nx-gold-mist);
}

/* Drag handle on each item — always present (v294) */
.ord-catalog-overlay .ved-item-drag-handle {
  flex-shrink: 0;
  width: 26px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.ord-catalog-overlay .ved-item-drag-handle:hover { color: var(--nx-text, var(--text)); }
.ord-catalog-overlay .ved-item-drag-handle:active {
  cursor: grabbing;
  color: var(--accent);
}

/* v294 — inline area (section) picker on each row */
.ord-catalog-overlay .ved-item-area {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-width: 130px;
}
.ord-catalog-overlay .ved-item-area-select {
  max-width: 130px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: auto;
  text-overflow: ellipsis;
}
.ord-catalog-overlay .ved-item-area-select:hover {
  border-color: var(--nx-gold-line, var(--accent));
  color: var(--nx-text, var(--text));
}
.ord-catalog-overlay .ved-item-area-select:focus {
  outline: none;
  border-color: var(--accent);
}
@media (max-width: 500px) {
  .ord-catalog-overlay .ved-item-area,
  .ord-catalog-overlay .ved-item-area-select { max-width: 92px; }
  .ord-catalog-overlay .ved-item-drag-handle { width: 22px; }
}

/* Tap area — fills the rest of the row, opens the edit form */
.ord-catalog-overlay .ved-item-tap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 2px;   /* v294 — tightened from 14px…4px for denser rows */
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--nx-text, var(--text));
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.ord-catalog-overlay .ved-item-tap:active {
  background: var(--nx-gold-faint, var(--nx-gold-soft));
}
.ord-catalog-overlay .ved-item-tap .ved-item-main {
  flex: 1;
  min-width: 0;
}
.ord-catalog-overlay .ved-item-tap .ved-item-name {
  font-family: inherit;
  font-weight: 500;                              /* softened from 600 — less visual shouting */
  font-size: 14px;                               /* down from 15px so meta breathes */
  color: var(--nx-text, var(--text));            /* warm off-white instead of pure --text */
  letter-spacing: -0.005em;
  line-height: 1.35;
  word-break: break-word;
}
.ord-catalog-overlay .ved-item-tap .ved-item-meta {
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--nx-faint, var(--muted));          /* one step softer than --muted */
}
.ord-catalog-overlay .ved-item-tap .ved-meta-sep {
  margin: 0 6px;
  opacity: 0.5;
}
.ord-catalog-overlay .ved-item-tap .ved-item-chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--nx-faintest, var(--faint));       /* very subtle — purely a visual cue, not noise */
  margin-left: 8px;
  margin-right: 4px;
  transition: color .12s ease, transform .12s ease;
}
.ord-catalog-overlay .ved-item-tap:active .ved-item-chevron {
  color: var(--nx-gold, var(--accent));
  transform: translateX(2px);
}

/* Empty-section placeholder lives inside the card */
.ord-catalog-overlay .ved-section-empty {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ord-catalog-overlay .ved-section-items > .ved-section-empty + .ved-item-row {
  border-top: 1px solid var(--border);
}

/* Inline edit form — fit cleanly inside the card */
.ord-catalog-overlay .ord-vitem-editing {
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  background: var(--bg);
}
.ord-catalog-overlay .ved-section-items > .ord-vitem-editing:first-child {
  border-top: 0;
}

/* Section rename pencil hover */
.ord-catalog-overlay .ved-section-rename-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
}
.ord-catalog-overlay .ved-section-rename-btn:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold-line);
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — collapse + search row (round 3)
   ═══════════════════════════════════════════════════════════════════════ */

/* Search row — search field + collapse-all toggle side-by-side */
.ord-cat-search-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
}
.ord-cat-search-row .ord-cat-search-wrap {
  flex: 1;
  padding: 0;             /* parent row provides outer padding now */
}
/* The base .ord-entry-search-wrap::before icon is positioned at
   left: 28px assuming the wrap has its own 16px left padding. Inside
   the catalog search row, that wrap padding is overridden to 0 (the
   parent row provides the outer padding instead) — which means the
   icon ends up sitting 28px into a wrap that no longer offsets it,
   and the input's 36px text-padding doesn't leave room. Words then
   start at 36px and the icon ends at 28+14=42px → 6px of overlap.
   Override here re-anchors the icon at 12px from the wrap edge so
   text (starting at 36px) clears it with ~10px of breathing room. */
.ord-cat-search-row .ord-cat-search-wrap::before {
  left: 12px;
}

.ord-cat-collapse-all {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ord-cat-collapse-all:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ord-cat-collapse-all[aria-pressed="true"] {
  color: var(--accent);
  background: var(--nx-gold-faint);
  border-color: var(--accent);
}

/* ─── Section collapse mechanics ─────────────────────────────────────── */

/* Collapse chevron in section header — sits left of the section name */
.ord-catalog-overlay .ved-section-collapse {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--accent);
  opacity: 0.75;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  padding: 0;
  margin-left: -2px;
}
.ord-catalog-overlay .ved-section-collapse:hover {
  opacity: 1;
  background: var(--nx-gold-mist);
}
.ord-catalog-overlay .ved-section-collapse svg {
  transition: transform .18s ease;
}

/* Section name now toggles collapse on tap — give it a clear hover */
.ord-catalog-overlay .ved-section-name[data-section] {
  cursor: pointer;
  user-select: none;
}
.ord-catalog-overlay .ved-section-name[data-section]:hover {
  color: var(--text);
}

/* Collapsed state — hide the items wrapper. Keep DOM intact so drag
   snapshots still see all rows (collapsed items have height 0 and are
   filtered out of swap detection). */
.ord-catalog-overlay .ved-section-block.is-collapsed .ved-section-items {
  display: none;
}

/* Visually compress collapsed cards a touch — header alone, no extra
   padding under it. The header already has its bottom border. */
.ord-catalog-overlay .ved-section-block.is-collapsed {
  margin-bottom: 8px;
}
.ord-catalog-overlay .ved-section-block.is-collapsed .ved-section-row {
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Vendor editor — collapsible cards + recipient chips (rebuild)
   Replaces the linear .ved-section-divider sections with self-contained
   cards. Each card has a tappable head with title + chevron and a body
   that hides via .is-collapsed. Recipients use chip lists per kind.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Card shell ─────────────────────────────────────────────────────── */
.ord-veditor-overlay .ved-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  /* Margin handled by parent's gap now (.ord-veditor-body gap: 20px),
     so individual margin would double-count. Keep zero here. */
  margin: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.06);
  transition: box-shadow .18s ease, border-color .18s ease;
}
[data-theme="dark"] .ord-veditor-overlay .ved-card {
  box-shadow: 0 2px 10px rgba(0,0,0,0.30);
}
.ord-veditor-overlay .ved-card-danger {
  border-color: rgba(179, 83, 74, 0.35);    /* softened — was solid red */
}

/* Card head — full-width tappable bar with title + chevron.
   Min-height 56px = comfortable tap target (Apple HIG: 44pt). When
   the card is COLLAPSED we drop the gold tint so a stack of closed
   cards feels quiet; the active (expanded) card pops via its tint. */
.ord-veditor-overlay .ved-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
  min-height: 56px;
  background: var(--nx-gold-faint);
  border: 0;
  border-bottom: 1px solid var(--nx-gold-line);
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: 'JetBrains Mono', 'Outfit', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.ord-veditor-overlay .ved-card.is-collapsed .ved-card-head {
  background: transparent;
  border-bottom-color: transparent;
}
.ord-veditor-overlay .ved-card-head:hover {
  background: var(--nx-gold-mist);
}
.ord-veditor-overlay .ved-card-head:active {
  background: var(--nx-gold-soft);
}
.ord-veditor-overlay .ved-card-danger .ved-card-head {
  background: rgba(179, 83, 74, 0.07);
  border-bottom-color: rgba(179, 83, 74, 0.25);
  color: var(--red, #b3534a);
}
.ord-veditor-overlay .ved-card-danger.is-collapsed .ved-card-head {
  background: transparent;
  color: rgba(179, 83, 74, 0.85);
}

.ord-veditor-overlay .ved-card-title {
  flex: 1;
  min-width: 0;
}
.ord-veditor-overlay .ved-card-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.ord-veditor-overlay .ved-card-chevron svg {
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  color: currentColor;
}
.ord-veditor-overlay .ved-card.is-collapsed .ved-card-chevron svg {
  transform: rotate(-90deg);
}

/* Card body — generous padding so labels + inputs aren't pinched. */
.ord-veditor-overlay .ved-card-body {
  padding: 18px;
  display: block;
}
.ord-veditor-overlay .ved-card.is-collapsed > .ved-card-body {
  display: none;
}
.ord-veditor-overlay .ved-card.is-collapsed > .ved-card-head {
  border-bottom: 0;
}

/* Inside a card, fields stack with consistent rhythm. */
.ord-veditor-overlay .ved-card-body .ord-form-field {
  margin-bottom: 16px;
}
.ord-veditor-overlay .ved-card-body .ord-form-field:last-child {
  margin-bottom: 0;
}

/* ─── Recipient kind labels (TO / CC / BCC / OTHER) ─────────────────── */
.ord-veditor-overlay .ved-rec-label-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: middle;
  margin-right: 4px;
}
.ord-veditor-overlay .ved-rec-label-pill-to {
  background: var(--accent);
  color: var(--bg);
}
.ord-veditor-overlay .ved-rec-label-pill-cc {
  background: rgba(212, 164, 78, 0.15);
  color: var(--accent);
  border: 1px solid var(--nx-gold-line);
}
.ord-veditor-overlay .ved-rec-label-pill-bcc {
  background: rgba(120, 130, 150, 0.15);
  color: var(--muted);
  border: 1px solid var(--border);
}
.ord-veditor-overlay .ved-rec-label-pill-alt {
  background: rgba(120, 130, 150, 0.07);
  color: var(--faint);
  border: 1px dashed var(--border);
}

/* ─── Recipient kind sections ────────────────────────────────────────── */
.ord-veditor-overlay .ved-recipient-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ord-veditor-overlay .ved-recipient-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ord-veditor-overlay .ved-recipient-section-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ─── Chip list ──────────────────────────────────────────────────────── */
.ord-veditor-overlay .ved-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 36px;
}
.ord-veditor-overlay .ved-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 4px 5px 10px;
  background: var(--nx-gold-faint);
  border: 1px solid var(--nx-gold-line);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
}
.ord-veditor-overlay .ved-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.ord-veditor-overlay .ved-chip-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ord-veditor-overlay .ved-chip-remove:hover {
  background: var(--nx-gold-mist);
  color: var(--text);
}
.ord-veditor-overlay .ved-chip-remove:active {
  background: var(--nx-gold-soft);
}

/* The "Add CC" / "Add BCC" / "Add backup" buttons — visually like a chip
   but dashed border to read as an empty slot. */
.ord-veditor-overlay .ved-chip-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line);
  border-radius: 20px;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease;
}
.ord-veditor-overlay .ved-chip-add svg {
  width: 14px;
  height: 14px;
}
.ord-veditor-overlay .ved-chip-add:hover {
  background: var(--nx-gold-mist);
  border-color: var(--accent);
  border-style: solid;
}

/* Inline input that replaces the Add button while typing a new chip */
.ord-veditor-overlay .ved-chip-input {
  flex: 1;
  min-width: 180px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .12s ease;
}
.ord-veditor-overlay .ved-chip-input::placeholder {
  color: var(--faint);
}
.ord-veditor-overlay .ved-chip-input-invalid {
  border-color: var(--red, #b3534a);
  animation: chip-shake .3s ease;
}
@keyframes chip-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — bump chevron visibility (round 4)
   The previous 14px chevron was too subtle. 18px + full opacity + on the
   right side of the row makes the collapse affordance unmissable.
   ═══════════════════════════════════════════════════════════════════════ */
.ord-catalog-overlay .ved-section-collapse {
  width: 32px !important;
  height: 32px !important;
  opacity: 1 !important;
  margin-left: 0;
}
.ord-catalog-overlay .ved-section-collapse svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 3 !important;
}
.ord-catalog-overlay .ved-section-collapse:hover {
  background: var(--nx-gold-mist);
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — chevron prominence (round 4)
   Moves the section-collapse chevron to the RIGHT side of the section
   header (iOS convention) and bumps its visibility. Rotation is driven
   from the parent .ved-section-block.is-collapsed class so it animates
   smoothly between states without re-rendering.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-catalog-overlay .ved-section-collapse {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--nx-gold-line);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin-left: 4px;
  opacity: 1;
  transition: background .12s ease, transform .15s ease;
}
.ord-catalog-overlay .ved-section-collapse:hover {
  background: var(--nx-gold-mist);
  transform: scale(1.05);
}
.ord-catalog-overlay .ved-section-collapse:active {
  transform: scale(0.95);
}
.ord-catalog-overlay .ved-section-collapse svg {
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  transform: rotate(0deg);
}
.ord-catalog-overlay .ved-section-block.is-collapsed .ved-section-collapse svg {
  transform: rotate(-90deg);
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog editor — long-press drag (round 5)
   Replaces the always-on ≡ drag handles. The whole row/section card
   accepts a 3-second long-press to enter drag mode.

   Visual contract:
   - During the hold (.is-pressing): a thin gold progress bar sweeps
     across the bottom edge of the card over 3s. The card itself is
     unchanged so the user can see what they're holding.
   - On activation (.is-dragging): the card lifts with a stronger
     shadow + accent border. The progress bar disappears.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide any leftover drag-handle markup if it ever renders (defense in depth) */
.ord-catalog-overlay .ved-item-drag-handle,
.ord-catalog-overlay .ved-section-drag {
  display: none !important;
}

/* Item row + section block: position relative so we can layer a
   progress bar on top, and add a ::before pseudo-element that grows
   from 0% → 100% width over 3s when .is-pressing is active. */
.ord-catalog-overlay .ved-item-row,
.ord-catalog-overlay .ved-section-block {
  position: relative;
}
.ord-catalog-overlay .ved-item-row::before,
.ord-catalog-overlay .ved-section-block::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
  border-radius: 1px;
}
/* When the user is holding, sweep the bar across in 500ms (matches
   LONG_PRESS_MS in the wireDragHandlers JS). The user gets a clear
   visual confirmation the press is registering, but the bar fills
   fast enough to not feel like a long wait. */
.ord-catalog-overlay .ved-item-row.is-pressing::before,
.ord-catalog-overlay .ved-section-block.is-pressing::before {
  width: 100%;
  opacity: 1;
  transition: width 0.5s linear, opacity 0.15s ease;
}
/* Slight visual cue on the card itself during the hold — soft gold
   tint so the user sees something IS happening even before drag fires */
.ord-catalog-overlay .ved-item-row.is-pressing {
  background: var(--nx-gold-faint);
}
.ord-catalog-overlay .ved-section-block.is-pressing {
  border-color: var(--nx-gold-line);
}

/* Drag-active state — overrides the press state. Stronger lift +
   accent border so the user knows drag has begun. */
.ord-catalog-overlay .ved-item-row.is-dragging::before,
.ord-catalog-overlay .ved-section-block.is-dragging::before {
  display: none;
}

/* Tap the row body anywhere — the whole row is now the tap target
   (no separate ≡ handle), so make the cursor a pointer for clarity. */
.ord-catalog-overlay .ved-item-row { cursor: pointer; }
.ord-catalog-overlay .ved-section-row { cursor: pointer; }

/* ─── Item edit form: ↑/↓ Move buttons ──────────────────────────────────
   Shown inside the inline edit form so reorder is reachable without
   needing to long-press drag. Two equal-width buttons; tap moves the
   item one position within its section. */
.ord-catalog-overlay .ord-vitem-move-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.ord-catalog-overlay .ord-vitem-move-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ord-catalog-overlay .ord-vitem-move-btn:hover {
  background: var(--nx-gold-mist);
}
.ord-catalog-overlay .ord-vitem-move-btn:active {
  background: var(--nx-gold-soft);
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOG REORDER CONTROLS — always-visible up/down arrows
   ─────────────────────────────────────────────────────────────────────
   Replaces the long-press drag-to-reorder as the primary reordering UX.
   Long-press still works (kept for power users), but now every row +
   section header has explicit ↑/↓ buttons. One tap = move one position.
   The order set here IS what cooks see when placing an order.
   ═══════════════════════════════════════════════════════════════════════ */

/* Item row: was just [tap area + chevron]. Now [tap area + move stack +
   chevron]. The .ved-item-row needs to be a flex row so the children
   sit side by side; .ved-item-tap takes most of the width. The earlier
   .ved-item-row rule (~line 2269) supplies the row's background/border/
   hover styling — we just override its layout here so the three new
   children can split the row. */
.ved-item-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;        /* children carry their own padding now */
}
.ved-item-tap {
  flex: 1 1 auto;
  min-width: 0;
  /* Inherit the row's interactive styling — defined in the existing
     .ved-item-row block earlier in this file. */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  font: inherit;
}

.ved-item-move-stack {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  padding: 4px 4px;
  /* Subtle vertical separator from the tap area */
  border-left: 1px solid var(--nx-gold-line, var(--border));
  border-right: 1px solid var(--nx-gold-line, var(--border));
  background: transparent;
}
.ved-item-move-btn {
  width: 30px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--nx-faint, var(--muted));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ved-item-move-btn:hover {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
  color: var(--nx-gold, var(--accent));
}
.ved-item-move-btn:active {
  background: var(--nx-gold-faint, var(--surface));
  border-color: var(--nx-gold, var(--accent));
  transform: scale(0.94);
}

.ved-item-row .ved-item-chevron {
  flex-shrink: 0;
  align-self: center;
  padding: 0 12px 0 8px;
  font-size: 18px;
  color: var(--nx-faint, var(--muted));
  pointer-events: none;
}

/* Section header: stack the move buttons in a horizontal pill between the
   count chip and the rename pencil, matching the visual weight of the
   item-row stack. */
.ved-section-move-stack {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  margin-left: 2px;
}
.ved-section-move-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nx-faint, var(--muted));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ved-section-move-btn:hover {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
  color: var(--nx-gold, var(--accent));
}
.ved-section-move-btn:active {
  background: var(--nx-gold-faint, var(--surface));
  border-color: var(--nx-gold, var(--accent));
  transform: scale(0.94);
}

/* Mobile spacing: a touch tighter so the row doesn't get cramped on
   narrow phones. */
@media (max-width: 480px) {
  .ved-item-move-btn { width: 28px; height: 20px; }
  .ved-section-move-btn { width: 26px; height: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Catalog "Move to section" picker
   ─────────────────────────────────────────────────────────────────────
   Triggered by long-press on a catalog item row. Mimics the board.js
   move-picker pattern — modal with a list of destination sections,
   tap one to move. Cross-section moves only; within-section ordering
   uses the always-visible ↑/↓ arrows.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-pick-bg {
  position: fixed;
  inset: 0;
  z-index: 400;                          /* above .rx-overlay (300) and .ord-veditor-overlay (250) */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;                 /* anchor to bottom on mobile — keyboard-safe + thumb-reachable */
  justify-content: center;
  padding: 0;
  animation: ord-pick-fade .15s ease;
}
@keyframes ord-pick-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ord-pick-modal {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--nx-gold-line, var(--border));
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.4);
  animation: ord-pick-slide .22s cubic-bezier(.2, .9, .3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes ord-pick-slide {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ord-pick-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--nx-gold-line, var(--border));
}

.ord-pick-title {
  flex: 1;
  min-width: 0;
}
.ord-pick-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ord-pick-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ord-pick-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.ord-pick-close:active {
  background: var(--surface);
  transform: scale(0.94);
}

.ord-pick-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}

.ord-pick-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  min-height: 48px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease;
}
.ord-pick-item:hover {
  background: var(--nx-gold-faint, var(--elevated));
}
.ord-pick-item:active {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
  border-color: var(--accent);
  transform: scale(0.99);
}
.ord-pick-item.is-current {
  opacity: 0.55;
  cursor: default;
}
.ord-pick-item.is-current:hover {
  background: transparent;
}

.ord-pick-check {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
}
.ord-pick-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.ord-pick-meta {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ord-pick-foot {
  flex-shrink: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--nx-gold-line, var(--border));
}
.ord-pick-new {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, var(--border));
  border-radius: 14px;
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ord-pick-new:active {
  background: var(--nx-gold-faint);
  border-color: var(--accent);
}

/* Long-press visual feedback. The progress bar sweep is handled by
   the older `::before` rule earlier in this file (lines ~5337) — same
   500ms timing, same gold accent. Below is just the brief flash that
   confirms the press fired and the picker is about to open. */
.ord-catalog-overlay .ved-item-row.is-press-fired {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

/* ═══════════════════════════════════════════════════════════════════════
   Order kebab — danger action + confirm modal
   ─────────────────────────────────────────────────────────────────────
   Adds a destructive "Delete order" item to the existing kebab sheet,
   plus a centered confirm modal that surfaces before the actual delete
   call. The two-step gate is deliberate — the kebab itself is one tap
   so we want a meaningful pause before we wipe the row.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-vmenu-action.ord-vmenu-action-danger {
  /* Same shape as the regular menu item but with a red wash so it reads
     as destructive on first glance. We don't make the entire button
     red-filled — that's screaming. A subtle tint + red text/icon is
     enough; the confirm modal does the heavy lifting on intent. */
}
.ord-vmenu-action.ord-vmenu-action-danger .ord-vmenu-action-title {
  color: #d35454;                                  /* warm red, not the cyber-red */
}
.ord-vmenu-action.ord-vmenu-action-danger:hover,
.ord-vmenu-action.ord-vmenu-action-danger:active {
  background: rgba(211, 84, 84, 0.10);
}
[data-theme="light"] .ord-vmenu-action.ord-vmenu-action-danger .ord-vmenu-action-title {
  color: #b8423f;
}
[data-theme="light"] .ord-vmenu-action.ord-vmenu-action-danger:hover,
[data-theme="light"] .ord-vmenu-action.ord-vmenu-action-danger:active {
  background: rgba(184, 66, 63, 0.08);
}

/* Confirm modal — centered, focused on the destructive choice. The
   Cancel button is the visually-prominent one (gold-lined), the
   Delete button is red-filled and second so the user has to reach
   for it. Both are full-width on mobile for big tap targets. */
.ord-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;                                    /* above kebab sheet (80) and engine overlay (300) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ord-confirm-fade .15s ease;
}
@keyframes ord-confirm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ord-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ord-confirm-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--nx-surface-solid, var(--surface));
  border: 1px solid rgba(211, 84, 84, 0.32);      /* red border telegraphs danger */
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: ord-confirm-pop .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes ord-confirm-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ord-confirm-icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(211, 84, 84, 0.12);
  border-radius: 50%;
  color: #d35454;
  margin-bottom: 14px;
}
.ord-confirm-title {
  font-family: 'Outfit', 'Libre Franklin', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--nx-text, var(--text));
  margin-bottom: 12px;
}
.ord-confirm-body {
  width: 100%;
  margin-bottom: 18px;
}
.ord-confirm-line {
  font-size: 14px;
  color: var(--nx-text, var(--text));
  margin-bottom: 4px;
}
.ord-confirm-line strong {
  font-weight: 600;
}
.ord-confirm-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--nx-faint, var(--muted));
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ord-confirm-warn {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nx-faint, var(--muted));
  padding: 10px 12px;
  background: var(--nx-gold-tint, rgba(0, 0, 0, 0.15));
  border-radius: 12px;
}
.ord-confirm-actions {
  width: 100%;
  display: flex;
  gap: 10px;
}
.ord-confirm-cancel,
.ord-confirm-delete {
  flex: 1;
  height: 46px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease;
}
.ord-confirm-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line, var(--border));
  color: var(--nx-text, var(--text));
}
.ord-confirm-cancel:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.ord-confirm-delete {
  background: #d35454;
  border: 1px solid #d35454;
  color: #fff;
}
.ord-confirm-delete:hover {
  background: #c14545;
  border-color: #c14545;
}
.ord-confirm-delete:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   RECENT ORDERS — search + filter chips + avatars + empty states
   ─────────────────────────────────────────────────────────────────────
   The recent list is the screen Orion looks at most. A sticky search
   input + a row of status chips above the list make it findable when
   you've got 30+ orders. Vendor avatars on each row let you scan by
   color before reading the name.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header strip — search + chips. Sits between the "Recent" label and
   the rows, doesn't scroll separately on mobile (the parent card
   handles scrolling). */
.ord-recent-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}

/* Search input */
.ord-recent-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ord-recent-search-icon {
  position: absolute;
  left: 11px;
  color: var(--nx-faint, var(--muted));
  pointer-events: none;
}
.ord-recent-search {
  width: 100%;
  padding: 9px 36px 9px 33px;
  background: var(--nx-bg, #0e1320);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 12px;
  color: var(--nx-text, #ede9e0);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ord-recent-search::-webkit-search-cancel-button { display: none; }    /* using our own × */
.ord-recent-search::placeholder {
  color: var(--nx-faint, var(--muted));
}
.ord-recent-search:focus {
  border-color: var(--nx-gold, #d4a44e);
}
[data-theme="light"] .ord-recent-search {
  background: var(--bg, #fff);
}
.ord-recent-search-clear {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--nx-faint, var(--muted));
  color: var(--nx-bg, #0e1320);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

/* Status chip row — horizontally scrollable on narrow screens so all
   five chips can sit side-by-side without wrapping, and the user can
   swipe through them naturally. */
.ord-recent-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* firefox */
  margin: 0 -2px;                   /* compensate for padding so chips align with search */
  padding: 0 2px;
}
.ord-recent-chips::-webkit-scrollbar { display: none; }    /* webkit */

.ord-recent-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  color: var(--nx-muted, var(--muted));
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
  white-space: nowrap;
}
.ord-recent-chip:active {
  transform: scale(0.95);
}
.ord-recent-chip.is-active {
  background: var(--nx-gold, #d4a44e);
  border-color: var(--nx-gold, #d4a44e);
  color: var(--nx-bg, #0e1320);
  font-weight: 600;
}
.ord-recent-chip-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  opacity: 0.75;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.ord-recent-chip.is-active .ord-recent-chip-count {
  background: rgba(0, 0, 0, 0.18);
  opacity: 1;
}

/* Row layout — adds an avatar slot to the left of the existing main
   content. The original .ord-recent-row is preserved for any older
   call sites; --with-avatar variant restructures with a leading avatar.
   28px is small enough to feel like a list (not a card) but large
   enough that a logo or initial reads cleanly. */
.ord-recent-row.ord-recent-row--with-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ord-recent-row-avatar .ord-vendor-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-width: 1px;
}

/* Empty states — informative, not dead-end. The CTA row points the
   user to their next action (start an order / add a vendor / clear
   filters) instead of just stating the obvious negative. */
.ord-empty.ord-empty-cta {
  text-align: center;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ord-empty-msg {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  color: var(--nx-text, var(--text));
  font-weight: 500;
}
.ord-empty-hint-row {
  font-size: 12.5px;
  color: var(--nx-faint, var(--muted));
}
.ord-empty-hint-row strong {
  color: var(--nx-gold, #d4a44e);
  font-weight: 600;
}
.ord-empty.ord-empty-filtered {
  text-align: center;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.ord-empty-clear-btn {
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--nx-gold, #d4a44e);
  border-radius: 999px;
  color: var(--nx-gold, #d4a44e);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.ord-empty-clear-btn:active {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.10));
}
.ord-empty-hint {
  font-size: 11px;
  opacity: 0.7;
}

/* Unknown-vendor fallback avatar (the order references a vendor that
   was deleted / archived). Kept neutral so it's clearly different
   from a real avatar. */
.ord-vendor-avatar.ord-vendor-avatar-unknown {
  background: var(--nx-faint, rgba(255, 255, 255, 0.12));
  border-color: var(--nx-gold-line);
  color: var(--nx-muted, var(--muted));
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOG BULK IMPORT — modal flow
   ─────────────────────────────────────────────────────────────────────
   Three states inside the same modal:
     1. File pick (initial)
     2. Preview (after parse, before commit)
     3. Result (success or error)
   Sized for mobile-first — full-screen-ish on small viewports, capped
   on desktop. The diff-style summary at the top of the preview is the
   one thing that has to read fast — admin scans "12 add, 3 update,
   77 archive" before tapping Apply.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-cat-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;                          /* above catalog editor */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ordCatImpFade .15s ease;
}
@keyframes ordCatImpFade { from { opacity: 0; } to { opacity: 1; } }

.ord-cat-import-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ord-cat-import-modal {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  background: var(--nx-surface-solid, var(--surface, #0e1320));
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -24px 64px rgba(0,0,0,0.6);
  animation: ordCatImpSlide .22s cubic-bezier(.2,.9,.3,1);
}
@media (min-width: 600px) {
  .ord-cat-import-overlay { align-items: center; padding: 24px; }
  .ord-cat-import-modal { border-radius: 20px; max-height: 80vh; }
}
@keyframes ordCatImpSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ord-cat-import-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nx-gold-line);
}
.ord-cat-import-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
}
.ord-cat-import-close {
  background: transparent;
  border: none;
  color: var(--nx-muted, var(--muted));
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.ord-cat-import-close:active { background: var(--nx-gold-faint); }

.ord-cat-import-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
}

/* Step 1: pick a file */
.ord-cat-import-step-head {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nx-text);
  margin-bottom: 6px;
}
.ord-cat-import-step-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--nx-muted, var(--muted));
  margin-bottom: 18px;
}
.ord-cat-import-step-sub strong { color: var(--nx-text); }

/* Upload — big prominent card with circular icon. The single primary
   action of this modal. Distinct shape (card vs button) so it never
   gets confused with the quieter download links below. */
.ord-cat-import-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 18px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.05));
  border: 2px dashed var(--nx-gold, #d4a44e);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  margin-bottom: 14px;
}
.ord-cat-import-upload:hover {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.10));
}
.ord-cat-import-upload:active {
  transform: scale(0.99);
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.14));
}
.ord-cat-import-upload-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nx-gold, #d4a44e);
  color: var(--nx-bg, #0e1320);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 8px 18px rgba(212, 164, 78, 0.25);
}
.ord-cat-import-upload-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
}
.ord-cat-import-upload-sub {
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* Old .ord-cat-import-filebtn — kept for backwards compat, but the
   markup now uses .ord-cat-import-upload above. */
.ord-cat-import-filebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  background: var(--nx-gold);
  color: var(--nx-bg);
  border-radius: 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.ord-cat-import-filebtn:active { transform: scale(0.98); filter: brightness(0.95); }
.ord-cat-import-filebtn svg { color: var(--nx-bg); }

.ord-cat-import-tips {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--nx-gold-faint);
  border: 1px dashed var(--nx-gold-line);
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nx-muted, var(--muted));
}
.ord-cat-import-tips strong { color: var(--nx-gold); }

/* Loading state */
.ord-cat-import-loading {
  padding: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
  font-style: italic;
}

/* Step 2: preview */
.ord-cat-import-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.ord-cat-import-stat {
  padding: 12px 6px;
  background: var(--nx-gold-faint, rgba(212,164,78,0.06));
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  text-align: center;
}
.ord-cat-import-stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1;
}
.ord-cat-import-stat-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nx-faint, var(--muted));
  margin-top: 4px;
}
.ord-cat-import-stat-add      { border-color: rgba(95, 165, 90, 0.4); }
.ord-cat-import-stat-add      .ord-cat-import-stat-num { color: #5fa55a; }
.ord-cat-import-stat-update   { border-color: rgba(212, 164, 78, 0.55); }
.ord-cat-import-stat-update   .ord-cat-import-stat-num { color: var(--nx-gold); }
.ord-cat-import-stat-keep     .ord-cat-import-stat-num { color: var(--nx-muted, var(--muted)); }
.ord-cat-import-stat-archive  { border-color: rgba(211, 84, 84, 0.35); }
.ord-cat-import-stat-archive  .ord-cat-import-stat-num { color: #d35454; }

.ord-cat-import-summary-note {
  font-size: 12px;
  color: var(--nx-muted, var(--muted));
  text-align: center;
  margin: 12px 0 4px;
}
.ord-cat-import-summary-note strong { color: var(--nx-text); font-weight: 600; }

.ord-cat-import-group {
  margin-top: 12px;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  overflow: hidden;
}
.ord-cat-import-group summary {
  cursor: pointer;
  padding: 10px 14px;
  background: var(--nx-gold-faint);
  font-size: 12.5px;
  color: var(--nx-text);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.ord-cat-import-group summary::-webkit-details-marker { display: none; }
.ord-cat-import-group summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
  color: var(--nx-muted, var(--muted));
}
.ord-cat-import-group[open] summary::before { transform: rotate(90deg); }

.ord-cat-import-list {
  max-height: 280px;
  overflow-y: auto;
}
.ord-cat-import-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  border-top: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
}
.ord-cat-import-row:first-child { border-top: none; }
.ord-cat-import-row-sec {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nx-faint, var(--muted));
  min-width: 88px;
}
.ord-cat-import-row-name { flex: 1 1 auto; min-width: 120px; }
.ord-cat-import-row-sku {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--nx-muted, var(--muted));
}
.ord-cat-import-row-unit {
  font-size: 11px;
  color: var(--nx-faint, var(--muted));
}
.ord-cat-import-row-add    { background: rgba(95,165,90,0.04); }
.ord-cat-import-row-update { background: rgba(212,164,78,0.04); }
.ord-cat-import-row-archive { background: rgba(211,84,84,0.04); opacity: 0.78; }
.ord-cat-import-more {
  padding: 10px 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
}

.ord-cat-import-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.ord-cat-import-cancel,
.ord-cat-import-confirm {
  flex: 1;
  height: 46px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ord-cat-import-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
}
.ord-cat-import-confirm {
  background: var(--nx-gold);
  border: 1px solid var(--nx-gold);
  color: var(--nx-bg);
}
.ord-cat-import-confirm:active { transform: scale(0.98); }

/* Toolbar Import button — distinct from primary +Item but in palette */
.ord-cat-tool-btn.ord-cat-tool-import {
  border-style: dashed;
  color: var(--nx-muted, var(--muted));
}
.ord-cat-tool-btn.ord-cat-tool-import:hover,
.ord-cat-tool-btn.ord-cat-tool-import:active {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
  border-style: solid;
}

/* Result states */
.ord-cat-import-error {
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.ord-cat-import-error ul {
  text-align: left;
  font-size: 12px;
  color: #d35454;
  list-style: disc;
  margin: 8px 0;
  padding-left: 20px;
}
.ord-cat-import-retry {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--nx-gold);
  border-radius: 12px;
  color: var(--nx-gold);
  font-size: 13px;
  cursor: pointer;
}
.ord-cat-import-success {
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.ord-cat-import-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(95, 165, 90, 0.18);
  color: #5fa55a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
}
.ord-cat-import-success-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--nx-text);
}
.ord-cat-import-success-sub {
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
  margin-bottom: 12px;
}
.ord-cat-import-done {
  padding: 9px 24px;
  background: var(--nx-gold);
  border: 1px solid var(--nx-gold);
  border-radius: 999px;
  color: var(--nx-bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOG EMPTY-STATE CTA — onramp for new catalogs
   ─────────────────────────────────────────────────────────────────────
   When a vendor's catalog has zero items, replace the bare "No items
   yet" line with a multi-action card so the user has a clear path:
   upload (primary), download blank template (secondary), or add one
   manually (tertiary, for the rare case they want to start tiny).
   ═══════════════════════════════════════════════════════════════════════ */

.ved-items-empty.ved-items-empty-cta {
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--nx-gold-faint);
  border: 1px dashed var(--nx-gold-line);
  border-radius: 18px;
  margin: 20px 16px;
}
.ved-items-empty-cta .ved-items-empty-icon {
  font-size: 32px;
  color: var(--nx-gold);
  opacity: 0.6;
}
.ved-items-empty-cta .ved-items-empty-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  margin-top: 4px;
}
.ved-items-empty-cta .ved-items-empty-msg {
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
  margin-bottom: 14px;
  max-width: 320px;
  line-height: 1.5;
}

.ved-items-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.ved-items-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease;
  border: 1px solid transparent;
}
.ved-items-empty-btn:active { transform: scale(0.98); }

.ved-items-empty-btn-primary {
  background: var(--nx-gold);
  color: var(--nx-bg);
  font-weight: 600;
}
.ved-items-empty-btn-primary svg { color: var(--nx-bg); }
.ved-items-empty-btn-primary:active { filter: brightness(0.95); }

.ved-items-empty-btn-secondary {
  background: transparent;
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}
.ved-items-empty-btn-secondary:hover,
.ved-items-empty-btn-secondary:active {
  background: var(--nx-gold-faint);
}

.ved-items-empty-btn-tertiary {
  background: transparent;
  color: var(--nx-muted, var(--muted));
  font-size: 13px;
  height: 36px;
  margin-top: 4px;
}
.ved-items-empty-btn-tertiary:hover {
  color: var(--nx-text);
}

/* Sheet-sync modal — download links section under the upload CTA */
.ord-cat-import-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint, var(--muted));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ord-cat-import-divider::before,
.ord-cat-import-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nx-gold-line);
}

.ord-cat-import-downloads {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 auto;
  align-items: center;
}

/* Quiet text-link styled download buttons — clearly secondary to the
   big upload card above. Each is a centered row: tiny icon + text.
   Hover/active just changes color, no border or background bling. */
.ord-cat-import-dllink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--nx-gold, #d4a44e);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background 120ms ease;
}
.ord-cat-import-dllink:hover,
.ord-cat-import-dllink:active {
  color: var(--nx-gold);
  background: var(--nx-gold-faint);
  text-decoration: underline;
}
.ord-cat-import-dllink svg { opacity: 0.85; }
.ord-cat-import-dllink-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.7;
  font-weight: normal;
}

/* Legacy .ord-cat-import-dlbtn (older outlined-button style) — kept so
   any leftover references still render reasonably during transition. */
.ord-cat-import-dlbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--nx-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background 120ms ease;
}
.ord-cat-import-dlbtn:hover,
.ord-cat-import-dlbtn:active {
  border-color: var(--nx-gold);
  background: var(--nx-gold-faint);
}
.ord-cat-import-dlbtn svg { color: var(--nx-gold); }

/* ═══════════════════════════════════════════════════════════════════════
   ORD-VMENU-ACTION — base button styles for sheet-menu items
   ─────────────────────────────────────────────────────────────────────
   The vendor sort sheet (Alphabetical / Custom / Recently used / etc.)
   and the order kebab sheet (Open in editor / Delete) both use this
   class on their buttons. Each button has a title line + an optional
   description line; without these rules the two run together as inline
   text. Layout: full-width row, title above sub, optional ✓ icon at
   the right when active.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-vmenu-action {
  /* Full-width button. Tap target is the whole row, no inner click
     handlers — the button itself is the affordance. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
  color: var(--nx-text);
}
.ord-vmenu-action:hover,
.ord-vmenu-action:active {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
}
.ord-vmenu-action.is-active {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.12));
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.35));
}

.ord-vmenu-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;                          /* let title truncate if very long */
}
.ord-vmenu-action-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1.25;
}
.ord-vmenu-action-sub {
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  line-height: 1.35;
}
.ord-vmenu-action.is-active .ord-vmenu-action-title {
  color: var(--nx-gold, #d4a44e);
}
.ord-vmenu-action.is-active svg {
  color: var(--nx-gold, #d4a44e);
  flex-shrink: 0;
}

/* Cancel row at the bottom is plain — no description, smaller weight */
.ord-vmenu-action.ord-vmenu-action-cancel {
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
  margin-top: 4px;
  border-top: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.12));
  border-radius: 0;
  padding-top: 14px;
}
.ord-vmenu-action.ord-vmenu-action-cancel:hover,
.ord-vmenu-action.ord-vmenu-action-cancel:active {
  background: transparent;
  color: var(--nx-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   ARCHIVED ORDERS — expander at the bottom of the vendor detail
   ─────────────────────────────────────────────────────────────────────
   Lives below the active orders list. Visually subdued so it never
   competes with the primary task (looking at active orders) but
   discoverable when needed. Collapsed: a single muted toggle row.
   Expanded: a list of archived orders with a "Restore" button each.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-vdetail-archived-block {
  margin: 24px 16px 80px;
  padding-top: 18px;
  border-top: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.18));
}

.ord-vdetail-archived-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--nx-muted, var(--muted));
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.ord-vdetail-archived-toggle:hover,
.ord-vdetail-archived-toggle:active {
  border-color: var(--nx-gold);
  color: var(--nx-text);
  background: var(--nx-gold-faint);
}
.ord-vdetail-archived-toggle[aria-expanded="true"] {
  border-color: var(--nx-gold);
  color: var(--nx-text);
  background: var(--nx-gold-faint);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ord-vdetail-archived-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.ord-vdetail-archived-chev {
  font-size: 14px;
  color: var(--nx-gold);
}

.ord-vdetail-archived-list {
  border: 1px solid var(--nx-gold);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.04));
  overflow: hidden;
}

.ord-vdetail-archived-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--nx-gold-line);
  opacity: 0.85;
}
.ord-vdetail-archived-row:first-child { border-top: none; }

.ord-vdetail-archived-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ord-vdetail-archived-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ord-vdetail-archived-when {
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ord-vdetail-archived-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint, var(--muted));
  letter-spacing: 0.04em;
}

.ord-vdetail-archived-restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.ord-vdetail-archived-restore:hover,
.ord-vdetail-archived-restore:active {
  border-color: var(--nx-gold);
  background: var(--nx-gold);
  color: var(--nx-bg);
}
.ord-vdetail-archived-restore:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEAM-NAME ALIAS DISPLAYS
   ─────────────────────────────────────────────────────────────────────
   When an item has both a house_name (team's nickname) AND an
   item_name (vendor's catalog name), the prominent line shows the
   team's name and these slots show the vendor's name as a small
   secondary alias. Used in:
     - .ord-odetail-line-alias  (order detail screen)
     - .ord-review-alias         (review-and-send modal)
     - .ved-meta-alias           (catalog editor item rows, in meta line)
   Together with .ord-item-meta showing the same alias on the order
   entry rows (already styled via the parent meta), these give a
   consistent "team-name primary, vendor-name secondary" pattern
   everywhere item names appear inside NEXUS.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-odetail-line-alias {
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  margin-top: 1px;
  font-style: italic;
  line-height: 1.3;
}

.ord-review-alias {
  display: inline-block;
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
  font-weight: normal;
}

.ved-meta-alias {
  font-style: italic;
  color: var(--nx-faint, var(--muted));
}

/* ═══════════════════════════════════════════════════════════════════════
   PAR-AWARE FILTER PILLS
   ─────────────────────────────────────────────────────────────────────
   Two-pill segmented control above the items list: "My items" (default,
   shows only what this location actually orders) vs "All" (full catalog).
   Active state is gold-filled, inactive is outlined. The "X hidden"
   hint after them gives the user a way to discover the toggle without
   wondering why their catalog looks shorter than they remember.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-entry-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 8px;
  flex-wrap: wrap;
}
.ord-entry-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  color: var(--nx-muted, var(--muted));
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ord-entry-filter-pill.is-active {
  /* v280 — outline treatment instead of a solid gold slab; the active
     filter should read as "selected", not compete with the CTA. */
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.10));
  color: var(--nx-gold);
  border-color: var(--nx-gold);
  font-weight: 600;
}
.ord-entry-filter-pill:not(.is-active):hover,
.ord-entry-filter-pill:not(.is-active):active {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}
.ord-entry-filter-hint {
  font-size: 11px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESOLUTION-NOTE TEXTAREA inside confirm modal
   ═══════════════════════════════════════════════════════════════════════ */
.ord-confirm-textarea {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--nx-text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  resize: vertical;
  min-height: 70px;
  -webkit-tap-highlight-color: transparent;
}
.ord-confirm-textarea:focus {
  outline: none;
  border-color: var(--nx-gold);
  background: var(--nx-bg);
}
.ord-confirm-textarea::placeholder {
  color: var(--nx-faint, var(--muted));
}

/* The resolve variant of the destructive button uses gold instead of red,
   since this isn't destructive — it's a positive completion action. */
.ord-confirm-delete.ord-confirm-resolve {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   TIMELINE STEP PRESSING STATE — visual feedback during long-press
   ═══════════════════════════════════════════════════════════════════════ */
.ord-odetail-tl-step.is-pressing {
  transform: scale(0.97);
  transition: transform 120ms ease;
}
.ord-odetail-tl-step[data-revert-status] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
  transition: background 120ms ease;
}
.ord-odetail-tl-step[data-revert-status]:hover {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.04));
}

/* ═══════════════════════════════════════════════════════════════════════
   DELIVERY-DAY MISMATCH HINT — order entry date field
   ─────────────────────────────────────────────────────────────────────
   Subtle inline note that surfaces when the user picks a date the
   vendor doesn't normally deliver on. Informational rather than
   blocking — vendors do special deliveries, holiday weeks, etc. We
   don't want to be overbearing, just helpful enough to catch a real
   mistake (Sun selected when vendor delivers Mon/Wed/Fri).
   ═══════════════════════════════════════════════════════════════════════ */

.ord-meta-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 0;
  font-size: 11.5px;
  color: var(--nx-gold, #d4a44e);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.ord-meta-warn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════
   VENDOR EDITOR — cutoff time + days picker
   ═══════════════════════════════════════════════════════════════════════ */

.rx-cutoff-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rx-cutoff-time {
  flex: 0 0 110px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.rx-cutoff-days {
  flex: 1 1 auto;
}
.rx-cutoff-conn {
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Unified TO bundle (primary input + additional TO chip group) ──
   Visually nests the "+ Add another TO" chip group right under the
   primary email input so they read as one cohesive section instead
   of two unrelated TO labels stacked on top of each other.
   ─────────────────────────────────────────────────────────────────── */
.rx-to-bundle .rx-chip-group {
  margin-top: 6px;
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
}
.rx-to-bundle .rx-chip-group-head {
  /* Empty when label='' and hint='' — but if either is set later,
     keep the spacing tight to maintain bundled feel. */
  margin-bottom: 4px;
}
.rx-to-bundle .rx-chip-add {
  /* Slightly more prominent so users see this as a clear extension
     option — not a forgotten footer affordance. */
  font-size: 12px;
  font-weight: 500;
}

/* ─── Day-of-week pills (vendor schedule editor) ────────────────────
   Match the order-entry .ord-day-pill design exactly so the schedule
   editor reads as part of the same visual system. Without these
   rules the pills fall back to native button defaults — bright white
   on dark theme, completely off-brand.
   ─────────────────────────────────────────────────────────────────── */
.rx-day-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.rx-day-pill {
  flex: 1 1 0;
  min-width: 38px;
  padding: 8px 4px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.rx-day-pill:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
.rx-day-pill.active {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
}
[data-theme="light"] .rx-day-pill.active { color: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════
   ORDER ENTRY — cutoff banner (countdown)
   ─────────────────────────────────────────────────────────────────────
   Three states, color-coded by urgency:
     default → quiet gold (plenty of time)
     .is-soon → emphasized (within 4h)
     .is-past → warning red-toned (cutoff passed, soft block on send)
   ═══════════════════════════════════════════════════════════════════════ */

.ord-meta-cutoff {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 0;
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.ord-meta-cutoff strong {
  color: var(--nx-text);
  font-weight: 600;
}
.ord-meta-cutoff svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.ord-meta-cutoff.is-soon {
  color: var(--nx-gold, #d4a44e);
}
.ord-meta-cutoff.is-soon strong {
  color: var(--nx-gold, #d4a44e);
}
.ord-meta-cutoff.is-soon svg { opacity: 1; }
.ord-meta-cutoff.is-past {
  color: #d35454;
}
.ord-meta-cutoff.is-past strong {
  color: #d35454;
}
.ord-meta-cutoff.is-past svg { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   VENDOR CARD — "needs ordering" pip
   ─────────────────────────────────────────────────────────────────────
   Small gold dot in the top-right of the vendor avatar wrap, visible
   only when delivery is imminent (today/tomorrow) and there's no
   active order yet. Subtle pulse draws attention without nagging.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-vendor-row.needs-ordering .ord-vendor-avatar-wrap::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nx-gold, #d4a44e);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.65);
  animation: ord-vendor-pip-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ord-vendor-pip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.85; }
}
.ord-vendor-avatar-wrap {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
   VENDOR MENU — "Reorder last" primary item with title + sub
   ─────────────────────────────────────────────────────────────────────
   The reorder action gets a slightly different visual treatment than
   plain menu items: gold-tinted background + bold title + muted sub
   line ("from 4 days ago" / "no past orders found"). Disabled state
   greys the whole row when there's nothing to reorder.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-vmenu-item.ord-vmenu-item-primary {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.08));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 14px;
  margin: 0 4px 6px;
  align-items: flex-start;
}
.ord-vmenu-item.ord-vmenu-item-primary:not(.is-disabled):hover,
.ord-vmenu-item.ord-vmenu-item-primary:not(.is-disabled):active {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.14));
  border-color: var(--nx-gold);
}
.ord-vmenu-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ord-vmenu-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  flex: 1;
}
.ord-vmenu-item-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text);
}
.ord-vmenu-item-primary .ord-vmenu-item-title {
  color: var(--nx-gold);
}
.ord-vmenu-item-sub {
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   DAILY PULSE — operational summary at top of duties screen
   ─────────────────────────────────────────────────────────────────────
   Compact horizontal-scrolling chip strip surfacing today's must-handle
   items: vendors that need ordering, cutoffs approaching, open issues,
   deliveries arriving today, orders awaiting confirmation.

   When everything is handled, renders a subtle "All clear" line with
   the gold diamond — calm-state confirmation rather than a hidden empty
   panel that leaves the user wondering if the panel is broken.

   Each chip is tappable to take the user to the relevant items.
   Color-coded by urgency: gold for time-pressure, amber for issues,
   muted for informational.
   ═══════════════════════════════════════════════════════════════════════ */

.ord-pulse {
  /* Container is empty when nothing's surfaced — just collapses */
  margin-bottom: 4px;
}

.ord-pulse-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ord-pulse-chips::-webkit-scrollbar { display: none; }

.ord-pulse-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  color: var(--nx-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.ord-pulse-chip:active {
  transform: scale(0.97);
}
.ord-pulse-chip:hover {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.12));
  border-color: var(--nx-gold);
}
.ord-pulse-chip svg {
  flex-shrink: 0;
  opacity: 0.8;
}
.ord-pulse-chip-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-gold, #d4a44e);
  min-width: 14px;
  text-align: center;
}
.ord-pulse-chip-label {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--nx-text);
}

/* Color variants by category */
.ord-pulse-chip.is-needs {
  border-color: rgba(212, 164, 78, 0.55);
  background: rgba(212, 164, 78, 0.10);
}
.ord-pulse-chip.is-needs svg { color: var(--nx-gold); opacity: 1; }
.ord-pulse-chip.is-needs .ord-pulse-chip-count { color: var(--nx-gold); }

.ord-pulse-chip.is-cutoff {
  border-color: rgba(212, 164, 78, 0.7);
  background: rgba(212, 164, 78, 0.14);
}
.ord-pulse-chip.is-cutoff svg { color: var(--nx-gold); opacity: 1; }
.ord-pulse-chip.is-cutoff .ord-pulse-chip-count {
  color: var(--nx-gold);
}

.ord-pulse-chip.is-issue {
  border-color: rgba(211, 84, 84, 0.5);
  background: rgba(211, 84, 84, 0.08);
}
.ord-pulse-chip.is-issue svg { color: #d35454; opacity: 1; }
.ord-pulse-chip.is-issue .ord-pulse-chip-count { color: #d35454; }

.ord-pulse-chip.is-arriving {
  border-color: rgba(95, 165, 90, 0.4);
  background: rgba(95, 165, 90, 0.08);
}
.ord-pulse-chip.is-arriving svg { color: #5fa55a; opacity: 1; }
.ord-pulse-chip.is-arriving .ord-pulse-chip-count { color: #5fa55a; }

.ord-pulse-chip.is-awaiting {
  /* Default styling, no special tint — informational */
}
.ord-pulse-chip.is-awaiting svg { color: var(--nx-muted, var(--muted)); }
.ord-pulse-chip.is-awaiting .ord-pulse-chip-count { color: var(--nx-text); }

/* Calm state — nothing surfaced */
.ord-pulse-calm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 6px;
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.ord-pulse-calm-dot {
  color: var(--nx-gold, #d4a44e);
  opacity: 0.7;
  font-size: 12px;
}

/* Vendor-row scroll-target flash — used by the "needs ordering" pulse
   chip to highlight which vendor it landed on after scrolling */
.ord-vendor-row.is-flash {
  animation: ord-vendor-flash 1.6s ease-out;
}
@keyframes ord-vendor-flash {
  0%   { background: var(--nx-gold-mist, rgba(212, 164, 78, 0.18)); }
  100% { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VENDOR EDITOR — per-location scope banner
   ─────────────────────────────────────────────────────────────────────
   Surfaces at the top of the Recipients card to make crystal clear that
   CC/BCC/Other are PER-LOCATION (each restaurant is its own profile).
   When the active vendor has other-location customizations, the banner
   adds a hint so the user knows there are slices they're not seeing.
   ═══════════════════════════════════════════════════════════════════════ */

.rx-loc-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.08));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nx-text);
}
.rx-loc-scope-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--nx-gold);
}
.rx-loc-scope-text strong {
  color: var(--nx-gold);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   PER-LOCATION SCHEDULE — custom override toggle UX
   ─────────────────────────────────────────────────────────────────────
   The Schedule card has TWO modes of editing: "default" (changes apply
   to every location that doesn't have a custom override) and "custom for
   [Loc]" (changes apply only to the active location's slice). The
   visual treatment makes the mode obvious so users know what their
   edits will affect.
   ═══════════════════════════════════════════════════════════════════════ */

/* Banner variant: customized state gets gold-emphasis border so it's
   visually distinct from the default-mode banner. */
.rx-loc-scope.rx-sched-scope {
  margin-bottom: 12px;
}
.rx-loc-scope.rx-sched-scope.is-custom {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.13));
  border-color: var(--nx-gold);
}

/* Toggle row: button group sitting between the banner and the inputs. */
.rx-sched-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.rx-sched-toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  color: var(--nx-text);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.rx-sched-toggle-btn:hover {
  border-color: var(--nx-gold);
}
.rx-sched-toggle-btn.is-active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
}
.rx-sched-reset-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  color: var(--nx-faint);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.rx-sched-reset-btn:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold);
}

/* Default-mode summary: compact info box showing what the vendor's
   default schedule actually IS, so the user can see what they'd be
   overriding. Hides when user toggles into custom mode. */
.rx-sched-default-summary {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rx-sched-default-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.rx-sched-default-label {
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.rx-sched-default-value {
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  text-align: right;
}
.rx-sched-default-hint {
  margin-top: 2px;
  color: var(--nx-faint);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
}

/* When in custom-override mode, fields get a subtle gold accent on the
   left edge — visual signal that "edits here go into the override slice." */
.rx-form-field.is-editing-override {
  position: relative;
  padding-left: 12px;
  border-left: 2px solid var(--nx-gold);
  margin-left: -12px;
  padding-right: 4px;
}
.rx-form-field.is-editing-override::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--nx-gold);
  box-shadow: 0 0 8px rgba(212, 164, 78, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
   AVAILABILITY CARD — location pills
   ═══════════════════════════════════════════════════════════════════════ */

.rx-loc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rx-loc-availability-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  color: var(--nx-faint);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rx-loc-availability-pill:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold);
}
.rx-loc-availability-pill.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
  box-shadow: 0 0 14px rgba(212, 164, 78, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSACTIONS — full-history subscreen
   ─────────────────────────────────────────────────────────────────────
   Full-screen overlay accessed from "View all transactions →" on the
   home pulse. Shows every order at the active location with status
   pills, search, time-grouped list, and pagination. Designed so the
   same shape can be reused for cleaning's history view and any other
   duty module — pill bar at top, time-grouped list below.
   ═══════════════════════════════════════════════════════════════════════ */

/* Entry-point link below the home recent pulse */
.ord-recent-tx-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 16px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.ord-recent-tx-link:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
}
.ord-recent-tx-link-arrow {
  display: inline-block;
  transition: transform 140ms ease;
}
.ord-recent-tx-link:hover .ord-recent-tx-link-arrow {
  transform: translateX(2px);
}

/* Overlay shell — fade backdrop + sliding sheet */
.ord-tx-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.ord-tx-overlay.is-open {
  pointer-events: auto;
}
.ord-tx-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 5, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}
.ord-tx-overlay.is-open .ord-tx-backdrop {
  opacity: 1;
}
.ord-tx-sheet {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--nx-bg, #faf7f1);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 220ms ease, opacity 200ms ease;
  overflow: hidden;
}
.ord-tx-overlay.is-open .ord-tx-sheet {
  transform: translateY(0);
  opacity: 1;
}

/* Header — sticky at top with back button + title + location subtitle */
.ord-tx-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  flex-shrink: 0;
}
.ord-tx-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.25));
  border-radius: 50%;
  color: var(--nx-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: border-color 140ms ease, color 140ms ease;
}
.ord-tx-back:hover {
  border-color: var(--nx-gold);
  color: var(--nx-gold);
}
.ord-tx-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ord-tx-title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nx-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ord-tx-loc-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--nx-faint);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Status pill bar — horizontal scroll if it overflows. Sits above the
   search bar, below the header. Each pill carries a count badge. */
.ord-tx-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.ord-tx-pills::-webkit-scrollbar { display: none; }
.ord-tx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.28));
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ord-tx-pill:hover {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}
.ord-tx-pill.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
}
[data-theme="light"] .ord-tx-pill.active { color: var(--surface); }
.ord-tx-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--nx-surface-1);
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ord-tx-pill.active .ord-tx-pill-count {
  background: rgba(28, 20, 8, 0.18);
  color: var(--nx-gold-on, #101626);
}

/* Search bar */
.ord-tx-search-wrap {
  padding: 0 16px 10px;
  flex-shrink: 0;
}
.ord-tx-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  -webkit-appearance: none;
  appearance: none;
}
.ord-tx-search::placeholder { color: var(--nx-faint); }
.ord-tx-search:focus {
  outline: none;
  border-color: var(--nx-gold);
}

/* List body — scrollable */
.ord-tx-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.ord-tx-list.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.ord-tx-loading,
.ord-tx-empty,
.ord-tx-end {
  padding: 32px 16px;
  text-align: center;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.ord-tx-end {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 24px 16px;
}

/* Time-bucket dividers — gold mono labels matching the home pulse */
.ord-tx-divider {
  margin: 18px 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nx-faint);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ord-tx-divider:first-child { margin-top: 4px; }

/* Transaction row — compact 2-line card with avatar, vendor name +
   short ID on top, status meta below, chevron on right. */
.ord-tx-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 6px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, transform 80ms ease;
  font-family: inherit;
  color: inherit;
}
.ord-tx-row:hover {
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.4));
}
.ord-tx-row:active {
  transform: scale(0.997);
}
.ord-tx-row-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ord-tx-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ord-tx-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.ord-tx-row-vendor {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ord-tx-row-shortid {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--nx-faintest, rgba(0, 0, 0, 0.32));
  letter-spacing: 0.4px;
}
.ord-tx-row-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: 0.3px;
}
.ord-tx-row-deliv,
.ord-tx-row-when {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Load more button at the bottom of the list */
.ord-tx-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 8px;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 14px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.ord-tx-load-more:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}

/* ════════════════════════════════════════════════════════════════════════════
   ORD ITEM ROW — PAR CHIP + READABLE PACK SIZE
   ════════════════════════════════════════════════════════════════════════════
   Two related changes:

   1) PAR CHIP — par used to be inline in the meta line as
      "BLEACH GERMICIDAL · SKU 518709 · FRST MRK · par: 5 GA Mon" which
      hid the most useful number behind a comma-separated wall of text.
      It's now a dedicated chip below the meta line so the user can see
      PAR + UNIT at a glance. Day suffix (Mon/Tue/…) only appears when
      a per-weekday override is active for the delivery date.

   2) PACK SIZE — vendor strings like "3/1 GA" were unreadable. Now the
      right column shows two lines:
        primary:  "3 × 1 GA"   (case structure, made explicit with ×)
        secondary: "case"      (muted hint that it's a pack)
      Singular packs ("1/1 CT") collapse to just "1 CT" with no sub-line.
   ════════════════════════════════════════════════════════════════════════════ */

/* v18.28 (polish) — par chip rework.
   Previously a bordered pill ("PAR 2 CT · THU") that read like raw
   data. Now: borderless, inline-feeling, the par qty + day are the
   readable bits. Status color:
     • has-qty AND meets par → soft green (you're good)
     • has-qty but BELOW par → soft amber warning
     • zero qty                → faint default (waiting)
   Color flips happen via .is-met / .is-short modifier classes if
   the JS adds them; default styling stays neutral so unmodified
   rows still look polished. */
.ord-item-par-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 0 2px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--nx-faint, var(--muted));
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.85;
}
.ord-item-par-chip.is-met    { color: #6da46d; opacity: 1; }
.ord-item-par-chip.is-short  { color: #d9a44e; opacity: 1; }
.ord-item-par-label {
  /* v280 — the gold PAR label on every row was another coat of yellow;
     pars are reference numbers (Alfredo's law), so they whisper. */
  color: var(--nx-faint, var(--muted));
  font-weight: 700;
  letter-spacing: 1.4px;
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.85;
}
.ord-item-par-qty {
  color: var(--nx-text, var(--text));
  font-weight: 700;
  font-size: 12px;
}
.ord-item-par-unit {
  color: var(--nx-faint, var(--muted));
  font-weight: 500;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.6px;
}
.ord-item-par-day {
  /* v280 — muted with the rest of the par chip. */
  color: var(--nx-faint, var(--muted));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
  opacity: 0.85;
}

/* v280 — set rows no longer tint the par chip into a gold box; the
   is-met/is-short status colors carry the meaning on their own. */
.ord-item-row.has-qty .ord-item-par-chip {
  background: transparent;
  border-color: transparent;
}

/* Right-edge pack-size column — overrides the old narrow 26px unit cell
   that was clipping multi-character pack strings. New width fits common
   formats ("3 × 1 GA", "12 × 32 OZ", "case · 6") without truncation. */
.ord-item-unit {
  flex-shrink: 0;
  width: auto;
  min-width: 60px;
  max-width: 96px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.15;
}
.ord-item-unit-pack {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--nx-text, var(--text));
  text-transform: uppercase;
  white-space: nowrap;
}
/* v18.28 — universally hide the unit secondary "CASE" sublabel. The
   user-editable unit input already shows the actual unit ("ct", "ea",
   "gal"); the sublabel saying "CASE" underneath is redundant when the
   unit matches and actively confusing when it doesn't (e.g. you typed
   "ct" but the catalog default was "case", and the label kept saying
   "CASE"). Killed everywhere, not just narrow viewports. */
.ord-item-unit-sub { display: none !important; }
.ord-item-row.has-qty .ord-item-unit-pack {
  color: var(--nx-gold);
}

/* v18.25 — Editable unit text input inside the unit cell. Matches the
   typography of .ord-item-unit-pack but is a real input so the user
   can type any unit ("ea", "cs", "bag", "gal", "lbs", "box"…) per-line. */
.ord-item-unit-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--nx-text, var(--text));
  text-transform: lowercase;
  text-align: right;
  outline: none;
  -webkit-appearance: none;
}
.ord-item-unit-input:focus {
  border-color: var(--nx-gold);
  background: rgba(212,164,78,0.06);
}
.ord-item-row.has-qty .ord-item-unit-input {
  color: var(--nx-gold);
  border-color: rgba(212,164,78,0.25);
}

/* Phone — keep the chip and the right column from fighting for width
   on narrow viewports. The qty stepper stays its full-size touch target;
   the par chip wraps under the meta line; the right column keeps its
   auto width but cap it tighter.
   v18.28 (round 3) — Orion still seeing "BLACK TRASH B…" / "DEGREASER
   SP…" truncation on his phone. Root cause: the media query was scoped
   to max-width 420px, which doesn't cover modern iPhones (Pro Max
   models are 430-440px wide in portrait). Bumped to 500px so every
   iPhone in portrait gets the tightening. Also pulled the qty pill
   shrink INSIDE the media query (was set unconditionally in the base
   rules, but the kitchen-readability override at line 8569+ was
   widening it again).
   Net target: qty pill ~76px, unit cell ~28-34px, name column gets
   roughly half the viewport. */
@media (max-width: 500px) {
  .ord-item-row { gap: 6px; padding: 12px 8px; }
  .ord-item-name { font-size: 14.5px !important; }
  .ord-item-meta { font-size: 10px !important; }
  /* Shrink qty pill aggressively — buttons stay tall enough to tap
     comfortably (34px height), just narrower. Input fits 2 digits. */
  .ord-qty-btn   { width: 24px !important; height: 34px !important; font-size: 16px !important; }
  .ord-qty-input { width: 28px !important; height: 34px !important; font-size: 13px !important; }
  /* Unit cell tightened further — fits "gal" / "ea" / "ct" easily */
  .ord-item-unit { min-width: 28px !important; max-width: 38px !important; }
  .ord-item-unit-pack  { font-size: 10px; }
  .ord-item-unit-input { font-size: 10.5px !important; padding: 3px 5px !important; }
  /* Smaller par chip — softer presence so name has all the visual weight */
  .ord-item-par-chip { font-size: 9.5px; }
  .ord-item-par-qty  { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   VENDOR ROW "⋮" MENU — ALWAYS VISIBLE v2 — 2026-05-08
   ════════════════════════════════════════════════════════════════════════════
   v1 fix (visibility-only — color/border/background) didn't take. Real cause
   is layout, not contrast: when a vendor's row has long preview text (like
   "Sent · awaiting confirmation · deliver Mon, May 11"), the row's
   intrinsic min-content width grows large enough that, combined with the
   40px menu sibling and the wrap gap, it exceeds the wrap's available
   width. The flex shrink rules then push the menu out of the visible area.

   v2 strategy: take the menu OUT of flex flow entirely. The wrap becomes
   the positioning anchor (it already has position: relative from earlier
   styles), the menu absolutely-positions to the wrap's right edge, and
   the wrap reserves 46px of right padding so the row never overlaps the
   menu's slot. Now no matter how wide the row content is, the menu sits
   at a fixed right offset and is always visible. The card itself does
   NOT change — the brief was "I need the card to stay the same."

   Drag-reorder mode (.is-reordering) opts out of the right padding because
   no menu renders in that state — the drag handle on the LEFT replaces it.
   ════════════════════════════════════════════════════════════════════════════ */

.ord-vendor-row-wrap {
  position: relative !important;        /* already set in dragging-state CSS but make explicit */
  padding-right: 46px;                  /* 40px menu + 6px gap from wrap edge */
}
.ord-vendor-row-wrap.is-reordering {
  padding-right: 0;                     /* drag mode — no menu, no reserved space */
}
.ord-vendor-menu {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  /* Match the row's vertical footprint minus a tiny inset so the gold-
     line border doesn't visually crowd the row's border. */
  height: calc(100% - 16px) !important;
  min-height: 56px;
  color: var(--nx-muted, var(--nx-faint)) !important;
  border: 1px solid var(--nx-gold-line) !important;
  background: var(--nx-surface-1) !important;
  border-radius: 16px !important;
  z-index: 2;
}
.ord-vendor-menu:hover,
.ord-vendor-menu:active,
.ord-vendor-menu:focus-visible {
  color: var(--nx-gold) !important;
  border-color: var(--nx-gold) !important;
  background: var(--nx-gold-soft, var(--nx-gold-mist, var(--nx-surface-1))) !important;
}
[data-theme="light"] .ord-vendor-menu {
  color: var(--nx-muted) !important;
  border-color: var(--nx-gold-line) !important;
  background: var(--nx-surface-1) !important;
}
[data-theme="light"] .ord-vendor-menu:hover,
[data-theme="light"] .ord-vendor-menu:active {
  color: var(--nx-gold-deep, var(--nx-gold)) !important;
  border-color: var(--nx-gold-deep, var(--nx-gold)) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7 — KITCHEN READABILITY SWEEP
   ────────────────────────────────────────────────────────────────────────────
   Designed against kitchen-environment constraints:

   • Phone is 18-24" away (counter, hand-on-the-go), often at an angle
   • Variable lighting — overhead heat lamp glare, dim prep, harsh service
   • Wet/oily/gloved fingertips → larger tap targets, less precision
   • Glance-and-go reading — must parse in <1 second, not careful study
   • Errors are operationally expensive (wrong qty = food cost, wrong vendor
     email = no order)

   Anchored to: Apple HIG (17pt body min on iOS), Material 3 (16dp body),
   WCAG AAA (18pt regular for "large text" enhanced contrast), and the
   in-kitchen patterns of Square POS, Toast KDS, Resy.

   Strategy: don't grow EVERYTHING — that creates visual noise and crowding.
   Bump the body/meta/label tier (the worst-offender 9-13px stuff) up into
   the 13-16.5px range. Keep displays/heroes roughly where they were.
   Form inputs go to 16px (also prevents iOS focus-zoom — chefs lose their
   place when the screen jumps).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── VENDOR CARDS (the primary navigation surface) ─────────────────
   These are the most-viewed surface in the app — the home for picking
   "who am I ordering from next?" Every chef sees these multiple times
   a shift. Old meta line was 12.5px which is sub-WCAG-AAA-large for
   secondary content; bumped to 14.5px to make status preview parseable
   without leaning in. */
.ord-vendor-name,
.ord-recent-vendor {
  font-size: 18px !important;        /* was 17px — anchor of every card */
  letter-spacing: 0.05px;
}
.ord-vendor-meta,
.ord-recent-meta {
  font-size: 14.5px !important;      /* was 12.5 — biggest readability win */
  line-height: 1.4;
}
.ord-vendor-pill,
.ord-recent-pill {
  font-size: 10.5px !important;      /* was 9 — pills should be readable */
  padding: 3px 9px;                  /* was 2px 8px — match new size */
  letter-spacing: 1.2px;
}

/* ─── PULSE CHIPS (home page operational stat strip) ────────────────
   The "5 awaiting" / "2 issues" chips at the top — counts already loud
   enough but labels were 9-9.5px. Bumped so the chef can SEE what each
   count refers to without leaning in. */
.ord-pulse-chip-label {
  font-size: 11.5px !important;
  letter-spacing: 0.8px;
}

/* ─── ORDER ENTRY ITEM ROWS (where actual ordering happens) ─────────
   Item name was already bumped to 15.5px; pushing to 16.5 because this
   IS the work surface. Subtext (description, SKU, brand, pack) carries
   important verifying info that was 11-12px and barely readable —
   13.5-14px makes it scan-able. The pack pill on the right side gets
   bigger so chef can verify "yes I want 3/1 GA bleach not 1/1 GA"
   without zooming.
   v18.28 (round 2) — on narrow phones the 16.5px name was forcing
   truncation ("SMALL TRASH B…"). Override only kicks in for wider
   viewports (>420px); narrow phones keep 14.5px so longer names fit
   on a single line. Kitchen-tablet readability preserved at the bigger
   width where it actually matters. */
@media (min-width: 501px) {
  .ord-item-name {
    font-size: 16.5px !important;      /* was 15.5 → bump for primary work surface */
    line-height: 1.25;
  }
}
.ord-item-sub,
.ord-item-meta,
.ord-item-row .ord-item-sub-line {
  font-size: 13.5px !important;      /* was 11-12 — secondary verifying info */
  line-height: 1.4;
}
.ord-item-pack-primary,
.ord-item-unit-pack {
  font-size: 13px !important;        /* was 11 — pack is verification-critical */
  letter-spacing: 0.4px;
}
.ord-item-pack-sub,
.ord-item-unit-sub {
  font-size: 10.5px !important;      /* was 9 — "case" / "each" subtext */
  letter-spacing: 0.6px;
}
.ord-item-par-chip-qty {
  font-size: 14px !important;        /* was 12 — par target qty is glanceable */
}
.ord-item-par-chip-label,
.ord-item-par-chip-unit {
  font-size: 9.5px !important;       /* tiny but readable — these are tokens */
  letter-spacing: 0.8px;
}

/* ─── QTY INPUT + STEPPERS (the tap target for quantities) ──────────
   The +/- buttons + qty input get bigger so wet/gloved fingers can
   hit them reliably. 44x44 is Apple HIG; we go a touch bigger. The
   qty input itself reads in mono — bumping for clarity at glance.
   v18.30 — scoped to tablets (>500px). On phones this rule had been
   stomping the phone-tightening @media (max-width: 500px) block via
   source order, leaving the catalog and ordering screens with huge
   38px buttons. Now the bigger tap targets only show on kitchen
   tablets where the rule's wet-gloves rationale applies. */
@media (min-width: 501px) {
  .ord-qty-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;        /* was 16 — make + and − unmistakable */
  }
  .ord-qty-input {
    font-size: 16px !important;        /* was 13-14 — also prevents iOS zoom */
    width: 56px !important;
    height: 38px !important;
  }
}

/* ─── ORDER ENTRY HEADER + DELIVERY ROW ─────────────────────────────
   Vendor name in the entry overlay header gets the same bump as the
   card it came from, for consistency. Delivery date and meta lines
   bumped so the chef can verify "yes I'm sending to PFG Este for
   delivery Mon May 11" without reading. */
.ord-entry-vendor {
  font-size: 18.5px !important;      /* was 17 */
  letter-spacing: 0.05px;
}
.ord-entry-sub {
  font-size: 13.5px !important;      /* was 12 */
}
.ord-meta-label {
  font-size: 11px !important;
  letter-spacing: 1.2px;
}
.ord-meta-warn,
.ord-meta-cutoff {
  font-size: 12.5px !important;      /* was 11.5 — these are warnings, must read */
  line-height: 1.4;
}

/* ─── SEARCH INPUTS ─────────────────────────────────────────────────
   All search inputs go to 16px (iOS zoom-prevention threshold) AND
   readability for partial-attention searches. Inputs below 16px on
   iOS focus → page zooms in → the chef loses their place. */
.ord-search,
.ord-recent-search,
.ord-entry-search {
  font-size: 16px !important;        /* was 13-14 */
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* ─── FORMS (vendor editor, item editor, schedule editor) ───────────
   Form inputs go to 16px to stop iOS zoom-on-focus. Mono labels
   bumped from a barely-visible 9.5px to 11px — they're still labels
   but now actually labels you can read. Form hints similarly. */
.ord-form-input,
.ord-form-textarea {
  font-size: 16px !important;        /* was 14 — iOS zoom threshold + readability */
  padding: 12px 14px !important;
}
.ord-form-textarea {
  font-size: 14.5px !important;      /* mono can be slightly smaller */
  line-height: 1.5;
}
.ord-form-label {
  font-size: 11px !important;        /* was 9.5 — mono labels finally legible */
  letter-spacing: 1.2px;
}
.ord-form-hint {
  font-size: 13px !important;        /* was 11-11.5 — hint text matters */
  line-height: 1.45;
}
.ord-form-input--mini {
  font-size: 16px !important;        /* keep iOS-zoom safe — must stay on all viewports */
}
.ord-form-input--par {
  font-size: 16px !important;
}
.ord-form-input--unit {
  font-size: 15px !important;        /* dropdown — slightly smaller is fine */
}
/* v18.30 — width pins moved into a tablet-only block. Same rationale
   as the qty pill fix: fixed widths via `flex: 0 0 Npx !important`
   refuse to shrink even when a phone form gets cramped, causing
   horizontal overflow. Larger inputs help wet/gloved kitchen tablet
   use, but on a 393px phone they're just rigid. Font-size + iOS-zoom
   prevention (16px) stays unconditional above so phones still get
   the zoom protection without the width lock. */
@media (min-width: 501px) {
  .ord-form-input--mini {
    width: 56px !important;
    flex: 0 0 56px !important;
  }
  .ord-form-input--par {
    width: 90px !important;
  }
}

/* ─── CTA + ACTION BUTTONS ──────────────────────────────────────────
   The "Review & Send" button is the most important press in the
   ordering flow — make it confidently sized. Bottom action buttons
   (Reorder / Report issues / Delete) likewise.  */
.ord-entry-cta,
.ord-send-cta {
  font-size: 16px !important;        /* was 14.5 — primary CTA */
  height: 54px !important;           /* was 50 — fingerprint-friendly */
  letter-spacing: 0.4px;
}
.ord-odetail-action {
  font-size: 14px !important;        /* was 12-13 */
}
.ord-vmenu-action-title {
  font-size: 15.5px !important;
}
.ord-vmenu-action-sub {
  font-size: 13px !important;        /* was 11.5 */
  line-height: 1.4;
}

/* ─── EMPTY STATES + HINT TEXT ──────────────────────────────────────
   When a chef opens a vendor with no catalog yet, or filters down to
   nothing, the empty state explains what to do next. Was barely
   readable at 11-13.5px. Bumping makes the guidance actionable. */
.ord-empty {
  font-size: 14.5px !important;      /* was 13.5 */
  line-height: 1.5;
}
.ord-empty-hint {
  font-size: 13.5px !important;      /* was 11 */
  line-height: 1.5;
}

/* ─── SECTION HEADERS + LABELS ──────────────────────────────────────
   Section headers in catalog/entry — were okay-sized but could be
   bolder. Labels in metadata strips made readable. */
.ord-section-label,
.ord-entry-section-label {
  font-size: 13px !important;        /* was 11 */
  letter-spacing: 1.4px;
  font-weight: 600;
}

/* ─── CATALOG EDITOR + ORDER REVIEW + ORDER DETAIL LINE ITEMS ───────
   The display/read-only views of items. Match the entry sizes so
   muscle memory carries between editing and viewing. */
.ord-cat-item-name,
.ord-vitem-name {
  font-size: 16px !important;
  line-height: 1.3;
}
.ord-cat-item-meta,
.ord-vitem-meta {
  font-size: 13px !important;
  line-height: 1.4;
}
.ord-review-name {
  font-size: 15.5px !important;      /* was 13-14 */
  line-height: 1.35;
}
.ord-review-qty {
  font-size: 15px !important;        /* was 12 — qty is verification-critical */
  letter-spacing: 0.3px;
}
.ord-review-alias,
.ord-review-sku {
  font-size: 12.5px !important;
  letter-spacing: 0.3px;
}
.ord-odetail-line-name {
  font-size: 16px !important;        /* was 14 */
}
.ord-odetail-line-qty {
  font-size: 15.5px !important;      /* qty is the answer to "what did I order" */
}
.ord-odetail-line-unit,
.ord-odetail-line-alias,
.ord-odetail-line-note {
  font-size: 13px !important;        /* was 11-12 */
  line-height: 1.4;
}
.ord-odetail-vendor {
  font-size: 19px !important;        /* was 18 — this is the page header */
}
.ord-odetail-id {
  font-size: 13px !important;
  letter-spacing: 0.3px;
}

/* ─── DAY PILLS + PACK INPUT × DIVIDER ──────────────────────────────
   Day pills (Sun/Mon/Tue) in schedule editor and item per-day pars.
   Were 10.5px — pills don't need huge but kitchen glance benefits
   from a small bump. */
.ord-day-pill,
.rx-day-pill {
  font-size: 11.5px !important;      /* was 10.5 */
  padding: 10px 6px;
  letter-spacing: 0.7px;
}
.ord-form-pack-x {
  font-size: 16px !important;        /* was 14 — × divider visible */
}

/* ─── SAVE STATUS + DISCARD BUTTON ──────────────────────────────────
   Auto-save indicator at bottom of entry was 10px — invisible to
   anyone over 35. Bumped to 12.5px. Discard button text bumped too. */
.ord-entry-save-status {
  font-size: 12.5px !important;      /* was 10 */
  height: auto;
}
.ord-entry-discard {
  font-size: 13.5px !important;      /* was 12.5 */
}

/* ─── TIMELINE STEP LABELS (order detail status timeline) ───────────
   The "DRAFT → SENT → CONFIRMED → DELIVERED → CLOSED" timeline. Step
   labels were 8.5-9px — basically illegible. Bumping. */
.ord-odetail-tl-label {
  font-size: 11px !important;        /* was 8.5-9 */
  letter-spacing: 1px;
}
.ord-odetail-tl-ts {
  font-size: 10px !important;        /* was 8 */
  letter-spacing: 0.4px;
}

/* ─── VENDOR EDITOR (rx-* classes from record-editor) ───────────────
   The vendor settings card. Many sub-labels were tiny. Bumping the
   form-label / form-hint / chip-related sizes for read-at-a-glance. */
.rx-form-label {
  font-size: 11px !important;        /* was 9.5 */
  letter-spacing: 1.2px;
}
.rx-form-hint,
.rx-loc-scope-text {
  font-size: 13px !important;        /* was 11-11.5 */
  line-height: 1.45;
}
.rx-chip-pill {
  font-size: 10.5px !important;      /* was 9 */
  letter-spacing: 1.2px;
  padding: 3px 9px;
}
.rx-chip-hint {
  font-size: 12.5px !important;
  line-height: 1.4;
}
.rx-chip-add {
  font-size: 13px !important;        /* was 12 */
}
.rx-form-input {
  font-size: 16px !important;        /* iOS zoom threshold */
  padding: 12px 14px !important;
}
.rx-cutoff-time,
.rx-cutoff-days {
  font-size: 16px !important;
}
.rx-cutoff-conn {
  font-size: 14px !important;        /* was 12 */
}

/* ─── DATE PICKER + DELIVERY DATE INPUT ─────────────────────────────
   Native date input — tied to system rendering on mobile, but the
   font-size we set affects the "tap me to pick" zone. Bumped. */
.ord-meta-field input[type="date"],
.ord-meta-field input[type="time"] {
  font-size: 16px !important;
  padding: 10px 12px;
}

/* ─── TOAST NOTIFICATIONS (bottom-of-screen feedback) ───────────────
   Toasts say things like "Order sent" or "Draft discarded" — chefs
   may be moving and need to verify the action took. Bumping. */
.nx-toast,
.ord-toast {
  font-size: 14.5px !important;
  padding: 14px 18px !important;
}

/* ─── LIGHT-THEME TWEAKS ────────────────────────────────────────────
   Light theme generally works at the same sizes — the contrast is
   different but readability scales the same. No size adjustments
   needed beyond what's above. Color contrast is already AA-compliant
   from the design tokens. */

/* ════════════════════════════════════════════════════════════════════════════
   END PHASE 7 — KITCHEN READABILITY SWEEP
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   v18.27 — iOS HORIZONTAL-SCROLL GUARD
   ────────────────────────────────────────────────────────────────────────────
   iOS Safari + WebKit are aggressive about creating horizontal page scroll
   when ANY descendant overflows its parent's content box. This block stops
   it at every level of the ordering surface tree:

     1. The entry overlay clips at its own boundary (.ord-entry-overlay
        already does overflow:hidden via shorthand; explicit overflow-x
        belt + suspenders).
     2. The scrolling lists (.ord-entry-list, etc.) explicitly say
        "scroll y, never x" — without this, a descendant width overflow
        bubbles up into an internal horizontal scrollbar.
     3. Text containers that hold long unbroken strings (vendor SKUs,
        full product codes like "CAN LINER 56 GA XHW BLK 43X47") use
        overflow-wrap:anywhere so the string breaks at any character
        rather than pushing the parent wider.
     4. The vendor list and recent-orders surfaces get the same guards
        so the main ordering view (outside the overlay) behaves too.
   ──────────────────────────────────────────────────────────────────────────── */

.ord-entry-overlay,
.ord-entry-list,
.ord-entry-section,
.ord-entry-cart-list,
.ord-vendor-row-wrap,
.ord-vendor-row,
.ord-vendor-list,
.ord-cart-overlay,
.ord-veditor-overlay,
.ord-vdetail-overlay {
  overflow-x: hidden;
  /* max-width: 100vw is harmful when the element sits inside a flex
     row with its own scrollbar accounting — don't add it here. */
}

/* Long unbroken text — SKUs, vendor codes, technical names — must
   wrap inside their cell, never push the row wider. overflow-wrap:
   anywhere is the modern correct property; word-break:break-word is
   the older WebKit fallback. Both together are safe.

   .ord-item-name + .ord-vendor-name keep their existing nowrap +
   ellipsis from the row layout; this only applies to the meta /
   subtitle lines where wrapping is acceptable. */
.ord-item-meta,
.ord-item-house,
.ord-vendor-preview,
.ord-vendor-meta,
.ord-vdetail-sub,
.ord-recipient-display,
.ord-line-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Defensive: in case any flex child anywhere in the ordering tree
   forgot its min-width:0, this rule sets it. Without min-width:0,
   flex children refuse to shrink below their intrinsic content width,
   which is the #1 cause of overflow on long names + small phones. */
.ord-item-row > *,
.ord-vendor-row > *,
.ord-cart-line > *,
.ord-line-row > * {
  min-width: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   v18.28 — INLINE HEADER DATE CHIP
   ────────────────────────────────────────────────────────────────────────────
   Date moved from the standalone "DELIVERY 05/21/2026" row (~60px of
   vertical space) into the header subtitle next to the location. Reads
   like "ESTE · Thu May 21" with the date acting as a tappable chip that
   opens the native picker. Saves a full row of vertical space — about
   one more item visible per viewport.
   ──────────────────────────────────────────────────────────────────────────── */

.ord-entry-sub-row {
  display: flex;
  align-items: center;
  /* v18.28 — was just flex (left-aligned). Parent .ord-entry-title has
     text-align:center which centers block children like the vendor name
     above, but flex children don't respect text-align. justify-content
     centers the subtitle horizontally under "PFG". */
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ord-entry-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--nx-gold-line);
  background: transparent;
  color: var(--nx-gold);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s;
}
.ord-entry-date-chip:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.06));
}
.ord-entry-date-chip:disabled {
  opacity: 0.5;
  cursor: default;
}
/* The native date input sits invisibly over the chip so taps open the
   picker. iOS shows the system date picker; desktop opens its native
   widget. Visible chip text is updated by the JS handler. */
.ord-entry-date-chip > input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
}


/* ════════════════════════════════════════════════════════════════════════════
   v18.29 — CATALOG ROW VISUAL RESET (round 2)
   ────────────────────────────────────────────────────────────────────────────
   Catalog row now uses the EXACT same .ord-qty pill + .ord-item-unit-input
   classes as the ordering screen. Same component, same dimensions, same
   keyboard / tap behaviors. The .ved-* hooks are additional classes for
   handler wiring only.

   Important: ordering's gold-fill hero treatment is scoped to
   .ord-item-row.has-qty — the catalog row is .ved-item-row, so the
   hero gold-fill does NOT cascade here. That's intentional. Most
   catalog items have a par, so the screen reads calmly: a row of
   gold-bordered neutral pills. The "this item has a par" signal lives
   inside the input itself — the par number goes gold via the rule below.
   ──────────────────────────────────────────────────────────────────────────── */

.ved-item-row {
  gap: 6px !important;                    /* v295 — tightened with the v294 density pass */
  padding: 2px 8px !important;            /* was 10px 10px; row height now comes from the tap's own padding */
  background: transparent !important;
  box-shadow: none !important;
}

.ved-item-tap {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ved-item-tap:hover .ved-item-name { color: var(--nx-gold); }

/* has-par signal: the par number itself goes gold. No row chrome,
   no background, no shadow — quiet, semantic indicator. */
.ved-item-row.has-par .ord-qty-input {
  color: var(--nx-gold);
  font-weight: 700;
}
.ved-item-row.has-par .ord-qty {
  border-color: rgba(212, 164, 78, 0.4);
}

/* ── Unit input cell width — slightly narrower than ordering since
   catalog doesn't show the pack/sub-label info ──────────────────── */

.ved-unit-cell {
  flex-shrink: 0;
  width: 42px;
  min-width: 36px;
  max-width: 50px;
  display: flex;
  align-items: center;
}

/* ── Move stack: very subtle ─────────────────────────────────────── */

.ved-item-move-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity .15s;
}
.ved-item-row:hover .ved-item-move-stack { opacity: 1; }

.ved-item-move-btn {
  width: 20px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.ved-item-move-btn:first-child { border-radius: 4px 4px 1px 1px; border-bottom-width: 0; }
.ved-item-move-btn:last-child  { border-radius: 1px 1px 4px 4px; }
.ved-item-move-btn:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}
.ved-item-move-btn:active {
  background: var(--nx-gold-soft);
}

/* ── Phone tightening ─────────────────────────────────────────────── */
/* The .ord-qty + .ord-qty-btn + .ord-qty-input dimensions already
   tighten on phones via the existing @media (max-width: 500px) block
   for the ordering screen — those rules cascade here automatically.
   We just adjust the catalog-specific bits. */

@media (max-width: 500px) {
  .ved-item-row { gap: 5px !important; padding: 10px 8px !important; }
  .ved-unit-cell { width: 38px !important; min-width: 32px !important; max-width: 44px !important; }
  .ved-item-move-btn { width: 18px !important; height: 12px !important; }
  .ved-item-move-stack { gap: 0 !important; }
  .ved-item-name { font-size: 13.5px !important; }
  .ved-item-meta { font-size: 9.5px !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   v18.28 — CATALOG REVAMP Phase 2
   ────────────────────────────────────────────────────────────────────────────
   • Filter pills row (All / Missing par) — mirrors ordering's filter pills
   • Floating "+ Add item" CTA — mirrors ordering's Review & Send button
   • Section-level bulk apply panel
   • Bottom padding on catalog list so floating CTA clears last items
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Filter pills row ─────────────────────────────────────────────── */

.ord-cat-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  flex-wrap: wrap;
}
.ord-cat-filter-row .ord-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  height: 16px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(212, 164, 78, 0.16);
  color: var(--nx-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.ord-cat-filter-row .ord-entry-filter-pill.is-active .ord-pill-count {
  background: rgba(28, 20, 8, 0.2);
  color: var(--nx-gold-on, #101626);
}

/* ── Floating CTA (Add item) ──────────────────────────────────────── */

.ord-cat-cta-wrap {
  /* Inherits all the floating-wrap behavior from .ord-entry-cta-wrap
     (position: absolute, transparent bg, slide-hide on .is-hidden).
     This class is just an anchor for catalog-specific tweaks if
     needed in the future. */
}
.ord-cat-cta {
  /* Same gold-gradient pill as ordering's Review & Send. SVG plus
     icon inside, sized to match the text. */
}
.ord-cat-cta svg {
  width: 18px;
  height: 18px;
}

/* Bottom padding on the catalog list so the floating CTA doesn't
   cover the last item when scrolled to bottom. Same calculation as
   the ordering list: button height 54 + wrap padding 14 + safe area
   + comfort margin ≈ 120px. */
.ord-cat-list {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Section header — bulk apply button ───────────────────────────── */

.ved-section-bulk-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nx-faint);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}
.ved-section-bulk-btn:hover {
  color: var(--nx-gold);
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.08));
}
.ved-section-bulk-btn.is-active {
  color: var(--nx-gold-on, #101626);
  background: var(--nx-gold);
  border-color: var(--nx-gold);
}

/* ── Bulk apply inline panel ──────────────────────────────────────── */

.ved-bulk-panel {
  padding: 12px 14px 14px;
  background: var(--nx-gold-soft, rgba(212, 164, 78, 0.06));
  border-top: 1px solid var(--nx-gold-line);
  border-bottom: 1px solid var(--nx-gold-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: vedBulkPanelIn .18s ease-out;
}
@keyframes vedBulkPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.ved-bulk-panel-title {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  letter-spacing: 0.2px;
}
.ved-bulk-panel-title strong { color: var(--nx-text); font-weight: 600; }
.ved-bulk-panel-title em     { color: var(--nx-gold); font-style: normal; font-weight: 500; }

.ved-bulk-panel-row {
  display: flex;
  gap: 10px;
}
.ved-bulk-field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ved-bulk-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nx-gold);
  opacity: 0.85;
}
.ved-bulk-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--nx-text);
  outline: none;
  transition: border-color .15s;
}
.ved-bulk-input::placeholder {
  color: var(--nx-faint);
  font-size: 11.5px;
  font-style: italic;
}
.ved-bulk-input:focus {
  border-color: var(--nx-gold);
  background: var(--nx-bg);
}
.ved-bulk-input.ved-bulk-unit {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

.ved-bulk-panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ved-bulk-cancel,
.ved-bulk-apply {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--nx-gold-line);
  background: transparent;
  color: var(--nx-text);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ved-bulk-cancel:hover { background: var(--nx-surface-1); }
.ved-bulk-apply {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
  box-shadow: 0 1px 6px var(--nx-gold-soft, rgba(212, 164, 78, 0.35));
}
.ved-bulk-apply:active { transform: scale(0.98); }

/* Phone tightening for the bulk panel — stack par + unit vertically
   on narrow viewports so each gets its own row, and tighten the
   buttons + paddings. */
@media (max-width: 500px) {
  .ved-bulk-panel { padding: 10px 12px 12px; gap: 8px; }
  .ved-bulk-panel-row { flex-direction: column; gap: 8px; }
  .ved-bulk-input { height: 34px; font-size: 13.5px; }
  .ved-bulk-cancel,
  .ved-bulk-apply { height: 34px; font-size: 13px; padding: 0 14px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   v18.29 — ALL TRANSACTIONS OVERLAY + Vendor Detail CTA rework
   ────────────────────────────────────────────────────────────────────────────
   • Full-screen overlay reachable from masthead "Transactions" button +
     pulse chip taps. Houses the same recent-orders list that used to
     sit on the Home/Duties tab, but on-demand instead of always-on.
   • Vendor detail CTA: primary "New order" + small "Continue draft from
     {time}" text link underneath when an active draft exists.
   ──────────────────────────────────────────────────────────────────────────── */

.ord-allorders-overlay {
  position: fixed;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ordOverlayIn .18s ease-out;
  touch-action: manipulation;
}
.ord-allorders-head {
  /* Reuse .ord-entry-head treatment by composition — the head element
     above carries both class names, so this is just an anchor for
     overlay-specific overrides if needed in the future. */
}
.ord-allorders-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px calc(24px + env(safe-area-inset-bottom, 0px));
}
/* Within the overlay, drop the now-redundant "Recent" label that
   renderRecent paints into the container (the overlay header already
   says "All transactions"). */
.ord-allorders-body .ord-section-label { display: none; }

/* ── Vendor detail "Continue draft" link ──────────────────────────── */

.ord-vdetail-continue-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
  width: 100%;
}
.ord-vdetail-continue-link:hover,
.ord-vdetail-continue-link:active {
  color: var(--nx-gold);
}
.ord-vdetail-continue-link > span:last-child {
  /* The arrow → at the end. Subtle, follows the text color. */
  margin-left: 2px;
  opacity: 0.7;
}


/* ═══ v18.39 — par pill stays a pill ═══════════════════════════════
   The catalog row stretches children to full row height (needed so
   the tap area + drag surface cover the row). But that also stretched
   the .ord-qty par stepper, the unit cell, and the move stack — on any
   row whose name/meta wraps tall, the 999px-radius stepper rendered as
   a giant egg. Center the inline controls; the tap area keeps
   stretching. */
.ord-catalog-overlay .ved-item-row > .ord-qty,
.ord-catalog-overlay .ved-item-row > .ord-item-unit,
.ord-catalog-overlay .ved-item-row > .ved-item-move-stack {
  align-self: center;
}
.ved-item-row > .ord-qty,
.ved-item-row > .ord-item-unit,
.ved-item-row > .ved-item-move-stack {
  align-self: center;
}

/* ═══ v18.39 — section header declutter ════════════════════════════
   Six icons crushed the section name to "CLEANING SUPPL…"; the four
   management actions live in the ⋮ popup now. */
.ved-section-kebab {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nx-faint);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ved-section-kebab:hover,
.ved-section-kebab.is-active {
  color: var(--nx-gold);
  border-color: var(--nx-gold-line);
}
.ved-sec-menu {
  position: fixed;
  z-index: 400;
  min-width: 210px;
  padding: 6px;
  border-radius: 14px;
  background: var(--nx-surface-1, #182236);
  border: 1px solid var(--nx-gold-line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ved-sec-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ved-sec-menu button:hover { background: var(--nx-gold-faint, rgba(212,164,78,.1)); color: var(--nx-gold); }
.ved-sec-menu button.is-danger { color: #e07070; }
.ved-sec-menu button.is-danger:hover { background: rgba(224, 112, 112, 0.1); color: #e07070; }

/* Item reorder arrows — bigger tap targets on phones (were 20×14). */
@media (max-width: 500px) {
  .ved-item-move-btn { width: 26px !important; height: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v263 — CATALOG made friendlier (Alfredo): softer bigger steppers,
   drag-to-reorder rows like the board, richer row info.
   ──────────────────────────────────────────────────────────────────── */
/* v264 — sleek, not huge (Alfredo: "huge buttons… make it sleeker").
   Native ordering sizes restored; just a whisper of gold on the steppers. */
.ord-qty-btn {
  border: 1px solid var(--nx-gold-line, rgba(212,164,78,.22)) !important;
  background: var(--nx-gold-faint, rgba(212,164,78,.06)) !important;
  color: var(--nx-gold, #d4a44e) !important;
  transition: transform .1s, background .15s !important;
}
.ord-qty-btn:active { transform: scale(.94); }

/* Rows are drag handles now — no text selection, no long-press callout. */
.ord-item-row, .ord-item-row * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ord-item-row input { -webkit-user-select: auto; user-select: auto; }

/* Grip — the quiet "you can move me" affordance. */
.ord-item-grip {
  flex: 0 0 auto; align-self: center; color: var(--nx-faint, #6c7585);
  font-size: 15px; padding: 0 2px 0 0; cursor: grab; opacity: .55; letter-spacing: -1px;
}

/* Drag visuals — same family as the board. */
.ord-item-row.is-dragging { opacity: 0; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden; pointer-events: none; }
.ord-item-dragclone {
  opacity: .97; border-radius: 14px; overflow: hidden;
  background: var(--nx-surface-solid, #161d2e);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1.5px rgba(212,164,78,.5), 0 0 22px rgba(212,164,78,.14);
  will-change: transform; transition: none; list-style: none;
}
.ord-item-ghost {
  position: relative; margin: 4px 0; border-radius: 14px; overflow: hidden;
  border: 1.5px dashed rgba(212,164,78,.5); background: rgba(212,164,78,.05);
  animation: ordGhostIn .15s cubic-bezier(.2,.8,.3,1);
}
.ord-item-ghost .ord-item-row { opacity: .4; filter: saturate(.7); margin: 0; }
@keyframes ordGhostIn { from { transform: scale(.98); opacity: .3; } to { transform: scale(1); opacity: 1; } }

/* "last: 3 cs" — ordering memory, quiet gold. */
/* v280 — "last:" is a hint, not an action; it lost the gold voice. */
.ord-item-last { color: var(--nx-muted, var(--muted)); font-weight: 600; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   v332 → v333 — ORDERING CARD REVAMP  ·  "I really like the button style"
   ──────────────────────────────────────────────────────────────────────
   Alfredo shared a vendor's order-guide screen and asked to revamp
   ordering "to something more like this. I really like the button style."
   His ask is the BUTTON STYLE: soft, friendly, well-separated −/+ steppers,
   and a name free to wrap — the opposite of the old dense hairline rows
   (v294/v18.28) that clipped names mid-word to cram items on screen.

   v333 refinement (his next note, viewing v332 live): "make the items a bit
   tighter and smaller with padding living inside sections. and the section
   font much larger." So the SECTION is now the single frame: its item
   container holds the gutter (padding INSIDE the section), and items became
   flat, tight, hairline-separated rows — no floating per-item card (that
   was a double frame inside the section border). The soft squircle steppers
   he liked stay, just smaller. And the section header stopped being a 12px
   mono micro-label — it's now the card's headline (Outfit, display weight).

   Rendered in NEXUS's own skin (navy+gold dark, cream+bronze light). Every
   value is a theme token so both themes read right.

   SCOPING: item geometry is scoped to `.ord-item-row` / `.ord-item-controls`
   and the section rules to `.ord-entry-section*` — all ordering-only. The
   catalog editor (`.ved-item-row`) deliberately reuses the bare `.ord-qty*`
   classes and is left exactly as it was. `!important` appears only where the
   phone/tablet media blocks force width/height/font-size with `!important`.
   ────────────────────────────────────────────────────────────────────── */

/* ── The item — flat row, no card chrome; the section bg shows through ── */
.ord-item-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 9px 8px;
  margin: 0;
  border: none;
  border-radius: 10px;                 /* only visible when .has-qty paints a bg */
  border-bottom: 1px solid var(--nx-gold-line, var(--border));
  background: transparent;
  box-shadow: none;
}
.ord-entry-section-items .ord-item-row:last-child { border-bottom: none; margin-bottom: 0; }
.ord-item-row.has-qty {
  /* Set row — the one gold mark per item: a 3px inset bar + a whisper of
     gold fill on the rounded row (a soft highlighted tab, not a loud
     bordered card). The loudest gold on screen stays the Send button. */
  border-bottom-color: var(--nx-gold-line, var(--border));
  background: var(--nx-gold-faint, rgba(212, 164, 78, .07));
  box-shadow: inset 3px 0 0 0 var(--nx-gold);
}
.ord-item-row.is-disabled { opacity: .5; }

/* ── Tier 1 · name (free to wrap) ── */
.ord-item-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 20px; }
.ord-item-row .ord-item-name {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.ord-item-row .ord-item-meta {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.35;
}

/* ── Tier 2 · controls bar ── */
.ord-item-controls { display: flex; align-items: center; gap: 8px; }
.ord-item-controls-left {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}

/* Quantity — a soft filled pill you can also type into. */
.ord-item-controls .ord-qty-input {
  width: 48px !important;
  height: 42px !important;
  flex: 0 0 auto;
  text-align: center;
  border: none !important;
  border-radius: 12px;
  background: var(--nx-surface-2, rgba(255, 255, 255, .05));
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 17px !important;
  font-weight: 700;
}
.ord-item-controls .ord-qty-input::placeholder { color: var(--nx-faint); font-weight: 600; }
.ord-item-controls .ord-qty-input:focus {
  background: var(--nx-gold-faint, rgba(212, 164, 78, .10));
  box-shadow: inset 0 0 0 1.5px var(--nx-gold);
}
.ord-item-row.has-qty .ord-item-controls .ord-qty-input {
  color: var(--nx-gold);
  background: var(--nx-gold-faint, rgba(212, 164, 78, .14));
}

/* Unit — an outlined chip (still a real input; tap to override). */
.ord-item-controls .ord-item-unit {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  flex: 0 0 auto; display: block;
}
.ord-item-controls .ord-item-unit-input {
  /* Fixed compact width — a bare text input with width:auto falls back to
     its default size=20 (~178px) and would balloon into a full-width bar
     that shoves the layout into a wrap. Units are short ("cs"/"gal"/"lbs"),
     so a uniform pill reads clean. */
  width: 50px !important;
  min-width: 0 !important;
  height: 32px;
  padding: 0 8px !important;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--nx-gold-line, var(--border)) !important;
  border-radius: 999px;
  background: transparent;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ord-item-controls .ord-item-unit-input:focus {
  border-color: var(--nx-gold) !important;
  background: var(--nx-gold-faint, rgba(212, 164, 78, .06));
  color: var(--nx-text);
}
.ord-item-row.has-qty .ord-item-controls .ord-item-unit-input {
  border-color: var(--nx-gold-line) !important;
  color: var(--nx-gold);
}

/* PAR — quiet reference chip under the name (pars are reference numbers
   only; they whisper). Sits in the head column, its own soft line. */
.ord-item-head .ord-item-par-chip { margin-top: 4px; opacity: .8; }

/* The stepper — two big soft squircle buttons, separated. THE button style
   he pointed at. Neutral soft fill; gold arrives only on press. */
.ord-item-controls .ord-qty {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  overflow: visible;
}
.ord-item-controls .ord-qty-btn {
  width: 44px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: var(--nx-surface-2, rgba(255, 255, 255, .05)) !important;
  border: none !important;
  color: var(--nx-text) !important;
  font-size: 23px !important;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, transform .1s !important;
}
.ord-item-controls .ord-qty-btn:hover {
  background: var(--nx-gold-soft, rgba(212, 164, 78, .16)) !important;
  color: var(--nx-gold) !important;
}
.ord-item-controls .ord-qty-btn:active {
  transform: scale(.92);
  background: var(--nx-gold) !important;
  color: var(--nx-gold-on, #101626) !important;
}
.ord-item-controls .ord-qty-btn[disabled] { opacity: .4; }

/* Grip — the quiet "hold to reorder" affordance, tucked to the card's
   top-right corner so it never fights the two-tier layout. */
.ord-item-row > .ord-item-grip {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0;
  opacity: .4;
  font-size: 14px;
}

/* ── Section is the frame: the gutter lives INSIDE it, around the items ── */
.ord-entry-section-items { padding: 6px; }
.ord-entry-section { margin-bottom: 12px; }

/* ── Section header — much larger; the card's headline (Outfit display).
   The mono voice lives on in the count + unit chips beside it, so
   editorial × terminal reads as contrast, not monotone. ── */
.ord-entry-section-head { gap: 12px; padding: 15px 16px; align-items: center; }
.ord-entry-section-name {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nx-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-entry-section-count {
  flex-shrink: 0;
  min-width: 26px;
  padding: 3px 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--nx-surface-1, var(--elevated));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  color: var(--nx-muted, var(--muted));
}
.ord-entry-section-collapse { flex-shrink: 0; width: 36px; height: 36px; }

/* Tablet+ — the title has room to run a touch larger. */
@media (min-width: 501px) {
  .ord-entry-section-head { padding: 16px 18px; }
  .ord-entry-section-name { font-size: 22px; }
  .ord-entry-section-count { font-size: 12px; }
}

/* Phone (his device) — one notch tighter items; header still much bigger
   than the old 12px, sized so a long name doesn't ellipsize too early. */
@media (max-width: 500px) {
  .ord-entry-section-items { padding: 5px; }
  .ord-item-row { padding: 8px 8px !important; gap: 7px !important; }
  .ord-item-controls .ord-qty-btn        { width: 42px !important; height: 40px !important; font-size: 22px !important; }
  .ord-item-controls .ord-qty-input      { width: 46px !important; height: 40px !important; font-size: 16px !important; }
  .ord-item-controls .ord-item-unit-input{ width: 48px !important; height: 30px !important; font-size: 11px !important; }
  .ord-entry-section-head  { padding: 14px 14px; gap: 10px; }
  .ord-entry-section-name  { font-size: 19px; letter-spacing: 0.025em; }
  .ord-entry-section-count { font-size: 10px; min-width: 24px; padding: 3px 8px; }
  .ord-entry-section-collapse { width: 34px; height: 34px; }
}

/* ──────────────────────────────────────────────────────────────────────
   v334 — LIGHT-THEME STEPPERS  ·  "do light theme steppers"
   ──────────────────────────────────────────────────────────────────────
   In dark, the steppers' soft --nx-surface-2 fill reads fine. In light that
   token is near-white (rgba(255,255,252,.80)) sitting on a cream section —
   the buttons washed out into the background. Give them a faint cool tint +
   a hairline border so they read as buttons on cream. Ordering-only scope
   (.ord-item-controls) → the catalog editor is untouched.
   ────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ord-item-controls .ord-qty-btn {
  background: rgba(31, 79, 125, 0.07) !important;
  border: 1px solid var(--nx-gold-line) !important;
  color: var(--nx-text) !important;
}
[data-theme="light"] .ord-item-controls .ord-qty-btn:hover {
  background: var(--nx-gold-soft) !important;
  color: var(--nx-gold) !important;
}
[data-theme="light"] .ord-item-controls .ord-qty-btn:active {
  background: var(--nx-gold) !important;
  color: var(--nx-gold-on, #fff) !important;
}
[data-theme="light"] .ord-item-controls .ord-qty-input {
  background: rgba(31, 79, 125, 0.06) !important;
  box-shadow: inset 0 0 0 1px var(--nx-gold-line);
}
[data-theme="light"] .ord-item-row.has-qty .ord-item-controls .ord-qty-input {
  background: var(--nx-gold-faint) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v335 — CATALOG CARD REVAMP  ·  mirror the ordering screen (v332–v334)
   ──────────────────────────────────────────────────────────────────────
   Alfredo: "now catalog. full revamp. same thing we did with ordering."
   The order-ENTRY screen became: section = the single frame (gutter inside
   it), items = flat tight hairline rows (name on top, a controls bar below
   with the soft par/qty pill + outlined unit chip on the left and two big
   soft squircle −/+ steppers on the right), and a BIG Outfit section
   headline. This brings the CATALOG EDITOR (.ord-catalog-overlay .ved-*)
   to the same look.

   The row DOM was restructured to mirror ordering: a .ved-item-head (Tier 1
   — drag grip · name/meta tap · move-to-section chip) over a
   .ord-item-controls bar (Tier 2 — PAR label + par pill + unit chip on the
   left, the two −/+ buttons on the right). The par field moved into
   .ord-item-controls-left as .ord-qty-input and .ord-qty is now just the two
   buttons — so the steppers, pill and unit chip INHERIT ordering's
   .ord-item-controls styling (incl. the v334 light-theme skin) for FREE.
   This block owns only the section FRAME, the big HEADER, the flat ROW +
   has-par state, the name head, the move-to-section CHIP, and the drag GRIP.

   Everything is scoped .ord-catalog-overlay so no other surface moves.
   Ordering rows are .ord-item-row (a different class) and stay untouched.
   Tokens flip per theme (nx-system.css), so navy+gold dark and cream+bronze
   light both read. `!important` appears ONLY to out-specify the pre-existing
   `!important` on the bare .ved-item-row rule (~9130) and the phone media
   blocks (~9214 / ~5125).

   Rules that go INERT with the new DOM (left as-is, they just stop matching):
     • ~9508 `.ord-catalog-overlay .ved-item-row > .ord-qty` (align-self) —
       .ord-qty is now inside .ord-item-controls, not a direct row child.
     • ~9155 `.ved-item-row.has-par .ord-qty { border-color }` — beaten by
       `.ord-item-controls .ord-qty { border:none!important }`.
     • ~9587 v264 `.ord-qty-btn { gold }` — beaten by the more-specific
       `.ord-item-controls .ord-qty-btn` (the desired neutral soft look).
   Rule KEPT + relied on: ~9151 `.ved-item-row.has-par .ord-qty-input`
   (par number goes gold on a set row — mirrors ordering's has-qty).
   ────────────────────────────────────────────────────────────────────── */

/* ── Section is the frame: the gutter lives INSIDE it, around the items ── */
.ord-catalog-overlay .ved-section-items { padding: 6px; }
.ord-catalog-overlay .ved-section-block { margin: 0 0 12px; }

/* ── The item — flat column row; the section bg shows through. Overrides the
   old flex/border-top model (~5042) AND the bare .ved-item-row !important
   padding/gap/bg/shadow (~9130). ── */
.ord-catalog-overlay .ved-item-row {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 8px !important;
  padding: 9px 10px !important;
  margin: 0;
  border: none;
  border-radius: 10px;
  border-top: 0;
  border-bottom: 1px solid var(--nx-gold-line, var(--border));
  background: transparent !important;
  box-shadow: none !important;
}
.ord-catalog-overlay .ved-section-items > .ved-item-row:last-child { border-bottom: none; }
.ord-catalog-overlay .ved-item-row:hover { background: var(--nx-gold-faint) !important; }

/* ── Set state — mirror ordering's .has-qty: a single 3px gold inset bar +
   a whisper of gold fill (a soft tab, NOT a loud full border). ── */
.ord-catalog-overlay .ved-item-row.has-par {
  background: var(--nx-gold-faint, rgba(212, 164, 78, .07)) !important;
  box-shadow: inset 3px 0 0 0 var(--nx-gold) !important;
  border-bottom-color: var(--nx-gold-line, var(--border));
}
.ord-catalog-overlay .ved-item-row.has-par:hover {
  background: var(--nx-gold-mist, rgba(212, 164, 78, .12)) !important;
}
.ord-catalog-overlay .ved-item-row.has-par .ord-item-unit-input {
  border-color: var(--nx-gold-line) !important;
  color: var(--nx-gold);
}

/* ── Tier 1 · name row: [grip] [tap: name/meta] [section chip] ── */
.ord-catalog-overlay .ved-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ord-catalog-overlay .ved-item-drag-handle {
  flex: 0 0 auto;
  width: 20px;
  height: 26px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  opacity: 0.4;
  color: var(--nx-faint, var(--faint));
  cursor: grab;
  touch-action: none;
}
.ord-catalog-overlay .ved-item-drag-handle:hover { opacity: 0.85; color: var(--nx-text, var(--text)); }
.ord-catalog-overlay .ved-item-drag-handle:active { opacity: 1; color: var(--nx-gold, var(--accent)); cursor: grabbing; }
.ord-catalog-overlay .ved-item-tap {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ord-catalog-overlay .ved-item-tap:active { background: transparent; }
.ord-catalog-overlay .ved-item-tap .ved-item-main { min-width: 0; }
.ord-catalog-overlay .ved-item-head .ved-item-name {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: var(--nx-text, var(--text));
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  word-break: break-word;
}
.ord-catalog-overlay .ved-item-tap:hover .ved-item-name,
.ord-catalog-overlay .ved-item-tap:active .ved-item-name { color: var(--nx-gold); }
.ord-catalog-overlay .ved-item-head .ved-item-meta {
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--nx-faint, var(--muted));
}

/* Move-to-section chip — compact outlined pill, trailing on the name row. */
.ord-catalog-overlay .ved-item-area { flex: 0 0 auto; max-width: 150px; display: flex; align-items: center; }
.ord-catalog-overlay .ved-item-area-select {
  max-width: 150px;
  height: 30px;
  padding: 0 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nx-faint, var(--muted));
  background: transparent;
  border: 1px solid var(--nx-gold-line, var(--border));
  border-radius: 999px;
  cursor: pointer;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}
.ord-catalog-overlay .ved-item-area-select:hover { border-color: var(--nx-gold); color: var(--nx-text, var(--text)); }
.ord-catalog-overlay .ved-item-area-select:focus { outline: none; border-color: var(--nx-gold); background: var(--nx-gold-faint, rgba(212, 164, 78, .06)); }

/* Tier 2 controls bar spans the row under the name. */
.ord-catalog-overlay .ved-item-row .ord-item-controls { width: 100%; }
/* PAR label — the quiet "what is this pill" token (mirrors ordering context). */
.ved-par-label {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nx-faint, var(--muted));
}

/* ══ BIG section header — the card's headline, mirroring
   .ord-entry-section-name. Mono voice lives on in the count pill + kebab. ══ */
.ord-catalog-overlay .ved-section-row {
  gap: 10px;
  padding: 14px 14px;
  background: var(--nx-gold-faint);
  border: 0;
  border-bottom: 1px solid var(--nx-gold-line);
  border-radius: 0;
}
.ord-catalog-overlay .ved-section-name {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nx-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-catalog-overlay .ved-section-name[data-section]:hover { color: var(--nx-gold); }
.ord-catalog-overlay .ved-section-name.is-uncat {
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--nx-faint, var(--faint));
}
.ord-catalog-overlay .ved-section-count {
  flex-shrink: 0;
  min-width: 26px;
  padding: 3px 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--nx-muted, var(--muted));
  background: var(--nx-surface-1, var(--elevated));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
}
.ord-catalog-overlay .ved-section-kebab { width: 36px; height: 36px; font-size: 19px; }
.ord-catalog-overlay .ved-section-collapse { width: 36px; height: 36px; margin-left: -2px; }

/* Tablet+ — title runs a touch larger. */
@media (min-width: 501px) {
  .ord-catalog-overlay .ved-section-row { padding: 16px 16px; }
  .ord-catalog-overlay .ved-section-name { font-size: 22px; }
  .ord-catalog-overlay .ved-section-count { font-size: 12px; }
}

/* Phone — tighter items; header still much bigger than the old 11px mono.
   Out-specifies the phone !important at ~9214 (.ved-item-row) + ~5125. */
@media (max-width: 500px) {
  .ord-catalog-overlay .ved-section-items { padding: 5px; }
  .ord-catalog-overlay .ved-item-row { padding: 8px 9px !important; gap: 7px !important; }
  .ord-catalog-overlay .ved-item-area,
  .ord-catalog-overlay .ved-item-area-select { max-width: 118px; }
  .ord-catalog-overlay .ved-section-row { padding: 14px 12px; gap: 8px; }
  .ord-catalog-overlay .ved-section-name { font-size: 19px; letter-spacing: 0.025em; }
  .ord-catalog-overlay .ved-section-count { font-size: 10px; min-width: 24px; padding: 3px 8px; }
  .ord-catalog-overlay .ved-section-kebab,
  .ord-catalog-overlay .ved-section-collapse { width: 34px; height: 34px; }
}

/* Light theme — inherited [data-theme=light] .ord-item-controls steppers
   already read as buttons on cream (v334). Just keep the chip + count pill
   from washing out (transparent-on-cream reads a hair weak). */
[data-theme="light"] .ord-catalog-overlay .ved-item-area-select { background: rgba(31, 79, 125, 0.05); }
[data-theme="light"] .ord-catalog-overlay .ved-item-area-select:focus { background: var(--nx-gold-faint); }
[data-theme="light"] .ord-catalog-overlay .ved-section-count { background: rgba(31, 79, 125, 0.05); }

/* ─── v362 — catalog item chevron → opens the full edit form ────────────────
   A centered chevron under each item's controls; tapping it opens that item's
   edit form (same destination as tapping the name), a clear "open details" tap. */
.ved-item-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 22px;
  margin: 3px auto 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--nx-faint);
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s, background .14s;
}
.ved-item-expand:hover { color: var(--nx-gold); background: var(--nx-gold-faint, rgba(200, 164, 78, 0.10)); }
.ved-item-expand:active { transform: translateY(1px); }
.ved-chevron { transition: transform .14s ease; }
.ved-item-expand:hover .ved-chevron { transform: translateY(1px); }

/* ═══════════════════════════════════════════════════════════════════════
   v399 — ORDERING OVERHAUL: distinction via gold hairlines
   Alfredo: "garlines everywhere. buttons seem odd. too bland. need more
   distinction." The v332 soft-neutral controls read flat in dark mode —
   dark-on-dark steppers with no border looked like blobs. This pass gives
   every control a gold hairline outline, ties the header/count/unit into
   the gold language, and makes a set row a clear gold card. Appended last
   so it wins over the v332 block (same specificity, later source). Scoped
   to .ord-item-controls / .ord-entry-section — the catalog editor
   (.ved-item-row, bare .ord-qty*) is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.ord-entry-section {
  border-color: var(--nx-gold-line-2) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .30);
}
.ord-entry-section-head {
  position: relative;
  border-bottom: 0 !important;
  background: var(--nx-gold-faint) !important;
}
.ord-entry-section-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,164,78,.5) 15%, rgba(230,177,87,.85) 50%, rgba(212,164,78,.5) 85%, transparent);
}
.ord-entry-section-count {
  background: var(--nx-gold-faint) !important;
  border-color: var(--nx-gold-line-2) !important;
  color: var(--nx-gold) !important;
}
@media (hover: hover) { .ord-item-row:hover { background: rgba(212, 164, 78, .045); } }
/* Qty field — a defined gold-hairline box (was a near-invisible soft fill). */
.ord-item-controls .ord-qty-input {
  border: 1px solid var(--nx-gold-line-2) !important;
  background: var(--nx-surface-2) !important;
  color: var(--nx-text-strong);
}
/* Unit chip — gold-tinted so qty + unit read as one control group. */
.ord-item-controls .ord-item-unit-input {
  border-color: var(--nx-gold-line-2) !important;
  background: var(--nx-gold-tint) !important;
  color: var(--nx-gold) !important;
}
/* The steppers — distinct gold-outlined squircles (fixes "buttons seem odd").
   Gold hairline ring + gold-faint fill + gold glyph; press fills solid gold. */
.ord-item-controls .ord-qty-btn {
  background: var(--nx-gold-faint) !important;
  border: 1px solid var(--nx-gold-line-2) !important;
  color: var(--nx-gold) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.ord-item-controls .ord-qty-btn:hover {
  background: var(--nx-gold-soft, rgba(212,164,78,.16)) !important;
  border-color: var(--nx-gold) !important;
}
.ord-item-controls .ord-qty-btn:active {
  transform: scale(.92);
  background: var(--nx-gold) !important;
  color: var(--nx-gold-on, #1c1814) !important;
  border-color: var(--nx-gold) !important;
}
/* Set row — a real gold card, not just a 3px bar: inset bar + gold ring + tint. */
.ord-item-row.has-qty {
  background: var(--nx-gold-faint) !important;
  box-shadow: inset 3px 0 0 0 var(--nx-gold), 0 0 0 1px var(--nx-gold-line-2) !important;
  border-radius: 12px;
}

/* v400 — LIGHT theme corrections for the v399 overhaul. The gold hairline +
   pure-black shadows were tuned for OLED navy; on cream they read faint/harsh.
   Swap to the light theme's deeper olive-gold + warm shadow. (The steppers/
   fields themselves are handled by the v334 light overrides above.) */
:root[data-theme="light"] .ord-entry-section-head::after {
  background: linear-gradient(90deg,
    transparent, rgba(168,116,42,.55) 15%, rgba(143,95,31,.9) 50%, rgba(168,116,42,.55) 85%, transparent);
}
:root[data-theme="light"] .ord-item-row:hover { background: rgba(168,116,42,.08); }
:root[data-theme="light"] .ord-entry-section { box-shadow: var(--nx-shadow-card) !important; }
:root[data-theme="light"] .ord-item-controls .ord-qty-btn { box-shadow: none !important; }