/* ══════════════════════════════════════════════════════════════════
   MerchQueue — shared design tokens
   Dark, high-contrast, built to be read at arm's length in a loud
   venue. Brand runs electric-blue → violet with a cyan signal accent.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bg:         #06080f;
  --bg-2:       #0a0d18;
  --surface:    #10141f;
  --surface-2:  #161c2b;
  --surface-3:  #1d2537;
  --border:     rgba(255, 255, 255, 0.07);
  --border-hi:  rgba(255, 255, 255, 0.14);

  --text:       #eef2fb;
  --text-2:     #aab4c8;
  --muted:      rgba(238, 242, 251, 0.5);

  --brand:      #4f7cff;
  --brand-2:    #7c5cff;
  --brand-soft: rgba(79, 124, 255, 0.14);
  --accent:     #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.14);

  --green:      #22c55e;
  --green-soft: rgba(34, 197, 94, 0.14);
  --amber:      #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --red:        #ef4444;
  --red-soft:   rgba(239, 68, 68, 0.14);
  --violet:     #a78bfa;

  --r:     14px;
  --r-sm:  9px;
  --r-lg:  20px;
  --ease:  cubic-bezier(.2, .9, .2, 1);
  --shadow:    0 1px 0 rgba(255,255,255,.04) inset, 0 12px 34px rgba(0,0,0,.38);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.55);
  --grad: linear-gradient(135deg, var(--brand), var(--brand-2));

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* The UA sheet's [hidden] rule loses to any class that sets display, so every
   `el.hidden = true` in the app silently did nothing. Settle it once, globally. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(79,124,255,.13), transparent 60%),
    radial-gradient(900px 480px at 92% 4%, rgba(124,92,255,.11), transparent 62%);
  background-attachment: fixed;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }

::selection { background: rgba(79,124,255,.35); }

/* ── logo ───────────────────────────────────────────────────────── */
.mq-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.mq-logo .mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow: 0 6px 18px rgba(79,124,255,.4);
}
.mq-logo .word { font-size: 17px; }
.mq-logo .word span { color: var(--muted); font-weight: 600; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease), opacity .16s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: rgba(255,255,255,.22); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(79,124,255,.32); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--red-soft); border-color: rgba(239,68,68,.4); color: #ffb4b4; }
.btn.danger:hover { background: rgba(239,68,68,.24); }
.btn.success { background: var(--green-soft); border-color: rgba(34,197,94,.4); color: #9df0b9; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }

/* Touch targets. Apple and Google both put the floor at 44px; this product is
   used one-handed, at a press, in a queue, so nothing tappable goes under it.
   Keyed on width as well as pointer type: plenty of touch devices report a fine
   pointer, and a pointer-only query silently does nothing on them. */
@media (pointer: coarse), (max-width: 900px) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; padding: 11px 15px; font-size: 13.5px; }
  .btn.lg { min-height: 52px; }
  input[type=checkbox] { width: 24px; height: 24px; }
}
.btn.lg { padding: 15px 24px; font-size: 16px; border-radius: 12px; }
.btn.block { width: 100%; }

/* ── icon button ────────────────────────────────────────────────── */
/* Lives here rather than per-surface: station.css never defined it, so the
   station header's menu button rendered as a raw grey OS button on a dark bar.
   Individual surfaces still override the size. */
.iconbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border-hi); border-radius: 11px;
  background: var(--surface-2); color: var(--text-2);
  font: inherit; font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.iconbtn:hover { background: var(--surface-3); color: var(--text); }
.iconbtn:active { transform: translateY(1px); }
.iconbtn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ── form controls ──────────────────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field > label { color: var(--text-2); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.field .hint { color: var(--muted); font-size: 11.5px; }

/* `input:not([type])` matters: an <input> with no type attribute is a text input
   as far as the browser is concerned, but an `input[type=text]` selector never
   matches it — so any field written without an explicit type rendered as an
   unstyled white box on a dark page. */
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  /* 16px is not a style choice: iOS Safari zooms the whole page whenever a
     focused input is under 16px, and the customer has to pinch back out. Every
     field in this product is filled on a phone, so this stays 16. */
  font-size: 16px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder, textarea::placeholder { color: rgba(238,242,251,.3); }
textarea { resize: vertical; min-height: 80px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aab4c8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); cursor: pointer; }

/* ── surfaces ───────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card.pad { padding: 18px; }

/* ── pills ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pill.blue   { background: var(--brand-soft);  border-color: rgba(79,124,255,.42);  color: #a9c1ff; }
.pill.cyan   { background: var(--accent-soft); border-color: rgba(34,211,238,.42);  color: #9beaf7; }
.pill.green  { background: var(--green-soft);  border-color: rgba(34,197,94,.42);   color: #9df0b9; }
.pill.amber  { background: var(--amber-soft);  border-color: rgba(245,158,11,.42);  color: #fbd38d; }
.pill.red    { background: var(--red-soft);    border-color: rgba(239,68,68,.42);   color: #ffb4b4; }
.pill.violet { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.42); color: #cfc0ff; }
.pill.grey   { color: var(--muted); }

.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -0.01em; }

/* ── toast ──────────────────────────────────────────────────────── */
#toasts {
  position: fixed; z-index: 9999;
  right: 16px; bottom: 16px;
  display: grid; gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}
.toast {
  padding: 12px 14px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: toast-in .22s var(--ease);
}
.toast.err { border-color: rgba(239,68,68,.5); background: #2a1418; color: #ffd7d7; }
.toast.ok  { border-color: rgba(34,197,94,.5); background: #10241a; color: #d7ffe6; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── misc ───────────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 34px 18px; color: var(--muted); text-align: center; font-size: 14px; }

.scroll-x { overflow-x: auto; }
.scroll-x::-webkit-scrollbar { height: 8px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ── connection banner (net.js) ──────────────────────────────────── */
#mq-netbar {
  position: fixed; z-index: 9998;
  left: 50%; top: 12px; transform: translate(-50%, -160%);
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 16px;
  border: 1px solid rgba(245,158,11,.5); border-radius: 999px;
  background: #2b2113; color: #fbd38d;
  font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform .26s var(--ease);
}
#mq-netbar.show { transform: translate(-50%, 0); }
#mq-netbar.ok { border-color: rgba(34,197,94,.5); background: #10241a; color: #d7ffe6; }

/* Anything that spends money or changes state is disabled while disconnected. */
body.is-offline [data-offline-block] { opacity: .5; pointer-events: none; }

/* ── retryable error state ───────────────────────────────────────── */
.errstate {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 40px 24px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.errstate .ic {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--amber-soft); border: 1px solid rgba(245,158,11,.4);
  font-size: 20px;
}
.errstate b { font-size: 16px; }
.errstate span { color: var(--muted); font-size: 13.5px; max-width: 42ch; line-height: 1.55; }

/* ── field-mode pill (offline.js) ─────────────────────────────────
   One persistent indicator on every surface that can work offline.
   It is deliberately loud when there is unsynced work on the device:
   a queue the operator doesn't know about is the only way this system
   loses somebody's money. Sits above the safe area so it clears the
   home indicator on a phone held in one hand at a press.
   ───────────────────────────────────────────────────────────────── */
#mq-fieldpill {
  position: fixed; z-index: 9999;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 7px 15px;
  border-radius: 999px; border: 1px solid var(--border-hi);
  background: rgba(16, 20, 31, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text-2);
  font: 600 12.5px/1 var(--font); letter-spacing: .01em;
  box-shadow: var(--shadow-lg);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#mq-fieldpill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
#mq-fieldpill.ok      { color: #8fe3ad; border-color: rgba(34,197,94,.35); }
#mq-fieldpill.sync    { color: #9dc0ff; border-color: rgba(79,124,255,.45); }
#mq-fieldpill.sync::before { animation: mq-pulse 1.1s ease-in-out infinite; }
#mq-fieldpill.warn    { color: #fbd38d; border-color: rgba(245,158,11,.5); background: rgba(43,33,19,.94); }
#mq-fieldpill.offline {
  color: #ffd9a0; border-color: rgba(245,158,11,.6); background: rgba(52,36,14,.95);
}
/* Unsynced work while disconnected — the one state that must not be missed. */
#mq-fieldpill.offline.queued {
  color: #fff; border-color: rgba(239,68,68,.75); background: rgba(74,20,20,.96);
  animation: mq-breathe 2.4s ease-in-out infinite;
}
@keyframes mq-pulse  { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes mq-breathe {
  0%,100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(239,68,68,.5) }
  50%     { box-shadow: var(--shadow-lg), 0 0 0 7px rgba(239,68,68,0) }
}
@media (prefers-reduced-motion: reduce) {
  #mq-fieldpill, #mq-fieldpill::before { animation: none !important; }
}

/* v5 — the register keeps selling with no network, so the blanket
   "disable everything while offline" rule from v4 no longer applies to
   surfaces that opt in with data-offline-ok. */
body.mq-offline [data-offline-block]:not([data-offline-ok]) { opacity: .5; pointer-events: none; }