/* ══════════════════════════════════════════════════════════════════
   MMW Sales App — mobile-first field app styles
   Self-contained (does NOT load the desktop portal styles.css / sidebar).
   Shares the SAP session + data layer; built to port cleanly to the MCSAP.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:    #2563eb;
  --teal:    #0891b2;
  --green:   #059669;
  --amber:   #d97706;
  --red:     #dc2626;
  --purple:  #7c3aed;
  --gold:    #FFD700;
  --ink:     #111111;
  --ink-2:   #1c1c1c;
  --bg:      #0d0d0d;      /* black, the same ground as the sign-in screen */
  /* For the few things that sit ON that ground rather than inside a white
     card. --text and --muted below are read on white and must not follow. */
  --on-bg:        #a8b2c1;
  --on-bg-strong: #f1f5f9;
  --surface: #ffffff;
  --border:  #e2e8f0;
  --text:    #1e293b;
  --muted:   #64748b;
  --radius:  14px;
  --shadow:  0 2px 10px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .18);
  --header-h: 58px;
  --tabbar-h: 64px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;               /* ≥16px keeps iOS from zooming inputs */
  line-height: 1.4;
  overscroll-behavior-y: none;
}

/* ── App shell ─────────────────────────────────────────────────── */
.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--bg);
  position: relative;
}

/* ── Header ────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: calc(var(--safe-top) + 10px) 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--header-h) + var(--safe-top));
  box-shadow: 0 1px 0 rgba(255, 215, 0, .45);
}
.app-header .logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(145deg, #2a2a2a, #000);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 800; font-size: 13px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Company logo chip (replaces the MMW text mark) */
.app-header .logo-img {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 10px; background: #fff; padding: 4px;
  object-fit: contain;
}
.app-header .h-title { flex: 1; min-width: 0; }
.app-header .h-title .h-hello { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.1; }
.app-header .h-title .h-name  { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .h-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.app-header .h-btn:active { background: rgba(255,255,255,.18); }
/* On a phone the header now carries four buttons, and .h-title is the only
   thing in it that can shrink — so the agent's own name was the thing that
   got squeezed out. Tighten the buttons and the logo instead, and hold a
   floor under the name: knowing which account you are signed into is the
   header's whole job. */
@media (max-width: 420px) {
  .app-header { padding-left: 12px; padding-right: 12px; gap: 7px; }
  .app-header .logo-img { width: 36px; height: 36px; }
  .app-header .h-btn { padding: 8px 9px; font-size: 12px; }
  .app-header .h-title { min-width: 76px; }
  .app-header .h-title .h-name { font-size: 15px; }
}
.h-back {
  background: none; border: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  width: 34px; margin-left: -6px; flex-shrink: 0;
}

/* ── Main scroll region ────────────────────────────────────────── */
.app-main {
  padding: 16px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 24px);
}
.app-main.no-tabbar { padding-bottom: calc(var(--safe-bottom) + 120px); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700;
  padding: 15px 20px;
  cursor: pointer;
  width: 100%;
  min-height: 52px;
  transition: transform .05s ease, filter .15s ease;
}
.btn:active { transform: scale(.985); }
.btn-gold  { background: var(--gold); color: #111; }
.btn-dark  { background: var(--ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn-danger{ background: #fff; color: var(--red); border: 1.5px solid #fecaca; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-new {
  background: linear-gradient(135deg, #1a1a1a, #000);
  color: #fff;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 17px; font-weight: 800;
  box-shadow: var(--shadow);
}
.btn-new .plus {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1;
}

/* ── Search + New Order on one row ─────────────────────────────── */
.top-row { display: flex; gap: 10px; align-items: stretch; margin-top: 2px; }
.top-row .search-wrap { flex: 1; margin: 0; }
.btn-new-c {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold); color: #111;
  border-radius: 12px; padding: 0 15px;
  font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.btn-new-c:active { filter: brightness(.95); }
.btn-new-c .plus-c { font-size: 21px; font-weight: 700; line-height: 1; margin-top: -2px; }

/* ── Section titles ────────────────────────────────────────────── */
.section-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-bg);
  margin: 22px 4px 10px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── Search + filter chips ─────────────────────────────────────── */
.search-wrap { position: relative; margin-top: 4px; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input {
  width: 100%;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 13px 14px 13px 40px;
  font-size: 16px;
  color: var(--text);
}
.search-input:focus { outline: none; border-color: var(--gold); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Order cards ───────────────────────────────────────────────── */
.order-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.order-card:active { background: #fafbfc; }
/* Days MMW has had the order — top right of the card, owner view.
   A flex item, not an overlay: the surname beside it is one ellipsised
   line, and an overlay would sit on the end of a long one. */
.order-age {
  align-self: flex-start;
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-thumb {
  width: 54px; height: 54px; border-radius: 10px;
  background: #f1f5f9 center/cover no-repeat;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 22px;
}
.order-body { flex: 1; min-width: 0; }
.order-surname { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.order-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.order-ref { font-size: 11px; color: #94a3b8; font-weight: 600; }

/* ── Status badges ─────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-green  { background: #d1fae5; color: #047857; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-gray   { background: #f1f5f9; color: #475569; }
.badge-teal   { background: #cffafe; color: #0e7490; }
.badge-purple { background: #ede9fe; color: #5b21b6; }

/* ── Empty / loading states ────────────────────────────────────── */
.state {
  text-align: center;
  color: var(--on-bg);
  padding: 48px 20px;
}
.state .emoji { font-size: 40px; display: block; margin-bottom: 10px; }
.state .st-title { font-weight: 700; color: var(--on-bg-strong); margin-bottom: 4px; }
.spinner {
  width: 30px; height: 30px; margin: 40px auto;
  border: 3px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bottom tab bar ────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: var(--safe-bottom);
  max-width: 640px; margin: 0 auto;
}
.tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--tabbar-h);
  text-decoration: none;
  color: var(--muted);
  font-size: 11px; font-weight: 700;
}
.tabbar a.active { color: var(--ink); }
.tabbar a.tab-new { color: var(--ink); }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.tab-new .fab {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; margin-top: -18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  border: 3px solid #fff;
}

/* ══════════════════════════════════════════════════════════════
   FORM
   ══════════════════════════════════════════════════════════════ */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.form-card > .card-title {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.form-card > .card-title .step-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: block;
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.field .req { color: var(--red); }
.field .hint { font-weight: 500; color: var(--muted); font-size: 12px; }

.input, .textarea, .select {
  width: 100%;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 11px;
  padding: 13px 14px;
  font-size: 16px;
  color: var(--text);
  font-family: inherit;
}
.textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
.textarea.lg { min-height: 130px; }
/* Lettering to be added: centre the text so it reads the way it engraves on the monument */
#f-lettering { text-align: center; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,0,.15); }
.input.err, .textarea.err { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12px; font-weight: 600; margin-top: 5px; display: none; }
.field-error.show { display: block; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.or-divider { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; margin: 4px 0; }

/* Double-check reminder */
.dbl-check {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fffbea; border: 1.5px solid var(--amber);
  border-radius: 11px; padding: 13px 14px; margin-top: 4px;
  cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.4;
}
.dbl-check input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.dbl-check strong { color: #92400e; display: block; margin-bottom: 2px; }
.dbl-check.err { border-color: var(--red); background: #fff5f5; }

/* Use-default-customer button */
.use-default-btn {
  width: 100%; margin-bottom: 15px;
  display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  background: #fffdf0; border: 1.5px solid var(--gold); color: var(--text);
  border-radius: 11px; padding: 13px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: left;
}
.use-default-btn strong { color: var(--ink); }
.use-default-btn:active { background: #fff8d6; }

/* Save-this-customer checkboxes */
.save-cust-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text); padding: 10px 2px; cursor: pointer;
}
.save-cust-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; }
.save-cust-row.indent { padding-left: 30px; color: var(--muted); }


/* The default-customer tick box, above the name */
.use-default-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 15px;
  background: #fffdf0; border: 1.5px solid var(--gold);
  border-radius: 11px; padding: 13px 14px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.use-default-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; }
.use-default-row strong { color: var(--ink); }
.use-default-row:active { background: #fff8d6; }
/* Segmented control (work type) */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #eef1f5; border-radius: 12px; padding: 5px;
}
.seg button {
  border: none; background: transparent;
  padding: 12px 8px; border-radius: 9px;
  font-size: 14px; font-weight: 700; color: var(--muted);
  cursor: pointer;
}
.seg button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* Cemetery autocomplete dropdown */
.ac-dd {
  position: absolute; z-index: 90;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto;
  display: none;
}
.ac-item { padding: 12px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.ac-item:active { background: #f0f4ff; }
.ac-item .ac-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.ac-item .ac-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ac-note { padding: 12px 14px; font-size: 12px; color: #78350f; background: #fffbea; border-left: 4px solid var(--amber); }

/* Photo capture — three across (close-up, location, obituary) */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.photo-tile {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 11px;
  aspect-ratio: 1 / 1;
  background: #f8fafc center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; text-align: center; padding: 5px;
  overflow: hidden;
}
.photo-tile.filled { border-style: solid; border-color: var(--green); }
.photo-tile.optional { border-color: #d8d2c4; }
.photo-tile .cam-icon { font-size: 23px; }
.photo-tile .cam-label { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.1; }
.photo-tile .cam-sub { font-size: 9px; color: #94a3b8; line-height: 1.1; }
.photo-tile input[type=file] { display: none; }
.photo-tile .ph-remove {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.photo-tile .ph-tag {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px;
}

/* Sticky submit bar */
.submit-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + var(--safe-bottom));
  max-width: 640px; margin: 0 auto;
}
.submit-row { display: flex; gap: 10px; }
.submit-row .btn { flex: 1; font-size: 14px; padding: 13px 10px; line-height: 1.15; min-height: 54px; }
/* When only one button is shown (editing an already-submitted order) */
.submit-row.single .btn { font-size: 16px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { background: var(--red); }

/* ── Bottom sheet (order detail) ───────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,23,42,.45);
  display: none;
}
.sheet-backdrop.open { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  max-width: 640px; margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 88vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  padding: 8px 18px calc(28px + var(--safe-bottom));
}
.sheet.open { transform: translateY(0); }
.sheet .grip { width: 40px; height: 4px; background: #cbd5e1; border-radius: 2px; margin: 8px auto 14px; }
/* The grip and the close button ride along as the order scrolls — the sheet
   itself is the scroll container, so anything not sticky is out of reach by
   the time you have read to the bottom of a long order. */
.sheet .sheet-top { position: sticky; top: 0; z-index: 3; background: #fff; min-height: 44px; }
.sheet .sheet-top .grip { margin: 8px auto 0; }
.sheet-close-x {
  position: absolute; top: 0; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: #e8edf3; color: var(--ink); border: none;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.sheet h2 { font-size: 22px; color: var(--ink); }
.sheet .det-row { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1f5f9; }
.sheet .det-row .k { font-size: 13px; color: var(--muted); font-weight: 600; width: 120px; flex-shrink: 0; }
.sheet .det-row .v { font-size: 14px; color: var(--text); flex: 1; white-space: pre-wrap; }
.sheet .det-photos { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.sheet .det-photos img { width: 130px; height: 130px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }

/* Success screen */
.success-wrap { text-align: center; padding: 48px 24px; }
.success-check {
  width: 84px; height: 84px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 46px;
}
.success-wrap h1 { font-size: 24px; color: var(--ink); margin-bottom: 8px; }
.success-wrap p { color: var(--muted); margin-bottom: 6px; }
.success-ref { font-size: 15px; font-weight: 800; color: var(--ink); margin: 14px 0 28px; }

/* Tap-to-enlarge photo thumbnails */
.det-photos img { cursor: zoom-in; }

/* Fullscreen photo lightbox (enlarge + save/send) */
.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.93);
  display: none; flex-direction: column;
}
.lb.open { display: flex; }
.lb-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 14px; min-height: 0; }
.lb-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pin-link {
  background: #eef2f7; border: none; color: var(--ink);
  border-radius: 12px; padding: 12px 20px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.pin-backdrop {
  display: none; position: fixed; inset: 0; z-index: 120;
  background: rgba(15,23,42,.55);
}
.pin-backdrop.open { display: block; }
.pin-modal {
  display: none; position: fixed; z-index: 121;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 36px); max-width: 420px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 18px;
  padding: 22px 20px calc(22px + var(--safe-bottom));
}
.pin-modal.open { display: block; }
.pin-modal h2 { font-size: 20px; color: var(--ink); margin-right: 44px; }
.pin-modal .pin-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 10px 0 18px; }
.pin-modal label {
  display: block; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px;
}
.pin-modal .pin-input {
  width: 100%; border: 2px solid #cbd5e1; border-radius: 12px;
  padding: 14px 16px; font-size: 22px; font-weight: 700;
  letter-spacing: .34em; text-align: center; color: var(--ink);
}
.pin-modal .pin-input:focus { outline: none; border-color: var(--gold); }
.pin-modal .pin-warn {
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: #7c4a03; background: #fffbea;
  border-left: 4px solid #f59e0b; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 18px;
}
.pin-modal .pin-err {
  display: none; margin-top: 12px; padding: 10px 12px;
  background: #fef2f2; border-left: 4px solid #dc2626; border-radius: 8px;
  color: #991b1b; font-size: 13px; font-weight: 600;
}
.lb-close-x {
  position: absolute; top: calc(var(--safe-top) + 10px); right: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; border: none;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lb-bar { display: flex; gap: 10px; padding: 12px 16px calc(14px + var(--safe-bottom)); }
.lb-bar button { flex: 1; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; padding: 15px; cursor: pointer; min-height: 52px; }
.lb-bar .lb-save { background: var(--gold); color: #111; }
.lb-bar .lb-save:disabled { opacity: .6; }
.lb-bar .lb-close { background: rgba(255,255,255,.14); color: #fff; }
.lb-hint { text-align: center; color: rgba(255,255,255,.5); font-size: 11px; padding: 0 16px 6px; }

/* ── Tablets ───────────────────────────────────────────────────────
   The shell is a 640px column, which is right on a phone and leaves a
   tablet showing a phone-sized app floating on black: 57px of it each
   side at 768, and over 350px each side on an iPad Pro in landscape.

   Filling the width alone would not be an improvement — an order card
   stretched across 1300px is a 54px thumbnail, a surname, and a very
   long walk to the badge in the corner. So the shell fills the screen
   and the content laid out down it becomes columns, which is what the
   extra width is actually good for. */
@media (min-width: 700px) {
  .app { max-width: none; }
  .app-main { padding-left: 24px; padding-right: 24px; }

  /* The order list tiles instead of stretching. minmax with 1fr keeps
     every card the same width and lets the count of columns follow the
     screen, so one rule covers 768 through 1366 without naming any of
     them. align-items:start stops a two-line card dragging its
     neighbour's height up to match. */
  #list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 10px;
    align-items: start;
  }
  /* The cards carry their own bottom margin for the single-column
     phone layout; in the grid the gap does that job and the margin
     would double it. */
  #list .order-card { margin-bottom: 0; }
  /* A state ("No orders yet", the spinner) is not one of the tiles —
     it belongs across the whole width. */
  #list .state, #list .spinner { grid-column: 1 / -1; }

  /* The owner's person-picker and tiles sit above the list and stay one
     row; they are already a row and only need room to breathe. */
  .chips { padding-bottom: 8px; }
}

/* The new-order form. Two columns of cards from 980px — the width at
   which a single column leaves a form field stretched over half a metre
   of glass. Below that it stays one column, because a form read down is
   easier to follow than one read across. */
@media (min-width: 980px) {
  #form-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    align-items: start;
  }
  #form-main > .form-card { margin-bottom: 0; }
  /* Anything that is not one of the numbered cards — the intro, the
     errors, the submit bar — spans both columns rather than sitting in
     a half-width slot beside a card. */
  #form-main > :not(.form-card) { grid-column: 1 / -1; }
}