/* Bricolage Grotesque (headings/display) - self-hosted (not Google Fonts CDN)
   to keep the same-origin/no-third-party-requests posture used everywhere
   else on this page (see Atkinson Hyperlegible above). Single variable-font
   file covering weights 500-700; JetBrains Mono from the original mockup
   was only used for the design tool's own gallery captions, not inside any
   actual screen, so it isn't included here. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Theme tokens ---------- */
:root {
  color-scheme: light dark;
  --font-scale: 1;

  --bg-page: #FBF6EC;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F3EBDA;
  --bg-tint: #F6E6C9;
  --ink: #1B2A4A;
  --ink-soft: #34405C;
  --ink-muted: #5B667F;
  --ink-faint: #7C8296;
  --border: #D8CDB6;
  --border-soft: #E3D9C4;

  --accent: #E8A33D;
  --accent-ink: #1B2A4A;
  --accent-deep: #B98420;

  --pill-bg: #1B2A4A;
  --pill-ink: #FBF6EC;
  --pill-icon: #E8A33D;

  --tint-accent-text: #7A5410;

  --allergen-bg: #1B2A4A;
  --allergen-border: transparent;
  --allergen-ink: #FBF6EC;
  --allergen-accent: #E8A33D;

  --border-w: 2px;
  --border-w-thin: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #121B2E;
    --bg-surface: #1B2A4A;
    --bg-surface-alt: #16213A;
    --bg-tint: rgba(232, 163, 61, 0.16);
    --ink: #FBF6EC;
    --ink-soft: #C3CDDF;
    --ink-muted: #9AA7BE;
    --ink-faint: #8C99B2;
    --border: #33435F;
    --border-soft: #26344E;

    --pill-bg: #E8A33D;
    --pill-ink: #1B2A4A;
    --pill-icon: #1B2A4A;

    --tint-accent-text: #E8A33D;

    --allergen-bg: #3A2A10;
    --allergen-border: #7A5410;
    --allergen-ink: #FBF6EC;
    --allergen-accent: #E8A33D;
  }
}

/* Colourblind-friendly / high-contrast mode: the redesign no longer encodes
   any meaning in a single hue alone (verdict text/icon carry the judgement,
   nutrient flags are always paired with an arrow glyph + word), so this
   isn't a red/green swap anymore - it widens borders, adds an explicit
   outline to every tinted/filled surface (never rely on a background fill
   alone), and pushes text/border contrast higher for all three common
   colour-vision-deficiency types plus general low vision. */
:root[data-colorblind="true"] {
  --border-w: 3px;
  --border-w-thin: 2px;
  --border: #8A7B54;
  --border-soft: #8A7B54;
  --ink-muted: #34405C;
  --ink-faint: #34405C;
  --accent-deep: #8A5A00;
  --tint-accent-text: #5C3D0C;
}
@media (prefers-color-scheme: dark) {
  :root[data-colorblind="true"] {
    --border: #7C90B8;
    --border-soft: #7C90B8;
    --ink-muted: #E4E9F2;
    --ink-faint: #E4E9F2;
    --tint-accent-text: #FFC875;
  }
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { font-size: calc(20px * var(--font-scale)); }
html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  line-height: 1.5;
}
:root[data-easyread="true"] body { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; }
button, input, select { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- App shell ---------- */
#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}
@media (min-width: 431px) {
  #app {
    min-height: calc(100vh - 2.5rem);
    margin: 1.25rem auto;
    border-radius: 20px;
    border: var(--border-w-thin) solid var(--border-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    overflow: hidden;
  }
}

.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.15rem 2rem;
  gap: 1.3rem;
}
.screen.is-active { display: flex; }

/* ---------- Header row (mark + wordmark) ---------- */
.brand-row { display: flex; align-items: center; gap: 0.65rem; }
.brand-row .mark { width: 2rem; height: 2rem; flex-shrink: 0; }
.brand-row .wordmark { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Nav header (back chevron + title) ---------- */
.nav-header { display: flex; align-items: center; gap: 0.6rem; }
.back-btn {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.8rem;
  border: var(--border-w) solid var(--border);
  background: transparent;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.back-btn svg { width: 1.2rem; height: 1.2rem; }
.nav-header h1 { font-size: 1.1rem; font-weight: 700; }

/* ---------- Text ---------- */
.intro-text { font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.tip-line {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.85rem; line-height: 1.45; color: var(--ink-muted);
}
.tip-line .glyph { color: var(--accent-deep); font-size: 0.9rem; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.4rem;
  border-radius: 1rem;
  font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: var(--border-w) solid transparent;
}
.btn:disabled { cursor: not-allowed; opacity: 0.6; }
.btn[hidden] { display: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); min-height: 3.9rem; }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); font-weight: 600; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 0.6rem; }
.btn-row .btn { flex: 1; }
.btn svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }

/* ---------- Switch (accessible checkbox-based toggle) ---------- */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.switch-row > span:first-child { font-size: 0.95rem; }
.switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch .track {
  width: 3.1rem; height: 1.75rem;
  border-radius: 999px;
  background: var(--border);
  padding: 0.15rem;
  display: flex; align-items: center;
  transition: background 0.15s ease;
}
.switch .thumb {
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  background: var(--bg-surface);
  transition: transform 0.15s ease;
}
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track .thumb { transform: translateX(1.35rem); background: var(--bg-page); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Settings section (Home) ---------- */
.settings-heading {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.settings-block { display: flex; flex-direction: column; gap: 1.1rem; }
.field-row { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row > span { font-size: 0.9rem; color: var(--ink-soft); }
.select-wrap {
  position: relative;
  display: flex; align-items: center;
}
.select-wrap select {
  appearance: none;
  width: 100%;
  height: 3.1rem;
  padding: 0 2.4rem 0 0.9rem;
  border-radius: 0.8rem;
  border: var(--border-w) solid var(--border);
  background: var(--bg-surface);
  color: var(--ink);
  font-size: 1rem; font-weight: 600;
}
.select-wrap::after {
  content: '▾';
  position: absolute; right: 0.9rem;
  color: var(--ink-faint);
  pointer-events: none;
}
.font-size-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.font-size-row > span { font-size: 0.9rem; color: var(--ink-soft); }
.font-size-buttons { display: flex; gap: 0.5rem; }
.font-size-buttons button {
  width: 3.1rem; height: 3.1rem;
  border-radius: 0.8rem;
  border: var(--border-w) solid var(--border);
  background: var(--bg-surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.font-size-buttons button:disabled { opacity: 0.5; cursor: not-allowed; }
.divider { height: var(--border-w-thin); background: var(--border-soft); border: none; margin: 0; }

/* ---------- Reading screen ---------- */
.photo-frame {
  height: 12rem;
  border-radius: 1.2rem;
  background: var(--bg-surface-alt);
  border: var(--border-w) solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.reading-heading { font-size: 1.4rem; font-weight: 700; }
.steps { display: flex; flex-direction: column; gap: 1.1rem; }
.step { display: flex; align-items: center; gap: 0.75rem; }
.step-icon {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-w-thin) solid var(--border);
}
.step-icon svg { width: 0.9rem; height: 0.9rem; display: none; stroke: var(--bg-page); }
.step-label { font-size: 1rem; color: var(--ink-faint); }
.step.is-done .step-icon { background: var(--ink); border-color: var(--ink); }
.step.is-done .step-icon svg { display: block; }
.step.is-done .step-label { color: var(--ink-soft); }
.step.is-current .step-icon {
  border: var(--border-w) solid var(--accent);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.step.is-current .step-label { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .step.is-current .step-icon { animation: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.reading-hint { font-size: 0.9rem; color: var(--ink-muted); line-height: 1.45; }

/* ---------- Verdict screen ---------- */
.product-name { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.verdict-pill {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 1rem; font-weight: 700;
}
.verdict-pill svg { width: 1rem; height: 1rem; stroke: var(--pill-icon); flex-shrink: 0; }
.verdict-reason { font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }

.tile-row { display: flex; gap: 0.6rem; }
.tile { flex: 1; background: var(--bg-surface); border: var(--border-w-thin) solid var(--border-soft); border-radius: 0.9rem; padding: 0.85rem; }
.tile.tile-wide { flex: 1.4; }
.tile-label { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.2rem; }
.tile-value { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.serving-note {
  font-size: 0.85rem; color: var(--tint-accent-text); background: var(--bg-tint);
  border: var(--border-w-thin) solid var(--border-soft);
  padding: 0.5rem 0.7rem; border-radius: 0.6rem; font-weight: 600;
}

.sugar-note {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--bg-surface-alt); border-radius: 0.9rem; padding: 0.7rem 0.9rem;
  font-size: 0.95rem; color: var(--ink-soft);
}
.sugar-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.allergen-banner {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--allergen-bg);
  border: var(--border-w-thin) solid var(--allergen-border);
  border-radius: 0.9rem; padding: 0.8rem 0.95rem;
}
.allergen-banner svg { width: 1.3rem; height: 1.3rem; stroke: var(--allergen-accent); flex-shrink: 0; }
.allergen-banner p { font-size: 1rem; line-height: 1.4; color: var(--allergen-ink); }
.allergen-banner strong { color: var(--allergen-accent); }

.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag {
  padding: 0.45rem 0.8rem; border-radius: 999px;
  border: var(--border-w-thin) solid var(--border);
  font-size: 0.85rem; color: var(--ink-soft);
}

.bottom-bar {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: var(--border-w-thin) solid var(--border-soft);
  display: flex; flex-direction: column; gap: 0.55rem;
}

/* ---------- Nutrients screen ---------- */
.screen-subtitle { font-size: 0.9rem; line-height: 1.45; color: var(--ink-muted); }
.nutrient-list { display: flex; flex-direction: column; }
.nutrient-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: var(--border-w-thin) solid var(--border-soft);
  gap: 0.8rem;
}
.nutrient-row[hidden] { display: none; }
.nutrient-row.is-tinted {
  background: var(--bg-tint);
  border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem;
  margin: 0.15rem 0;
}
.nutrient-name { font-size: 0.98rem; }
.nutrient-value { font-size: 0.98rem; color: var(--ink-soft); white-space: nowrap; }
.nutrient-value .dv { color: var(--ink-muted); }
.nutrient-value .flag { font-weight: 700; color: var(--tint-accent-text); margin-left: 0.35rem; }
.percent-note { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.4; }

/* ---------- Ingredients screen ---------- */
.ingredient-card {
  background: var(--bg-surface);
  border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 1rem; padding: 0.95rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.ingredient-card-head { display: flex; align-items: baseline; gap: 0.55rem; }
.ingredient-card-head .num { font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); }
.ingredient-card-head .name { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.ingredient-card-body { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.ingredient-card-note {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.65rem; border-radius: 0.6rem;
  background: var(--bg-surface-alt);
  font-size: 0.85rem; line-height: 1.45; color: var(--ink-muted);
}
.ingredient-card-note .glyph { color: var(--accent-deep); }

.ingredient-rows { display: flex; flex-direction: column; }
.ingredient-rows details {
  border-bottom: var(--border-w-thin) solid var(--border-soft);
}
.ingredient-rows summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0;
  cursor: pointer;
  font-size: 0.98rem;
}
.ingredient-rows summary::-webkit-details-marker { display: none; }
.ingredient-rows summary .chevron { color: var(--ink-faint); transition: transform 0.15s ease; }
.ingredient-rows details[open] summary .chevron { transform: rotate(90deg); }
.ingredient-rows .row-body { padding: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }

.disclaimer { font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted); font-style: italic; }

/* ---------- Partly-readable screen ---------- */
.partly-heading { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.partly-body { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.tip-card {
  background: var(--bg-surface-alt); border-radius: 0.9rem; padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.tip-card-heading {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tip-card-body { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Status / error ---------- */
.status-line { font-size: 0.95rem; color: var(--ink-muted); min-height: 1.4em; }
.error-banner {
  background: var(--allergen-bg); color: var(--allergen-ink);
  border: var(--border-w-thin) solid var(--allergen-border);
  border-radius: 0.8rem; padding: 0.8rem 0.95rem;
  font-size: 0.95rem; font-weight: 600; line-height: 1.4;
}
.error-banner:empty { display: none; }

.upload-actions { display: flex; flex-direction: column; gap: 0.7rem; }
#dropzone.dragover .btn-secondary { border-color: var(--accent); color: var(--accent-deep); }

/* ---------- Feedback (thumbs up/down review) ---------- */
.feedback { display: flex; flex-direction: column; gap: 0.7rem; }
/* Inside the verdict screen's bottom-bar it sits flanked by button rows
   (already spaced by the bar's own gap + top divider) - the standalone
   divider is only needed where the widget appears on its own, like the
   partly-readable screen. */
#feedbackWidgetPartly .feedback {
  padding-top: 0.9rem;
  border-top: var(--border-w-thin) solid var(--border-soft);
}
.feedback-question { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
.feedback-buttons { display: flex; gap: 0.6rem; }
.feedback-btn {
  width: 3.4rem; height: 3.4rem;
  border-radius: 0.9rem;
  border: var(--border-w) solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.feedback-btn svg { width: 1.3rem; height: 1.3rem; }
.feedback-btn[data-thumb="down"] svg { transform: scaleY(-1); }
.feedback-btn.is-selected { background: var(--ink); border-color: var(--ink); color: var(--bg-page); }
.feedback-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.feedback-comment { display: flex; flex-direction: column; gap: 0.6rem; }
.feedback-comment[hidden] { display: none; }
.feedback-textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  border: var(--border-w) solid var(--border);
  background: var(--bg-surface);
  color: var(--ink);
  font-size: 0.95rem;
  resize: vertical;
}
.feedback-thanks { font-size: 0.9rem; color: var(--ink-muted); font-style: italic; }