/* DupeEats · main.css (every page, no build): design C "Retail" (decision 018).
   A11: <= 14 KB gzip; vote UI in vote.css, components in their own files. */

/* Fallback faces (A11 §4.6): Arial scaled to Public Sans (size-adjust 102.98% / 98.99%,
   metrics from fontTools) so the font swap moves no line. */
@font-face {
  font-family: "DE Public Sans";
  src: url("../fonts/public-sans-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0309, U+0323, U+2013-2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "DE Public Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 400;
  size-adjust: 102.98%;
  ascent-override: 92.25%;
  descent-override: 21.85%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DE Public Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 98.99%;
  ascent-override: 95.97%;
  descent-override: 22.73%;
  line-gap-override: 0%;
}
/* Android: Roboto, scaled the same way (A11 review). */
@font-face {
  font-family: "DE Public Sans Fallback R";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400;
  size-adjust: 104.16%;
  ascent-override: 91.2%;
  descent-override: 21.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DE Public Sans Fallback R";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700;
  size-adjust: 105.15%;
  ascent-override: 90.35%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

:root {
  --bg:          oklch(95.6% 0.005 110);
  --surface:     oklch(99.5% 0.002 110);
  --sunken:      oklch(93.6% 0.006 110);
  --line:        oklch(89.5% 0.006 105);
  --line-strong: oklch(80% 0.008 105);
  --control:     oklch(60% 0.008 105); /* A11: borders that alone draw a control, >= 3:1 (WCAG 1.4.11). */
  --ink:         oklch(20.5% 0.012 105);
  --ink-2:       oklch(40% 0.012 105);
  --muted:       oklch(49% 0.01 105);
  --header:      oklch(20% 0.01 105);
  --header-2:    oklch(28% 0.01 105);

  --lime:        oklch(90.5% 0.2 125);
  --lime-hover:  oklch(86.5% 0.2 125);
  --lime-text:   oklch(44% 0.13 128);
  --cobalt:      oklch(50% 0.2 266);
  --cobalt-bar:  oklch(63% 0.19 268);
  --cobalt-soft: oklch(95% 0.03 266);

  --font: "DE Public Sans", "DE Public Sans Fallback", "DE Public Sans Fallback R", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.875rem;
  --fs-hero: clamp(2.125rem, 1.2rem + 2.4vw, 3.375rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-sm: 8px;
  --r-md: 12px;

  --gutter: 24px;
  --band-pad: var(--s-8);
  --block-gap: var(--s-7);

  --shadow-hover: 0 1px 2px oklch(20% 0.01 105 / 0.06), 0 10px 28px -12px oklch(20% 0.01 105 / 0.18);
  --shadow-pop: 0 2px 4px oklch(20% 0.01 105 / 0.06), 0 12px 32px -8px oklch(20% 0.01 105 / 0.22);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--cobalt);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --z-sticky: 20;
  --z-pop: 30;
  --z-skip: 40;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
input { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: var(--z-skip);
  background: var(--lime); color: var(--ink); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); font-weight: 700;
}
.skip-link:focus { top: var(--s-3); }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; stroke-width: 2.5; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 700; line-height: 1;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--lime-hover); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-secondary:hover { background: var(--sunken); }
.btn-secondary:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--ring); }
.btn-dark { background: var(--ink); color: var(--surface); }
.btn-dark:hover { background: var(--header-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.see-all, .text-link {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--cobalt); font-weight: 600; font-size: var(--fs-sm);
}
.see-all { min-height: 44px; flex: none; }
.see-all:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.link-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.link-btn-cobalt { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn-cobalt:hover { text-decoration-thickness: 2px; }

.tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--s-2);
  border-radius: 4px; background: var(--sunken); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 700;
}
.meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); }
.header-bar { background: var(--header); color: var(--surface); }
.header-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand search actions";
  align-items: center; gap: var(--s-6);
  min-height: 72px;
}
.header-row .menu-btn { display: none; grid-area: menu; }
.brand { grid-area: brand; display: flex; align-items: center; min-height: 44px; }
.brand img { height: 32px; width: auto; }

.search { grid-area: search; position: relative; display: flex; max-width: 720px; width: 100%; justify-self: center; }
.search input {
  width: 100%; min-height: 52px; padding: 0 64px 0 var(--s-4);
  border: 2px solid transparent; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--fs-base);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--lime); }
.search-btn {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 52px;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  background: var(--lime); color: var(--ink);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.search-btn:hover { background: var(--lime-hover); }
.search-btn:active { transform: scale(0.95); }
/* A11: component rules that set box-shadow would hide the focus ring; keep both */
.gear-link:focus-visible, .gear-page .gear-link:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong), var(--ring); }
.sub-more { margin-top: var(--s-4); }

.header-actions { grid-area: actions; display: flex; gap: var(--s-2); }
.header-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background-color 160ms ease;
}
.header-link:hover { background: var(--header-2); }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: inherit;
}
.icon-btn:hover { background: var(--header-2); }

.cat-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.cat-nav-row { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.cat-nav-list { display: flex; align-items: center; gap: var(--s-1); }
.cat-nav-list a {
  position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s-3);
  font-weight: 600; color: var(--ink); white-space: nowrap;
}
.cat-nav-list li:first-child a { padding-left: 0; }
.cat-nav-list a::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0; height: 3px;
  background: var(--ink); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transition: transform 200ms var(--ease-out);
}
.cat-nav-list li:first-child a::after { left: 0; }
.cat-nav-list a:hover::after { transform: scaleX(1); }

/* region selector (one control, drives rankings + footer) */
.region { position: relative; }
.region-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-size: var(--fs-sm); color: var(--ink-2);
  transition: border-color 160ms ease;
}
.region-btn strong { color: var(--ink); }
.region-btn:hover { border-color: var(--line-strong); }
.region-btn .icon { transition: transform 200ms var(--ease-out); }
.region-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.region-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-pop);
  min-width: 200px; padding: var(--s-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  animation: pop 160ms var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.region-menu button {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px;
  padding: 0 var(--s-3); border: 0; border-radius: 6px; background: none;
  font-size: var(--fs-sm); font-weight: 600; text-align: left;
}
.region-menu button:hover { background: var(--sunken); }
.region-menu button .icon { visibility: hidden; color: var(--ink); }
.region-menu button[aria-pressed="true"] .icon { visibility: visible; }

.mobile-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.mobile-nav a {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 52px; padding: 0 var(--gutter); border-top: 1px solid var(--line);
  font-weight: 600;
}
.mobile-nav .icon { color: var(--muted); }

/* ---------- bands ---------- */
.band { padding-block: var(--band-pad); }
.band-white { background: var(--surface); }
.band-top { padding-top: var(--s-6); }
.block { margin-top: var(--block-gap); }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.section-head h2 { font-size: var(--fs-lg); font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  display: grid; align-items: center; gap: var(--s-7);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.04; letter-spacing: -0.028em; text-wrap: initial; }
.hero h1 span { display: block; }
.hero-sub { color: var(--ink-2); font-size: 1.0625rem; max-width: 42ch; }
.hero .btn-row { margin-top: var(--s-1); }
.hero-week {
  display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-3); min-height: 44px;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.hero-week strong { color: var(--ink); }
.hero-week-label {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2);
  border-radius: 4px; background: var(--ink); color: var(--lime);
  font-size: var(--fs-xs); font-weight: 700;
}
.hero-week .icon { color: var(--cobalt); transition: transform 200ms var(--ease-out); }
.hero-week:hover span:not(.hero-week-label) { text-decoration: underline; text-underline-offset: 3px; }
.hero-week:hover .icon { transform: translateX(2px); }
.hero-media {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: var(--r-md); background: var(--header);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 55%; }

/* ---------- browse by food: photo + label, no box ---------- */
.food-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.food-tile { display: flex; flex-direction: column; gap: var(--s-3); border-radius: var(--r-sm); }
.food-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--sunken); }
.food-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.food-name { font-weight: 700; text-align: center; }

/* ---------- debates ---------- */
.debate-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.debate--feature { grid-row: span 2; }
.debate {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
}
.debate-pics { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--surface); }
.pick { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--sunken); cursor: pointer; }
.pick img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms var(--ease-out), opacity 200ms ease;
}
.is-voted .pick { cursor: default; }
.is-voted .pick:not(.is-chosen) img { opacity: 0.55; }
.vs {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--surface);
}
.debate-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); flex: 1; }
.debate-body h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.vote-area { margin-top: auto; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.debate-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 24px; }

/* feature debate: bigger photos, bigger question */
.debate--feature .debate-pics { flex: 1; min-height: 300px; }
.debate--feature .pick { aspect-ratio: auto; }
.debate--feature .vs { width: 44px; height: 44px; font-size: var(--fs-sm); }
.debate--feature .debate-body { flex: none; padding: var(--s-5); gap: var(--s-4); }
.debate--feature h3 { font-size: var(--fs-lg); line-height: 1.2; }

@keyframes grow { from { transform: scaleX(0); } }

/* ---------- recipes ---------- */
.recipe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.recipe {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.recipe-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunken); }
.recipe-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.badge {
  position: absolute; left: var(--s-3); top: var(--s-3);
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 var(--s-2);
  border-radius: 6px; font-size: var(--fs-xs); font-weight: 700;
}
.badge-tested { background: var(--lime); color: var(--ink); }
.badge-community { background: var(--cobalt-soft); color: var(--cobalt); }
.badge-untested { background: var(--surface); color: var(--ink-2); }
.save-btn {
  position: absolute; right: var(--s-2); top: var(--s-2); z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.save-btn:active { transform: scale(0.92); }
.save-btn[aria-pressed="true"] { background: var(--ink); color: var(--lime); }
.save-btn[aria-pressed="true"] .icon { fill: currentColor; }

.recipe-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; }
.recipe-chain { font-size: var(--fs-sm); color: var(--muted); }
.recipe-body h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; min-height: calc(1.35em * 2); }
.recipe-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.recipe-link:focus-visible { box-shadow: none; }
.recipe:has(.recipe-link:focus-visible) { box-shadow: var(--ring); }
.score { display: grid; gap: 6px; margin-top: var(--s-1); }
.score-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.score-row strong { color: var(--ink); }
.score-meta { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--ink); border-radius: 3px; }
.recipe-foot { margin-top: auto; padding-top: var(--s-3); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
.save { font-size: var(--fs-md); font-weight: 700; color: var(--lime-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- ad ---------- */
.ad-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: var(--block-gap); }
.ad-label { font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.ad-slot {
  width: 728px; max-width: 100%; height: 90px;
  display: grid; place-items: center;
  background: var(--sunken); border: 1px dashed var(--line-strong); border-radius: 4px;
  color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}

/* ---------- rankings + quiz ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-4); align-items: start; }
.rankings {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6); background: var(--surface); border-radius: var(--r-md);
}
.rankings .see-all { align-self: flex-start; margin-top: calc(var(--s-3) * -1); }
.rank-head { display: grid; gap: 2px; }
.rank-head h2 { font-size: var(--fs-lg); margin-bottom: 2px; }
.rank-region { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.rank-region strong { color: var(--ink); }
.rank-region .link-btn { min-height: 32px; }
.rank-list { display: grid; }
.rank-list li {
  display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: 28px minmax(0, 1fr) minmax(120px, 40%) 56px;
  min-height: 60px; border-top: 1px solid var(--line);
}
.rank-list li:last-child { border-bottom: 1px solid var(--line); }
.rank-n { font-size: var(--fs-md); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-list li:first-child .rank-n { color: var(--ink); }
.rank-item { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rank-item span { font-size: var(--fs-sm); color: var(--muted); }
.rank-bar { height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.rank-bar span { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--ink-2); border-radius: 4px; transform-origin: left; animation: grow 600ms var(--ease-quart) both; }
.rank-list li:first-child .rank-bar span { background: var(--lime); }
.rank-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.quiz {
  display: flex; flex-direction: column;
  background: var(--header); color: var(--surface);
  border-radius: var(--r-md); overflow: hidden;
}
.quiz-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.quiz-media img { width: 100%; height: 100%; object-fit: cover; }
.quiz-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6); }
.quiz h2 { font-size: var(--fs-xl); line-height: 1.15; }
.quiz p { color: oklch(86% 0.006 105); line-height: 1.6; max-width: 42ch; }
.quiz .btn { margin-top: var(--s-2); }
.quiz .quiz-brow { color: var(--lime); font-size: var(--fs-sm); font-weight: 700; margin-bottom: calc(var(--s-2) * -1); }

/* ---------- drops: no card chrome ---------- */
.drops { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.drop-list { display: grid; gap: var(--s-5); align-content: start; }
.drop { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: var(--s-4); align-items: start; }
.drop-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--sunken); }
.drop-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.drop-media img.pos-donut { object-position: 30% 60%; }
.drop-body { display: flex; flex-direction: column; gap: var(--s-2); justify-content: flex-start; }
.drop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.drop-meta span:not(.tag) { font-weight: 600; color: var(--ink-2); }
.drop h3 { font-size: var(--fs-base); line-height: 1.3; }
.drop h3 a::after { content: ""; position: absolute; inset: 0; }
.drop h3 a:focus-visible { box-shadow: none; text-decoration: underline; }
.drop:has(h3 a:focus-visible) .drop-media { box-shadow: var(--ring); }
.drop-excerpt { color: var(--ink-2); font-size: var(--fs-sm); max-width: 62ch; }
.drop-feature { grid-template-columns: 1fr; gap: var(--s-4); }
.drop-feature .drop-media { aspect-ratio: 16 / 9; }
.drop-feature h3 { font-size: var(--fs-lg); line-height: 1.2; }
.drop-feature .drop-excerpt { font-size: var(--fs-base); }

/* ---------- chains: plain list ---------- */
.chain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); }
.chain {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 56px; border-bottom: 1px solid var(--line);
}
.chain-grid li:nth-child(-n+4) .chain { border-top: 1px solid var(--line); }
.chain-name { font-weight: 700; }
.chain-meta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.chain-meta .icon { color: var(--line-strong); transition: transform 200ms var(--ease-out), color 160ms ease; }

/* ---------- newsletter (full-width lime band) ---------- */
.band-lime { background: var(--lime); color: var(--ink); padding-block: var(--s-7); }
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.newsletter h2 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.newsletter-copy p { max-width: 46ch; color: oklch(30% 0.03 120); }
.newsletter-form label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s-2); }
.newsletter-row { display: flex; gap: var(--s-2); }
.newsletter-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid oklch(30% 0.03 120 / 0.35); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--fs-base);
}
.newsletter-row input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.newsletter-row input[aria-invalid="true"] { border-color: oklch(48% 0.18 30); box-shadow: 0 0 0 1px oklch(48% 0.18 30); }
.newsletter-row input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px oklch(48% 0.18 30), 0 0 0 3px var(--surface), 0 0 0 5px var(--cobalt); }
.form-help { margin-top: var(--s-2); font-size: var(--fs-sm); color: oklch(30% 0.03 120); }
.form-help.is-error { color: oklch(42% 0.17 30); font-weight: 600; }
.form-help.is-ok { font-weight: 700; color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--header); color: oklch(85% 0.006 105); padding: var(--s-8) 0 var(--s-6); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 4fr; gap: var(--s-6); }
.footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } /* A11: one <nav>, 4 groups */
.footer-brand img { height: 30px; width: auto; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--fs-sm); max-width: 36ch; }
.footer-col h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--surface); margin-bottom: var(--s-2); letter-spacing: 0; }
.footer-col a, .footer-col .link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); color: oklch(85% 0.006 105);
}
.footer-col a:hover, .footer-col .link-btn:hover { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { margin-top: var(--s-7); font-size: var(--fs-xs); color: oklch(74% 0.006 105); }
.footer-legal-inner {
  display: flex; justify-content: space-between; gap: var(--s-2) var(--s-5); flex-wrap: wrap;
  padding-top: var(--s-5); border-top: 1px solid oklch(32% 0.01 105);
}
.footer-credit { margin-top: var(--s-3); color: oklch(64% 0.006 105); }
.footer-legal-inner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* ===== WordPress port: pages, listings, states (tokens above only) ===== */

/* ---------- utilities ---------- */
html:not([data-region="uk"]) [data-region-show="uk"],
html[data-region="uk"] [data-region-show="us"] { display: none !important; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; display: flex; flex-direction: column; }
#main > * { flex: none; }
#main > :last-child { flex-grow: 1; } /* short pages: the last band fills the gap above the footer */
#main:focus { outline: none; box-shadow: none; }
.brand .logo-svg { display: block; height: 32px; width: auto; aspect-ratio: 3896.667 / 880; }
.btn-block { width: 100%; }
.tag-demo { background: var(--cobalt-soft); color: var(--cobalt); }
.cat-nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; background: var(--sunken); }
.mobile-nav a[aria-current="page"] .icon { color: var(--ink); }
.mobile-nav-region {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 60px; padding: 0 var(--gutter); border-top: 1px solid var(--line);
  font-weight: 600;
}
.mobile-region-btns { display: inline-flex; gap: var(--s-1); padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.mobile-region-btns button {
  min-width: 52px; min-height: 44px; border: 0; border-radius: 6px; background: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
}
.mobile-region-btns button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* hero without a photo */
.hero--text { grid-template-columns: minmax(0, 1fr); }
.hero--text .hero-sub { max-width: 52ch; }

/* debate details */
.debate-body h2 { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.recipe-body h2 { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; min-height: calc(1.35em * 2); }
.container > * + .ad-wrap { margin-top: var(--block-gap); }
.debate-body h3 a, .debate-body h2 a { color: inherit; display: block; padding-block: 2px; margin-block: -2px; } /* A11: >= 24px target */
.debate-body h3 a:hover, .debate-body h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pick-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4);
  background: var(--sunken); color: var(--ink-2); font-weight: 700; text-align: center;
}
.is-closed .pick { cursor: default; }
.vote-closed { min-height: 44px; display: flex; align-items: center; }


/* recipe card when the Clone Score is hidden below the minimum */
.score--pending .score-row strong { color: var(--muted); font-weight: 600; }

/* inline (not over a photo) badge */
.badge--inline { position: static; align-self: flex-start; justify-self: start; }

/* ad slot sizes come from the slot registry */
.ad-slot { width: var(--ad-w, 728px); height: var(--ad-h, 90px); }
.ad-dim-m { display: none; }
.ad-inline { list-style: none; grid-column: 1 / -1; }
.ad-inline .ad-wrap { margin-block: var(--s-4); }

/* rankings: both regions are rendered, one is shown */
.rank-panel { display: contents; }
.rank-head .meta { flex-wrap: wrap; }
.rank-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rank-empty { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.rank-empty .see-all { margin-top: 0; }
.duo--single { grid-template-columns: minmax(0, 1fr); }

/* drops / chains band variants */
.drops--single { grid-template-columns: minmax(0, 1fr); }
.band-chains-only .block:first-child { margin-top: 0; }


/* listing helpers */
.first-sub:first-child { margin-top: 0; }
.search-terms { margin-bottom: var(--block-gap); }
.band-white .debate { border: 1px solid var(--line); }
.debate-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vote-closed { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.score-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-2); }
.panel-tags { margin-top: var(--s-3); }
.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.plain-list { display: grid; gap: var(--s-5); max-width: 70ch; }
.plain-list h2 { font-size: var(--fs-md); }
.plain-list h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plain-list p { color: var(--ink-2); margin-top: var(--s-1); }
.rank-page + .sub-section { margin-top: var(--block-gap); }
.rank-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
.drop-feature { align-content: start; }
.rank-region .link-btn { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--surface); }
@media (min-width: 761px) {
  /* "Sign in" is hidden until Phase 2: keep the actions column as wide as the design's */
  .header-actions { min-width: 194px; justify-content: flex-end; }
}

/* ---------- page scaffolding ---------- */
.page-top { padding-top: var(--s-6); }
.page-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); max-width: 760px; }
.page-head h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.page-head .lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 62ch; }
.page-head .meta { margin-top: var(--s-1); }

.breadcrumbs { margin-bottom: var(--s-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-1); font-size: var(--fs-sm); color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-1); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; color: var(--ink-2); }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs .icon { color: var(--line-strong); }
.crumb-current { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-state {
  display: grid; gap: var(--s-3); justify-items: start;
  padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.band-white .empty-state { background: var(--bg); border-color: transparent; }
.empty-title { font-size: var(--fs-md); font-weight: 700; }
.empty-text { color: var(--ink-2); max-width: 60ch; }
.empty-state .btn { margin-top: var(--s-1); }

.pagination { margin-top: var(--s-7); }
.pagination ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--line-strong); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pagination .dots { border-color: transparent; background: none; }

.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-lg); color: var(--ink); margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-md); color: var(--ink); margin-top: 1.4em; }
.prose a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
.prose img { border-radius: var(--r-sm); }
.prose blockquote { margin: 0; padding: var(--s-4) var(--s-5); background: var(--bg); border-radius: var(--r-sm); }

.search--page { grid-area: auto; justify-self: start; max-width: 640px; }
.search--page input { border-color: var(--muted); }
.search--page input:focus { border-color: var(--ink); }

.sub-section { margin-top: var(--block-gap); }
.listing-grid { margin-top: 0; }

/* chips (search: matching chains and food) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600;
}
.chip span { color: var(--muted); font-weight: 400; }
.chip:hover { border-color: var(--line-strong); }

/* debate listing (no feature card) */
.debate-grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.debate-grid--list .debate { min-height: 100%; }
.debate-grid--list.debate-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* drop listing */
.drops-list { display: grid; gap: var(--s-6); }
.drops-list .drop { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.drops-list .drop:last-child { border-bottom: 0; padding-bottom: 0; }
/* A8: text tile of a drop without a photo; fills the photo box (CLS 0) */
.drop-media { container-type: inline-size; }
.text-tile { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: clamp(12px, 6cqi, 32px); background: var(--sunken); color: var(--ink); overflow: hidden; }
.text-tile-mark { position: absolute; top: clamp(12px, 6cqi, 32px); left: clamp(12px, 6cqi, 32px); width: clamp(22px, 7cqi, 40px); color: var(--ink); }
.text-tile-mark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.text-tile-type { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--s-2); border-radius: 4px; background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.text-tile--exit .text-tile-type { background: var(--ink); color: var(--surface); }
.text-tile-item { font-size: clamp(1.125rem, 8.5cqi, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.text-tile--long .text-tile-item { font-size: clamp(1rem, 6.5cqi, 2.5rem); }
.text-tile-chain { color: var(--ink-2); font-size: clamp(0.8125rem, 3.6cqi, 1.125rem); font-weight: 600; }
/* small list thumbnails: the meta shows the type, so the ≈ mark and type chip step aside */
@container (max-width: 200px) {
  .text-tile { padding: 10px; gap: 2px; }
  .text-tile-mark, .text-tile-type { display: none; }
  .text-tile-item, .text-tile--long .text-tile-item { font-size: 0.9375rem; line-height: 1.15; -webkit-line-clamp: 4; }
  .text-tile-chain { font-size: 0.75rem; }
}
.tag-exit { background: var(--ink); color: var(--surface); }
.drop h2 a::after { content: ""; position: absolute; inset: 0; }
.drop h2 a:focus-visible { box-shadow: none; text-decoration: underline; }
.drop:has(h2 a:focus-visible) .drop-media { box-shadow: var(--ring); }
.drops-list .drop h2 { font-size: var(--fs-md); line-height: 1.25; }
.drops-list .drop-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.drops-list .drop-feature h2 { font-size: var(--fs-xl); line-height: 1.15; }
.drops-list .drop-feature .drop-excerpt { font-size: var(--fs-base); }

/* product rows */
.product-list { display: grid; }
.product-row {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 60px; border-bottom: 1px solid var(--line);
}
.product-row:first-child { border-top: 1px solid var(--line); }
.product-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.product-name { font-weight: 700; }
.product-chain { font-size: var(--fs-sm); color: var(--muted); }
.product-name::after { content: ""; position: absolute; inset: 0; }
.product-aside { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.product-price { font-weight: 700; color: var(--ink-2); }
.product-aside .icon { color: var(--line-strong); }

/* A to Z chains */
.az { display: grid; gap: var(--s-6); }
.az-group { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.az-letter { font-size: var(--fs-xl); font-weight: 700; line-height: 1; padding-top: var(--s-3); color: var(--ink); }
.az .chain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* term header (chain / food) */
.term-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; margin-bottom: var(--s-6); }
.term-head .page-head { margin-bottom: 0; }
.term-media { width: 280px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: var(--sunken); }
.term-media img { width: 100%; height: 100%; object-fit: cover; }
/* with a photo the header uses the hero grid: text 5 columns, photo 7 */
.term-head--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
.term-head--media .term-media { width: 100%; aspect-ratio: 16 / 9; }
.term-head--media h1 { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.028em; }

/* ---------- recipe page ---------- */
.recipe-header { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 820px; }
.recipe-header h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; }
.recipe-header .recipe-chain { font-size: var(--fs-md); color: var(--ink-2); }
.recipe-header .badge { min-height: 30px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.fact-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-1); }
.fact-row .meta { color: var(--ink-2); }
.fact-row strong { color: var(--ink); }

.recipe-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }
.recipe-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--sunken); }
.recipe-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recipe-summary { display: grid; gap: var(--s-4); }
.panel { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.band-white .panel { background: var(--bg); border-color: transparent; }
.panel h2 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--s-3); }
.clone-score .big { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.clone-score .meter { height: 8px; margin-block: var(--s-3) var(--s-2); }
.clone-score .pending { font-size: var(--fs-md); font-weight: 700; }
.panel-note { font-size: var(--fs-sm); color: var(--muted); }
.savings .save { display: block; font-size: var(--fs-xl); line-height: 1.1; }
.savings p + p { margin-top: var(--s-2); }
.savings .compare { color: var(--ink-2); }
.save-recipe[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.save-recipe[aria-pressed="true"] .icon { fill: currentColor; color: var(--lime); }
.save-recipe:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--ring); }

.recipe-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); margin-top: var(--block-gap); align-items: start; }
.recipe-cols h2, .recipe-section h2 { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.servings-line { margin-bottom: var(--s-4); }
.ingredients-group + .ingredients-group { margin-top: var(--s-5); }
.ingredients-group h3 { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin-bottom: var(--s-2); letter-spacing: 0; }
.ingredients li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.ingredients li:first-child { border-top: 1px solid var(--line); }
.ing-qty { flex: none; min-width: 64px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ing-item small { color: var(--muted); font-size: var(--fs-sm); }
.ing-pantry { margin-left: auto; flex: none; }
.ingredients-note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--surface); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps p { padding-top: 4px; line-height: 1.6; max-width: 65ch; }
.step-timer { display: inline-flex; margin-top: var(--s-2); }
.recipe-section { margin-top: var(--block-gap); }
.provenance-note { display: grid; gap: var(--s-2); max-width: 70ch; }
.provenance-note a { color: var(--cobalt); font-weight: 600; }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- debate page ---------- */
.debate-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); max-width: 820px; }
.debate-head h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; }
.debate-head .lede { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; max-width: 62ch; }
.debate-head .lede > * + * { margin-top: 0.75em; }
.debate-head .lede a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.debate-head .fact-row { margin-top: 0; }
.debate-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-6); align-items: start; }
.debate-aside { display: grid; gap: var(--s-6); align-content: start; }
.aside-block { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.aside-block h2 { font-size: var(--fs-base); font-weight: 700; }
.aside-block p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 46ch; }
.aside-block .product-list { margin-top: var(--s-1); }
.debate--single .debate-pics { min-height: 0; flex: none; }
.debate--single .pick { aspect-ratio: 4 / 3; }
.debate--single .pick-name {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1;
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-2);
  border-radius: 6px; background: var(--surface); font-size: var(--fs-sm); font-weight: 700;
}
.debate--single .debate-body { padding: var(--s-5); gap: var(--s-4); }


/* ---------- drop and product pages ---------- */
.article-head { display: grid; gap: var(--s-3); max-width: 820px; margin-bottom: var(--s-5); }
.article-head h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; }
.article-head .lede { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.45; max-width: 60ch; }
.article-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md); background: var(--sunken); max-width: 960px; margin-bottom: var(--s-6); }
.article-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-head .drop-meta a { color: var(--cobalt); font-weight: 600; }
.article-head .drop-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.drop-meta span.sep { color: var(--muted); font-weight: 400; }
.sources { margin-top: var(--s-6); max-width: 70ch; }
.sources h2 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.sources li { padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.sources a { color: var(--cobalt); font-weight: 600; word-break: break-word; }
.facts { display: grid; max-width: 960px; grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); gap: var(--s-4) var(--s-6); margin: 0 0 var(--s-6); }
.facts div { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.facts dt { font-size: var(--fs-sm); color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.facts dd small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }

/* ---------- rankings page ---------- */
.rank-page { display: grid; gap: var(--s-5); }
.rank-page .rankings { max-width: 860px; }

/* ---------- 404 ---------- */
.not-found { display: grid; gap: var(--s-4); justify-items: start; max-width: 680px; padding-block: var(--s-6); }
.not-found h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.028em; }
.not-found p { color: var(--ink-2); font-size: 1.0625rem; }
.not-found .search--page { width: 100%; }

/* ---------- hover (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .recipe:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
  .food-tile:hover img, .recipe:hover .recipe-media img, .drop:hover img { transform: scale(1.04); }
  .food-tile:hover .food-name, .drop:hover h3, .chain:hover .chain-name { text-decoration: underline; text-underline-offset: 3px; }
  .chain:hover .chain-meta .icon { color: var(--ink); transform: translateX(2px); }
  .debate:not(.is-voted) .pick:hover img { transform: scale(1.04); }
  .save-btn:hover { background: var(--lime); }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
  .debate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate--feature { grid-column: 1 / -1; grid-row: auto; }
  .debate--feature .debate-pics { flex: none; min-height: 0; aspect-ratio: 2.4 / 1; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { grid-template-columns: 1fr; }
  .drops { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 16px; --band-pad: 40px; --block-gap: 36px; }
  html { scroll-padding-top: 16px; }

  /* header scrolls away on phones: no 120px sticky block eating the screen */
  .site-header { position: static; }
  .header-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "menu brand actions" "search search search";
    gap: var(--s-2); min-height: 0; padding-top: var(--s-2); padding-bottom: var(--s-3);
  }
  .header-row .menu-btn { display: grid; }
  .brand { justify-self: start; }
  .brand img { height: 26px; }
  .header-link span { display: none; }
  .header-link { width: 44px; justify-content: center; padding: 0; }
  .header-actions { gap: 0; }
  .search { max-width: none; }
  .search input { min-height: 48px; }
  .search-btn { top: 2px; bottom: 2px; right: 2px; } /* A11: 44px target */

  /* category nav becomes a chip scroller */
  .cat-nav-row { overflow-x: auto; scrollbar-width: none; min-height: 0; padding-block: var(--s-2); }
  .cat-nav-row::-webkit-scrollbar { display: none; }
  .cat-nav-aside { display: none; }
  .cat-nav-list { flex-wrap: nowrap; gap: var(--s-2); }
  .cat-nav-list a, .cat-nav-list li:first-child a {
    min-height: 40px; padding: 0 var(--s-4);
    border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm);
  }
  .cat-nav-list li { display: flex; }
  .cat-nav-list a::before { content: ""; position: absolute; inset: -2px 0; } /* 44px hit area */
  .cat-nav-list a::after { display: none; }

  .section-head { margin-bottom: var(--s-3); }
  .section-head h2 { font-size: var(--fs-md); }

  .band-top { padding-top: var(--s-4); }
  .hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-media { order: -1; aspect-ratio: 4 / 3; }
  .hero-copy { gap: var(--s-3); }
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 0; padding: 0 var(--s-4); }
  .hero-week { margin-top: 0; }

  .food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .food-tile { gap: var(--s-2); }
  .food-name { font-size: var(--fs-sm); }

  /* horizontal snap carousels for debates and drops */
  .debate-grid, .drops {
    position: relative; /* contains the visually-hidden vote status, else it widens the page */
    display: grid; grid-auto-flow: column; grid-auto-columns: 85%;
    grid-template-columns: none; grid-template-rows: none;
    gap: var(--s-3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .debate-grid::-webkit-scrollbar, .drops::-webkit-scrollbar { display: none; }
  .debate-grid > *, .drops > *, .drop-list > * { scroll-snap-align: start; }
  .drop-list { display: contents; }

  .debate--feature { grid-column: auto; grid-row: auto; }
  .debate--feature .debate-pics { aspect-ratio: auto; }
  .debate--feature .pick { aspect-ratio: 1; }
  .debate--feature .debate-body { flex: 1; padding: var(--s-4); gap: var(--s-3); }
  .debate--feature h3 { font-size: var(--fs-base); line-height: 1.35; }
  .debate--feature .vs { width: 36px; height: 36px; font-size: var(--fs-xs); }

  .drop, .drop-feature { grid-template-columns: 1fr; gap: var(--s-3); }
  .drop-media, .drop-feature .drop-media { aspect-ratio: 16 / 10; }
  .drop-feature h3, .drop h3 { font-size: var(--fs-base); }
  .drop-feature .drop-excerpt { font-size: var(--fs-sm); }

  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .recipe-body { padding: var(--s-3); }
  .recipe-body h3 { font-size: var(--fs-sm); min-height: calc(1.35em * 2); }
  .recipe-foot .meta { display: none; }
  .recipe-foot:not(:has(.save:not(:empty))) .meta { display: inline-flex; }
  .score--pending .score-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .save { font-size: var(--fs-base); }
  .badge { left: var(--s-2); top: var(--s-2); }

  /* ad slot phone sizes: see port additions (registry-driven) */

  .rankings { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
  .rank-head h2 { font-size: var(--fs-md); }
  .rank-list li { grid-template-columns: 20px minmax(0, 1fr) 64px 48px; gap: var(--s-3); }
  .quiz-copy { padding: var(--s-5); }
  .quiz h2 { font-size: var(--fs-lg); }
  .quiz .btn { width: 100%; }

  .chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .chain-grid li:nth-child(-n+4) .chain { border-top: 0; }
  .chain-grid li:nth-child(-n+2) .chain { border-top: 1px solid var(--line); }
  .chain { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 60px; }
  .chain-meta .icon { display: none; }

  .band-lime { padding-block: var(--s-6); }
  .newsletter { grid-template-columns: 1fr; gap: var(--s-4); }
  .newsletter h2 { font-size: var(--fs-lg); }
  .newsletter-row { flex-direction: column; }
  .newsletter-row .btn { width: 100%; }

  .site-footer { padding-top: var(--s-7); }
  .footer-grid { gap: var(--s-5); }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .footer-legal-inner { flex-direction: column; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: background-color, border-color, color, opacity, box-shadow !important; }
  .btn:active, .save-btn:active, .search-btn:active, .vote-btn:active { transform: none; }
  img { transform: none !important; }
  .debate-grid, .drops { scroll-behavior: auto; }
}

/* ---------- port: tablet ---------- */
@media (max-width: 1100px) {
  .debate-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate-grid--list.debate-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-top { grid-template-columns: minmax(0, 1fr); }
  .recipe-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-cols { grid-template-columns: minmax(0, 1fr); gap: var(--block-gap); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az .chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate-layout { grid-template-columns: minmax(0, 1fr); }
  .debate-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .term-head--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
  .recipe-summary .save-recipe { grid-column: 1 / -1; }
}

/* ---------- port: phone ---------- */
@media (max-width: 760px) {
  .recipe-body h2 { font-size: var(--fs-sm); }
  .debate-grid.debate-grid--related { grid-template-columns: minmax(0, 1fr); }
  .drop-grid { grid-template-columns: minmax(0, 1fr); }
  .brand .logo-svg { height: 26px; }
  .ad-slot { width: var(--ad-w-m, 300px); height: var(--ad-h-m, 250px); }
  .ad-slot span { font-size: var(--fs-xs); }
  .ad-slot span::after { content: none; }
  .ad-dim-d { display: none; }
  .ad-dim-m { display: inline; }

  .page-top { padding-top: var(--s-4); }
  .page-head { margin-bottom: var(--s-5); }
  .page-head h1 { font-size: var(--fs-lg); }
  .empty-state { padding: var(--s-5) var(--s-4); }
  .debate-grid.debate-grid--list {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  .drops-list .drop, .drops-list .drop-feature { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-5); }
  .drops-list .drop-feature h2, .drops-list .drop h2 { font-size: var(--fs-md); }
  .drops--single { grid-auto-columns: 100%; }
  .term-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .term-media { width: 100%; order: -1; }
  .az-group { grid-template-columns: 32px minmax(0, 1fr); }
  .az-letter { font-size: var(--fs-lg); }
  .az .chain-grid { grid-template-columns: minmax(0, 1fr); }
  .az .chain-grid li .chain { border-top: 0; }
  .az .chain-grid li:first-child .chain { border-top: 1px solid var(--line); }

  .recipe-header h1, .debate-head h1, .article-head h1 { font-size: 2rem; }
  .recipe-summary { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: var(--s-4); }
  .clone-score .big { font-size: 2.5rem; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate--single .pick { aspect-ratio: 1; }
  .debate--single .debate-body { padding: var(--s-4); }
  .debate-aside { grid-template-columns: minmax(0, 1fr); }
  .term-head--media { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .term-head--media h1 { font-size: 2rem; }
  .debate-layout { gap: var(--s-5); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagination ul { justify-content: center; }
}


/* ---------- toasts (dupeeatsUI.toast) ---------- */
.toasts {
  position: fixed; z-index: 50; left: 50%; bottom: max(var(--s-4), env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  display: grid; gap: var(--s-2); pointer-events: none;
}
.toast-list { display: grid; gap: var(--s-2); }
.toast-list:empty { display: none; }
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-1) var(--s-3) var(--s-4);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); pointer-events: auto;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast-icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.toast-icon .icon { stroke-width: 3; }
.toast--success .toast-icon { background: var(--lime); color: var(--ink); }
.toast--info .toast-icon { background: var(--cobalt); color: var(--surface); }
.toast--error .toast-icon { background: var(--ink); color: var(--surface); }
.toast-msg { flex: 1; min-width: 0; padding-top: 2px; }
.toast-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-block: -10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted);
}
.toast-close:hover { color: var(--ink); background: var(--sunken); }

/* ---------- Turnstile: a bottom sheet, only when Cloudflare asks ---------- */
.ts-slot {
  position: fixed; z-index: 60; left: 50%; bottom: 0; width: min(440px, 100vw);
  padding: var(--s-5) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
  background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-pop);
  transform: translate(-50%, calc(100% + 24px)); visibility: hidden;
  transition: transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.ts-slot[hidden] { display: none; }
.ts-slot.is-open { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.ts-title { font-size: var(--fs-md); font-weight: 700; }
.ts-text { margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }

@media (min-width: 761px) {
  .toasts { left: auto; right: var(--s-5); bottom: var(--s-5); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transform: none; }
}

/* A4: on phones the last crumb (= the h1) is visually hidden */
@media (max-width: 760px) {
  .breadcrumbs .crumb-last { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===== A5 · .cta-card (closes a recipe grid), .chip--level (photo level tag) ===== */
.cta-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-3);
  padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cta-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.cta-card__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.cta-card__text { color: var(--ink-2); font-size: var(--fs-sm); max-width: 36ch; }
.cta-card .btn { margin-top: auto; max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-inline: var(--s-3); padding-block: var(--s-2); height: auto; }
.chip--level {
  min-height: 24px; gap: 4px; padding: 0 var(--s-2); border: 0; background: var(--sunken); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.chip--level .icon { color: var(--lime-text); }
.product-submit { margin-top: var(--s-5); color: var(--ink-2); }

/* ===== A7 · compact ranking list with score and movement (.rank-move shared with rankings.css) ===== */
.rank-list--score li { grid-template-columns: 40px minmax(0, 1fr) minmax(96px, 36%) 48px; }
.rank-list--score li { position: relative; }
.rank-list--score .rank-item a::after { content: ""; position: absolute; inset: 0; }
.rank-list--score .rank-n { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.rank-move { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.rank-tri { width: 10px; height: 10px; fill: currentColor; stroke: none; flex: none; }
.rank-move--up { color: var(--lime-text); }
.rank-move--down { color: var(--ink-2); }
.rank-move--new { color: var(--cobalt); }
.rank-list .rank-move { margin-top: 2px; font-size: 0.6875rem; }
/* Scored bars grow from the average mark (50), x2 so 25-75 fills the track. */
.rank-bar--avg { position: relative; overflow: visible; }
.rank-bar--avg::after { content: ""; position: absolute; left: calc(50% - 1px); top: -3px; bottom: -3px; width: 2px; background: var(--line-strong); }
.rank-bar--avg span { margin-left: calc(var(--l) * 1%); }
.rank-bar--avg .is-below { transform-origin: right; }
.rank-list-legend { margin-top: calc(var(--s-3) * -1); font-size: var(--fs-xs); color: var(--muted); }
.rank-list-legend a { color: var(--cobalt); font-weight: 600; }
.rank-list-legend a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rank-product-line { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.rank-product-line li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.rank-product-line a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; color: var(--cobalt); font-weight: 700; }
.rank-product-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .rank-list--score li { grid-template-columns: 32px minmax(0, 1fr) 56px 40px; }
}

/* ---------- A9 newsletter forms: trap, consent, compact band, card ---------- */
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-form .form-help { min-height: 1.5em; }
.nl-consent { margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 1.5; color: oklch(30% 0.03 120); max-width: 62ch; }
.nl-consent a { text-decoration: underline; text-underline-offset: 2px; }
.nl-signup--compact { padding-block: var(--s-6); }
.newsletter--compact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.newsletter--compact h2 { font-size: var(--fs-md); margin-bottom: var(--s-1); }
.newsletter-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); }
.band-white .newsletter-card { background: var(--bg); border-color: transparent; }
.newsletter--card h2 { font-size: var(--fs-lg); }
.newsletter--card .newsletter-copy p, .newsletter--card .nl-consent, .nl-signup--page .nl-consent { color: var(--ink-2); }
.newsletter--card .newsletter-row input, .newsletter--page .newsletter-row input { border-color: var(--control); }
.newsletter--card .newsletter-row input:focus, .newsletter--page .newsletter-row input:focus { border-color: var(--ink); }
.nl-card-band { padding-bottom: 0; }
.debate-main > .nl-signup--card { margin-top: var(--s-4); }
@media (max-width: 760px) {
  .newsletter--compact { grid-template-columns: 1fr; gap: var(--s-3); }
  .newsletter-card { padding: var(--s-5); }
}

/* A8.1 photo captions (docs/A8-1-IMAGENES.md §7.6) */
.pic,.media{display:contents}
.media-note{position:absolute;left:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);padding:2px 8px;border-radius:99px;background:oklch(20.5% .012 105/.72);color:var(--surface);font-size:var(--fs-xs);font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.media-note--above{left:12px;bottom:46px}
.vs+.pick .media-note--above{left:auto;right:12px}
.term-media,.original-media{position:relative}
@media (max-width:760px){.media-note--above{left:8px;bottom:42px}.vs+.pick .media-note--above{right:8px}.pick .media-note-more{display:none}}

/* ---------- A11: Windows high contrast (forced colors) ----------
   box-shadow is dropped there, so focus rings and pressed states need outlines
   and system colours. */
@media (forced-colors: active) {
  :focus-visible, .recipe:has(.recipe-link:focus-visible), .drop:has(h3 a:focus-visible) .drop-media,
  .drop:has(h2 a:focus-visible) .drop-media, .quiz-a input:focus-visible + .quiz-a-box,
  .rate-step input:focus-visible + .rate-step-box, .star-opt:has(input:focus-visible),
  .sf-choice input:focus-visible + span, .sf-level input:focus-visible + span, .ph-add:focus-within { outline: 3px solid CanvasText !important; outline-offset: 2px; }
  :root .units-toggle button[aria-pressed="true"], :root .mobile-region-btns button[aria-pressed="true"], :root .vote-btn[aria-pressed="true"],
  :root .save-btn[aria-pressed="true"], :root .recipe-actions .save-recipe[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :root .wake-toggle input, :root .wake-toggle input::after { forced-color-adjust: none; }
  :root .wake-toggle input { border: 1px solid CanvasText; background: Canvas; }
  :root .wake-toggle input::after { background: CanvasText; }
  :root .wake-toggle input:checked { background: Highlight; }
  :root .wake-toggle input:checked::after { background: HighlightText; }
  :root .quiz-a input:checked + .quiz-a-box, :root .rate-step input:checked + .rate-step-box { outline: 3px solid Highlight; }
}