/* Default theme: already strong contrast (text ~15:1, borders ~4.5:1), not an
   afterthought — but data-contrast="high" below goes further again for users
   who need it. */
:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #55534f;
  --border: #c9c6bf;
  --primary: #2f5d3a;
  --primary-text: #ffffff;
  --danger: #8a2a1f;
  --success-bg: #e6f2e8;
  --success-text: #1c4023;
  --error-bg: #fbe9e6;
  --error-text: #6b2015;
  --focus: #1a4fd6;
  --radius: 0.5rem;
}

html[data-contrast="high"] {
  --bg: #000000;
  --surface: #000000;
  --text: #ffffff;
  --muted: #ffffff;
  --border: #ffffff;
  --primary: #ffe600;
  --primary-text: #000000;
  --danger: #ff6b52;
  --success-bg: #003d0f;
  --success-text: #ffffff;
  --error-bg: #4a0000;
  --error-text: #ffffff;
  --focus: #ffe600;
  --radius: 0.25rem;
}

* { box-sizing: border-box; }

html {
  font-size: 112.5%; /* ~18px base */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: 5rem; /* room for the fixed bottom nav on mobile */
}

html[data-contrast="high"] body,
html[data-contrast="high"] * {
  text-shadow: none !important;
  box-shadow: none !important;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: var(--primary-text);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a { color: var(--primary); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}
.site-header .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}
.brand-logo {
  height: 2.25rem;
  width: auto;
}
.brand-text {
  /* Visually hidden but still announced by screen readers — the logo image
     is decorative (alt=""); this span is the link's real accessible name. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
html[data-contrast="high"] .brand-logo {
  /* Raster logo has a fixed white background/pixel colours that don't
     follow the high-contrast palette — show the text brand instead. */
  display: none;
}
html[data-contrast="high"] .brand-text {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: 1.4rem;
  font-weight: 700;
}

.login-logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}
html[data-contrast="high"] .login-logo {
  display: none;
}
/* Below the breakpoint: bottom tab bar covers the 5 core destinations, and
   .nav-mobile (a <details> dropdown) covers the rest (My foods, Saved meals,
   Recipes, Water, Log out) plus itself. 1000px rather than the old 720px is
   deliberate: a landscape phone (up to ~930px wide) used to cross that
   threshold and flip on the flat 10-link .nav-desktop row, which doesn't fit
   on one line at that width and wrapped to a messy two lines. Any phone,
   portrait or landscape, now stays in dropdown mode; only genuinely spacious
   viewports get the flat row. */
.site-header nav.nav-desktop {
  display: none;
}
.site-header .nav-mobile {
  display: block;
}
@media (min-width: 1000px) {
  .site-header nav.nav-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
  .site-header .nav-mobile { display: none; }
  body { padding-bottom: 2rem; }
  .bottom-nav { display: none; }
}
.site-header nav.nav-desktop a,
.site-header .nav-mobile nav a {
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem;
}

/* Mobile nav dropdown: same custom-chevron + state-changing-label pattern as
   .nutrition-details (see below), not the bare browser-default marker. */
.nav-mobile {
  margin: 0;
}
.nav-mobile > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.nav-mobile > summary::-webkit-details-marker,
.nav-mobile > summary::marker {
  display: none;
  content: '';
}
.nav-mobile > summary::after {
  content: '\25B8'; /* ▸ */
  display: inline-block;
  font-size: 1.1rem;
  color: var(--primary);
  transition: transform 0.15s ease;
}
.nav-mobile[open] > summary::after { transform: rotate(90deg); }
.nav-mobile .when-open { display: none; }
.nav-mobile[open] .when-closed { display: none; }
.nav-mobile[open] .when-open { display: inline; }
.nav-mobile > nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.nav-mobile > nav a {
  padding: 0.75rem 0.5rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
}
.nav-mobile > nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem;
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 2px solid var(--border);
  z-index: 50;
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.25rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 3.25rem;
}
.bottom-nav a[aria-current="page"] {
  color: var(--primary);
  border-top: 3px solid var(--primary);
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
h3 { font-size: 0.95rem; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.75rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

input, select, textarea {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem;
  min-height: 3rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 1rem;
}

fieldset {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1rem;
}
legend {
  font-weight: 700;
  padding: 0 0.5rem;
}

.field-row {
  display: flex;
  gap: 0.75rem;
}
.field-row > * { flex: 1; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.checkbox-row input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  margin: 0;
  flex-shrink: 0;
}
.checkbox-row label { margin: 0; font-weight: 500; }

.sharing-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.sharing-row:last-child { border-bottom: none; }
.sharing-row p { margin: 0 0 0.4rem; }
.sharing-row select { margin-bottom: 0.6rem; }
.sharing-row .checkbox-row { margin-bottom: 0; }

button, .btn {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  min-height: 3rem;
  border-radius: var(--radius);
  border: 2px solid var(--primary);
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border: 2px solid var(--danger);
}
.btn-block { display: block; width: 100%; }
.btn-small { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.95rem; }

.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.message {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-weight: 600;
  border: 2px solid transparent;
}
.message.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-text); }
.message.error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-text); }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
th { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.stat {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.stat .stat-value { font-size: 1.6rem; font-weight: 800; display: block; }
.stat .stat-label { color: var(--muted); font-size: 0.85rem; }

.progress-bar {
  height: 1rem;
  border: 2px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 0.25rem;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
}
.progress-bar.over > span { background: var(--danger); }

.macro-pie-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.macro-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  border: 1px solid var(--border);
  margin-right: 0.4rem;
  vertical-align: middle;
}
/* Hex values match the fills MACRO_COLORS in chart.js draws in the SVG
   itself (an SVG fill can't reference a class, so both places must be kept
   in sync by hand if these ever change). */
.macro-swatch-carbs { background: #2a78d6; }
.macro-swatch-fat { background: #e87ba4; }
.macro-swatch-protein { background: #eda100; }
html[data-contrast="high"] .macro-pie-svg {
  /* Three-hue identity doesn't survive the high-contrast theme's single
     yellow-on-black palette — hide it and rely on the always-present
     Total/Goal table below, same pattern as .login-logo/.brand-logo. */
  display: none;
}
.macro-pie-kcal { margin: 0 0 0.5rem; }

.nutrition-details {
  margin: 0 0 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0.85rem;
}
/* A bare browser-default disclosure triangle is easy to miss, especially
   under screen magnification where it can end up small relative to the rest
   of the row — replace it with an explicit, larger custom chevron plus a
   "Show/Hide nutrition" label that changes with state, rather than relying
   on the marker alone to communicate that this row expands. */
.nutrition-details > summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  list-style: none;
}
.nutrition-details > summary::-webkit-details-marker,
.nutrition-details > summary::marker {
  display: none;
  content: '';
}
/* flex-basis: 100% forces this onto its own full-width line every time,
   pushing .nutrition-toggle-label onto a second line below it rather than
   letting them compete for space on one row. On mobile-width cards there
   usually isn't enough room for a food name *and* "Hide nutrition" side by
   side (the toggle label alone is ~140-150px), and the old side-by-side
   layout (flex: 1 1 auto; min-width: 0) let the toggle's fixed width crush
   the name/qty column down to a one-word-per-line sliver instead — always
   stacking is simpler and correct at every viewport width, not just a
   guessed breakpoint. */
.nutrition-summary-content { font-weight: 400; flex: 1 1 100%; min-width: 0; }
.nutrition-toggle-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary);
  white-space: nowrap;
  margin-left: auto;
}
.nutrition-toggle-label::before {
  content: '\25B8'; /* ▸ */
  display: inline-block;
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}
.nutrition-details[open] > summary .nutrition-toggle-label::before { transform: rotate(90deg); }
.nutrition-details .when-open { display: none; }
.nutrition-details[open] .when-closed { display: none; }
.nutrition-details[open] .when-open { display: inline; }
.nutrition-details[open] > summary { border-bottom: 1px solid var(--border); }
/* table-layout: fixed pins column widths to the table box (width: 100% of
   the disclosure's content area) instead of to content, so the macro table
   can never grow past its box and shove the right-aligned "% of calories"
   column over the border — an auto-layout table can't shrink below its own
   min-content width, which is exactly how it used to overflow a squeezed
   box on mobile. */
.nutrition-details table { margin-bottom: 0.85rem; table-layout: fixed; width: 100%; }

/* An already-logged diary entry: the expandable nutrition disclosure above
   plus an always-visible Edit link beside it (not nested inside <summary> —
   a link inside a <summary> creates ambiguous click-to-toggle-or-navigate
   behaviour), so checking nutrition never costs you the Edit action. */
.diary-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.diary-item:last-child { border-bottom: none; }
/* Collapsed, the disclosure sits beside the Edit button (compact — there's
   no table to overflow yet). Open, it claims the whole row so the pie and
   macro table get the full card width, and the Edit button wraps onto its
   own line below, right-aligned (margin-left: auto). This is what stops the
   "% of calories" column spilling past the box: side-by-side with Edit, the
   box was squeezed too narrow for the table on a phone. */
.diary-item > .nutrition-details { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.diary-item > .nutrition-details[open] { flex-basis: 100%; }
.diary-item > .diary-item-summary { flex: 1 1 auto; min-width: 0; padding: 0.6rem 0; }
.diary-item > .btn { flex: 0 0 auto; margin-left: auto; }

.muted { color: var(--muted); }
.text-right { text-align: right; }

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}

.action-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.inline-form {
  display: inline;
}