/* ==========================================================================
   gobble.earth — base design system (owned by the shell session)
   --------------------------------------------------------------------------
   Kitchen-table aesthetic: cream paper, glazed ceramic surfaces, a tomato
   gingham cloth, chunky rounded display type. One loud thing per screen
   (usually a plate); everything else stays calm.

   Sections:
     1. Tokens          6. Forms (input, slider, stepper)
     2. Reset & type    7. Feedback (meter, toast, dialog, empty state)
     3. Layout          8. Food card, picker, drag & drop
     4. Shell           9. Plate visual (.plate)
     5. Buttons, chips, cards, grades   10. Home page   11. Utilities
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  /* Palette */
  --paper:        #FBF6EC;  /* page background */
  --paper-deep:   #F2E8D5;  /* sunk areas, wells */
  --glaze:        #FFFDF8;  /* ceramic/card surface */
  --ink:          #24301F;  /* olive-black text */
  --ink-soft:     #55604C;  /* secondary text (AA on paper) */
  --line:         #E3D7C0;  /* hairlines and dividers only (decorative) */
  --line-strong:  #8F8159;  /* borders that identify a control: ≥3:1 on paper, glaze and paper-deep (G-5) */
  --leaf:         #2F7D4F;  /* primary */
  --leaf-deep:    #1F5A37;
  --leaf-tint:    #DDEFD9;
  --tomato:       #D9412B;  /* secondary accent / danger */
  --tomato-deep:  #A92E1D;
  --tomato-tint:  #FADBD3;
  --mustard:      #F2B631;  /* highlight */
  --mustard-tint: #FCEDC4;

  /* Grades A–E (always shown with the letter) */
  --grade-a: #23794A;  --grade-a-ink: #fff;
  --grade-b: #8DBA3E;  --grade-b-ink: var(--ink);
  --grade-c: #F2B631;  --grade-c-ink: var(--ink);
  --grade-d: #EE8A35;  --grade-d-ink: var(--ink);
  --grade-e: #C3352A;  --grade-e-ink: #fff;

  /* Type */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2.07rem, 1.65rem + 2.1vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.8rem + 3.5vw, 4.6rem);

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem; --s-9: 6rem;

  /* Radii: small things are pills, surfaces are soft, plates are round */
  --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px;

  /* Shadows: warm, layered, like ceramic on a table */
  --shadow-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(80,55,20,.10), 0 2px 6px rgba(80,55,20,.06);
  --shadow-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(80,55,20,.10), 0 8px 20px rgba(80,55,20,.10);
  --shadow-3: 0 4px 8px rgba(80,55,20,.12), 0 18px 40px rgba(80,55,20,.16);
  --shadow-press: 0 1px 1px rgba(80,55,20,.18);

  /* Focus is an OUTLINE (global :focus-visible rule) so component box-shadows can't hide it
     and it survives forced-colours mode. --focus is kept for older component rules. */
  --focus-ring: 3px solid var(--leaf);
  --focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--leaf);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 180ms;

  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4rem;

  color-scheme: light;
}

/* 2. Reset & type --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  /* faint paper speckle */
  background-image:
    radial-gradient(rgba(120, 90, 40, .06) 1px, transparent 1.2px),
    radial-gradient(rgba(120, 90, 40, .04) 1px, transparent 1.2px);
  background-size: 23px 23px, 37px 37px;
  background-position: 0 0, 11px 17px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li { max-width: 68ch; text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
a { color: var(--leaf-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--tomato-deep); }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
::selection { background: var(--mustard); color: var(--ink); }
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.45; }
.small { font-size: var(--step--1); }
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* 3. Layout --------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }
.grid-auto { display: grid; gap: var(--gap, var(--s-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 15rem)), 1fr)); }
main { flex: 1; }
.section { padding-block: var(--s-8); }
.page-head { padding-block: var(--s-7) var(--s-5); }
.page-head p { margin-top: var(--s-3); }

/* 4. Shell: header, nav, footer, skip link -------------------------------- */
.skip-link {
  position: absolute; left: var(--s-3); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
}
.skip-link:focus, .skip-link:hover { top: var(--s-3); color: var(--paper); }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform 220ms var(--ease-out);
}
/* Short screens: header tucks away on scroll-down (G-17) */
.site-header.is-tucked { transform: translateY(-100%); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--header-h);
}
.logo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
  margin-right: auto;
}
.logo:hover { color: var(--ink); }
.logo__mark {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glaze) 52%, #EDE3D0 54%, var(--glaze) 62%);
  box-shadow: var(--shadow-1);
  font-size: 1.15rem; line-height: 1;
}
.logo__dot { color: var(--leaf); }

.nav { display: none; }
.nav__list { list-style: none; padding: 0; display: flex; gap: var(--s-1); }
.nav__link {
  display: block; padding: .45rem .8rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__link:hover { background: var(--paper-deep); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-toggle { display: inline-flex; }
.header-download .label { display: none; }

/* Mobile: nav opens as a sheet under the header */
.nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  padding: var(--s-3) var(--gutter) var(--s-5);
}
.nav.is-open .nav__list { flex-direction: column; }
.nav.is-open .nav__link { font-size: var(--step-1); padding: .7rem 1rem; }

@media (min-width: 56rem) {
  .nav, .nav.is-open { display: block; position: static; padding: 0; box-shadow: none; border: 0; background: none; }
  .nav.is-open .nav__list { flex-direction: row; }
  .nav.is-open .nav__link { font-size: 1.02rem; padding: .45rem .8rem; }
  .btn.nav-toggle { display: none; }
  .header-download .label { display: inline; }
}

.site-footer {
  margin-top: var(--s-8);
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: baseline; justify-content: space-between; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; }
.site-footer a { color: var(--ink); }
.sound-toggle { gap: .4em; }
.sound-toggle[aria-pressed="true"] { --btn-bg: var(--leaf-tint); }

/* "ⓘ What's kg CO₂e?" disclosure — co2eInfo() in ui.js (G-7) */
.co2e-info { display: inline-block; font-size: var(--step--1); color: var(--ink-soft); max-width: 40ch; }
.co2e-info__toggle {
  display: inline-flex; align-items: center; gap: .4em; min-height: 2rem; padding: .1rem .5rem .1rem .2rem;
  list-style: none; cursor: pointer; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 500; color: var(--leaf-deep);
  user-select: none; -webkit-user-select: none;
}
.co2e-info__toggle::-webkit-details-marker { display: none; }
.co2e-info__toggle:hover { background: var(--paper-deep); }
.co2e-info__i {
  display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%;
  border: 1.5px solid currentColor; font: 700 .8em/1 var(--font-body); font-style: italic;
}
.co2e-info[open] .co2e-info__i { background: var(--leaf-deep); color: var(--glaze); border-color: var(--leaf-deep); }
.co2e-info__body {
  margin-top: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--leaf-tint); color: var(--ink); line-height: 1.45;
}

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--glaze); --btn-ink: var(--ink); --btn-edge: #D9CBB0;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 2.75rem; padding: .6rem 1.2rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  /* the "edge" is a solid bottom lip, like a glazed tile */
  box-shadow: 0 3px 0 var(--btn-edge), 0 5px 12px rgba(80,55,20,.12);
  transform: translateY(0);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { color: var(--btn-ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge), 0 8px 16px rgba(80,55,20,.14); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-edge), var(--shadow-press); }
.btn:focus-visible { outline-offset: 4px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary   { --btn-bg: var(--leaf);   --btn-ink: #fff;       --btn-edge: var(--leaf-deep); }
.btn-secondary { --btn-bg: var(--mustard); --btn-ink: var(--ink); --btn-edge: #C38B12; }
.btn-danger    { --btn-bg: var(--tomato-deep); --btn-ink: #fff;  --btn-edge: #6E1C10; } /* 6.8:1 (G-6) */
.btn-ghost {
  --btn-bg: transparent; box-shadow: inset 0 0 0 2px var(--line-strong);
}
.btn-ghost:hover { background: var(--paper-deep); box-shadow: inset 0 0 0 2px var(--ink-soft); transform: none; }
.btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--ink-soft); }
.btn-sm { min-height: 2.25rem; padding: .4rem .9rem; font-size: .92rem; }
.btn-lg { min-height: 3.5rem; padding: .9rem 1.8rem; font-size: var(--step-1); }
.btn-icon { width: 2.75rem; min-width: 2.75rem; padding: 0; font-size: 1.25rem; }
.btn-icon.btn-sm { width: 2.25rem; min-width: 2.25rem; font-size: 1.05rem; }
.btn .emoji { font-size: 1.15em; line-height: 1; }

/* Chips (toggle with aria-pressed="true") */
.chip {
  display: inline-flex; align-items: center; gap: .35em;
  min-height: 2.25rem; padding: .35rem .85rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--glaze); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur), box-shadow var(--dur);
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); background: var(--paper-deep); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip .emoji { font-size: 1.1em; line-height: 1; }
.chip-row {
  display: flex; gap: var(--s-2); overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.chip-row > * { scroll-snap-align: start; flex: none; }
@media (min-width: 48rem) { .chip-row { flex-wrap: wrap; overflow: visible; } }

/* Cards */
.card {
  background: var(--glaze);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-2);
}
.card--flat { box-shadow: none; background: var(--paper-deep); }
.card--outline { box-shadow: inset 0 0 0 2px var(--line); background: transparent; }
.card__title { font-size: var(--step-1); margin-bottom: var(--s-2); }

/* Grade badge: <span class="grade" data-grade="B">B</span> */
.grade {
  --g: var(--grade-c); --g-ink: var(--grade-c-ink);
  display: inline-grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--g); color: var(--g-ink);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
}
.grade--lg { font-size: 1.6rem; }
.grade--xl { font-size: 2.6rem; }
.grade[data-grade="A"] { --g: var(--grade-a); --g-ink: var(--grade-a-ink); }
.grade[data-grade="B"] { --g: var(--grade-b); --g-ink: var(--grade-b-ink); }
.grade[data-grade="C"] { --g: var(--grade-c); --g-ink: var(--grade-c-ink); }
.grade[data-grade="D"] { --g: var(--grade-d); --g-ink: var(--grade-d-ink); }
.grade[data-grade="E"] { --g: var(--grade-e); --g-ink: var(--grade-e-ink); }

/* Grade scale legend: A B C D E in a row */
.grade-scale { display: inline-flex; gap: 3px; }
.grade-scale .grade { border-radius: 6px; width: 1.7em; height: 1.7em; opacity: .35; }
.grade-scale .grade.is-current { opacity: 1; transform: scale(1.18); box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* 6. Forms ---------------------------------------------------------------- */
.field { display: grid; gap: var(--s-1); }
.field__label { font-family: var(--font-display); font-weight: 600; }
.field__hint { font-size: var(--step--1); color: var(--ink-soft); }
.input, .select {
  width: 100%; min-height: 2.9rem; padding: .6rem 1rem;
  border: 0; border-radius: var(--r-md);
  background: var(--glaze);
  box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 2px 4px rgba(80,55,20,.06);
  transition: box-shadow var(--dur);
}
.input:hover, .select:hover { box-shadow: inset 0 0 0 2px var(--ink-soft), inset 0 2px 4px rgba(80,55,20,.06); }
.input:focus-visible, .select:focus-visible { box-shadow: inset 0 0 0 2px var(--leaf), inset 0 2px 4px rgba(80,55,20,.06); outline-offset: 2px; }
.input::placeholder { color: var(--ink-soft); opacity: 1; } /* 6:1 (G-15) */
.select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px; background-repeat: no-repeat; }
.input--search {
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355604C' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 1rem 50%; background-size: 1.15rem;
}
.input--search::-webkit-search-cancel-button { cursor: pointer; }

/* Slider: <input type="range" class="slider"> ; set --fill (0–100%) from JS for the filled track */
.slider {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2.75rem; background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--leaf) var(--fill), var(--paper-deep) var(--fill));
  box-shadow: inset 0 1px 2px rgba(80,55,20,.18);
}
.slider::-moz-range-track { height: 10px; border-radius: var(--r-pill); background: var(--paper-deep); box-shadow: inset 0 1px 2px rgba(80,55,20,.18); }
.slider::-moz-range-progress { height: 10px; border-radius: var(--r-pill); background: var(--leaf); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%;
  background: var(--glaze); border: 3px solid var(--leaf); box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease-bounce);
}
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--glaze); border: 3px solid var(--leaf); box-shadow: var(--shadow-2); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { outline: var(--focus-ring); outline-offset: 3px; }
.slider:focus-visible::-moz-range-thumb { outline: var(--focus-ring); outline-offset: 3px; }

/* Stepper:
   <div class="stepper"><button class="stepper__btn" aria-label="Less">−</button>
   <output class="stepper__value">150 g</output><button class="stepper__btn" aria-label="More">+</button></div> */
.stepper {
  display: inline-flex; align-items: center;
  background: var(--paper-deep); border-radius: var(--r-pill); padding: 3px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong), inset 0 1px 2px rgba(80,55,20,.12);
}
.stepper__btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 50%; background: var(--glaze); box-shadow: var(--shadow-1);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1;
  transition: transform var(--dur) var(--ease-out);
}
.stepper__btn:active { transform: scale(.9); }
.stepper__btn:focus-visible { outline-offset: 2px; }
.stepper__btn[disabled] { opacity: .4; pointer-events: none; }
.stepper__value, .stepper input {
  min-width: 4.5rem; text-align: center; border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.stepper input { width: 4.5rem; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* 7. Feedback ------------------------------------------------------------- */
/* Meter: <div class="meter" style="--value: 42%" data-grade="C" role="meter" ...><span class="meter__fill"></span></div> */
.meter {
  --value: 0%;
  position: relative; height: 1rem; border-radius: var(--r-pill);
  background: var(--paper-deep);
  box-shadow: inset 0 1px 3px rgba(80,55,20,.2);
  overflow: hidden;
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--value);
  border-radius: inherit;
  background: var(--meter-color, var(--leaf));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.35);
  transition: width 420ms var(--ease-bounce), background-color 300ms;
}
.meter[data-grade="A"] { --meter-color: var(--grade-a); }
.meter[data-grade="B"] { --meter-color: var(--grade-b); }
.meter[data-grade="C"] { --meter-color: var(--grade-c); }
.meter[data-grade="D"] { --meter-color: var(--grade-d); }
.meter[data-grade="E"] { --meter-color: var(--grade-e); }
.meter--lg { height: 1.5rem; }
/* Optional marker line on a meter (e.g. a target): <span class="meter__mark" style="--at: 60%"></span> */
.meter__mark { position: absolute; top: -3px; bottom: -3px; left: var(--at); width: 3px; background: var(--ink); border-radius: 2px; }

/* Horizontal bar (for compare charts): <div class="bar" style="--value:60%"><span class="bar__fill"></span></div> */
.bar { --value: 0%; height: 1.75rem; border-radius: var(--r-sm); background: var(--paper-deep); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: var(--value); background: var(--bar-color, var(--leaf)); border-radius: inherit; transition: width 420ms var(--ease-out); }

/* Toasts: bottom-centre on phones (above the plate dock), bottom-left on desktop
   so they don't cover centred content (G-13). */
.toast-region {
  position: fixed; z-index: 90; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; gap: var(--s-2); justify-items: center;
  width: min(100% - 2rem, 28rem); pointer-events: none;
}
@media (min-width: 56rem) {
  .toast-region { left: var(--s-5); transform: none; justify-items: start; }
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: .75rem 1.1rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-3);
  font-family: var(--font-display); font-weight: 500;
  animation: toast-in 320ms var(--ease-bounce);
}
.toast--success { background: var(--leaf-deep); }
.toast--error { background: var(--tomato-deep); }
.toast.is-leaving { animation: toast-out 200ms ease-in forwards; }
.toast :focus-visible { outline-color: var(--mustard); }
.toast__action {
  display: inline-flex; align-items: center; gap: .4em;
  margin-left: var(--s-2); min-height: 2.25rem; padding: .25rem .8rem; border: 0; border-radius: var(--r-pill);
  background: var(--mustard); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.toast__action:hover { background: var(--mustard-tint); }
.toast__kbd { font: 600 .75em/1 var(--font-body); padding: .15em .35em; border-radius: 5px; background: rgba(36,48,31,.12); }
@media (hover: none) { .toast__kbd { display: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Dialog: native <dialog class="modal"> */
.modal {
  margin: auto; /* the * { margin: 0 } reset kills the UA centring (G-2) */
  width: min(100% - 2rem, 30rem); padding: 0; border: 0;
  border-radius: var(--r-lg); background: var(--glaze); color: var(--ink);
  box-shadow: var(--shadow-3);
}
.modal::backdrop { background: rgba(36, 48, 31, .45); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in 260ms var(--ease-bounce); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.modal__body { padding: var(--s-5) var(--s-5) var(--s-4); display: grid; gap: var(--s-3); }
.modal__title { font-size: var(--step-2); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding: var(--s-3) var(--s-5) var(--s-5); }
/* Phones: a bottom sheet, thumbs-reach */
@media (max-width: 36rem) {
  .modal { margin: auto auto max(1rem, env(safe-area-inset-bottom)); width: calc(100% - 1rem); max-width: none; }
  .modal__actions > .btn { flex: 1; }
}

/* Empty state */
.empty-state {
  display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(160,130,80,.05) 12px 24px);
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink-soft);
}
.empty-state__emoji { font-size: 3rem; line-height: 1; filter: grayscale(.2); }
.empty-state__title { color: var(--ink); font-size: var(--step-1); }
.empty-state p { max-width: 36ch; }

/* 8. Food card, picker, drag & drop -------------------------------------- */
.food-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
  background: var(--glaze); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  cursor: grab; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.food-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.food-card:focus-visible { outline-offset: 2px; box-shadow: var(--shadow-2); }
.food-card:active { transform: scale(.985); }
.food-card.is-picked { animation: card-pick 380ms var(--ease-bounce); }
.food-card.is-picked .food-card__emoji { animation: card-pick-emoji 420ms var(--ease-bounce); }
@keyframes card-pick { 40% { transform: scale(.97); } 70% { transform: scale(1.02); } }
@keyframes card-pick-emoji { 35% { transform: translateY(-6px) rotate(-8deg) scale(1.12); } }
.food-card__emoji {
  grid-row: span 2;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  font-size: 2rem; line-height: 1;
  background: var(--paper); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}
.food-card__name { font-family: var(--font-display); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.food-card__meta { grid-column: 2; display: flex; align-items: center; gap: var(--s-2); font-size: var(--step--1); color: var(--ink-soft); flex-wrap: wrap; }
.food-card__kg { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.food-card__add { grid-row: 1 / span 2; grid-column: 3; }
.food-card.is-drag-source { opacity: .45; transform: scale(.97); }

.picker { display: grid; gap: var(--s-3); min-width: 0; }
.picker__status { font-size: var(--step--1); color: var(--ink-soft); min-height: 1.3em; }
.picker__grid {
  list-style: none; padding: 4px; margin: -4px;
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  max-height: var(--picker-max-h, 32rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.picker__grid > li { max-width: none; }

/* Drag & drop */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  font-size: 3rem; line-height: 1;
  background: var(--glaze); border-radius: 50%;
  box-shadow: var(--shadow-3);
  will-change: transform;
}
.drag-ghost.is-over { background: var(--leaf-tint); box-shadow: 0 0 0 4px var(--leaf), 0 24px 40px rgba(80,55,20,.22); }
/* held aloft: deeper shadow while lifted */
body.is-dragging .drag-ghost:not(.is-returning):not(.is-dropped) { box-shadow: 0 10px 14px rgba(80,55,20,.16), 0 28px 48px rgba(80,55,20,.22); }
.drag-ghost.is-returning { transition: transform 260ms var(--ease-out), opacity 260ms; opacity: 0; }
.drag-ghost.is-dropped { transition: transform 200ms ease-in, opacity 200ms; opacity: 0; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drop-zone { transition: box-shadow var(--dur), background-color var(--dur), transform var(--dur) var(--ease-out); }
body.is-dragging .drop-zone { box-shadow: 0 0 0 3px var(--mustard), 0 0 0 9px var(--mustard-tint); }
.drop-zone.is-drag-over { box-shadow: 0 0 0 4px var(--leaf), 0 0 0 12px var(--leaf-tint) !important; transform: scale(1.015); }

/* 9. Plate visual --------------------------------------------------------- */
/* A ceramic plate. Size with --plate-size. Put food inside .plate__well. */
.plate {
  --plate-size: min(80vw, 22rem);
  position: relative; width: var(--plate-size); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 8%, transparent 30%),
    radial-gradient(circle at 50% 50%, var(--glaze) 0 61%, #EFE6D6 62.5%, #FBF7EE 66%, #FFFFFF 78%, #EADFCB 99%, #DCCDB2 100%);
  box-shadow:
    0 2px 0 #E2D4BA,
    0 12px 22px rgba(80,55,20,.16),
    0 30px 50px rgba(80,55,20,.12);
}
.plate__well {
  position: absolute; inset: 19%; border-radius: 50%;
  box-shadow: inset 0 3px 8px rgba(80,55,20,.10), inset 0 -2px 4px rgba(255,255,255,.8);
}
.plate.is-bounce { animation: plate-bounce 520ms var(--ease-bounce); }
@keyframes plate-bounce {
  0% { transform: scale(1); } 30% { transform: scale(.965, .955); } 60% { transform: scale(1.02); } 100% { transform: scale(1); }
}
.plate-food { position: absolute; font-size: calc(var(--plate-size) * .14); line-height: 1; translate: -50% -50%; filter: drop-shadow(0 3px 2px rgba(80,55,20,.25)); }
.plate-food.is-landing { animation: food-land 480ms var(--ease-bounce); }
@keyframes food-land { from { transform: translateY(-40px) scale(1.4); opacity: 0; } }

/* Gingham tablecloth band (decorative) */
.gingham {
  background-color: #FFF8EE;
  background-image:
    linear-gradient(90deg, rgba(217,65,43,.38) 50%, transparent 50%),
    linear-gradient(rgba(217,65,43,.38) 50%, transparent 50%);
  background-size: 34px 34px;
}

/* 10. Home page ----------------------------------------------------------- */
.home-hero { position: relative; overflow: hidden; padding-block: var(--s-7) 0; }
.home-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.home-hero__copy { position: relative; z-index: 1; }
.home-hero h1 { max-width: 13ch; }
.home-hero h1 .wordmark-o { display: inline-block; }
.home-hero .lede { margin-top: var(--s-4); max-width: 34ch; }
.home-hero__ctas { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.home-hero__stage { position: relative; display: grid; place-items: center; padding-block: var(--s-4) var(--s-7); }
.home-hero__cloth {
  position: absolute; left: 50%; bottom: 0; width: 160vw; height: 42%;
  transform: translateX(-50%) perspective(600px) rotateX(48deg); transform-origin: bottom;
  border-radius: 40% 40% 0 0 / 30% 30% 0 0;
  opacity: .9;
}
.home-hero .plate { --plate-size: min(78vw, 26rem); }
.home-hero .plate { animation: plate-arrive 900ms var(--ease-bounce) both; }
.home-hero .plate-food { animation: food-land 600ms var(--ease-bounce) both; animation-delay: calc(350ms + var(--i, 0) * 110ms); }
@keyframes plate-arrive { from { transform: translateY(30px) rotate(-12deg) scale(.9); opacity: 0; } }

/* Pokeable hero (H-1 / delight #10): foods wobble on hover or tap */
/* .is-ready (set by hero.js after the intro) stops the intro animations replaying. */
.home-hero .plate-food { cursor: pointer; touch-action: manipulation; }
.home-hero .plate.is-ready, .home-hero .plate.is-ready .plate-food { animation: none; }
.home-hero .plate.is-ready.is-bounce { animation: plate-bounce 520ms var(--ease-bounce); }
.home-hero .plate.is-ready .plate-food:hover { animation: food-wobble 520ms var(--ease-out); }
.home-hero .plate.is-ready .plate-food.is-landing { animation: food-land 520ms var(--ease-bounce) both; }
.home-hero .plate.is-ready .plate-food.is-poked { animation: food-poke 560ms var(--ease-bounce); }
@keyframes food-wobble { 20% { rotate: -12deg; } 45% { rotate: 9deg; } 70% { rotate: -5deg; } 100% { rotate: 0deg; } }
@keyframes food-poke { 25% { transform: translateY(-14px) scale(1.15, .9); rotate: -10deg; } 55% { transform: translateY(0) scale(.92, 1.08); rotate: 6deg; } 100% { transform: none; rotate: 0deg; } }

.hero-try {
  position: relative; z-index: 2; margin-top: var(--s-4);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
}
.hero-try__food {
  display: grid; place-items: center; width: 4rem; height: 4rem; flex: none;
  font-size: 2.6rem; line-height: 1; border-radius: 50%;
  background: var(--glaze); box-shadow: var(--shadow-2), inset 0 0 0 2px var(--mustard);
  cursor: grab; touch-action: none;
  animation: try-bob 2.6s ease-in-out infinite;
}
.hero-try__food.is-drag-source { opacity: .35; animation: none; }
.hero-try__food[hidden] { display: none; }
@keyframes try-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.hero-try__label { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); background: var(--glaze); padding: .15rem .65rem; border-radius: var(--r-pill); box-shadow: var(--shadow-1); }
.hero-tag {
  position: absolute; z-index: 3; translate: -50% -100%;
  display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
  padding: .3rem .4rem .3rem .75rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow-3);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  animation: tag-pop 420ms var(--ease-bounce);
  pointer-events: none;
}
.hero-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.hero-tag .grade { font-size: .8rem; }
@keyframes tag-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .hero-try__food { animation: none; }
  .home-hero .plate.is-ready .plate-food:hover { animation: none; }
}
@media (min-width: 56rem) {
  .home-hero { padding-block: var(--s-8) 0; }
  .home-hero__grid { grid-template-columns: 1.05fr 1fr; }
  .home-hero__stage { padding-block: var(--s-5) var(--s-8); }
  .home-hero__cloth { width: 120%; left: 50%; }
}

/* Versus stat */
.versus { padding-block: var(--s-8); }
.versus__head { max-width: 40rem; }
.versus__head p { margin-top: var(--s-3); }
.versus__unit { font-size: var(--step--1); }
/* Bars wait off-screen, then fill in sequence (H-4). */
.versus__bar .meter__fill { transition: width 900ms var(--ease-bounce); }
.versus__bar[data-slot="b-bar"] .meter__fill { transition: width 700ms var(--ease-out); }
.versus__ratio { display: inline-block; min-width: 2.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.versus__board {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
.versus__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--glaze); box-shadow: var(--shadow-2);
}
.versus__emoji { grid-row: span 3; font-size: clamp(3rem, 12vw, 4.5rem); line-height: 1; }
.versus__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.versus__kg { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--s-3); }
.versus__bar { height: 1rem; }
.versus__verdict {
  margin-top: var(--s-5);
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.2;
  max-width: 30ch;
}
.versus__verdict strong { background: var(--mustard-tint); box-shadow: 0 -0.45em 0 var(--mustard) inset; padding-inline: .1em; }
.versus__fineprint { margin-top: var(--s-3); }
@media (min-width: 48rem) { .versus__board { grid-template-columns: 1fr 1fr; } }

/* How it works (a real sequence, so it's numbered) */
.steps { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-4); counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative; padding: var(--s-5); padding-top: var(--s-6);
  border-radius: var(--r-lg); background: var(--paper-deep);
  max-width: none;
}
.steps > li::before {
  content: counter(step);
  position: absolute; top: calc(-1 * var(--s-4)); left: var(--s-5);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.steps__emoji { font-size: 2.4rem; line-height: 1; }
.steps h3 { margin-top: var(--s-3); }
.steps p { margin-top: var(--s-2); color: var(--ink-soft); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.home-cta-band { margin-top: var(--s-8); margin-inline: calc(50% - 50vw); padding: var(--s-8) var(--s-5); text-align: center; position: relative; overflow: hidden; } /* full-bleed tablecloth strip: a page band, not a card */
html { overflow-x: clip; } /* full-bleed bands use 100vw; never let a scrollbar width cause sideways scroll */
.home-cta-band__inner { position: relative; display: grid; justify-items: center; gap: var(--s-4); background: var(--glaze); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-3); max-width: 36rem; margin-inline: auto; }

/* Skeleton placeholder (pages not built yet) */
.placeholder { padding: var(--s-7) var(--s-5); text-align: center; color: var(--ink-soft); }

/* 11. Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* Reduced motion: see css/motion.css (loaded last on every page) — movement
   off, fades and highlight glows kept. */

/* ── Selection policy ───────────────────────────────────────────────
   gobble behaves like an app: UI chrome (buttons, chips, cards, plate,
   scales, labels, nav) is not text-selectable, so taps, drags and
   double-clicks never leave stray highlights. Text people may want to
   copy stays selectable: form fields, long-form prose (About/Sources
   via .prose), tables, and anything marked .selectable. */
body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable="true"],
.selectable, .selectable *, .prose, .prose *, table, table * {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
/* Images and emoji shouldn't be dragged by the browser's native DnD */
img, svg { -webkit-user-drag: none; }

/* Refinements (G-SEL-1 … 3). Shareable sentences and figures are copyable;
   controls never are, even inside selectable scopes like .prose and tables. */
.compare__sentence, #target-sentence, .target-sentence, .maths__line,
.hints, .hints *, .contrib, .contrib *, .equivs li, .equivs li *,
.empty-state p:not(.empty-state__title), .adh-sentence, .versus__verdict, .versus__verdict *,
.co2e-info__body, .hero-tag {
  -webkit-user-select: text; user-select: text;
}
/* :is() lifts every selector to class specificity, so this beats .prose * / .hints * */
:is(button, .btn, .chip, summary, label, .nav__link, .grade, .meter, .stepper,
    .sort, .drag-ghost, .food-card, .food-card *, button *, .btn *, summary *) {
  -webkit-user-select: none; user-select: none;
}
/* Inputs inside a selectable sentence stay editable */
.adh-sentence input { -webkit-user-select: text; user-select: text; }

/* Forced colours / Windows high contrast (G-16): backgrounds and shadows
   vanish there, so give state-bearing things real borders. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .grade { border: 2px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .meter { border: 1px solid CanvasText; }
  .meter__fill { background: Highlight; forced-color-adjust: none; }
  .bar { border: 1px solid CanvasText; }
  .bar__fill { background: Highlight; forced-color-adjust: none; }
  .drop-zone.is-drag-over, body.is-dragging .drop-zone { outline: 3px dashed Highlight; }
  .chip, .btn, .stepper, .food-card, .card, .toast, .modal { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 1px; }
  .nav__link[aria-current="page"] { border: 2px solid Highlight; }
  .plate { border: 2px solid CanvasText; }
  .drag-ghost { border: 2px solid Highlight; }
}