/* ============================================================
   Food Scanner — light/bright PWA
   Palette: warm cream + green ✓ + coral ✗ + amber ?
   ============================================================ */

:root {
  --bg: #FAF6EC;
  --surface: #FFFFFF;
  --surface-2: #FFF8EC;
  --card: #FFFFFF;
  --line: rgba(40, 30, 20, 0.10);

  --ink: #2A2038;
  --ink-deep: #1A1226;
  --muted: #7A6D85;

  --bg-glow-1: rgba(255, 214, 74, 0.22);
  --bg-glow-2: rgba(255, 94, 142, 0.16);
  --bg-glow-3: rgba(69, 181, 116, 0.14);

  --green: #2F8F4F;
  --green-bright: #45B574;
  --red: #D6464A;
  --red-bright: #ED5E62;
  --amber: #E29412;
  --amber-bright: #F4B240;

  --grad-warm: linear-gradient(135deg, #FFD64A 0%, #FF8B3D 50%, #FF5E8E 100%);
  --grad-fresh: linear-gradient(135deg, #FFD64A 0%, #45B574 100%);
  --grad-sky: linear-gradient(135deg, #6CC1E8 0%, #3E7CB5 100%);
  --grad-pink: linear-gradient(135deg, #FF8B3D 0%, #FF5E8E 100%);
  --grad-green: linear-gradient(135deg, #45B574 0%, #2F8F4F 100%);
  --grad-red: linear-gradient(135deg, #ED5E62 0%, #B83134 100%);

  --shadow-sm: 0 2px 6px rgba(40, 30, 20, 0.08);
  --shadow:    0 8px 22px rgba(40, 30, 20, 0.12);
  --shadow-lg: 0 18px 50px rgba(40, 30, 20, 0.18);

  --radius-card: 22px;
  --radius-tile: 18px;
  --radius-pill: 999px;

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="dark"] {
  --bg: #0F1A2C;
  --surface: #1A2840;
  --surface-2: #243352;
  --card: #1F2D49;
  --line: rgba(255, 255, 255, 0.10);

  --ink: #ECE6DC;
  --ink-deep: #0E1623;    /* stays dark — used for text on bright accent gradients */
  --muted: #97A3B8;

  --bg-glow-1: rgba(255, 214, 74, 0.10);
  --bg-glow-2: rgba(255, 94, 142, 0.08);
  --bg-glow-3: rgba(69, 181, 116, 0.10);

  --green: #45B574;
  --green-bright: #6FD698;
  --red: #ED5E62;
  --red-bright: #FF7A7E;
  --amber: #F4B240;
  --amber-bright: #FFC966;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow:    0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Inter", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(900px 500px at -10% -20%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, var(--bg-glow-2), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, var(--bg-glow-3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
  transition: background-color 0.2s ease;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 120px;
}

/* ---------- typography ---------- */

h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

h3.section-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 28px 0 6px;
}

.muted { color: var(--muted); font-size: 14px; }

/* ---------- header ---------- */

.hero {
  text-align: center;
  padding: 18px 6px 22px;
}
.hero-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.back {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.back:active { background: rgba(40, 30, 20, 0.06); }

/* ---------- buttons (gradient outline canon) ---------- */

.btn {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); }

.btn-outline::before,
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-primary {
  background: var(--grad-fresh);
  color: var(--ink-deep);
  font-weight: 700;
}
.btn-primary::before { background: var(--grad-warm); }

/* big CTA */

.big-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0 24px;
}
.big-cta {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 26px 28px;
  border: none;
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.big-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: 28px;
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.big-cta:active { transform: scale(0.98); }
.big-cta-icon { font-size: 28px; }

/* ---------- manual barcode input ---------- */

.manual {
  display: flex;
  gap: 10px;
  margin: 6px 0 18px;
}
.manual input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 15px;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink);
  -webkit-appearance: none;
}
.manual input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green-bright); }

/* ---------- home tiles ---------- */

.home-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 22px;
}
.tile {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-tile);
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s var(--spring);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-tile);
  background: var(--grad-sky);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.tile:nth-child(2)::before { background: var(--grad-fresh); }
.tile:active { transform: scale(0.97); }
.tile-icon { font-size: 24px; }
.tile-title { font-size: 16px; font-weight: 700; }
.tile-sub { font-size: 13px; color: var(--muted); }

/* ---------- hint card ---------- */

.hint {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.hint::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-card);
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.65;
}
.hint h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.hint ol { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; font-size: 14px; }
.hint p { margin: 8px 0 0; }

/* ---------- scanner ---------- */

.scanner-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scanner-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scanner-reticle {
  width: 75%;
  height: 32%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}
.scanner-status {
  text-align: center;
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--muted);
}
.scan-actions { display: flex; justify-content: center; margin-top: 14px; }

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

.result-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  position: relative;
  margin-bottom: 16px;
}
.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-card);
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.4;
}

.verdict {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  color: white;
  box-shadow: var(--shadow-sm);
}
.verdict.pending { background: linear-gradient(135deg, #ccc 0%, #aaa 100%); }
.verdict.green   { background: var(--grad-green); }
.verdict.red     { background: var(--grad-red); }
.verdict.amber   { background: linear-gradient(135deg, var(--amber-bright) 0%, var(--amber) 100%); }

.result-text { flex: 1; min-width: 0; }
.result-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
  word-break: break-word;
}
.result-brand { font-size: 13px; }

.fired {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.fired-heading { font-weight: 700; margin: 0 0 8px; font-size: 14px; }
.fired-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fired-list li {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(237, 94, 98, 0.10), rgba(214, 70, 74, 0.06));
  border-left: 4px solid var(--red);
  border-radius: 12px;
  font-size: 14px;
}
.fired-list strong { display: block; color: var(--red); margin-bottom: 2px; }
.fired-list .muted { font-size: 12px; }

.ingredients details {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.ingredients summary { font-weight: 600; cursor: pointer; font-size: 14px; }
.ingredients p { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 8px 0 0; word-break: break-word; }

.result-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.result-actions .btn { flex: 1; min-width: 140px; }

/* ---------- rules editor ---------- */

.rules-intro {
  position: relative;
  background: var(--surface);
  padding: 14px 18px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 6px;
}
.rules-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-card);
  background: var(--grad-fresh);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.rules-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.rules-more {
  background: var(--surface);
  border-radius: var(--radius-tile);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  margin-top: 16px;
}
.rules-more::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: var(--radius-tile);
  background: var(--grad-sky);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.rules-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
}
.rules-more summary::-webkit-details-marker { display: none; }
.rules-more summary::after {
  content: "▸";
  position: absolute;
  right: 18px;
  top: 16px;
  font-size: 18px;
  color: var(--muted);
  transition: transform 0.2s var(--spring);
}
.rules-more[open] summary::after { transform: rotate(90deg); }
.rules-more-title { font-weight: 700; font-size: 15px; }
.rules-more-sub { font-size: 13px; color: var(--muted); }
.rules-more p.muted { margin: 10px 0 12px; }

.rules-presets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.preset-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  padding: 14px 16px;
  border-radius: var(--radius-tile);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.preset-row::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: var(--radius-tile);
  background: var(--grad-fresh);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
}
.preset-row input[type="checkbox"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--green);
  flex: 0 0 auto;
}
.preset-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.preset-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
  margin-top: 6px;
  -webkit-appearance: none;
}
textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green-bright); }

/* ---------- history ---------- */

.history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.history-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-sm);
}
.history-pill {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: white;
  flex: 0 0 auto;
}
.history-row.green .history-pill   { background: var(--grad-green); }
.history-row.red .history-pill     { background: var(--grad-red); }
.history-row.unknown .history-pill { background: linear-gradient(135deg, var(--amber-bright), var(--amber)); }
.history-body { flex: 1; min-width: 0; }
.history-name { font-weight: 700; font-size: 15px; }
.history-meta { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.history-trig { font-size: 12px; color: var(--red); margin-top: 4px; }

/* ---------- theme toggle ---------- */

.theme-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: 14px;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--surface);
  border: none;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 60;
  transition: transform 0.12s var(--spring), background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 14px;
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- version pill ---------- */

.version-pill {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  z-index: 50;
  /* gradient outline */
  position: fixed;
}
.version-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: var(--radius-pill);
  background: var(--grad-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- screens ---------- */
.screen { animation: fade-in 0.18s var(--spring); }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   v6 — honest verdicts, offline pack, household, explanations
   ============================================================ */

/* ---------- update banner + toast ---------- */

.update-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); font-weight: 600;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 70; padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.92rem;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s var(--spring);
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { background: var(--green); color: #fff; }

/* ---------- who bar ---------- */

.who-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 0 2px;
}
.who-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.who-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-pill); padding: 7px 14px; font-weight: 700;
  font-size: 0.88rem; cursor: pointer; transition: transform .18s var(--spring);
}
.who-chip.on { background: var(--grad-green); color: #fff; border-color: transparent; }
.who-chip:active { transform: scale(0.96); }

/* ---------- banners on home ---------- */

.pack-banner, .alert-banner { margin: 14px 0; }
.pack-banner-inner, .alert-banner-inner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-tile);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.pack-banner-inner b, .alert-banner-inner b { display: block; width: 100%; }
.pack-banner-inner span { flex: 1; min-width: 180px; font-size: 0.88rem; color: var(--muted); }
.alert-banner-inner { border-left: 4px solid var(--red); }

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

.result-card.pass   { border-left: 6px solid var(--green); }
.result-card.fail   { border-left: 6px solid var(--red); }
.result-card.unknown{ border-left: 6px solid var(--amber); }

.result-headline { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.result-card.pass .result-headline   { color: var(--green); }
.result-card.fail .result-headline   { color: var(--red); }
.result-card.unknown .result-headline{ color: var(--amber); }

.verdict.pass  { background: var(--grad-green); color: #fff; }
.verdict.fail  { background: var(--grad-red); color: #fff; }
.verdict.unknown { background: linear-gradient(135deg, var(--amber-bright), var(--amber)); color: #fff; }

.result-loading { text-align: center; padding: 48px 0; color: var(--muted); }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fave-btn {
  margin-left: auto; margin-right: 54px;   /* clear of the fixed theme toggle */
  background: none; border: none; font-size: 1.6rem;
  cursor: pointer; color: var(--amber); line-height: 1; padding: 4px 8px;
}

.ingredients { margin-top: 20px; }
.ingredients summary { padding: 12px 0; font-weight: 700; cursor: pointer; }

/* ---------- source / confidence strip ---------- */

.source-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.source-label {
  font-size: 0.76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.chip {
  font-size: 0.76rem; font-weight: 700; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted);
}
.chip.good { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.chip.bad  { color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.chip.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---------- triggered rules ---------- */

.section-title {
  margin: 26px 0 10px; font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.section-title .count {
  background: var(--surface-2); border-radius: var(--radius-pill);
  padding: 2px 8px; margin-left: 6px; color: var(--ink);
}

.fired-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 15px; margin-bottom: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-tile); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--spring);
}
.fired-row:active { transform: scale(0.985); }
.fired-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fired-label { font-weight: 700; color: var(--ink); }
.fired-preset { font-size: 0.8rem; color: var(--muted); }
.fired-more { font-size: 0.82rem; font-weight: 700; color: var(--green); white-space: nowrap; }

.allergen-alarm {
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  border: 2px solid var(--red);
}
.allergen-alarm b { color: var(--red); display: block; margin-bottom: 6px; }
.allergen-alarm ul { margin: 0 0 8px; padding-left: 20px; font-weight: 700; }

.unknown-block, .pass-block, .advice {
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius-tile);
  background: var(--surface-2); border: 1px solid var(--line);
}
.unknown-block { border-left: 4px solid var(--amber); }
.pass-block { border-left: 4px solid var(--green); }
.advice ul { margin: 8px 0 0; padding-left: 20px; }
.advice li { margin-bottom: 6px; }

/* ---------- household ---------- */

.household-row { display: flex; gap: 10px; flex-wrap: wrap; }
.household-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 16px; border-radius: var(--radius-tile); min-width: 84px;
  background: var(--surface); border: 1px solid var(--line);
}
.household-chip span { font-size: 0.8rem; font-weight: 700; }
.household-chip.pass span { color: var(--green); }
.household-chip.fail span { color: var(--red); }
.household-chip.unknown span { color: var(--amber); }

/* ---------- context grid ---------- */

.ctx-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ctx {
  padding: 12px 14px; border-radius: var(--radius-tile);
  background: var(--surface); border: 1px solid var(--line);
}
.ctx b { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ctx span { font-weight: 600; }

/* ---------- sheet ---------- */

.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 30, 0.45); opacity: 0; transition: opacity .22s ease; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto;
  background: var(--surface); border-radius: 26px 26px 0 0; padding: 26px 22px calc(30px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s var(--spring); box-shadow: var(--shadow-lg);
}
.sheet.open .sheet-card { transform: translateY(0); }
.sheet-close {
  position: absolute; top: 14px; right: 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px;
  font-size: 1rem; cursor: pointer; color: var(--muted);
}
.sheet-card h3 { margin: 0 0 4px; padding-right: 40px; }
.sheet-rule { font-size: 0.82rem; color: var(--muted); font-weight: 700; margin: 0 0 14px; }
.sheet-foot { font-size: 0.8rem; margin-top: 18px; }
.evidence {
  margin: 8px 0; padding: 12px 14px; border-left: 3px solid var(--green);
  background: var(--surface-2); border-radius: 0 12px 12px 0; font-style: italic;
}
.explain-list { list-style: none; margin: 0; padding: 0; }
.explain-list li {
  padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); position: relative;
}
.explain-list li:last-child { border-bottom: none; }
.explain-list li::before { position: absolute; left: 0; top: 9px; }
.explain-role::before     { content: "🔧"; }
.explain-what::before     { content: "🧪"; }
.explain-law::before      { content: "⚖️"; }
.explain-organic::before  { content: "🌱"; }
.explain-risk::before     { content: "⚠️"; }
.explain-exposure::before { content: "📊"; }
.explain-diet::before     { content: "🥩"; }
.explain-watch::before    { content: "👁️"; }

/* ---------- rules screen ---------- */

.profile-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.profile-tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.profile-tab.on { background: var(--grad-green); color: #fff; border-color: transparent; }

.allergen-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip-check {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem;
}
.chip-check input { display: none; }
.chip-check.on { background: color-mix(in srgb, var(--red) 12%, var(--surface)); border-color: var(--red); color: var(--red); font-weight: 800; }

.switch-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); cursor: pointer;
}
.switch-row input { width: 20px; height: 20px; accent-color: var(--green); }

textarea {
  width: 100%; padding: 14px; border-radius: var(--radius-tile);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 1rem; resize: vertical;
}

.danger-zone { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 10px; }
.btn-danger-outline {
  background: none; border: 1px solid var(--red); color: var(--red);
}
.btn-tiny { padding: 7px 14px; font-size: 0.85rem; }

/* ---------- history / lists ---------- */

.tally { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tally-pill {
  padding: 6px 13px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line);
}
.tally-pill.pass { color: var(--green); }
.tally-pill.fail { color: var(--red); }
.tally-pill.unknown { color: var(--amber); }

.history-row.pass { border-left: 4px solid var(--green); }
.history-row.fail { border-left: 4px solid var(--red); }
.history-row.unknown, .history-row.notfound { border-left: 4px solid var(--amber); }

.empty { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 2.6rem; margin: 0 0 8px; }

.list-items { display: flex; flex-direction: column; gap: 8px; }
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile);
}
.list-item input { width: 20px; height: 20px; accent-color: var(--green); }
.list-item span { display: flex; flex-direction: column; font-weight: 600; }
.list-item em { font-style: normal; font-size: 0.82rem; color: var(--muted); }
.list-item.done span { text-decoration: line-through; opacity: 0.5; }

/* ---------- settings / pack ---------- */

.pack-card { padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pack-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pack-figures div { display: flex; flex-direction: column; }
.pack-figures b { font-size: 1.2rem; }
.pack-figures span { font-size: 0.76rem; color: var(--muted); }
.pack-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.pack-bar i { display: block; height: 100%; background: var(--grad-green); transition: width .3s ease; }
.pack-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ok-note {
  padding: 14px 16px; border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--green); font-weight: 700;
}
.ok-note.small { padding: 9px 13px; font-size: 0.88rem; }
.attribution { font-size: 0.8rem; margin-top: 18px; }

/* ---------- alerts ---------- */

.alert-list { display: flex; flex-direction: column; gap: 12px; }
.alert-card {
  padding: 16px 18px; border-radius: var(--radius-tile);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.alert-card.allergy { border-left: 4px solid var(--amber); }
.alert-card.recall  { border-left: 4px solid var(--red); }
.alert-card header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.alert-kind { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.alert-date { font-size: 0.78rem; color: var(--muted); }
.alert-card h4 { margin: 0 0 8px; font-size: 1rem; line-height: 1.35; }
.alert-why { font-size: 0.85rem; font-weight: 700; color: var(--red); margin: 0 0 8px; }
.alert-risk { font-size: 0.88rem; color: var(--muted); margin: 0 0 8px; }
.alert-products { margin: 0 0 10px; padding-left: 20px; font-size: 0.86rem; }

/* ---------- label reader ---------- */

.label-for { font-weight: 700; }
.label-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.file-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.label-canvas {
  width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-tile);
  border: 1px solid var(--line); background: var(--surface-2);
}

/* ---------- torch ---------- */

.torch-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.35);
}
.torch-btn.on { background: var(--amber); }

.scanner-status.error { color: var(--red); }
.scanner-status.hint  { color: var(--amber); }

/* The toggle is fixed, so without this it sits on top of body copy the whole
   way down a long screen. It is only ever wanted at the top. */
.theme-toggle { transition: opacity .22s ease, transform .22s var(--spring); }
.theme-toggle.tucked { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ============================================================
   The sliding scale — v7
   A position, not a verdict. The whole reason this exists: a pass/fail
   tick put Skittles and a bag of potato-and-sunflower-oil crisps on the
   same screen with the same red mark, and a person looking at two
   identical reds learns nothing except to stop scanning.
   ============================================================ */

.product-line { margin: 4px 0 14px; }
.product-line .result-name { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.product-line .result-brand { font-size: .85rem; margin-top: 2px; }

.score-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* The gradient outline, per-tile accent var — house style. */
.score-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--band, var(--green)) 0%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.score-dial { position: relative; width: 104px; height: 104px; flex: 0 0 104px; }
.score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 10;
}
.score-arc {
  fill: none;
  stroke: var(--band, var(--green));
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray .7s var(--spring);
}
.score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--band, var(--muted));
  letter-spacing: -0.02em;
}

.score-text { flex: 1; min-width: 0; }
.score-band { font-size: 1.25rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.score-blurb { font-size: .88rem; color: var(--muted); margin-top: 5px; }

.score-card.unscorable { --band: var(--muted); }
.score-card.unscorable .score-num { font-size: 2.4rem; }

.score-cap {
  margin: 10px 2px 0;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------- the scale itself ---------- */

.scale-strip { margin: 14px 2px 6px; }
.scale-bar {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: visible;
}
.scale-seg { flex: 1; height: 10px; }
.scale-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.scale-seg:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.scale-pin {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--band, var(--green));
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);
  transition: left .7s var(--spring);
}
.scale-ticks {
  display: flex;
  margin-top: 7px;
}
.scale-ticks span {
  flex: 1;
  text-align: center;
  font-size: .62rem;
  line-height: 1.2;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.scale-ticks span.on { color: var(--ink); font-weight: 800; }

/* ---------- your own rules, demoted to a line ---------- */

.rules-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.rules-mark {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: .9rem;
  color: #fff;
  background: var(--muted);
}
.rules-line.pass    .rules-mark { background: var(--green); }
.rules-line.fail    .rules-mark { background: var(--red); }
.rules-line.unknown .rules-mark { background: var(--amber); }
.rules-text { flex: 1; font-size: .92rem; font-weight: 600; }
.rules-more { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ---------- the working ---------- */

.cost-list { display: flex; flex-direction: column; gap: 8px; }
.cost-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
button.cost-row:active { transform: scale(.985); }
.cost-row.credit { cursor: default; }
.cost-main { flex: 1; min-width: 0; }
.cost-label { display: block; font-weight: 700; font-size: .95rem; }
.cost-label em {
  font-style: normal;
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  margin-left: 5px;
}
.cost-why { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.cost-points {
  flex: 0 0 auto;
  font-weight: 900;
  font-size: .95rem;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.cost-row.credit .cost-points { color: var(--green); }

.sheet-code { font-size: .85rem; color: var(--muted); margin-top: -6px; }
.why-list { margin: 10px 0 0; padding-left: 18px; }
.why-list li { margin-bottom: 7px; font-size: .9rem; }

/* ---------- the whole shop ---------- */

.shop-card {
  margin: 16px 0 4px;
  padding: 16px 18px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.shop-head { display: flex; justify-content: space-between; align-items: baseline; }
.shop-title { font-weight: 800; font-size: .95rem; color: var(--ink); }
.shop-count { font-size: .78rem; color: var(--muted); }
.shop-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.shop-score {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--band, var(--green));
  line-height: 1;
  letter-spacing: -0.02em;
}
.shop-band { font-size: .95rem; font-weight: 700; color: var(--ink); }
.shop-bar { margin-bottom: 2px; }
.shop-drag { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }

.scan-actions { flex-wrap: wrap; gap: 10px; }

/* The camera switch, next to the torch. Only appears when the phone has more
   than one usable rear lens — which is exactly when it picks the wrong one. */
.cam-btn { right: 72px; }

/* The camera picker. Named rows, because "it opens the wrong camera" is only
   fixable if you can see which cameras there are. */
.cam-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.cam-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.cam-row.on { border-color: var(--green); background: var(--card); }
.cam-name { font-weight: 700; font-size: .95rem; }
.cam-tick { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.cam-row.on .cam-tick { color: var(--green); font-weight: 700; }

.zoom-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.zoom-btn {
  flex: 1; padding: 12px 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  font: inherit; font-weight: 800; color: var(--ink); cursor: pointer;
}
.zoom-btn.on { border-color: var(--green); color: var(--green); background: var(--card); }

.cam-diag { margin-top: 16px; }
.cam-diag summary { font-size: .8rem; color: var(--muted); cursor: pointer; }
.cam-diag p { font-size: .78rem; line-height: 1.6; margin-top: 8px; }

/* The boot watchdog's banner. Styled with no custom properties on purpose —
   if the stylesheet variables failed to load this still has to be readable. */
.boot-fail {
  position: fixed; inset: 0; z-index: 9999;
  background: #FFF8EC; color: #2A2038;
  padding: 28px 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.boot-fail b { font-size: 1.25rem; }
.boot-fail p { margin: 0; font-size: .95rem; max-width: 34ch; line-height: 1.5; }
.boot-fail button {
  padding: 14px 28px; font-size: 1rem; font-weight: 700;
  color: #fff; background: #2F8F4F; border: 0; border-radius: 999px; cursor: pointer;
}
.boot-fail-note { font-size: .8rem !important; opacity: .7; }

/* ============================================================
   v8 — the home screen, rebuilt.
   The old one had eight emoji, six equal tiles and four paragraphs of
   instructions, and every surface wore a different rainbow outline. Which
   meant colour carried no information at all — in an app whose entire idea
   is a red-to-green scale. So: colour is now reserved for the score, the
   icons are drawn, and the one thing you came to do is the biggest thing
   on the page.
   ============================================================ */

.sprite { display: none; }

.home-head { text-align: center; padding: 26px 8px 20px; }
.home-head h1 {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}
.home-head p { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }

/* ---------- the one thing you came to do ---------- */

.hero-scan {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 20px 22px; margin-bottom: 12px;
  border: 0; border-radius: 26px; cursor: pointer;
  text-align: left; font: inherit; color: #fff;
  background: linear-gradient(135deg, var(--green-bright) 0%, var(--green) 100%);
  box-shadow: 0 12px 28px rgba(47, 143, 79, 0.32);
  transition: transform .22s var(--spring), box-shadow .22s ease;
}
.hero-scan:active { transform: scale(.975); box-shadow: 0 6px 16px rgba(47, 143, 79, 0.3); }
.hero-scan-art {
  position: relative; flex: 0 0 62px; height: 62px;
  border-radius: 18px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.hero-scan-art svg { width: 34px; height: 34px; color: #fff; }
/* The line that says "this is a scanner" without a word of copy. */
.scanline {
  position: absolute; left: 10%; right: 10%; height: 2px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9);
  animation: sweep 2.6s var(--spring) infinite;
}
@keyframes sweep {
  0%, 100% { top: 22%; opacity: .35; }
  50%      { top: 74%; opacity: 1; }
}
.hero-scan-text b { display: block; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em; }
.hero-scan-text small { display: block; font-size: .82rem; opacity: .88; margin-top: 3px; }

/* ---------- the two ways round a barcode ---------- */

.quick-row { display: flex; gap: 10px; }
.quick {
  flex: 1; display: flex; align-items: center; gap: 11px;
  padding: 14px; border-radius: 18px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  font: inherit; color: var(--ink); text-align: left;
  transition: transform .18s var(--spring);
}
.quick:active { transform: scale(.97); }
.quick svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--green); }
.quick span { display: block; font-weight: 700; font-size: .88rem; line-height: 1.25; }
.quick small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-top: 1px; }

.manual { margin-top: 12px; }

/* ---------- today's shopping ---------- */

.shop-card, .recent-card {
  margin-top: 16px; padding: 18px;
  background: var(--card); border-radius: var(--radius-card);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
/* House gradient outline — but the accent is the band colour, so the glow
   round the card actually tells you something. */
.shop-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, var(--band, var(--green)) 0%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.shop-head { display: flex; justify-content: space-between; align-items: baseline; }
.shop-title { font-weight: 800; font-size: .95rem; color: var(--ink); }
.shop-count { font-size: .78rem; color: var(--muted); }
.shop-row { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 12px; }
.shop-score { font-size: 2.4rem; font-weight: 900; color: var(--band, var(--green)); line-height: 1; letter-spacing: -0.03em; }
.shop-band { font-size: 1rem; font-weight: 800; color: var(--ink); }
.shop-bar { margin-bottom: 2px; }
.shop-drag { margin: 12px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* The trolley as a row of coloured dots — the shape of a shop at a glance. */
.trolley { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.trolley i {
  width: 26px; height: 6px; border-radius: 3px; display: block;
  background: var(--dot);
}

/* ---------- what you scanned ---------- */

.recent-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.recent-head b { font-size: .95rem; font-weight: 800; }
.recent-head button {
  background: none; border: 0; font: inherit; font-size: .8rem;
  color: var(--muted); cursor: pointer; padding: 4px;
}
.recent-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 2px; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.recent-row:active { opacity: .6; }
.recent-pill {
  flex: 0 0 46px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 900; font-size: .95rem; color: #fff;
  background: var(--dot, var(--muted));
  font-variant-numeric: tabular-nums;
}
.recent-pill.none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.recent-main { flex: 1; min-width: 0; }
.recent-name {
  display: block; font-weight: 700; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-sub { display: block; font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* ---------- first run ---------- */

.first-run {
  margin-top: 16px; padding: 18px 20px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.first-run b { display: block; font-size: .95rem; margin-bottom: 10px; }
.first-run ul { margin: 0; padding-left: 18px; }
.first-run li { font-size: .87rem; line-height: 1.55; margin-bottom: 7px; color: var(--ink); }
.first-run li:last-child { margin-bottom: 0; }

/* ---------- everything else, kept quiet ---------- */

.home-nav {
  display: flex; gap: 6px; margin-top: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 8px 6px;
}
.mini {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px; border: 0; background: none; border-radius: 14px;
  font: inherit; color: var(--muted); cursor: pointer;
}
.mini svg { width: 21px; height: 21px; }
.mini span { font-size: .66rem; font-weight: 700; letter-spacing: .01em; }
.mini:active { background: var(--surface-2); color: var(--ink); }

.colophon {
  margin: 22px 4px 8px; font-size: .72rem; line-height: 1.6;
  color: var(--muted); text-align: center; opacity: .8;
}

/* ---------- v8 corrections ---------- */

/* Only the card's own heading is a block. A <b> inside a sentence is inline,
   and turning it into a block broke every list item into three stacked
   fragments with the punctuation stranded on its own line. */
.first-run b { display: inline; }
.first-run > b { display: block; font-size: .95rem; margin-bottom: 10px; }

/* The offline-pack prompt was the last thing on the page still wearing a
   rainbow. It is useful information, not a promotion — the shop is where the
   signal dies and this is what fixes it — so it stays, quietly. */
.pack-banner { margin-top: 16px; }
.pack-banner-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 14px; row-gap: 4px;
  padding: 15px 17px; border-radius: var(--radius-card);
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: none;
}
.pack-banner-inner b { grid-column: 1; width: auto; font-size: .9rem; }
.pack-banner-inner span { grid-column: 1; min-width: 0; font-size: .8rem; line-height: 1.45; }
.pack-banner-inner .btn { grid-column: 2; grid-row: 1 / span 2; }
.pack-banner-inner .btn {
  flex: 0 0 auto; background: var(--green); color: #fff; border: 0;
  padding: 10px 18px; font-size: .85rem; font-weight: 800;
}
.pack-banner-inner .btn::before { display: none; }

/* The version pill sat on top of whatever ended the page. Give the page a
   floor to stand on and let the pill be quieter than the content. */
main { padding-bottom: 72px; }
.version-pill { opacity: .55; font-size: 11px; padding: 5px 10px; }
.version-pill:active { opacity: 1; }

/* ---------- v8: one button language ----------
   Every button wore a warm rainbow outline, and the primary one was filled
   with a yellow-to-green gradient. On a screen whose job is to make a colour
   mean something — red is industrial, green is real food — a decorative
   rainbow on the furniture is actively in the way. Primary is now solid
   green, everything else is quiet, and colour is left to the score. */

.btn-outline::before,
.btn-primary::before { display: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--green-bright) 0%, var(--green) 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(47, 143, 79, 0.28);
}
.btn-primary:active { box-shadow: 0 3px 8px rgba(47, 143, 79, 0.26); }

.btn-outline {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}

.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.result-actions .btn { flex: 1 1 46%; justify-content: center; }

/* The "on the record" boxes stretched to the tallest one, so a long caveat
   left a half-empty box beside it. Let each stand at its own height. */
.ctx-grid { align-items: start; }
.ctx span { font-size: .82rem; line-height: 1.45; }
.ctx-note { display: block; margin-top: 6px; font-size: .74rem; opacity: .75; }

/* ---------- v8: the last of the decorative colour ---------- */

.fave-btn { color: var(--muted); }
.fave-btn svg { width: 24px; height: 24px; }
.fave-btn.on { color: var(--amber); }
.fave-btn.on svg { fill: var(--amber); }

/* The theme toggle and the "Your rules" pill were the two survivors still
   wearing a warm gradient ring, on screens where a ring means a score band. */
.theme-toggle::before { display: none; }
.theme-toggle { border: 1px solid var(--line); }
.rules-more {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 13px; background: var(--card);
}

/* The source chips wrapped one-per-line. They are a footnote about where the
   data came from — let them read as one quiet line. */
.source-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 18px; }
.source-label { font-size: .7rem; letter-spacing: .04em; }
.source-strip .chip { font-size: .72rem; padding: 5px 10px; }

/* When we read only part of what was photographed, say so. A right answer
   given without the working is not what this app is for. */
.panel-note {
  margin: 12px 2px 0; font-size: .8rem; line-height: 1.5;
  color: var(--muted); font-style: italic;
}

/* ============================================================
   v8.2 — where you are, and the next rung.
   The number the whole app is for. One product tells you about one
   product; a week of them tells you where your eating sits. The only
   useful thing to do with that is name the next five points.
   ============================================================ */

.week-card { margin-top: 16px; }
.week-open {
  display: block; width: 100%; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .18s var(--spring);
}
.week-open:active { transform: scale(.985); }
.week-open::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, var(--band, var(--green)) 0%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.week-top { display: flex; justify-content: space-between; align-items: baseline; }
.week-label { font-weight: 800; font-size: .95rem; }
.week-level { font-size: .76rem; font-weight: 700; color: var(--band, var(--green)); }

.week-row { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 10px; }
.week-score {
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: var(--band, var(--green)); letter-spacing: -0.03em;
}
.week-of { font-size: .9rem; font-weight: 700; color: var(--muted); }
.week-band { margin-left: 8px; font-size: .95rem; font-weight: 800; }

/* Progress inside the current level — it moves on every single point, so a
   week that gains two is visibly a week that gained two. */
.week-track {
  height: 8px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.week-track i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--band, var(--green));
  transition: width .8s var(--spring);
}
.week-next { margin-top: 11px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.week-next b { color: var(--ink); }

/* ---------- the progress screen ---------- */

.week-hero {
  padding: 22px 20px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.week-hero .week-score { font-size: 3.4rem; }
.week-band-big { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
.week-read { margin: 14px 0 0; font-size: .92rem; line-height: 1.55; }
.week-cover { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.week-note { font-size: .8rem; margin: -4px 0 10px; line-height: 1.5; }

.next-step {
  display: block; padding: 16px 18px; margin-bottom: 6px;
  border-radius: var(--radius-card);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--band, var(--green));
}
.next-step b { display: block; font-size: 1.05rem; margin-bottom: 5px; }
.next-step span { font-size: .85rem; color: var(--muted); line-height: 1.55; }

.cost-points.gain { color: var(--green); }

/* ---------- the ladder ---------- */

.ladder {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 10px;
}
.rung {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 12px;
  font-size: .85rem; color: var(--muted);
}
.rung-n {
  flex: 0 0 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 900; font-size: .8rem;
  background: var(--surface-2); color: var(--muted);
}
.rung-range { flex: 0 0 58px; font-variant-numeric: tabular-nums; }
/* The colours the rung actually spans. A level is ten points wide and a band
   is not, so naming one band per rung was simply untrue on half of them. */
.rung-bar { flex: 1; height: 6px; border-radius: 3px; opacity: .85; }
.rung-you {
  flex: 0 0 auto; margin-left: 10px;
  font-size: .68rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}
/* Rungs below you are passed, not achieved — a green tick on "Industrial"
   would be congratulating somebody for standing above the bottom. */
.rung.below { opacity: .45; }
.rung.on {
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.rung.on .rung-n { background: var(--ink); color: var(--surface); }

/* ---------- v9: the two axes the score can't carry ---------- */
.axes { display: flex; gap: 10px; margin-top: 14px; }
.axis {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--radius-tile);
  background: var(--card); border: 1px solid var(--line);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.axis:active { transform: scale(.98); }
.axis-k { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.axis-v { font-size: .95rem; font-weight: 800; }
.axis.real { border-color: var(--green); }
.axis.real .axis-v { color: var(--green); }
.axis.not-real .axis-v { color: var(--muted); }
.axis.spike { border-left: 4px solid var(--dot, var(--muted)); }
.axis.spike .axis-v { color: var(--dot, var(--ink)); }

/* ---------- v9.1: the red real-food stamp ---------- */
/* Real food with sugar added is still real food — the stamp holds, and the
   colour is what changes. Refusing honey the stamp would be a lie; giving it
   the same green as a bag of lentils would be a different one. */
.axis.real-sweet { border-color: var(--amber); }
.axis.real-sweet .axis-v { color: var(--amber); }
.axis-warn {
  display: block; font-size: .68rem; font-weight: 700;
  color: var(--amber); text-transform: lowercase; margin-top: 1px;
}

.sweet-note {
  margin-top: 10px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--amber); border-radius: var(--radius-tile);
}
.sweet-note summary {
  font-size: .86rem; font-weight: 700; color: var(--ink); cursor: pointer;
  list-style: none;
}
.sweet-note summary::-webkit-details-marker { display: none; }
.sweet-note summary::after { content: " ›"; color: var(--muted); }
.sweet-note[open] summary::after { content: " ⌄"; }
.sweet-note p { margin: 10px 0 0; font-size: .84rem; line-height: 1.55; }

.learn-link {
  display: block; width: 100%; margin-top: 12px; padding: 11px 14px;
  background: none; border: 1px dashed var(--line); border-radius: var(--radius-tile);
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--muted); text-align: left; cursor: pointer;
}
.learn-link:active { background: var(--surface-2); color: var(--ink); }
#sheet-body p b { color: var(--ink); }