/* 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; }

/* ---------- Install button (Add to Home Screen) ---------- */
.install-btn {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.4rem;
  flex-shrink: 0;
  border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--ink-soft);
  font-size: 0.82rem; font-weight: 700;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  cursor: pointer;
}
.install-btn[hidden] { display: none; }
.install-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.install-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.install-tip {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--bg-tint);
  border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem; line-height: 1.45;
  color: var(--ink-soft);
}
.install-tip[hidden] { display: none; }
.install-tip-close {
  margin-left: auto;
  flex-shrink: 0;
  background: none; border: none;
  font-size: 1.3rem; line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 0.2rem;
}

/* ---------- 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; }
.how-it-works-link {
  font-size: 0.85rem; color: var(--ink-muted);
  text-decoration: underline;
  align-self: flex-start;
}
.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; }
/* Shown only once a read runs long (see READING_BUSY_AFTER_MS) - the calm
   "servers are busy" reassurance for the slow/fallback path. Reuses the same
   non-alarming amber-tint language as .capacity-notice on purpose: a longer
   wait isn't the user's fault and isn't an error, so it must not read like
   one. Gentle fade-in so it doesn't jump in abruptly mid-wait. */
.reading-busy {
  margin-top: 0.9rem;
  background: var(--bg-tint); color: var(--tint-accent-text);
  border: var(--border-w-thin) solid var(--accent);
  border-radius: 0.8rem; padding: 0.7rem 0.9rem;
  font-size: 0.9rem; font-weight: 600; line-height: 1.4;
  animation: busyFadeIn 0.4s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .reading-busy { animation: none; }
}
@keyframes busyFadeIn { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }

/* ---------- 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);
}

/* ---------- Processing-level tag (tap for a one-line definition) ---------- */
/* Same tap-to-expand interaction as the ingredient rows below, just styled
   as a pill instead of a full-width row - kept as one consistent pattern
   for "there's a short explanation available" rather than introducing a
   modal for a single sentence of text. */
.processing-tag summary.tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  width: fit-content;
}
.processing-tag summary.tag::-webkit-details-marker { display: none; }
.processing-tag .info-icon {
  width: 1.1rem; height: 1.1rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.processing-tag-definition {
  margin-top: 0.4rem;
  font-size: 0.85rem; line-height: 1.45;
  color: var(--ink-muted);
}

.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 / ingredients sections (inline on the result page) ---------- */
#nutrientsSection, #ingredientsSection {
  display: flex; flex-direction: column; gap: 0.9rem;
}
#nutrientsSection[hidden], #ingredientsSection[hidden] { display: none; }
.section-heading {
  font-size: 1.1rem; font-weight: 700;
  padding-top: 0.9rem;
  border-top: var(--border-w-thin) solid var(--border-soft);
}
.screen-subtitle { font-size: 0.9rem; line-height: 1.45; color: var(--ink-muted); margin-top: 0.4rem; }
.nutrient-list { display: flex; flex-direction: column; }
.nutrient-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface);
  border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem;
  margin: 0.15rem 0;
  gap: 0.8rem;
}
.nutrient-row[hidden] { display: none; }
.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); }
.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; }

/* Calm, informational counterpart to .error-banner - amber/tint rather than
   the dark alarm styling. Used for "we're at capacity" and "this took too
   long, try again": states that aren't the user's fault and don't mean their
   photo was bad, so they shouldn't read as a hard error. */
.capacity-notice {
  background: var(--bg-tint); color: var(--tint-accent-text);
  border: var(--border-w-thin) solid var(--accent);
  border-radius: 0.8rem; padding: 0.8rem 0.95rem;
  font-size: 0.95rem; font-weight: 600; line-height: 1.4;
}
.capacity-notice: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); }

/* ---------- Sample labels (home screen) ---------- */
.sample-block { display: flex; flex-direction: column; gap: 0.6rem; }
.sample-heading {
  font-size: 0.85rem; font-weight: 700; color: var(--ink-muted);
}
.sample-row {
  display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.sample-card {
  flex: 0 0 auto; width: 8rem; display: flex; flex-direction: column; gap: 0.45rem;
  background: var(--bg-surface); border: var(--border-w-thin) solid var(--border-soft);
  border-radius: 0.8rem; padding: 0.5rem; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.sample-card:hover, .sample-card:focus-visible {
  border-color: var(--accent); outline: none;
}
.sample-thumb {
  width: 100%; height: 5.5rem; object-fit: cover; border-radius: 0.5rem; display: block;
  background: var(--bg-surface-alt);
}
.sample-name {
  font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--ink-soft);
}
/* "Sample" pill shown on a sample's verdict screen - see renderVerdict. */
.sample-badge {
  align-self: flex-start;
  background: var(--bg-tint); color: var(--tint-accent-text);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; border-radius: 1rem;
}

/* ---------- 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; }