:root {
  --green:#2d6a4f;
  --pale:#eaf3e9;
  --ink:#20362b;
  --muted:#52635a;
  --line:#dce4dc;
  --paper:#fafbf7;
  --white:#fff;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px}
* {
  box-sizing:border-box}
body {
  margin:0}
a {
  color:var(--green);
  text-underline-offset:3px}
a:hover {
  text-decoration-thickness:2px}
button,input,select {
  font:inherit}
button,.button {
  border:1px solid var(--green);
  border-radius:7px;
  padding:10px 16px;
  background:var(--green);
  color:white;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  font-weight:600}
button.secondary,.button.secondary {
  background:white;
  color:var(--green)}
button:hover,.button:hover {
  filter:brightness(.94)}
:focus-visible {
  outline:3px solid #bc7626;
  outline-offset:3px}
.skip {
  position:absolute;
  top:-100px;
  left:12px;
  z-index:10}
.skip:focus {
  top:8px;
  background:white;
  padding:8px}
.site-header {
  border-bottom:1px solid var(--line);
  background:white}
.header-inner {
  max-width:1120px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 24px;
  flex-wrap:wrap}
.brand {
  font-weight:800;
  font-size:1.2rem;
  text-decoration:none;
  letter-spacing:-.04em}
.brand span {
  display:inline-grid;
  place-items:center;
  background:var(--pale);
  border-radius:50%;
  width:36px;
  height:36px;
  margin-right:7px}
.site-header nav,footer nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap}
.site-header nav a {
  font-size:.9rem;
  text-decoration:none}
.site-header nav a[aria-current=page] {
  text-decoration:underline;
  font-weight:700}
main {
  max-width:1120px;
  margin:auto;
  padding:0 24px 64px}
.hero {
  padding:54px 0 32px;
  max-width:790px}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.72rem;
  font-weight:700;
  color:var(--green)}
h1 {
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.12;
  letter-spacing:-.045em;
  margin:14px 0 20px;
  font-weight:750}
h2 {
  font-size:1.5rem;
  line-height:1.25;
  letter-spacing:-.025em;
  margin:0 0 14px}
h3 {
  font-size:1.08rem;
  line-height:1.4}
p {
  margin:0 0 16px}
.hero>p:not(.eyebrow) {
  color:var(--muted);
  font-size:1.1rem;
  max-width:700px}
.meta,.small {
  font-size:.85rem;
  color:var(--muted)}
.box {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  margin:20px 0}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap}
.section-heading p {
  font-size:.88rem;
  color:var(--muted)}
.comparison {
  border-top:4px solid var(--green)}
.compare-inputs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:20px 0}
.food-input {
  padding:18px;
  background:var(--paper);
  border-radius:8px}
.input-line {
  display:flex;
  gap:12px;
  align-items:end;
  margin-top:12px}
.input-line label {
  max-width:150px}
label {
  display:block;
  font-size:.88rem;
  font-weight:600}
input,select {
  width:100%;
  border:1px solid #99ab9c;
  border-radius:6px;
  background:white;
  padding:10px;
  color:var(--ink);
  min-height:44px}
label select,label input {
  margin-top:6px}
.food-input>p {
  margin-top:8px;
  margin-bottom:0;
  font-size:.78rem;
  color:var(--muted)}
.table-scroll {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums}
th,td {
  text-align:right;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top}
th:first-child,td:first-child {
  text-align:left}
thead {
  background:var(--pale)}
th {
  font-size:.85rem}
td {
  font-size:.9rem}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px}
.status {
  font-size:.85rem;
  min-height:1.6em;
  margin-top:8px;
  color:var(--green)}
.notice {
  background:var(--pale);
  padding:16px 20px;
  border-radius:8px;
  color:var(--ink);
  font-size:.9rem;
  margin:16px 0}
.catalogue {
  margin-top:44px}
.controls {
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:14px;
  margin:20px 0}
.food-list {
  list-style:none;
  padding:0;
  margin:0}
.food-list>li {
  border-bottom:1px solid var(--line)}
details summary {
  cursor:pointer;
  min-height:62px;
  padding:16px 6px}
summary::marker {
  color:var(--green)}
.food-name {
  font-weight:650}
.food-state {
  font-size:.8rem;
  color:var(--muted);
  margin-left:12px}
.sort-value {
  float:right;
  color:var(--green);
  font-size:.88rem;
  font-variant-numeric:tabular-nums}
.food-detail {
  padding:4px 20px 20px}
.source-description {
  font-size:.85rem;
  color:var(--muted)}
.nutrient-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px 24px;
  margin:16px 0}
.nutrient-grid div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.84rem}
.nutrient-grid dt {
  color:var(--muted)}
.nutrient-grid dd {
  margin:0;
  font-variant-numeric:tabular-nums}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:22px 0 38px}
.card {
  background:white;
  border:1px solid var(--line);
  padding:24px;
  border-radius:10px}
.card h3 {
  margin:12px 0}
.card p {
  font-size:.9rem;
  color:var(--muted)}
.card a {
  font-weight:650}
.editorial {
  margin-top:48px}
.article {
  max-width:800px}
.article .hero {
  padding-bottom:12px}
.article h2 {
  margin-top:36px}
.article h3 {
  margin-top:25px}
.article li {
  margin-bottom:10px}
.article ul,.article ol {
  padding-left:24px}
.article p {
  line-height:1.8}
.article .box h2 {
  margin-top:0}
.article table {
  margin:20px 0}
.article details summary {
  font-weight:600}
.article .sources {
  padding-top:20px;
  border-top:1px solid var(--line);
  margin-top:40px}
footer {
  border-top:1px solid var(--line);
  background:white;
  padding:30px 24px}
footer>div {
  max-width:1072px;
  margin:auto}
footer p {
  font-size:.8rem;
  color:var(--muted);
  max-width:780px;
  margin-top:18px}
footer nav {
  gap:12px 22px;
  font-size:.85rem}
[hidden] {
  display:none!important}
.js-only {
  display:none}
html.js .js-only {
  display:block}
html.js .actions.js-only {
  display:flex}
@media(max-width:700px) {
  .header-inner {
  padding:14px 18px;
  gap:10px}
.site-header nav {
  gap:14px}
main {
  padding-left:18px;
  padding-right:18px}
.hero {
  padding-top:34px}
.box {
  padding:18px}
.compare-inputs,.cards {
  grid-template-columns:1fr;
  gap:14px}
.controls {
  grid-template-columns:1fr 1fr}
.controls label:first-child {
  grid-column:1/-1}
.food-state {
  display:block;
  margin-left:18px}
.sort-value {
  float:none;
  display:block;
  margin-left:18px}
.nutrient-grid {
  grid-template-columns:1fr 1fr}
.compare-inputs {
  gap:10px}
.food-input {
  padding:12px}
.section-heading {
  gap:0}
th,td {
  padding:10px 6px}
}
@media print {
  .site-header,footer,.controls,.actions,.cards {
  display:none!important}
main {
  padding:0}
.box {
  break-inside:avoid}
.hero {
  padding-top:10px}
h1 {
  font-size:2rem}
.comparison select,.comparison input {
  border:0;
  padding:0}
.food-list {
  display:none}
.notice {
  border:1px solid #aaa}
}

/* Enhanced controls keep their grid layout when JavaScript is ready. */
html.js .compare-inputs,html.js .controls {
  display:grid}

/* Local or explicitly requested ad-layout previews; never real ad units. */
.ad-preview {
  border: 1px dashed #99ab9c;
  background: #f0f3ed;
  color: var(--muted);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  margin: 24px auto;
  padding: 12px;
  font-size: .8rem;
}
.ad-preview-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ad-preview strong { font-size: .9rem; }
.ad-preview-banner { max-width: 728px; min-height: 90px; }
.ad-preview-rectangle { width: min(300px, 100%); min-height: 250px; }
@media (max-width: 700px) {
  .ad-preview-banner { max-width: 320px; min-height: 100px; }
}
@media print {
  .ad-preview { display: none !important; }
}
.league-controls { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin:24px 0; }
.league-table { background:white; }
.league-table caption { text-align:left; padding:12px 0; font-size:.85rem; color:var(--muted); }
.league-table td:nth-child(2),.league-table th:nth-child(2) { text-align:left; min-width:170px; }
.league-table th:first-child { width:60px; color:var(--green); font-variant-numeric:tabular-nums; }
.league-food { font-weight:650; }
.league-state { display:block; color:var(--muted); font-size:.78rem; margin:2px 0; }
.league-source { font-size:.72rem; }
.league-score { font-weight:750; color:var(--green); white-space:nowrap; }
@media(max-width:700px) {
  .league-table td,.league-table th { padding:10px 8px; }
  .league-controls { grid-template-columns:1fr; }
}
.league-hero { padding-top:28px; padding-bottom:12px; }
.league-hero h1 { font-size:clamp(2rem,4vw,2.6rem); margin-bottom:12px; }
/* Original food emoji: decorative beside the readable food name. */
.food-icon {
  display:inline-block;
  min-width:1.6em;
  margin-right:.3em;
  font-size:1.25em;
  line-height:1;
  vertical-align:-.05em;
  text-align:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}