/* Dark warehouse theme — fix round 1.
   Geometry doctrine: header (context strip + alert region + top bar) is IN LAYOUT
   FLOW and sticky; content always starts below it. The lower third of the screen
   belongs to the camera shutter alone, plus the fixed undo corner — nothing else
   tappable lives down there. Essential text ≥16px, item ID ≥24px, targets ≥48px. */
:root {
  --bg: #0e1116;
  --panel: #171c24;
  --panel-2: #1f2632;
  --line: #2c3442;
  --text: #eef2f8;
  --dim: #9aa3b8;
  --blue: #2f81f7;
  --green: #2ea86b;
  --amber: #d99a1b;
  --red: #e5534b;
  --header-h: 148px; /* measured at runtime; fallback only */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
.icon { vertical-align: -3px; }

#main {
  padding: 8px 12px 96px; /* bottom room for the undo corner */
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  #main { max-width: 1100px; } /* desk views breathe on desktop */
}
.pane h1 { font-size: 24px; margin: 8px 0; }
.pane h2 { font-size: 18px; margin: 18px 0 6px; }
.pane h3 { font-size: 16px; }
.hint { color: var(--dim); font-size: 16px; margin: 6px 0; }
.warn-text { color: var(--amber); }
.dim { color: var(--dim); }
.big { font-size: 24px; font-weight: 700; }

/* ---------- header: strip + alert + top bar (in flow, sticky) ---------- */
#app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
#context-strip {
  padding: 8px 10px 6px;
  border-bottom: 3px solid var(--dim);
}
#context-strip[data-mode="receiving"] { border-bottom-color: var(--blue); }
#context-strip[data-mode="cataloging"] { border-bottom-color: var(--green); }
.strip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;           /* stable rows: clamp, never grow over content */
  white-space: nowrap;
}
.strip-row.row1 { min-height: 40px; }
.strip-row.row2 { min-height: 32px; }
/* Row 1: only the consignor may ellipse; operator + lifetime timers never shrink. */
.strip-row.row1 > .strip-pill { flex: none; }
.strip-mode {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--dim);
  flex: none;
}
#context-strip[data-mode="receiving"] .strip-mode { color: var(--blue); }
#context-strip[data-mode="cataloging"] .strip-mode { color: var(--green); }
.strip-item { font-size: 28px; font-weight: 800; letter-spacing: 0.02em; flex: none; }
.strip-consignor {
  font-size: 17px;
  font-weight: 600;
  min-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.strip-pill {
  flex: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.strip-pill.warn { border-color: var(--amber); color: var(--amber); }
.strip-pill.pending { border-color: var(--amber); color: var(--amber); }
.strip-pill.pending.dead { border-color: var(--red); color: #ff8a80; }
.strip-pill.loc { border-color: var(--blue); }
.strip-pill.loc.none { border-color: var(--line); color: var(--dim); }
.strip-pill.op { border-color: var(--green); }
.strip-pill.prov { border-color: var(--amber); color: var(--amber); font-weight: 800; }
.strip-pill.net.warn { border-color: var(--red); color: #ff8a80; }

#alert-region { padding: 0 10px; }
.strip-banner {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
}
.strip-banner.warn { background: #3c2f10; color: #ffd15c; border: 1px solid var(--amber); }
.strip-banner.error { background: #40191b; color: #ff8a80; border: 1px solid var(--red); }

#top-bar {
  display: flex;
  gap: 6px;
  padding: 6px 8px 8px;
}
.nav-btn {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.nav-btn.active { border-color: var(--blue); color: var(--blue); }
body[data-mode="cataloging"] .nav-btn.active { border-color: var(--green); color: var(--green); }

/* ---------- mock watermark ---------- */
#mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: repeating-linear-gradient(-45deg, #4a2f00, #4a2f00 14px, #6b4400 14px, #6b4400 28px);
  color: #ffd15c;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid var(--amber);
}
#mock-bar strong { font-size: 18px; letter-spacing: 0.08em; }
#mock-bar .btn { margin-left: auto; border-color: var(--amber); color: #ffd15c; }

/* ---------- buttons / rows ---------- */
.btn {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--blue); border-color: var(--blue); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 14px; }
.btn.mic.on { background: var(--red); border-color: var(--red); }
.btn:disabled { opacity: 0.45; cursor: default; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.spread { justify-content: space-between; }

.row-btn {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: 4px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
  font-size: 16px;
  cursor: pointer;
}
div.row-btn { cursor: default; }
.row-btn.danger { border-color: var(--red); background: #2a161a; }
.entry-id { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }

/* Two-line danger/backlog rows: ID + status first, consignor/location second (UX-I4) */
.row-btn.two-line {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.row-btn.two-line .line1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.row-btn.two-line .line2 { font-size: 16px; }

/* ---------- inputs ---------- */
.consignor-search, #manual-input, .field input, .prov-real, #detail-panel textarea,
.overlay-card input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 18px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.consignor-results { margin-top: 8px; }
.consignor-row span:first-child { font-weight: 700; }
.provisional-new { border-style: dashed; border-color: var(--amber); }
.entry-list { list-style: none; padding: 0; margin: 14px 0; }
.entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
}
.entry-loc.unstaged { color: var(--amber); font-weight: 700; }
.session-head { margin-bottom: 8px; }

/* ---------- cataloging / camera ---------- */
#camera-shell {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0; right: 0;
  z-index: 20;
  background: #000;
}
#camera-container { position: absolute; inset: 0; }
#insurance-done { position: absolute; top: 12px; right: 12px; z-index: 26; }
/* Scanner-first: park the open item and return to the idle scan screen. Bottom-right,
   clear of the lower-third shutter zone's center and the undo chip on the left. */
#catalog-done { position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 26; }
.catalog-hint {
  position: fixed;
  top: calc(var(--header-h) + 12vh);
  left: 0; right: 0;
  z-index: 22;
  text-align: center;
  padding: 0 24px;
  text-shadow: 0 1px 4px #000;
  pointer-events: none; /* never intercept shutter taps */
}
.catalog-hint .btn { pointer-events: auto; }

/* Condition sheet: tab lives at the right edge ABOVE the glove zone; the open sheet
   is an operator-invoked overlay; closed, it is hidden + inert (no leakage). */
#detail-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; }
.panel-tab {
  position: fixed;
  right: 0;
  bottom: 42vh;             /* above the shutter third */
  z-index: 31;
  pointer-events: auto;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--line);
  border-right: none;
  background: var(--panel);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
#detail-panel .panel-body {
  pointer-events: auto;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px;
  max-height: 55vh;
  overflow-y: auto;
}
#detail-panel:not(.open) .panel-body { display: none; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.chip.on { background: var(--green); border-color: var(--green); color: #06170e; }
.chip.static { min-height: auto; padding: 3px 10px; font-size: 14px; cursor: default; margin-right: 4px; }
.dictation { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; }

/* ---------- dashboard / lookup ---------- */
.dash-section { margin: 18px 0; }
.dash-section.blocked h2 { color: var(--red); }
.dash-section.parked h2 { color: var(--red); }
.dash-section.stuck h2 { color: var(--amber); }
.dash-group h3 { margin: 12px 0 4px; }
.prov-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 4px 0;
  border: 1px dashed var(--amber);
  border-radius: 10px;
  font-size: 16px;
}
.prov-real { width: 170px; min-height: 48px; }
.lookup-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.fact {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
}
.fact.status-received { border-color: var(--amber); color: var(--amber); }
.fact.status-intaken { border-color: var(--green); color: var(--green); }
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.photo-grid img, .photo-pending { width: 128px; height: 96px; object-fit: cover; border-radius: 8px; }
.photo-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px dashed var(--amber);
  color: var(--amber);
  font-size: 16px;
  font-weight: 700;
}
.lookup-photo { margin: 0; }
.lookup-photo figcaption { font-size: 14px; color: var(--dim); text-align: center; }
.event-list { list-style: none; padding: 0; }
.event-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 16px; }

/* ---------- receipt ---------- */
.receipt-counts { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; font-size: 17px; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 16px; }
.receipt-table th, .receipt-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}

/* ---------- undo: the one fixed corner ---------- */
#undo-btn {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 45;
  width: 104px;
  min-height: 56px;
  border-radius: 10px;
  border: 2px solid var(--amber);
  background: var(--panel-2);
  color: var(--amber);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.15;
}
#undo-btn:disabled { border-color: var(--line); color: var(--dim); opacity: 0.6; }
.undo-detail { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

/* ---------- toasts ---------- */
#toast, #toast-alert {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 90vw;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#toast { bottom: 84px; }
#toast-alert { bottom: 148px; }
.toast-ok { border-color: var(--green) !important; }
.toast-warn { border-color: var(--amber) !important; color: var(--amber); }
.toast-error { border-color: var(--red) !important; color: #ff8a80; }

/* ---------- overlays / dialogs ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 10, 14, 0.9);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  overflow-y: auto;
}
.overlay-card {
  width: 100%;
  max-width: 480px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.overlay-card h2 { margin: 0 0 10px; }
.overlay-card .row { margin-top: 14px; justify-content: flex-end; }

.operator-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.operator-btn {
  flex: 1;
  min-width: 120px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.operator-btn .initials { font-size: 34px; font-weight: 900; }
.operator-btn .op-name { font-size: 16px; color: var(--dim); }
.operator-btn.last { border-color: var(--green); }
.field { display: block; margin: 10px 0; }
.field span { display: block; font-size: 16px; color: var(--dim); margin-bottom: 4px; }

/* ---------- e2e runner page ---------- */
#rn-frame { width: 393px; height: 800px; border: 1px solid var(--line); margin: 12px; }
#runner-pane .field { min-width: 220px; }
#rn-results td.pass { color: var(--green); font-weight: 700; }
#rn-results td.fail { color: #ff8a80; font-weight: 700; }

#scan-trap {
  position: fixed;
  top: -100px; left: -100px;
  width: 10px; height: 10px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- narrow handhelds ---------- */
@media (max-width: 400px) {
  .strip-item { font-size: 24px; }   /* ≥24px floor for the item ID */
  .strip-consignor { font-size: 16px; }
  .nav-btn { font-size: 16px; padding: 0 2px; }
}

/* ---------- reduced motion (fix round 2 minor) ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn:active { transform: none; }
}

/* ---------- print: the receipt is the page ---------- */
@media print {
  body { background: #fff; color: #000; }
  #app-header, #undo-btn, #toast, #toast-alert, #camera-shell, #detail-panel,
  .no-print, .overlay, #mock-bar, .panel-tab { display: none !important; }
  #main { padding: 0; max-width: none; }
  .pane.receipt { color: #000; }
  .receipt-table th, .receipt-table td { border-bottom: 1px solid #999; }
  .hint, .dim { color: #444; }
}