/* ==========================================================================
   Base - reset, page frame, navigation, typography, generic tables
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  background: var(--c-surface-page);
  color: var(--c-text);
  max-width: 820px;
  margin: 0 auto;
  padding: 1rem;
  /* Slightly lighter rendering; Source Sans is a touch dark at 15px */
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the serif — the one place the superfamily shows itself. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
}

nav {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: 1.5rem;
}

nav a { color: var(--c-text-muted); text-decoration: none; font-weight: var(--fw-medium); }
nav a:hover { color: var(--c-text-black); }

h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); margin: 1.5rem 0 0.6rem; }

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-md);
  /* Fixed-width digits, so kcal columns line up on the decimal instead of
     wandering. The single biggest legibility win in a table of numbers. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

th {
  text-align: left;
  font-weight: var(--fw-semibold);
  padding: 0.4rem 0.5rem;
  border-bottom: 2px solid var(--c-border);
  color: var(--c-text-muted);
}

td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--c-border-faint); }
tr:last-child td { border-bottom: none; }

tfoot tr.totals td {
  font-weight: var(--fw-semibold);
  border-top: 2px solid var(--c-border);
  border-bottom: none;
  padding-top: 0.5rem;
}

/* ── Focus ──
   :focus-visible only, so the ring shows for keyboard users and never on a
   mouse click. Inputs override this with their own ring in components.css. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Misc ── */
.add-section { margin-top: 1.5rem; }
.muted { color: var(--c-text-fainter); font-size: var(--t-sm); }
.empty { color: var(--c-text-faint); font-style: italic; margin: 0.4rem 0 0.8rem; }
.hint { font-size: var(--t-xs); color: var(--c-text-faint); margin-top: 0.25rem; }
.hint-inline { font-size: var(--t-xs); color: var(--c-text-faintest); font-weight: var(--fw-normal); }
.freq-hint { font-size: var(--t-2xs); color: var(--c-text-faintest); }

/* ── Bug report footer ── */
.bug-report-footer { max-width: 600px; margin: 2rem auto 1rem; padding: 0 1rem; font-size: var(--t-sm); }
.bug-report-footer summary { cursor: pointer; color: var(--c-text-faint); }
.bug-report-footer summary:hover { color: var(--c-text-muted); }