/* CoPOS Companion — mobile-first PWA styles.
 *
 * Lives separate from the desktop dashboard's style.css. The desktop site is
 * dense-and-editorial; this is one-handed-on-a-phone. Big numbers, fat tap
 * targets, no horizontal scroll.
 */

:root {
  --coop-green:        #2B5E3A;
  --coop-green-dark:   #1f4429;
  --coop-green-soft:   #eaf3ed;
  --down-purple:       #7c3aed;
  --down-purple-soft:  #f3eafe;

  --bg:        #f6f7f5;
  --panel:     #ffffff;
  --ink:       #1c2421;
  --ink-muted: #6a736d;
  --ink-faint: #9aa29c;
  --border:    #dce0d9;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
           Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

  /* Height of the fixed bottom tab bar (excludes the safe-area inset, which
     is added on top). Referenced by .app bottom padding + install banner so
     content + overlays clear the bar. */
  --tabbar-h: 3.4rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Safari iOS: respect notch / home-indicator. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--coop-green); text-decoration: none; }
a:active { opacity: 0.6; }

.app {
  max-width: 640px;
  margin: 0 auto;
  /* Bottom pad clears the fixed tab bar (+ its safe-area inset) so the last
     bit of page content is never hidden behind it. */
  padding: 0.75rem 1rem calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1rem);
}

/* ---- Top bar ----------------------------------------------------- */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.topbar .title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.topbar .user {
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.topbar .user a { color: var(--ink-muted); }
/* Inline sign-out form styled to read like the old text link. */
.topbar-logout { display: inline; margin: 0; padding: 0; }
.topbar-logout button {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--ink-muted);
  text-decoration: underline; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Headline date / context ------------------------------------- */

.recap-head {
  margin-bottom: 1rem;
}
.recap-head .date {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
}
.recap-head .compare {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
.recap-head .holiday {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  border-radius: 999px;
}

/* ---- Date nav (prev / next) -------------------------------------- */

.date-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.date-nav a, .date-nav .placeholder {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink);
}
.date-nav a:active { background: var(--coop-green-soft); }
.date-nav .placeholder { color: var(--ink-faint); }
.date-nav .today {
  background: var(--coop-green);
  color: white;
  border-color: var(--coop-green);
  font-weight: 600;
}

/* ---- KPI tiles --------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
}
.tile .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 500;
}
.tile .value {
  /* Sans for tile numbers — the serif looked too editorial here at this size.
     Keep the serif for the date heading where it actually reads well. */
  font-family: var(--sans);
  font-size: 1.55rem;
  font-weight: 600;
  margin-top: 0.2rem;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.tile .delta {
  font-size: 0.78rem;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.tile .delta.up   { color: var(--coop-green-dark); }
.tile .delta.down { color: var(--down-purple); }
.tile .delta.flat { color: var(--ink-faint); }

/* ---- "Other time frames" collapsible (Week/Month/Year to date) ---- */
/* Collapsed by default so the daily recap stays the hero; taps open the
   WTD/MTD/YTD tiles. Styled as one connected card: summary bar on top, the
   tile grid as its expanded body. */
.timeframes {
  margin: -0.25rem 0 1.25rem;   /* tuck up under the daily tiles' bottom gap */
}
.timeframes > summary {
  list-style: none;              /* drop the native disclosure triangle */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.timeframes > summary::-webkit-details-marker { display: none; }
.timeframes[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.timeframes .tf-title { font-size: 0.9rem; font-weight: 500; }
.timeframes .tf-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeframes .tf-chev {
  margin-left: auto;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}
.timeframes[open] > summary .tf-chev { transform: rotate(180deg); }
.timeframes .tf-tiles {
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 0.6rem 0.6rem;
  background: var(--bg);
}
.timeframes .tf-tiles .tile .value { font-size: 1.25rem; }   /* quieter than the daily tiles */

/* ---- Tappable KPI tile (links into the period views) ------------- */
a.tile.tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.tile.tile-link:active { background: var(--coop-green-soft); }
.tile-go { color: var(--ink-faint); font-weight: 600; }

/* ---- Period views (week / month / year) -------------------------- */
.period-head { margin: 0.25rem 0 0.75rem; }
.period-back {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--coop-green);
  text-decoration: none;
  margin-bottom: 0.35rem;
}
.period-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.period-sub { font-size: 0.8rem; margin-top: 0.15rem; }

.period-totals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
  margin: 0.9rem 0;
}
.period-totals .pt {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 0.4rem;
  text-align: center;
}
.pt-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.pt-val {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.period-chart-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.6rem 0.5rem 0.3rem;
  margin-bottom: 1rem;
}
.period-chart { display: block; width: 100%; height: auto; }
.period-cum-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 0 0.4rem 0.35rem;
}
.period-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
  padding: 0 0.4rem 0.3rem;
}
.period-legend .lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.period-legend .lg::before {
  content: "";
  width: 0.75rem; height: 0.18rem; border-radius: 1px;
}
.period-legend .lg-net::before { background: var(--coop-green); }
.period-legend .lg-ov::before {
  background: repeating-linear-gradient(to right,
              var(--down-purple) 0 3px, transparent 3px 5px);
}

.period-table thead th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.period-table thead th.num { text-align: right; }
.period-table th a { color: var(--coop-green); text-decoration: none; }
.period-table .period-sublabel { font-size: 0.72rem; margin-left: 0.3rem; }
.period-table .row-muted th,
.period-table .row-muted td { color: var(--ink-faint); }

/* ---- Department drill-down (what sold) --------------------------- */
.dept-items th { font-weight: 500; padding-right: 0.5rem; vertical-align: top; }
.dept-item-upc { display: block; font-size: 0.68rem; margin-top: 0.05rem; }
.dept-items td.num { white-space: nowrap; padding-left: 0.4rem; vertical-align: top; }
.dept-table th a { color: var(--coop-green); text-decoration: none; font-weight: 600; }

/* ---- Account page ------------------------------------------------ */
.account-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}
.account-avatar {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px;
  background: var(--coop-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 1.2rem; font-weight: 600;
}
.account-id { flex: 1 1 auto; min-width: 0; }
.account-name {
  font-family: var(--sans);
  font-size: 1.05rem; font-weight: 600; line-height: 1.2;
}
.account-user { font-size: 0.8rem; }
.account-role {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
}
.account-role.role-staff { background: #eef1f4; color: #51606e; }
.account-role.role-admin { background: var(--down-purple-soft); color: var(--down-purple); }

.account-signout { margin-bottom: 1.25rem; }
.account-signout .btn-secondary { width: 100%; }

.account-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.8rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.account-link:active { background: var(--coop-green-soft); }
.account-link-ico { flex: 0 0 auto; color: var(--coop-green); display: flex; }
.account-link-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.account-link-txt strong { font-size: 0.95rem; font-weight: 600; }
.account-link-txt .subtle { font-size: 0.76rem; }
.account-link-go { flex: 0 0 auto; color: var(--ink-faint); font-size: 1.3rem; font-weight: 600; }

/* ---- Settings "Advanced" / "Troubleshooting" collapsible --------- */
/* Summary is a standalone tappable bar; when open, the normal fieldsets
   appear below it with their usual styling (no nested boxes). */
.settings-advanced { margin: 0 0 0.5rem; }
.settings-advanced > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced[open] > summary { margin-bottom: 0.75rem; }
.settings-advanced .adv-title { font-size: 0.9rem; font-weight: 600; }
.settings-advanced .adv-hint {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-advanced .adv-chev {
  margin-left: auto;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}
.settings-advanced[open] > summary .adv-chev { transform: rotate(180deg); }

/* ---- Section heading + table ------------------------------------- */

.section h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.section h2 .subtle {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kv-table {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}
.kv-table th, .kv-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: none; }
.kv-table th { font-weight: 500; color: var(--ink-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kv-table td.num { text-align: right; }
.kv-table td.bar {
  /* Inline bar showing share of the parent total, drawn with a CSS gradient
     so we don't need an SVG. Width set inline by template. */
  position: relative;
  width: 5rem;
  padding-right: 0.75rem;
}
.kv-table td.bar .barfill {
  display: inline-block;
  height: 0.55rem;
  background: var(--coop-green);
  border-radius: 0.15rem;
  vertical-align: middle;
}

/* ---- Install banner --------------------------------------------- */

.install-banner {
  position: fixed;
  left: 0;
  right: 0;
  /* Sit above the fixed bottom tab bar rather than under it. */
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: 100;
  padding: 0 0.5rem 0.5rem;
  pointer-events: none;
}
.install-banner-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 640px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem 0.65rem 0.65rem;
  box-shadow: 0 6px 24px rgba(20, 30, 24, 0.18);
  font-size: 0.85rem;
  position: relative;
}
.install-banner-icon img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 0.45rem;
}
.install-banner-body {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.install-banner-title {
  font-weight: 600;
  color: var(--ink);
}
.install-banner-help {
  color: var(--ink-muted);
  margin-top: 0.1rem;
}
.install-banner-help b { color: var(--ink); font-weight: 600; }
.install-banner-help .ios-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  width: 18px;
  height: 18px;
  border-radius: 0.25rem;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  margin: 0 0.1rem;
}
.install-action {
  flex: 0 0 auto;
  background: var(--coop-green);
  color: white;
  border: none;
  border-radius: 0.45rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.install-action:active { background: var(--coop-green-dark); }
.install-dismiss {
  position: absolute;
  top: 0.15rem;
  right: 0.35rem;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.install-dismiss:active { color: var(--ink); }

/* When installed, JS doesn't even render this — but defense in depth: */
@media all and (display-mode: standalone) {
  .install-banner { display: none !important; }
}

/* ---- Empty / error states ---------------------------------------- */

.empty {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-muted);
}
.empty .big {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  display: block;
  margin-bottom: 0.35rem;
}

/* ---- Companion bottom tab bar ------------------------------------ */
/* Primary nav lives at the BOTTOM — this is a one-handed-on-a-phone tool
   and the thumb can't reach a top strip on a 6"+ screen. Fixed, full-bleed,
   safe-area aware; the tab row is capped to the 640px content column. */

.companion-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--panel);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(20, 30, 24, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.companion-nav-row {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  height: var(--tabbar-h);
}
.companion-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  position: relative;
  padding: 0.3rem 0.2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  -webkit-tap-highlight-color: transparent;
}
.companion-nav a.active { color: var(--coop-green); }
.companion-nav a:active { background: var(--coop-green-soft); }
.companion-nav .cnav-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
}
.companion-nav .cnav-ico svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}
.companion-nav .cnav-lbl {
  line-height: 1;
}
.companion-nav .nav-badge {
  position: absolute;
  top: 0.15rem;
  /* Sit just right of the icon's top edge. */
  left: calc(50% + 0.35rem);
  min-width: 1.05rem;
  padding: 0.05rem 0.3rem;
  background: var(--down-purple);
  color: white;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Scan page --------------------------------------------------- */

.scan-head h1 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0.25rem 0 0.2rem;
}
.scan-head p { margin: 0 0 1rem; font-size: 0.9rem; }

.scan-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.btn-primary, .btn-secondary {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid var(--coop-green);
  cursor: pointer;
}
.btn-primary {
  background: var(--coop-green);
  color: white;
}
.btn-primary:active { background: var(--coop-green-dark); }
.btn-primary:disabled {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
  opacity: 0.5;
}
.btn-secondary {
  background: var(--panel);
  color: var(--coop-green-dark);
  border-color: var(--coop-green);
}
.btn-secondary:active { background: var(--coop-green-soft); }
.btn-icon { display: inline-block; margin-right: 0.3rem; font-size: 1.05rem; }

.scan-form {
  display: flex;
  gap: 0.4rem;
}
.scan-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  color: var(--ink);
}
.scan-form input[type="text"]:focus {
  outline: 2px solid var(--coop-green);
  outline-offset: -1px;
}

/* Viewfinder. video element fills the rounded container; the overlay
   draws a translucent reticle so users know where to aim. */
.scanner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #111;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.scanner video,
.scanner .html5qr-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Horizontal scan line — laser-sight metaphor. Detection isn't constrained
   to this line (native BarcodeDetector reads the whole frame; we also drop
   the html5-qrcode qrbox below), but the line tells the user "cross this
   with the barcode" and reads way faster than aligning to a box. */
.scanner-reticle {
  width: 85%;
  max-width: 360px;
  height: 2px;
  background: rgba(239, 68, 68, 0.92);
  box-shadow:
    0 0 6px rgba(239, 68, 68, 0.85),
    0 0 14px rgba(239, 68, 68, 0.45);
  border-radius: 2px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  z-index: 2;
}
/* Translucent band showing the decode region. Height is set inline by JS
   from prefs.scanZonePct so the visible band always matches what the
   decoder actually consumes. Spotlight effect: band is transparent so
   the camera shows cleanly; a 9999px box-shadow darkens everything
   OUTSIDE the band. .scanner's overflow:hidden clips the shadow to the
   camera frame. Standard barcode-scanner UX — replaces the faint dashed
   lines users couldn't see. */
.scanner-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border-top:    2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}
/* Brief green pulse on successful decode — quick visual ack. */
.scanner-reticle.scan-ok {
  background: rgba(34, 197, 94, 0.95);
  box-shadow:
    0 0 10px rgba(34, 197, 94, 0.95),
    0 0 24px rgba(34, 197, 94, 0.65);
}
/* Tap-to-focus marker. Fades in/out fast. */
.scanner-focus-marker {
  position: absolute;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  pointer-events: none;
  animation: scanner-focus-pulse 0.6s ease-out forwards;
}
@keyframes scanner-focus-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  40%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
.scanner-stop {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.scanner-torch {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-torch.on {
  background: #fef3c7;
  color: #7a5a14;
  border-color: #f0d29a;
}
.scanner-torch:active { transform: scale(0.96); }

.scan-status {
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.scan-status.warn  { background: #fff7e6; border-color: #f0d29a; color: #7a5a14; }
.scan-status.error { background: #fdecec; border-color: #f0b5b5; color: #8a2222; }

/* ---- Price-check card ------------------------------------------- */

.price-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem 1rem;
}
.pc-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}
.pc-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.pc-image {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  display: block;
}
.pc-image[hidden] { display: none; }
.pc-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pc-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.pc-meta {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

.pc-pricing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0.4rem 0 0.65rem;
}
.pc-price-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.pc-price {
  font-size: 1.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pc-sale {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}
.pc-pill {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}
.pc-pill-active {
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
}
.pc-pill-upcoming {
  background: #fff7e6;
  color: #7a5a14;
  border: 1px dashed #f0d29a;
}
.pc-margin-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}
.pc-margin-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.pc-margin-row .lbl { color: var(--ink-muted); }
.pc-margin-row .val { font-weight: 600; }

.pc-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
  margin: 0 0 0.6rem;
}
.pc-fact { margin: 0; }
.pc-fact dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.pc-fact dd {
  margin: 0.05rem 0 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.pc-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.pc-note {
  margin-top: 0.55rem;
  padding: 0.4rem 0.6rem;
  background: #fff7e6;
  border: 1px solid #f0d29a;
  color: #7a5a14;
  border-radius: 0.4rem;
  font-size: 0.8rem;
}
.pc-inactive {
  margin-top: 0.55rem;
  padding: 0.4rem 0.6rem;
  background: var(--down-purple-soft);
  color: var(--down-purple);
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- OOS reports page ------------------------------------------- */

.oos-notes-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--panel);
  color: var(--ink);
}
.oos-notes-input:focus { outline: 2px solid var(--coop-green); outline-offset: -1px; }

/* Flag station: UPC field + note grouped into one card so it reads as a
   single unit — the note rides along with the next item you flag. */
.oos-entry {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
/* Inside the grouping card the inner inputs sit on a panel already; tint them
   to the page bg so they don't read as a box-in-a-box. */
.oos-entry .scan-form input[type="text"],
.oos-entry .oos-notes-input {
  background: var(--bg);
}

.oos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow: hidden;
}
.oos-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s ease;
}
.oos-item:last-child { border-bottom: none; }
.oos-item.oos-flash { background: var(--coop-green-soft); }
.oos-item.oos-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.oos-item-main { flex: 1; min-width: 0; }
.oos-item-desc {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}
.oos-item-desc a { color: var(--ink); }
.oos-item-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.oos-item-notes {
  font-size: 0.85rem;
  margin-top: 0.3rem;
  color: var(--ink);
  background: var(--coop-green-soft);
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
}
.oos-item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 0 auto;
}
/* In-list empty marker (OOS list, stocking floor list). Borderless — the
   parent <ul> supplies the card chrome — but otherwise matches the calm,
   centered, muted tone of the standalone `.empty` box. */
.oos-empty {
  list-style: none;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.btn-mini {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  border: 1px solid var(--coop-green);
  background: var(--coop-green);
  color: white;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini:active { background: var(--coop-green-dark); }
.btn-mini-muted {
  background: var(--panel);
  color: var(--ink-muted);
  border-color: var(--border);
}
.btn-mini-muted:active { background: var(--bg); }
.btn-mini-ghost {
  background: var(--panel);
  color: var(--coop-green);
  border-color: var(--border);
}
.btn-mini-ghost:active { background: var(--bg); }

/* ---- OOS buyer flag + inline edit panels ------------------------ */
/* A buyer/manager can annotate an OPEN report without resolving it:
   'located' = actually in stock, misplaced (amber); 'incoming' = still out,
   arrival known (blue). A coloured left-border + banner makes it pop. */
.oos-buyer-banner {
  flex: 1 0 100%;
  font-size: 0.82rem;
  margin-top: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
}
.oos-buyer-banner[hidden] { display: none; }  /* author display beats [hidden] */
.oos-buyer-label { font-weight: 700; }
.oos-buyer-by { font-size: 0.72rem; }
.oos-item.oos-flag-located  { border-left: 3px solid #c98a00; }
.oos-item.oos-flag-located  .oos-buyer-banner { background: #fdf3d7; color: #7a5600; }
.oos-item.oos-flag-incoming { border-left: 3px solid #2f6db5; }
.oos-item.oos-flag-incoming .oos-buyer-banner { background: #e4eefb; color: #234f80; }

/* Inline edit-note / flag editors drop to a full-width row under the item. */
.oos-edit-panel, .oos-flag-panel { flex: 1 0 100%; margin-top: 0.5rem; }
.oos-edit-note, .oos-flag-note {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--ink);
}
.oos-panel-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* The colour-flag controls are buyer/manager only (list gets .can-flag). */
.oos-list:not(.can-flag) .oos-flag-toggle,
.oos-list:not(.can-flag) .oos-flag-panel { display: none; }

/* ---- Special orders (view-only) --------------------------------- */
.so-search { margin-bottom: 0.7rem; }
.so-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.so-pill {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-muted);
  text-decoration: none;
}
.so-pill.active { background: var(--coop-green); border-color: var(--coop-green); color: #fff; }
.so-pill-n { opacity: 0.7; font-variant-numeric: tabular-nums; }
.so-arr-pills { margin-top: -0.4rem; }

/* Arrival state (open orders): fully / partially / not in */
.so-arr-full    { background: var(--coop-green-soft); color: var(--coop-green-dark); }
.so-arr-partial { background: #fdf3e0; color: #9a6b1a; }
.so-arr-none    { background: #ececec; color: #777; }
.so-line-in {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 0.1rem;
  padding: 0;
  background: none;
}
.so-line-in.so-arr-full    { color: var(--coop-green-dark); }
.so-line-in.so-arr-partial { color: #9a6b1a; }
.so-line-in.so-arr-none    { color: #999; }

.so-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.so-card {
  display: block;
  padding: 0.65rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.so-card:active { background: var(--coop-green-soft); }
.so-card-top { display: flex; justify-content: space-between; align-items: center; }
.so-order { font-weight: 700; font-variant-numeric: tabular-nums; }
.so-party { margin-top: 0.15rem; font-weight: 500; }
.so-meta { font-size: 0.78rem; margin-top: 0.1rem; }
.so-amounts { margin-top: 0.3rem; display: flex; gap: 0.6rem; align-items: baseline; }
.so-total { font-weight: 600; }
.so-owed { font-size: 0.82rem; color: #b23b3b; }

.so-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.so-status-open      { background: #e4eefb; color: #234f80; }
.so-status-completed { background: var(--coop-green-soft); color: var(--coop-green-dark); }
.so-status-deleted   { background: #f0e0e0; color: #8a4040; }

.so-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  margin-left: 0.3rem;
}
.so-detail-name { font-size: 1.05rem; font-weight: 600; }
.so-line-vendor { display: block; font-size: 0.68rem; font-weight: 400; margin-top: 0.05rem; }
.so-dates th { font-weight: 500; color: var(--ink-muted); }
.so-fresh { margin-top: 1rem; font-size: 0.75rem; }

/* ---- Stocking session ------------------------------------------- */

.stocking-empty {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.stocking-empty p { margin: 0 0 0.7rem; color: var(--ink-muted); }

.stocking-progress {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sp-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 0.7rem;
  text-align: center;
}
.sp-num {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sp-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 0.1rem;
}
.sp-fulfilled .sp-num { color: var(--coop-green-dark); }
.sp-not-found .sp-num { color: var(--down-purple); }

.qty-input {
  width: 3.5rem;
  flex: 0 0 auto;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--panel);
  color: var(--ink);
}
.qty-input:focus { outline: 2px solid var(--coop-green); outline-offset: -1px; }

.stocking-list .stocking-item.state-fulfilled { background: rgba(43, 94, 58, 0.06); }
.stocking-list .stocking-item.state-fulfilled .oos-item-desc a {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.stocking-list .stocking-item.state-not_found .oos-item-desc a {
  color: var(--down-purple);
}
.stocking-list .stocking-item.state-not_found {
  background: var(--down-purple-soft);
}
.stocking-item-qty {
  font-weight: 600;
  color: var(--ink);
}

.stocking-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* ---- Settings page ---------------------------------------------- */

.settings-form { margin-top: 0.5rem; }
.settings-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1rem;
}
.settings-group legend {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0 0.35rem;
}
.settings-group .hint {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.settings-group label {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  line-height: 1.3;
  border-bottom: 1px solid var(--border);
}
.settings-group label:last-child { border-bottom: none; }
.settings-group label.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}
.settings-group label.row .lbl { flex: 1; }
.settings-group label .subtle {
  font-weight: 400;
  font-size: 0.82rem;
}
.settings-group input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.5rem;
  vertical-align: -2px;
  accent-color: var(--coop-green);
}
.settings-group select {
  flex: 0 0 auto;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--bg);
  color: var(--ink);
  min-width: 9rem;
}
.settings-group .rangewrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 12rem;
}
.settings-group input[type="range"] {
  flex: 1;
  accent-color: var(--coop-green);
}
.settings-group output {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-width: 4.5rem;
  text-align: right;
}
.format-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.settings-actions {
  display: flex;
  gap: 0.6rem;
}
.settings-actions .btn-primary,
.settings-actions .btn-secondary { flex: 1; }

/* ---- Small utilities --------------------------------------------- */

.subtle { color: var(--ink-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---- Shelf stocking — landing extras ----------------------------- */

.stocking-resume {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--coop-green);
  border-radius: 0.6rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.stocking-resume-lead {
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
.stocking-resume-lead .subtle { display: block; margin-top: 0.15rem; font-size: 0.85rem; }
.stk-inline-form { margin-top: 0.6rem; }
.stk-area { font-weight: 600; }

/* Per-stocker session lists (recent passes + manager oversight). */
.stk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.stk-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.stk-row-main { flex: 1; min-width: 0; line-height: 1.35; }
.stk-row-main .subtle { display: block; font-size: 0.8rem; margin-top: 0.1rem; }
.stk-row-link { text-decoration: none; color: var(--ink); }
.stk-row-link:active { color: var(--coop-green); }
.stocking-fresh { margin-top: 1rem; }
.stocking-fresh summary {
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0;
}
.stocking-fresh p { font-size: 0.85rem; margin: 0.2rem 0 0.6rem; }

.btn-block { display: block; width: 100%; text-align: center; }

.btn-link {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-link:active { color: var(--ink); }
.btn-link-danger { color: var(--down-purple); }

/* ---- Shelf stocking — floor pass: edit-last chip & events ------- */

.edit-last-chip {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  width: 100%;
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--coop-green-soft);
  border: 1px solid var(--coop-green);
  border-radius: 0.55rem;
  color: var(--coop-green-dark);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.edit-last-chip:active { background: var(--coop-green); color: white; }
.edit-last-lbl { font-weight: 600; }
.edit-last-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-last-cap { font-variant-numeric: tabular-nums; }

.stocking-event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow: hidden;
}
.stocking-event {
  display: block;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.stocking-event:last-child { border-bottom: none; }
.se-desc {
  font-weight: 500;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.se-desc a { color: var(--ink); }
.se-meta {
  margin-top: 0.18rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
}
.se-cap { font-weight: 600; color: var(--ink); }
.se-flag.flag-short    { color: #b45309; }
.se-flag.flag-notfound { color: var(--down-purple); }
.se-flag.flag-done     { color: var(--coop-green-dark); }

.stocking-event.state-completed   { background: rgba(43, 94, 58, 0.04); }
.stocking-event.state-not_found   { background: var(--down-purple-soft); }
.stocking-event.state-short       { background: rgba(180, 83, 9, 0.06); }

/* ---- Capture sheet: full-screen numpad overlay ------------------ */

.capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Slide-up animation — runs once on .open. */
  transform: translateY(100%);
  transition: transform 200ms ease-out;
}
.capture-sheet.open { transform: translateY(0); }
.capture-sheet[hidden] { display: none; }
.capture-sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1rem 0.5rem;
  /* Account for iOS home-indicator bar. */
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  gap: 0.7rem;
}

.capture-info {
  flex: 0 0 auto;
}
.capture-info-matched {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.capture-info-matched .ci-text {
  flex: 1 1 auto;
  min-width: 0;
}
.capture-info-matched .ci-image {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  display: block;
}
.capture-info-matched .ci-image[hidden] { display: none; }
.capture-info-matched .ci-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.capture-info .ci-desc {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.capture-info .ci-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.capture-info .ci-velocity {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.ci-vel-block { display: flex; flex-direction: column; align-items: flex-start; }
.ci-vel-num {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ci-vel-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-top: 0.1rem;
}
.ci-extras {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
}
.ci-promo {
  background: var(--coop-green-soft);
  color: var(--coop-green-dark);
  padding: 0.15rem 0.55rem;
  border-radius: 0.6rem;
  font-weight: 500;
}
.ci-last-cap, .ci-backstock {
  background: var(--border);
  color: var(--ink);
  padding: 0.15rem 0.55rem;
  border-radius: 0.6rem;
}
.ci-discontinued {
  color: var(--down-purple);
  font-weight: 500;
}
.capture-info-unknown .ci-desc { color: var(--down-purple); }
.capture-info-unknown p { font-size: 0.85rem; color: var(--ink-muted); margin: 0.4rem 0 0; }

.numpad-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0.9rem;
  background: var(--coop-green-soft);
  border-radius: 0.55rem;
  margin: 0.3rem 0 0;
}
.numpad-readout-prefix {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coop-green-dark);
}
.numpad-readout-value {
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--coop-green-dark);
  line-height: 1;
}
.numpad-readout-value.is-blank { color: var(--ink-faint); }

.numpad-quickpick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
.numpad-quickpick button {
  padding: 0.7rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  border: 1px solid var(--coop-green);
  border-radius: 0.5rem;
  color: var(--coop-green-dark);
  cursor: pointer;
}
.numpad-quickpick button:active {
  background: var(--coop-green);
  color: white;
}

.numpad-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.5rem;
  min-height: 0;  /* allow grid children to shrink to fit */
}
.numpad-grid button {
  font-size: 1.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--ink);
  cursor: pointer;
  /* Generous minimum tap target. */
  min-height: 3.2rem;
}
.numpad-grid button:active {
  background: var(--coop-green-soft);
  border-color: var(--coop-green);
}
.numpad-grid .numpad-back {
  background: var(--border);
  font-size: 1.5rem;
}
.numpad-grid .numpad-done {
  background: var(--coop-green);
  border-color: var(--coop-green);
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
}
.numpad-grid .numpad-done:active {
  background: var(--coop-green-dark);
}

.capture-sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* ---- Back-room pass: row layout & "Bring N" emphasis ----------- */

.backroom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.backroom-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.backroom-row.br-leaving {
  opacity: 0;
  transform: translateX(-12px);
}
.backroom-row.state-completed {
  background: rgba(43, 94, 58, 0.05);
  border-color: rgba(43, 94, 58, 0.25);
}
.backroom-row.state-completed .br-desc {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.backroom-row.state-short    { background: rgba(180, 83, 9, 0.06); }
.backroom-row.state-not_found { background: var(--down-purple-soft); }

.br-bring {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.br-bring-num {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--coop-green-dark);
  font-variant-numeric: tabular-nums;
}
.br-brought-strike {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.br-body { min-width: 0; }
.br-desc {
  font-weight: 500;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.br-meta {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.br-flags { margin-top: 0.2rem; display: flex; gap: 0.4rem; }

.br-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
}
.br-check {
  font-size: 1.7rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--coop-green);
  background: var(--panel);
  color: var(--coop-green-dark);
  cursor: pointer;
  line-height: 1;
}
.br-check[aria-pressed="true"] {
  background: var(--coop-green);
  color: white;
}
.br-check:active { transform: scale(0.95); }
.br-edit, .br-short, .br-notfound, .br-remove {
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
}
.br-more {
  position: relative;
}
.br-more summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.3rem 0.5rem;
  color: var(--ink-muted);
}
.br-more summary::-webkit-details-marker { display: none; }
.br-more[open] {
  position: absolute;
  right: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Shared image lightbox (mounted by static/companion/lightbox.js). Triggered
   by any element carrying [data-lightbox-src]. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: calc(100vh - 3rem);
  object-fit: contain;
  display: block;
  border-radius: 0.25rem;
  background: #fff;
}
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
}
.lightbox-close:hover { color: #ddd; }
body.lightbox-open { overflow: hidden; }