:root {
  --bg: #f5f7f4;
  --card: #ffffff;
  --text: #1a1f1c;
  --muted: #5f6b63;
  --line: #e3e8e3;
  /* One step more visible than --line: a card border can be a hairline, but a
     chart gridline this faint reads as "no grid at all" — the exact "ugly or
     barely visible" complaint the charts below were built to fix. */
  --grid: #cdd6cc;
  --accent: #2f7d4f;
  --accent-ink: #ffffff;
  --ghg: #d98324;
  --land: #6a9a3b;
  --water: #2f7db0;
  --danger: #b3402f;
  /* The two illustrative-diet lines on the climate chart, kept apart from
     --ghg/--land/--water/--danger, which already mean something else there. */
  --vegan: #2f7db0;
  --vegetarian: #8a5cb0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151400; --bg: #121514;
    --card: #1c211e;
    --text: #e7ece8;
    --muted: #9aa79f;
    --line: #2b322d;
    --grid: #3c453f;
    --accent: #4ba877;
    --accent-ink: #06110b;
    --ghg: #e2a24e;
    --land: #8fc158;
    --water: #5aa8d6;
    --danger: #e0715f;
    --vegan: #5aa8d6;
    --vegetarian: #b38ee0;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
/* The hidden attribute must always win, even over display:flex/grid rules. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; }
/* One column width for every tab. The World tab needed the room first — a map
   and a five-column table — but a page that changes width when you switch tabs
   reads as two different apps, and the header sliding sideways under your thumb
   is the most visible part of it. So the wider column is the layout on a big
   screen, and the panels inside it lay out in more columns rather than growing
   line lengths nobody can scan. */
@media (min-width: 640px) {
  .wrap { max-width: 1080px; }
  .world-table { font-size: 0.86rem; }
  .world-table th, .world-table td { padding: 9px 10px; }
  .world-table thead th { font-size: 0.82rem; }
  .world-intro { font-size: 0.92rem; }
  /* Prose stays readable: a paragraph 1080px wide loses the reader's place at
     the end of every line, however much room there is for it. */
  .world-intro, .ref-caveat, .pop-note, .import-panel > p, #data-status p {
    max-width: 68ch;
  }
}

/* header */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--accent);
  color: var(--accent-ink);
  padding: calc(env(safe-area-inset-top) + 10px) 0 12px;
  box-shadow: var(--shadow);
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
/* The title on the left, the buttons together on the right. Without the group
   `space-between` spreads three children evenly and drops ⤓ in the middle of
   the bar, where it reads as a heading rather than as a control. */
.header-actions { display: flex; align-items: center; gap: 6px; }
.app-header h1 { font-size: 1.15rem; margin: 0; letter-spacing: 0.2px; font-weight: 700; }
.date-nav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.date-wrap { position: relative; flex: 1; }
.date-label {
  width: 100%; border: none; border-radius: 10px; padding: 9px 10px;
  font: inherit; font-weight: 600; text-align: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); color: var(--accent-ink);
}
/* Native picker kept in the DOM (so showPicker works) but visually hidden. */
.date-picker {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; pointer-events: none;
}
.nav-btn, .today-btn, .ghost-btn {
  border: none; background: rgba(255, 255, 255, 0.16); color: var(--accent-ink);
  border-radius: 10px; cursor: pointer; font: inherit;
}
.nav-btn { width: 40px; height: 40px; font-size: 1.4rem; line-height: 1; }
.today-btn { padding: 0 14px; height: 40px; font-weight: 600; }
.ghost-btn { width: 40px; height: 40px; font-size: 1.1rem; }
.lang-flag { font-size: 1.3rem; }

/* mode toggle (ate / threw away) */
.mode-toggle { display: flex; gap: 6px; margin: 16px 0 8px; }
.mode {
  flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 11px; padding: 8px; font: inherit; font-weight: 600; cursor: pointer;
}
.mode.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#mode-wasted.active { background: var(--danger); }

/* add form */
#add-form { display: flex; gap: 8px; margin: 0 0 8px; }
#add-input {
  /* min-width: 0 overrides a text input's default intrinsic size (roughly 20
     characters), which otherwise wins a fight with the Add button for space
     on a narrow phone and pushes the button off the right edge — flex: 1
     alone does not shrink a flex item below its own content width. */
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font: inherit; background: var(--card); color: var(--text);
}
#add-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.primary-btn {
  border: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 12px; padding: 0 20px; font: inherit; font-weight: 700; cursor: pointer;
}

/* candidates */
.candidates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cand-hint { color: var(--muted); font-size: 0.85rem; padding: 2px; }
.cand {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--shadow); text-align: left;
}
.cand .cand-name { flex: 1; font-weight: 600; }
.cand .grams-in {
  width: 74px; border: 1px solid var(--line); border-radius: 9px; padding: 8px;
  font: inherit; background: var(--bg); color: var(--text); text-align: right;
}
.cand .add-one {
  border: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 9px; padding: 8px 12px; font-weight: 700; cursor: pointer;
}
.badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.badge.no-impact { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.badge.basis { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* Tap-to-explain badges (raw/prepared/custom/macros only). The badge is now a
   real <button>, so it needs a positioning context for its popover and the
   usual button resets — everything else about how it looks stays the same. */
.tag-wrap { position: relative; display: inline-block; line-height: 0; }
/* `font-family` only, never the `font` shorthand: that shorthand resets
   font-size and font-weight to their inherited values too, which was
   silently overriding `.badge`'s 0.68rem/700 (same specificity, later in the
   file) and making every tag button visibly bigger than the word inside it. */
.tag-btn { cursor: pointer; border: none; font-family: inherit; line-height: 1; margin: 0; }
.tag-btn[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.tag-note {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 5;
  width: max-content; max-width: min(240px, calc(100vw - 48px));
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 0.82rem; font-weight: 400;
  line-height: 1.4; color: var(--text); text-align: left; text-transform: none;
  letter-spacing: normal; white-space: normal;
}

/* custom food form */
.custom-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; box-shadow: var(--shadow);
}
.cf-in { border: 1px solid var(--line); border-radius: 9px; padding: 10px;
  font: inherit; background: var(--bg); color: var(--text); }
.cf-row { display: flex; gap: 8px; }
.cf-row .cf-in { flex: 1; }
.cf-macros summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 2px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cf-grid label { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--muted); gap: 3px; }
.cf-grid input { border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  font: inherit; background: var(--bg); color: var(--text); }
/* Provenance for hand-entered impact figures: set apart from the numbers so
   it reads as "where this came from", not as another value to fill in. */
.cf-src { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
          display: flex; flex-direction: column; gap: 8px; }
.cf-src-lbl { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.cf-actions { display: flex; gap: 8px; align-items: stretch; }
.cf-actions .primary-btn { flex: 1; padding: 11px 20px; }
.ghost-cancel {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 12px; padding: 0 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.ghost-cancel.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.cand-edit, .entry-edit {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 1rem; padding: 2px 4px; line-height: 1;
}
.cand-edit:hover, .entry-edit:hover { color: var(--accent); }
.cand-new {
  border: 1px dashed var(--line); background: none; color: var(--muted);
  border-radius: 12px; padding: 10px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.cand-new:hover { color: var(--accent); border-color: var(--accent); }
.cand-more { border-style: solid; }

/* daily weigh-in */
.weigh-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.weigh-row label { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.weigh-row input {
  width: 84px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font: inherit; background: var(--card); color: var(--text); text-align: right;
}
.weigh-row input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.weigh-row .unit { font-size: 0.8rem; color: var(--muted); }
.weigh-row button { padding: 0 10px; height: 34px; }

/* summary */
.summary { margin: 4px 0 18px; }
/* The things you type into stay a comfortable target width; only the content
   that benefits from room (cards, charts, the map) uses the full column. */
@media (min-width: 640px) {
  #add-form, #candidates, .weigh-row, .mode-toggle { max-width: 620px; }
  /* The date picker is a button, and a button 1080px wide stops reading as one.
     Capped on the middle element rather than on the row: `.date-nav` is itself
     a `.wrap`, so a max-width there inherits `margin: 0 auto` and centres the
     whole control away from the left edge everything below it lines up on. */
  .date-wrap { max-width: 420px; }
}
.summary-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.summary h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); margin: 0 0 10px; }
.macro-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.macro { display: flex; flex-direction: column; }
.macro .v { font-size: 1.15rem; font-weight: 700; }
.macro .k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.impact {
  border-radius: 12px; padding: 10px; background: var(--bg); border: 1px solid var(--line);
}
.impact .lbl { font-size: 0.7rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.impact .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.impact.ghg .dot { background: var(--ghg); } .impact.ghg .val { color: var(--ghg); }
.impact.land .dot { background: var(--land); } .impact.land .val { color: var(--land); }
.impact.water .dot { background: var(--water); } .impact.water .val { color: var(--water); }
.impact .val { font-size: 1.02rem; font-weight: 700; margin-top: 3px; }
.impact .val small { font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.impact .avg-days { font-size: 0.64rem; color: var(--muted); margin-top: 2px; }
/* A figure covering only part of the logged mass reads as a floor, not a total. */
.impact.partial { border-style: dashed; }
.impact .lb { opacity: 0.75; font-weight: 700; cursor: help; }
.impact .cov-note { font-size: 0.64rem; color: var(--danger); margin-top: 2px; }
.chart-avg.partial { color: var(--danger); }
.chart .marker.hollow { stroke-width: 1.8; }
.lg-hollow {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: var(--card); border: 2px solid var(--muted); margin-left: 4px; flex: none;
}
.danger-text { color: var(--danger); }
.coverage { margin-top: 12px; font-size: 0.82rem; }
.coverage.gap { color: var(--danger); }
.coverage.ok { color: var(--muted); }

/* entries */
.entries { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 28px; }
.entries .section-head { grid-column: 1 / -1; }
@media (min-width: 720px) { .entries { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .entries { grid-template-columns: 1fr 1fr 1fr; } }
.entry {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px;
}
.entry-top { display: flex; align-items: baseline; gap: 8px; }
.entry-name { font-weight: 700; flex: 1; }
.entry-grams {
  color: var(--muted); font-variant-numeric: tabular-nums; font: inherit;
  background: none; border: none; border-bottom: 1px dotted currentColor;
  cursor: pointer; padding: 0 1px;
}
.entry-grams:hover { color: var(--accent); }
.grams-edit {
  width: 74px; font: inherit; text-align: right; border: 1px solid var(--accent);
  border-radius: 8px; padding: 4px 6px; background: var(--bg); color: var(--text);
}
.entry-del {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 1.1rem; padding: 2px 4px; line-height: 1;
}
.entry-del:hover { color: var(--danger); }
.entry-macros { color: var(--muted); font-size: 0.84rem; margin: 6px 0 8px; }
.entry-impacts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.86rem; }
.entry-impacts .ei { display: inline-flex; align-items: center; gap: 5px; }
.entry-impacts .dot { width: 7px; height: 7px; border-radius: 50%; }
.entry-impacts .ghg .dot { background: var(--ghg); }
.entry-impacts .land .dot { background: var(--land); }
.entry-impacts .water .dot { background: var(--water); }
.entry-impacts .ei.nodata { color: var(--muted); font-style: italic; }
.entry-impacts .ei.nodata .dot { background: var(--muted); }
.entry-nodata { color: var(--muted); font-size: 0.84rem; font-style: italic; }
.section-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin: 20px 2px 8px; }
.entry.wasted { border-style: dashed; }
.entry.wasted .entry-name { color: var(--muted); }
.badge.waste-badge { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.waste-line { margin-top: 12px; font-size: 0.83rem; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  padding: 9px 11px; border-radius: 9px; }
.entry-src { margin-top: 8px; font-size: 0.72rem; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }

/* tabs */
.tabs { display: flex; gap: 6px; margin: 14px 0 4px; }
.tab {
  flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 11px; padding: 9px; font: inherit; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.header-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* trends / charts */
.trends-head { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 2px; }
.trends-head h2 { font-size: 0.9rem; margin: 0; }
.trends-head .muted { font-size: 0.78rem; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.78rem; color: var(--muted); margin: 0 2px 8px; }
.chart-legend .lg-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend .lg-swatch.eat { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.chart-legend .lg-swatch.waste { background: color-mix(in srgb, var(--danger) 55%, transparent); margin-left: 6px; }
.chart-legend .lg-note { margin-left: 2px; }
/* reference-diet overlay controls */
.ref-diets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 2px 8px; }
.ref-lbl { font-size: 0.78rem; color: var(--muted); margin-right: 2px; }
.ref-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 5px 11px 5px 22px; position: relative;
}
.ref-btn::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 0; border-top: 2px dashed var(--rc);
}
.ref-btn.active { border-color: var(--rc); color: var(--text);
  background: color-mix(in srgb, var(--rc) 12%, transparent); }
.export-row { margin: 2px 0 10px; }
.export-row a { text-decoration: none; display: inline-block; }
.ref-caveat { font-size: 0.76rem; color: var(--muted); margin: 0 2px 10px; line-height: 1.4; }
.ref-caveat a { color: inherit; }
.chart .ref-tick { font-size: 8px; font-weight: 700; }
.charts { display: grid; grid-template-columns: 1fr; gap: 12px; padding-bottom: 28px; }
@media (min-width: 460px) { .charts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .charts { grid-template-columns: 1fr 1fr 1fr; } }
.chart {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 12px 8px;
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.chart-title { font-size: 0.82rem; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.cdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.chart-nums { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.chart-avg { font-size: 0.72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-latest { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-latest small { font-weight: 600; color: var(--muted); font-size: 0.7rem; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
/* A matplotlib-style frame: solid gridlines at every labelled value (not just
   top and bottom), one shade more visible than a card border so the chart
   reads as a chart while glancing past it, not just up close. */
.chart .axis { stroke: var(--grid); stroke-width: 1; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 9.5px; }
.chart .tick.unit { fill: var(--muted); font-size: 8.5px; font-style: italic; }
.chart .series { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .marker { stroke: var(--card); stroke-width: 1.5; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-empty { color: var(--muted); text-align: center; padding: 26px 10px; }

/* about page */
.page { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.page h2 { margin: 18px 0 8px; scroll-margin-top: 90px; }
.page h3 { margin: 22px 0 6px; font-size: 1rem; scroll-margin-top: 90px; }
.page p { margin: 6px 0; }
.metric-def {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; scroll-margin-top: 90px;
}
.metric-def h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 7px; }
.metric-def .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.metric-def.ghg .dot { background: var(--ghg); }
.metric-def.land .dot { background: var(--land); }
.metric-def.water .dot { background: var(--water); }
.warn-h { color: var(--danger); }
.warn { background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-left: 3px solid var(--danger); padding: 10px 12px; border-radius: 8px; }
.sources { padding-left: 18px; margin: 0; }
.sources li { margin-bottom: 8px; }
.method-list { padding-left: 20px; margin: 6px 0; }
.method-list li { margin-bottom: 6px; }
/* The one calculation a section rests on, set apart from the prose so it can be
   found without reading the paragraph around it. */
.method-calc {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; font-size: 0.92rem; white-space: pre-wrap;
  overflow-x: auto;
}
.method-table { border-collapse: collapse; width: 100%; margin: 8px 0 4px;
  font-size: 0.88rem; }
.method-table caption { caption-side: top; text-align: left; color: var(--muted);
  font-size: 0.78rem; padding-bottom: 6px; }
.method-table th, .method-table td { padding: 5px 6px; border-top: 1px solid var(--line);
  text-align: right; }
.method-table th, .method-table tr > *:first-child { text-align: left; }
.method-table td { font-variant-numeric: tabular-nums; }
.method-table tr.sub > * { color: var(--muted); padding-left: 14px; }
.method-table tr.total > * { border-top-width: 2px; font-weight: 700; }
.muted { color: var(--muted); font-size: 0.85rem; }
.back-link { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.metric-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--danger); color: #fff;
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 60;
  font-size: 0.9rem; max-width: 90%;
}

/* ---- world view ---- */
.world-intro { color: var(--muted); font-size: 0.85rem; margin: 0 2px 4px; line-height: 1.5; }
.world-figure { margin: 12px 0 4px; }
#world-canvas {
  width: 100%; height: auto; display: block; border-radius: 12px;
  background: #0f1a24; image-rendering: auto;
}
.world-ratio { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.world-ratio .v { font-size: 2.1rem; font-weight: 700; color: var(--land); line-height: 1; }
.world-ratio .k { color: var(--muted); font-size: 0.9rem; }
.world-ratio.partial .v { color: var(--muted); }
.good-text { color: var(--land); }

/* The table must fit the screen without sideways scrolling, so the unit lives
   in the caption instead of being repeated in all sixteen cells. The scroll
   wrapper is the safety net for the narrowest real devices — the table itself
   never carries more than four columns (world/you, plus vegan/vegetarian only
   in "today" mode; see `activeScenarioKeys` in world.js), so it normally has
   room to spare. */
.world-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.world-table { border-collapse: collapse; width: 100%; table-layout: fixed;
  font-size: 0.74rem; margin: 10px 0 2px; }
.world-table caption { caption-side: top; text-align: left; color: var(--muted);
  font-size: 0.72rem; padding-bottom: 6px; }
.world-table th, .world-table td {
  padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.world-table thead th { text-align: right; font-size: 0.7rem; }
.world-table thead th.corner {
  text-align: left; color: var(--muted); font-weight: 600; width: 33%;
}
.world-table thead th button {
  overflow-wrap: break-word;
  border: none; background: none; font: inherit; color: var(--muted);
  cursor: pointer; padding: 4px 3px; border-radius: 8px; width: 100%;
  display: block; text-align: right; line-height: 1.25;
}
.world-table thead th button span { display: block; font-weight: 700; color: var(--text); }
.world-table thead th button em { display: block; font-style: normal; font-size: 0.94em; }
.world-table thead th.sel button { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* NOTE: no display:flex on a table cell — it drops the cell out of table layout
   and collapses its row's height. The dot is an inline-block instead. */
.world-table tbody th { text-align: left; font-weight: 600; }
.world-table tbody th button {
  border: none; background: none; font: inherit; font-weight: 600; color: var(--text);
  cursor: pointer; padding: 2px 0; text-align: left; display: block; width: 100%;
}
.world-table tbody th .dot {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
  margin-right: 6px; vertical-align: middle;
}
.world-table tbody th .ico {
  color: var(--muted); font-size: 0.85em; margin-left: 4px; vertical-align: middle;
}
.world-table td { text-align: right; font-variant-numeric: tabular-nums; }
.world-table td.sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wt-v { display: block; }
.wt-p { display: block; font-size: 0.92em; }
.wt-p.up { color: var(--land); }
.wt-p.down { color: var(--danger); }
.wt-p.flat { color: var(--muted); }

/* Greenhouse gas row: a different unit than every row above it (kg CO2e/day,
   not km²), so a heavier top border marks it as a break rather than another
   land category. */
.world-table tr.wt-ghg th, .world-table tr.wt-ghg td { border-top: 2px solid var(--line); }
.world-table tr.wt-ghg th .ico2 {
  display: block; font-weight: 400; color: var(--muted); font-size: 0.85em;
}
.world-diet-explainer {
  margin: 8px 0 10px; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; font-size: 0.85rem;
  line-height: 1.45; color: var(--text);
}

/* Definition bubble, rendered as an in-flow row so it can never overflow the
   viewport the way an absolutely-positioned popover would on a phone. */
.wt-info td { background: var(--bg); border-bottom: 1px solid var(--line); padding: 0; }
.wt-info .bubble {
  position: relative; margin: 8px 2px 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); font-size: 0.95em; font-weight: 400;
  color: var(--text); line-height: 1.45; text-align: left;
}
.wt-info .bubble::before {
  content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
  background: var(--card); border-left: 1px solid var(--line);
  border-top: 1px solid var(--line); transform: rotate(45deg);
}
.wt-info .bubble .src { display: block; margin-top: 6px; color: var(--muted); font-size: 0.9em; }
.wt-info .bubble .close {
  position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px;
}

/* Legend doubles as a control: tapping a category greys it out on the map so
   the others can be read against it. Visual only — no total changes. */
.chart-legend .lg-item {
  border: 1px solid transparent; background: none; font: inherit;
  font-size: inherit; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px; border-radius: 999px; line-height: 1.3;
}
.chart-legend .lg-item:hover { border-color: var(--line); }
.chart-legend .lg-item.off { color: var(--muted); text-decoration: line-through; }
.chart-legend .lg-item .lg-swatch { margin: 0; }

/* --- population control ------------------------------------------------ */
/* Above the table and the chart rather than beside either, because it drives
   both: the two right-hand columns, the map when one is showing, and every
   year of the emissions projection. */
.pop-control { margin: 14px 0 6px; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pop-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pop-row label { font-size: 0.84rem; font-weight: 600; }
.pop-row input[type="range"] { flex: 1 1 200px; min-width: 160px; accent-color: var(--accent); }
.pop-row output { font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 1.05rem; min-width: 4.5em; text-align: right; }
.pop-note { font-size: 0.74rem; color: var(--muted); margin: 8px 2px 0; line-height: 1.4; }

/* --- climate projection ------------------------------------------------ */
.climate { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.climate h3 { margin: 0 0 4px; font-size: 1.05rem; }
.climate-figure { margin: 12px 0 6px; }
.climate-svg { width: 100%; height: auto; display: block; overflow: visible; }
.climate-svg .axis { stroke: var(--grid); stroke-width: 1; }
.climate-svg .axis.grid { stroke: var(--grid); }
.climate-svg .tick { fill: var(--muted); font-size: 9.5px; }
.climate-svg .tick.unit { fill: var(--muted); font-size: 8.5px; font-style: italic; }
.climate-svg .series { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.climate-svg .marker { stroke: var(--card); stroke-width: 1.2; }
.climate-svg .hit { fill: transparent; cursor: pointer; }
.climate-table { border-collapse: collapse; width: 100%; margin: 4px 0 2px;
  font-size: 0.86rem; }
.climate-table th, .climate-table td { padding: 6px 4px; border-top: 1px solid var(--line);
  text-align: right; }
.climate-table th[scope="row"] { text-align: left; font-weight: 600; }
.climate-table td { font-variant-numeric: tabular-nums; }
/* The climate legends: real toggle buttons now (click to show/hide that line,
   same affordance the world map's legend already has via the base `.lg-item`
   rules above), but bolder and with a bigger swatch than that one — this is
   the only place that says which line is which on the climate charts, so it
   cannot fall back to a de-emphasised aside even while "off". */
#climate-legend .lg-item, #all-legend .lg-item { font-size: 0.86rem; font-weight: 600; }
#climate-legend .lg-item .lg-swatch, #all-legend .lg-item .lg-swatch { width: 15px; height: 15px; }
/* The land headline is always green because a bigger or smaller world map is
   not itself good or bad. More greenhouse gas is. */
.world-ratio .v.bad { color: var(--danger); }
/* A dashed line in the chart gets a hollow swatch, so the key matches the mark
   rather than just repeating its colour. */
.chart-legend .lg-swatch.dashed { background: none; border: 2px dashed currentColor; }
/* The population strip sits directly under the chart and shares its x axis, so
   it must not carry a margin that would let the two drift apart visually. */
.climate-svg.pop-strip { margin-top: -4px; }

/* --- who to compare against -------------------------------------------- */
/* A segmented control rather than three pill buttons: the three options are one
   mutually exclusive choice, and pills read as independent toggles — which is
   what the reference-diet buttons above genuinely are. */
.baseline-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 10px; }
.baseline-pick .lbl { font-size: 0.78rem; color: var(--muted); }
.baseline-note { flex-basis: 100%; font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--card); }
.seg {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 0; border-left: 1px solid var(--line); background: none;
  color: var(--muted); padding: 5px 12px;
}
.seg:first-child { border-left: 0; }
.seg:hover { color: var(--text); }
.seg.on { background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text); }

/* --- import from text --------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.import-panel { margin: 0 0 12px; }
.import-panel textarea {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace;
  font-size: 0.78rem; line-height: 1.35; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); resize: vertical;
  /* The export is a fixed-width table; wrapping it would make a pasted file
     unreadable in the box it was pasted into. */
  white-space: pre; overflow-x: auto;
}
.import-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; }
.import-row label { font-size: 0.78rem; color: var(--muted); }
.import-row select {
  font: inherit; font-size: 0.8rem; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.import-report { margin-top: 10px; font-size: 0.82rem; }
.import-report .im-head { margin: 0 0 6px; }
.import-report .im-head.bad { color: var(--danger); }
.import-report ul { list-style: none; padding: 0; margin: 0 0 8px; }
.import-report li { padding: 5px 0; border-top: 1px solid var(--line); }
.im-ok strong { color: var(--accent); }
.im-warn strong { color: var(--ghg); }
.im-bad strong { color: var(--danger); }
.im-muted { color: var(--muted); }
.im-line { font-family: ui-monospace, monospace; font-size: 0.76rem;
  color: var(--muted); margin-top: 2px; overflow-x: auto; white-space: pre; }
.im-cands { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

/* Your data — the panel that says where the log actually lives. Deliberately
   plainer than the charts around it: it is the one place in the app that is
   about the app rather than about food, and it has to read as information
   rather than as another visualisation. */
#data-status { margin: 0 0 4px; }
#data-status p { margin: 0 0 6px; }
#data-status strong { color: var(--text); font-weight: 600; }
#data-status .ok { color: var(--accent); }
#data-status .warn-text { color: var(--danger); }
#data-panel .import-row { margin-top: 10px; }


/* "Run it on your own machine" — a small window, opened from the header ⤓.
   A <dialog> so the browser handles the backdrop, focus trapping and Escape;
   there is no framework here to do it and no reason to hand-roll it. */
.get-app {
  max-width: 520px; width: calc(100% - 32px); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--text);
  padding: 18px 20px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.get-app::backdrop { background: rgba(0, 0, 0, 0.45); }
/* showModal() focuses the close button, so the ring is the first thing you see.
   The browser default is a bright system colour that belongs to no palette here. */
.get-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.get-app h2 { margin: 0 26px 10px 0; font-size: 1.05rem; }
.get-app p { margin: 8px 0; font-size: 0.88rem; }
.get-app code {
  font-size: 0.85em; background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 4px;
}
.get-app-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.get-app-close button { font-size: 1.2rem; line-height: 1; padding: 2px 8px; }
.get-app-need { margin: 14px 0 4px !important; font-size: 0.78rem !important;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.get-app-need strong { font-weight: 700; }
.get-app-list { margin: 0; padding-left: 20px; font-size: 0.88rem; }
.get-app-list li { margin: 5px 0; }
.get-app-code {
  font-family: ui-monospace, monospace; font-size: 0.86rem; margin: 4px 0 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; overflow-x: auto;
}
.get-app-dl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 4px !important; }
.get-app-btn { text-decoration: none; display: inline-block; }
.get-app-size { font-size: 0.78rem; color: var(--muted); }
.get-app-note {
  margin-top: 14px !important; font-size: 0.8rem !important; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.nowrap { white-space: nowrap; }

/* Folded-away background prose. Styled to read as "there is more here if you
   want it" rather than as a control: no box, no button, just a line that turns
   the accent colour on hover. Warnings never use this — see ui.js. */
.note { margin: 6px 2px 12px; }
.note > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 6px; font-size: 0.78rem; color: var(--muted); padding: 3px 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 45%, transparent);
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::before {
  content: "›"; display: inline-block; font-size: 0.95rem; line-height: 1;
  transition: transform 0.15s ease;
}
.note[open] > summary::before { transform: rotate(90deg); }
.note > summary:hover { color: var(--accent); border-bottom-color: var(--accent); }
.note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.note-body {
  font-size: 0.76rem; color: var(--muted); line-height: 1.5; padding: 8px 0 2px;
  border-left: 2px solid var(--line); padding-left: 12px; margin-top: 6px;
}
.note-body p { margin: 0 0 8px; }
.note-body p:last-child { margin-bottom: 0; }
.note-body a { color: inherit; }
.note-body strong { color: var(--text); }
@media (min-width: 640px) { .note-body { max-width: 68ch; } }