/* Regal — in-aisle scanner. Dark, camera-first, shelf-tag vernacular. */

:root {
  --bg: #16181a;
  --surface: #212528;
  --surface-2: #2a2f33;
  --ink: #f2f0e9;
  --muted: #8a9094;
  --tag: #ffd94a;          /* shelf-tag yellow: the signature */
  --tag-ink: #1c1a10;
  --good: #4fc26b;
  --mid: #e8a13c;
  --bad: #e5533f;
  --display: "Roboto Condensed", "Archivo Narrow", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

#screens { flex: 1; overflow-y: auto; }

.screen { display: none; min-height: 100%; }
.screen.active { display: block; }

/* ------------------------------------------------------------- scan */

.viewport {
  position: relative;
  height: 46vh;
  background: #000;
  overflow: hidden;
}

#camera { width: 100%; height: 100%; object-fit: cover; }

.reticle {
  position: absolute;
  inset: 30% 12%;
  border: 2px solid rgba(255, 217, 74, .85);
  border-radius: 10px;
  pointer-events: none;
}

.scan-status {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--tag);
  text-shadow: 0 1px 3px #000;
}

.manual {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}

.manual input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  padding: 10px 12px;
}

.manual button,
.debug-actions button {
  background: var(--surface-2);
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--display);
  font-size: .95rem;
  padding: 10px 16px;
}

.manual button:active,
.debug-actions button:active { background: var(--tag); color: var(--tag-ink); }

/* ---------------------------------------------------------- result */

.result { padding: 4px 12px 16px; }

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 14px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
}

.card .brand {
  grid-column: 1;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card h3 {
  grid-column: 1;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 700;
}

.card .qty { grid-column: 1; color: var(--muted); font-size: .85rem; }

/* the shelf tag: score chip, slightly tilted like a clipped-on price tag */
.tag-chip {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  background: var(--tag);
  color: var(--tag-ink);
  border-radius: 6px;
  padding: 8px 12px 6px;
  text-align: center;
  transform: rotate(3deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  min-width: 74px;
}

.tag-chip .pts {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.tag-chip .lbl {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tag-chip.good { background: var(--good); color: #0d2413; }
.tag-chip.mid  { background: var(--mid);  color: #2b1c05; }
.tag-chip.bad  { background: var(--bad);  color: #fff; }
.tag-chip.none { background: var(--surface-2); color: var(--muted); transform: none; }

/* receipt-style nutrient block */
.receipt {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: .85rem;
  margin-top: 8px;
  border-top: 1px dashed var(--surface-2);
  padding-top: 8px;
}

.receipt .rrow {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.receipt .rrow .v { font-variant-numeric: tabular-nums; }
.receipt .rrow.missing .v { text-decoration: line-through; color: var(--muted); }
.receipt .basis { color: var(--muted); font-size: .72rem; padding-bottom: 4px; }

.additives { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.additives .terms { color: var(--ink); }

.card .foot {
  grid-column: 1 / -1;
  font-size: .68rem;
  color: var(--muted);
  margin-top: 8px;
}

.to-compare {
  width: 100%;
  margin-top: 8px;
  background: var(--surface-2);
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  padding: 12px;
}

.to-compare:active { background: var(--tag); color: var(--tag-ink); }

.notice {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  font-size: .95rem;
}

.notice.warn { border-left: 3px solid var(--mid); }

/* ----------------------------------------------------------- compare */

.slots { display: flex; gap: 10px; padding: 12px; }

.slot {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}

.slot .slot-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--muted);
}

.slot h4 {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.slot .mini-tag {
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  padding: 2px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
}

.slot .mini-tag.good { background: var(--good); color: #0d2413; }
.slot .mini-tag.mid  { background: var(--mid);  color: #2b1c05; }
.slot .mini-tag.bad  { background: var(--bad);  color: #fff; }

.slot button {
  margin-top: auto;
  background: var(--surface-2);
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--display);
  padding: 10px;
}

.slot.win { outline: 2px solid var(--good); }

.verdict { padding: 0 12px; }

.verdict .banner {
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--display);
  font-size: 1.05rem;
  background: var(--surface);
}

.verdict .banner.good { background: var(--good); color: #0d2413; }
.verdict .banner.same { background: var(--tag); color: var(--tag-ink); }
.verdict .banner.warn { border-left: 3px solid var(--mid); }
.verdict .note { font-size: .72rem; color: var(--muted); padding: 6px 2px 0; }

.diff { padding: 10px 12px; font-family: var(--mono); font-size: .85rem; }

.diff .drow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--surface);
}

.diff .drow .dv { text-align: right; font-variant-numeric: tabular-nums; min-width: 64px; }
.diff .drow .dv.better { color: var(--good); font-weight: 700; }
.diff .drow .dv.missing { color: var(--muted); }
.diff .dhead { color: var(--muted); font-size: .72rem; }

.compare-actions { padding: 8px 12px 16px; }
.compare-actions button {
  background: var(--surface-2);
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--display);
  padding: 10px 16px;
}

/* --------------------------------------------------------------- debug */

.debug-title { font-family: var(--display); padding: 16px 16px 4px; }

.debug-list {
  font-family: var(--mono);
  font-size: .85rem;
  padding: 8px 16px;
}

.debug-list div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--surface);
}

.debug-list dd { color: var(--tag); }

.debug-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.debug-note { padding: 0 16px 16px; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------ tabbar */

.tabbar {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--surface-2);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--display);
  font-size: 1rem;
  padding: 14px 0 12px;
}

.tab.active { color: var(--tag); }

:focus-visible { outline: 2px solid var(--tag); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .result .card { animation: slide-up .18s ease-out; }
  @keyframes slide-up {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}