/*
 * Slate + amber theme. The old variable names (--blue-*) are kept because they're
 * referenced throughout — they now mean "primary scale," not literally blue. If this
 * theme sticks, a rename pass (--primary-*) would be the cleanup; and the longer-term
 * plan is making the accent per-yard configurable from Settings.
 */
:root {
  --white: #ffffff;
  --page-bg: #f3f4f6;
  --panel: #ffffff;
  --border: #cbd5e1;
  --border-light: #e2e8f0;

  --text: #111827;
  --muted: #55606e;

  --blue-900: #0f172a;   /* deep slate — headers, topbar */
  --blue-800: #1e293b;   /* slate — headings, table headers */
  --blue-700: #b45309;   /* amber-dark — hovers, emphasized text */
  --blue-600: #d97706;   /* amber — primary actions, active nav */
  --blue-500: #f59e0b;   /* amber-light — logo, highlights */
  --blue-100: #fbe9c9;   /* amber tint — focus rings, timeline fill */
  --blue-50: #faf5eb;    /* pale amber — subtle backgrounds */

  --navy: #0f172a;

  --amber: #b45309;

  --red-600: #c62828;
  --red-50: #fdecea;
  --red-200: #f2b8b0;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

header.topbar {
  background: var(--blue-900);
  color: white;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.topbar h1 {
  font-size: 19px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

header.topbar h1 svg { display: block; flex-shrink: 0; }

header.topbar nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

header.topbar nav a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

header.topbar nav a:hover { background: rgba(255, 255, 255, 0.12); color: white; }
header.topbar nav a.active { background: var(--blue-600); color: white; }

/* Grouped nav. The everyday links sit flat and bright; the rarer errands collapse into
   labeled clusters that recede visually, so the eye lands on the day's work first. */
.nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
.nav-group-links { display: flex; gap: 3px; flex-wrap: wrap; }
.nav-group .nav-group-links a { font-weight: 500; color: #94a3b8; padding: 6px 9px; }
.nav-group .nav-group-links a:hover { color: white; }
.nav-group .nav-group-links a.active { color: white; font-weight: 600; }
header.topbar nav a.nav-logout { margin-left: auto; color: #94a3b8; font-weight: 500; }

/* --- Setup checklist ---------------------------------------------------------- */
.setup-bar { height: 8px; border-radius: 20px; background: var(--blue-100, #dbeafe); overflow: hidden; }
.setup-fill { height: 100%; background: var(--blue-600); border-radius: 20px; transition: width 0.4s ease; }

.ready-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ready-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--blue-200, #bfdbfe); }
.ready-card.yes { background: #f0fdf4; border-color: #bbf7d0; }
.ready-card.no { background: #fffbeb; border-color: #fde68a; }
.ready-mark { font-size: 20px; font-weight: 800; width: 26px; text-align: center; }
.ready-card.yes .ready-mark { color: #16a34a; }
.ready-card.no .ready-mark { color: #b45309; }

.setup-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; margin-bottom: 10px;
  background: white; border-radius: 10px; border: 1px solid var(--blue-200, #bfdbfe);
}
.setup-step.done { border-color: #bbf7d0; }
.setup-step.skipped { opacity: 0.6; }
.setup-num {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--blue-100, #dbeafe); color: var(--blue-900);
}
.setup-step.done .setup-num { background: #dcfce7; color: #166534; }
.setup-body { flex: 1; min-width: 0; }
.setup-title { font-size: 15px; font-weight: 700; color: var(--blue-900); }
.setup-tag {
  margin-left: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b; background: #f1f5f9;
  padding: 2px 7px; border-radius: 20px; vertical-align: middle;
}
.setup-why { font-size: 13px; color: #64748b; margin-top: 3px; line-height: 1.5; }
.setup-detail { font-size: 13px; color: var(--blue-900); margin-top: 6px; font-weight: 600; }
.setup-step.todo .setup-detail { color: #b45309; }
.setup-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }
.setup-actions a.ghost { white-space: nowrap; }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: #64748b; text-decoration: underline; font-family: inherit;
}
.linkish:hover { color: var(--blue-900); }

@media (max-width: 640px) {
  .setup-step { flex-wrap: wrap; }
  .setup-actions { flex-direction: row; width: 100%; justify-content: flex-start; margin-top: 6px; }
}

/* Texting disclosure under a phone field. Quiet enough not to compete with the form,
   legible enough to satisfy a carrier reviewing the screenshot. */
.sms-consent {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* Global search. Sits at the far right of the topbar on every staff page. */
.nav-search { position: relative; margin-left: auto; flex: 0 0 auto; }
.nav-search input {
  width: 280px;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: white;
  font-size: 13.5px;
  font-family: inherit;
}
.nav-search input::placeholder { color: #64748b; }
.nav-search input:focus {
  outline: none;
  border-color: var(--blue-600);
  background: rgba(255, 255, 255, 0.12);
  width: 340px;
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 400px;
  max-height: 65vh;
  overflow-y: auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  z-index: 200;
  padding: 6px;
}
.search-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #94a3b8; padding: 8px 10px 4px;
}
.search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  text-decoration: none; color: var(--blue-900);
}
.search-item:hover, .search-item.sel { background: var(--blue-50, #eff6ff); }
.search-icon { flex: 0 0 18px; text-align: center; color: #94a3b8; font-size: 13px; }
.search-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-sub { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-meta {
  flex: 0 0 auto; font-size: 11px; font-weight: 600;
  color: #64748b; background: #f1f5f9; padding: 3px 7px; border-radius: 20px;
}
.search-meta.open { color: #166534; background: #dcfce7; }
.search-empty { padding: 14px 12px; font-size: 13.5px; color: #64748b; }

main {
  max-width: 1150px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

h2 { margin-top: 0; font-size: 22px; color: var(--blue-900); }
h3 { color: var(--blue-800); }

.panel {
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

label.inline-label {
  display: inline;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  font-size: 14px;
  margin: 0;
}

input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}

button, a.primary, a.secondary, a.ghost, a.danger {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  border: 1.5px solid transparent;
  padding: 9px 18px;
  transition: background 0.1s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

button.primary, a.primary { background: var(--blue-600); color: white; }
button.primary:hover, a.primary:hover { background: var(--blue-700); }
button.secondary, a.secondary { background: white; color: var(--blue-700); border-color: var(--blue-600); }
button.secondary:hover, a.secondary:hover { background: var(--blue-50); }
button.ghost, a.ghost { background: transparent; color: var(--muted); border-color: var(--border); }
button.ghost:hover, a.ghost:hover { background: var(--blue-50); color: var(--blue-700); }
button.danger, a.danger { background: white; color: var(--red-600); border-color: var(--red-200); }
button.danger:hover, a.danger:hover { background: var(--red-50); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.row { display: flex; gap: 14px; }
.row > * { flex: 1; }

.item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 40px;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.item-group {
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border-light);
}

/* --- Customer hero --- */
.hero {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-600) 100%);
  color: white;
  border-radius: var(--radius);
  padding: 46px 28px;
  text-align: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

.hero h2 {
  color: white;
  font-size: 28px;
  margin: 0 0 10px;
}

.hero p {
  color: #cbd5e1;
  font-size: 15.5px;
  max-width: 520px;
  margin: 0 auto 24px;
}

/* Doubled selector on purpose: .cta-primary is defined later in this file, and at equal
   specificity it was silently overriding the hero variant — leaving an amber button on an
   amber gradient. */
.cta-primary.cta-hero {
  background: white;
  color: var(--blue-800);
  font-size: 16px;
  padding: 14px 32px;
}

.cta-primary.cta-hero:hover { background: var(--blue-50); color: var(--blue-900); }

/* --- Staff dashboard --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.1s ease, transform 0.1s ease;
}

a.stat-card:hover { border-color: var(--blue-600); transform: translateY(-1px); }

.stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue-900);
  margin-top: 4px;
  line-height: 1.1;
}

.stat-value.stat-warn { color: var(--amber, #b3781c); }
.stat-value.stat-bad { color: var(--red-600); }

/* --- Customer landing + tracking --- */
.cta-primary, .cta-secondary {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
}

.cta-primary { background: var(--blue-600); color: white; }
.cta-primary:hover { background: var(--blue-700); }
.cta-secondary {
  background: white;
  color: var(--blue-700);
  border-color: var(--blue-600);
  font-size: 14px;
  padding: 10px 18px;
}
.cta-secondary:hover { background: var(--blue-50); }

.track-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 10px;
}

.track-card:hover { border-color: var(--blue-600); background: var(--blue-50); }

.track-steps {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.track-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  position: relative;
  font-size: 14.5px;
}

/* Connector line between dots */
.track-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 30px;
  bottom: -9px;
  width: 2px;
  background: var(--border-light);
}

.track-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: white;
  flex-shrink: 0;
  z-index: 1;
}

.track-step.done { color: var(--text); }
.track-step.done .track-dot { background: var(--blue-600); border-color: var(--blue-600); }
.track-step.done:not(:last-child)::after { background: var(--blue-600); }

.track-step.current { color: var(--blue-900); font-weight: 700; }
.track-step.current .track-dot {
  background: var(--blue-600);
  border-color: var(--blue-100);
  box-shadow: 0 0 0 4px var(--blue-100);
}

.track-step.todo { color: var(--muted); }

/* --- Delivery window picker --- */
.slot-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 8px;
  background: white;
  border: 1.5px solid var(--border);
  color: var(--text);
  text-align: left;
  font-weight: 600;
}

.slot-btn:hover:not(:disabled) { border-color: var(--blue-600); background: var(--blue-50); }
.slot-btn.selected { border-color: var(--blue-600); background: var(--blue-100); color: var(--blue-900); }
.slot-btn.full { opacity: 0.5; }
.slot-btn .slot-cap { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.slot-btn.selected .slot-cap { color: var(--blue-800); }

.photo-upload-btn {
  display: block;
  margin-top: 5px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
  background: white;
  border: 1.5px solid var(--blue-600);
  border-radius: 6px;
  cursor: pointer;
}

.photo-upload-btn:hover { background: var(--blue-50); }

.tile.out-of-stock { opacity: 0.45; cursor: not-allowed; }
.tile.out-of-stock:hover { border-color: var(--border); box-shadow: none; }

/* --- Product photos --- */
.product-thumb {
  display: block;
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--blue-50);
}

.thumb-empty {
  width: 96px;
  height: 64px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: var(--blue-50);
  color: var(--muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Category-first browse (customer order page) --- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.tile {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: white;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.tile:hover { border-color: var(--blue-600); box-shadow: var(--shadow); }

.tile img, .tile .tile-noimg {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--blue-50);
}

.tile .tile-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.tile-body { padding: 10px 12px; }
.tile-name { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; }
.tile-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.tile-price { font-weight: 700; color: var(--blue-700); font-size: 14px; margin-top: 5px; }
.tile-price .was { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 5px; font-size: 12px; }

.browse-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.cart-line:last-child { border-bottom: none; }
.cart-line .cart-name { flex: 1; font-size: 14px; }
.cart-line .cart-qty { width: 90px; }
.cart-line .cart-sub { width: 90px; text-align: right; font-weight: 700; font-size: 14px; }

.cart-total {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 2px solid var(--blue-100);
  font-weight: 800;
  font-size: 16px;
  color: var(--blue-900);
}

.item-group:last-child { border-bottom: none; }

.error-box {
  background: var(--red-50);
  border: 1.5px solid var(--red-200);
  color: var(--red-600);
  padding: 11px 14px;
  border-radius: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

.success-box {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  color: var(--blue-900);
  padding: 11px 14px;
  border-radius: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

.pile-group { margin-bottom: 28px; }
.pile-group h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-800);
  border-bottom: 2px solid var(--blue-100);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--blue-600);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.card.delivery { border-left-color: var(--navy); border-left-style: dashed; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 12px;
  color: white;
  background: var(--blue-600);
}

.badge.delivery { background: var(--navy); }
.badge.status {
  background: var(--blue-50);
  color: var(--blue-800);
  border: 1px solid var(--blue-100);
  margin-left: 8px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.card .meta { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.card .items { font-size: 14px; margin: 10px 0; padding-left: 20px; }
.card .items li { margin-bottom: 3px; }
.card .address {
  font-size: 13.5px;
  background: var(--blue-50);
  color: var(--blue-900);
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 8px;
  font-weight: 600;
}

.card-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.column h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-800);
  border-bottom: 2px solid var(--blue-100);
  padding-bottom: 8px;
}

.empty {
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  background: var(--blue-50);
  border-radius: 8px;
  border: 1px dashed var(--border);
}

.dispatch-form { display: flex; gap: 8px; margin-top: 12px; align-items: end; }
.dispatch-form > div { flex: 1; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-800);
  background: var(--blue-50);
  padding: 10px 12px;
  border-bottom: 2px solid var(--blue-100);
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

tbody tr:hover { background: var(--blue-50); cursor: default; }
tbody tr.clickable:hover { cursor: pointer; }

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--blue-900);
}

.pill.inactive { background: #e6e9ef; color: var(--muted); }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.toolbar .filters { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar input[type=text] { min-width: 220px; width: auto; }
.toolbar select { width: auto; }

.detail-panel {
  border-top: 1px solid var(--border-light);
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13.5px;
}

.timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.timeline li {
  padding: 6px 0 6px 18px;
  border-left: 2px solid var(--blue-100);
  position: relative;
  color: var(--muted);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-600);
}
.timeline li strong { color: var(--text); }

@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr; }
}

/* ============================================================
   Squeezed windows (a laptop with the browser at half screen —
   how a yard office actually runs it, next to QuickBooks).
   Below this width the grouped nav can no longer fit on one
   line, and free wrap stacked it into an ugly pile. Instead:
   brand + search stay on the top row, and the nav drops to its
   own full-width row as ONE horizontal strip that scrolls,
   with faded edges to say "there's more."
   ============================================================ */
@media (max-width: 1360px) {
  header.topbar { flex-wrap: wrap; row-gap: 8px; }
  header.topbar h1 { order: 0; }
  .nav-search { order: 1; }
  header.topbar nav {
    order: 2;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* the fade masks signal scrollability instead */
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent);
    padding-bottom: 2px;
  }
  header.topbar nav::-webkit-scrollbar { display: none; }
  header.topbar nav a { white-space: nowrap; flex: 0 0 auto; }
  .nav-group { flex: 0 0 auto; }
  .nav-group-links { flex-wrap: nowrap; }
  header.topbar nav a.nav-logout { margin-left: 8px; }
}

/* ============================================================
   Phones (iPhone portrait and similar).
   Most orders happen from a truck cab, so this is the primary
   surface for the customer side — not an afterthought.
   ============================================================ */
@media (max-width: 640px) {

  /* THE iOS ZOOM FIX. Safari force-zooms into any input whose font is
     under 16px the moment it's tapped, and never zooms back out — which
     reads to the user as "the page randomly changed." 16px stops it dead.
     Desktop keeps the denser 14px above this breakpoint. */
  input[type=text], input[type=number], input[type=email], input[type=tel],
  input[type=password], input[type=date], select, textarea {
    font-size: 16px;
    padding: 12px 12px;
  }

  /* Side-by-side form fields are unusable at 390px — stack them. */
  .row { flex-direction: column; gap: 12px; }
  .row > * { width: 100%; }

  /* Wide tables scroll inside themselves instead of pushing the whole
     page sideways (horizontal page scroll is the classic "broken on
     mobile" symptom). */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Thumb-sized tap targets. Apple's guidance is ~44px minimum; a glove
     in a truck cab needs every bit of it. */
  button, .primary, .ghost, .cta-primary, .cta-secondary, .secondary {
    min-height: 44px;
  }
  button.primary, .cta-primary { width: 100%; }

  /* The staff nav has a dozen links; stacking them vertically buries the
     page content under a wall of nav. Scroll it sideways instead. */
  header.topbar nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    width: 100%; gap: 4px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  header.topbar nav a { white-space: nowrap; flex: 0 0 auto; }

  /* On a phone the nav is one horizontal scroll strip, so the group dividers and their
     labels would just eat width someone has to swipe past. Links only. */
  .nav-group { border-left: none; padding-left: 4px; margin-left: 0; flex: 0 0 auto; }
  .nav-group-label { display: none; }
  .nav-group-links { flex-wrap: nowrap; }
  header.topbar nav a.nav-logout { margin-left: 0; }

  /* Search goes full width above the nav strip on a phone — it's the fastest way to
     anything, so it should be the easiest thing to hit with a thumb. */
  .nav-search { margin-left: 0; width: 100%; order: -1; }
  .nav-search input, .nav-search input:focus { width: 100%; }
  .search-results { width: 100%; right: auto; left: 0; }

  main { padding-left: 12px; padding-right: 12px; }
  .panel { padding: 16px 14px; }

  /* Two product tiles per row reads well at phone width. */
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Never let anything push the page sideways. */
  body { overflow-x: hidden; }
  img, .tile img { max-width: 100%; }
}

/* ============================================================
   Motion. One quiet layer at the end of the sheet.
   The rule: motion confirms what you did (press, hover, page
   arrived) and never performs on its own. Anyone who asked
   their OS for less motion gets none at all.
   ============================================================ */
main {
  animation: page-in 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

button, .primary, .ghost, .secondary, .cta-primary, .cta-secondary,
header.topbar nav a, .search-item, .tile, .setup-step, tr {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.18s ease, transform 0.12s ease, opacity 0.2s ease;
}

/* Press feedback: buttons visibly give under the click. */
button:active, .primary:active, .ghost:active, .secondary:active,
.cta-primary:active, .cta-secondary:active {
  transform: translateY(1px) scale(0.99);
}

/* Panels and tiles lift a hair under the pointer — enough to read as "clickable",
   not enough to make the page feel like it's breathing. */
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); }

/* Dropdown search results ease in instead of popping. */
.search-results { animation: page-in 0.16s ease both; }

/* New rows (an order landing on the loader queue) announce themselves once. */
.flash-in { animation: flash-in 0.5s ease both; }
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-4px); background-color: #fef3c7; }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main, .search-results, .flash-in { animation: none; }
  button, .primary, .ghost, .secondary, .cta-primary, .cta-secondary,
  header.topbar nav a, .search-item, .tile, .setup-step, tr { transition: none; }
  .tile:hover { transform: none; }
}

/* The store's one staff affordance: a muted footer line, out of the shopping flow.
   Same "rarer errands recede" idea as the nav group labels — the owner knows to look
   down there; a customer never needs to. */
.site-foot { text-align: center; font-size: 13px; color: var(--muted); margin: 34px 0 22px; }
.site-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Guidance that has to survive typing. Placeholders vanish on first keystroke, which is
   exactly when someone entering a delivery address stops knowing the city and ZIP are
   wanted — and without them the fee can't be worked out at all. */
.field-hint { margin: -2px 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }