:root {
  color-scheme: light;
  --bg: #eae5da;
  --bg-panel: #e2dccd;
  --ink: #1c1a16;
  --ink-soft: #3a362f;
  --muted: #726c5f;
  --border: #d3cbb8;
  --line-dark: rgba(255, 255, 255, 0.22);
  --paper: #f6f3ea;

  --font-serif: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Type helpers ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.eyebrow::before { content: "[ "; }
.eyebrow::after { content: " ]"; }
.eyebrow--light { color: rgba(255, 255, 255, 0.82); }
.eyebrow a { text-decoration: none; border-bottom: 1px solid transparent; }
.eyebrow a:hover { border-color: currentColor; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
}
.link-arrow::before { content: "\2198"; }
.link-arrow--light { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.7rem 1.1rem;
  background: transparent;
  cursor: pointer;
}
.btn-outline::before { content: "\2198"; }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-outline--block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* That border reads as a harsh, out-of-place bright line where it meets the
   ticker's dark background right below it — dropped only in that case; a
   page with no ticker keeps the border as normal separation from content. */
.site-header:has(+ .site-ticker:not([hidden])) { border-bottom: none; }

/* Scrolling announcement bar under the header (see base.html /
   admin_ticker.html) — a classic marquee, built by duplicating the message
   list once so the loop point (translateX 0 -> -50%) is seamless: both
   halves of the track are identical, so the reset is invisible. No border of
   its own either — the dark background is already a clean, strong enough
   break from the page on either side without an extra line on top of it. */
.site-ticker { overflow: hidden; white-space: nowrap; background: var(--ink-soft); }
/* Belt-and-braces: guarantees the bar (background, border, height from its
   own padding) truly takes up zero space with no messages configured,
   rather than relying only on the `hidden` attribute's default browser
   styling, which a same-specificity rule elsewhere could in principle
   override. */
.site-ticker[hidden] { display: none; }
.site-ticker__track { display: inline-flex; width: max-content; animation: site-ticker-scroll 32s linear infinite; }
.site-ticker:hover .site-ticker__track { animation-play-state: paused; }
.site-ticker__item {
  flex: 0 0 auto; padding: 0.08rem 2rem 0.08rem 0; font-family: var(--font-mono); font-size: 0.64rem;
  line-height: 1.2; color: var(--bg); letter-spacing: 0.01em;
}
.site-ticker__item::before { content: '\25CF'; margin-right: 0.5rem; font-size: 0.45rem; vertical-align: middle; opacity: 0.6; }
@keyframes site-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-ticker__track { animation: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  /* The mega-menu panel below centers itself on this element rather than on
     the small nav-item link that opens it — see the note there. */
  position: relative;
}

.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-links a { text-decoration: none; color: var(--ink-soft); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav-links a:hover { border-color: var(--ink); color: var(--ink); }

.nav-links__separator { width: 1px; align-self: stretch; background: var(--border); }

/* No position:relative here on purpose — the mega-menu panel this wraps is
   positioned relative to .site-nav instead (see there), so it centers on
   the whole nav bar rather than on this one small link, which could sit
   anywhere left-to-right in the row and would otherwise push a wide,
   multi-column panel off one edge of the screen. */
.nav-item { display: flex; align-items: center; gap: 0.25rem; }
.nav-item__toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.2rem;
}
.nav-item__toggle:hover { color: var(--ink); }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.75rem;
  min-width: 320px;
  max-width: min(420px, calc(100vw - 2rem));
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(28, 26, 22, 0.14);
  padding: 1.25rem 1.5rem;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 30;
  /* Reset the nav's own mono/uppercase typography — it inherits down through
     .nav-item into this panel otherwise, overriding the admin's own formatting. */
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.nav-item--open .mega-menu { display: flex; }

.mega-menu a { color: var(--ink); }
.mega-menu a:hover { color: var(--muted); }
.mega-menu p { margin: 0 0 0.4rem; }
.mega-menu ol { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.mega-menu img { max-width: 100%; height: auto; display: block; margin: 0.3rem 0; }
/* Bullet-free nested lists, indenting one step per level — used for the
   auto-generated fallback's arbitrarily deep subtree, and for any bullet list
   the admin adds by hand. */
.mega-menu ul { list-style: none; margin: 0 0 0.3rem; padding-left: 0; }
.mega-menu li { margin: 0.2rem 0; }
.mega-menu li ul { margin: 0.2rem 0 0.2rem 0.9rem; }
/* A heading at the top of a column reads as that column's section label —
   e.g. "Industries" over a stack of related links — styled like the site's
   other small-caps section labels (.side-panel__label, .content-page__meta)
   rather than a full serif page heading. min-height + flex-end reserves room
   for a two-line label (e.g. "Micro and Macronutrients") and bottom-anchors
   shorter ones, so every column's underline sits on the same row regardless of
   how many lines its own label wraps to. */
.mega-menu h2, .mega-menu h3 {
  display: flex;
  align-items: flex-end;
  min-height: 2.6em;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-menu blockquote {
  margin: 0.4rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-style: italic;
}
/* The vertical-line marker (mm-col-break) is consumed by base.html's column
   split and never reaches this panel; a horizontal line (mm-hr) is a plain
   in-column divider and renders as-is. */
.mega-menu hr.mm-hr { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }
/* Tables are a layout tool here, not visible content — the grid the admin sees
   while editing (gridlines, cell borders from the table plugin) disappears on
   the live site, leaving just whatever's positioned inside each cell. */
.mega-menu table { border-collapse: collapse; width: 100%; }
.mega-menu table td, .mega-menu table th { border: none; padding: 0.3rem; vertical-align: top; }

/* Popup shown on hovering a mega-menu link, filled with that page's own Short
   teaser (fetched on demand — see base.html). One shared element reused for
   every link, not per-link markup. */
.teaser-popup {
  position: absolute;
  display: none;
  max-width: 260px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(28, 26, 22, 0.14);
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--ink-soft);
  z-index: 60;
  pointer-events: none;
}
.teaser-popup.teaser-popup--visible { display: block; }

/* When the admin inserts one or more column breaks, base.html splits the
   content into these columns instead of stacking it in one flex column.
   flex-wrap rather than Grid's auto-fit, so however many columns a section
   ends up with (this reflects real page content — one column per top-level
   child — so the count isn't fixed), it reflows onto additional rows
   instead of either overflowing past max-width (columns squeezed by
   min-width with nothing to shrink into) or needing max-width raised to
   fit a column count from any one section, which would just push the same
   problem onto whichever section gets the most children next. Grid's
   `repeat(auto-fit, ...)` needs a *definite* container width to compute a
   sensible column count and collapses to a single column without one
   (`.mega-menu` is absolutely positioned with no explicit width, only
   max-width), but flex-wrap has no such requirement.
   No `display` here deliberately — `.nav-item--open .mega-menu` (and the
   page-banner equivalent) is what actually shows/hides the panel; setting
   it here too would win the cascade at equal specificity (same single-class
   weight, but later in the file) regardless of the open/closed state,
   which is exactly the bug this comment is warning the next person off. */
.mega-menu--columns {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 2rem;
  row-gap: 1.25rem;
  min-width: unset;
  max-width: min(900px, calc(100vw - 2rem));
}
/* No divider border between columns — with wrapping, there's no reliable
   way in CSS to tell "first column overall" (:first-child) apart from
   "first column in a wrapped row" (which shouldn't get a border either),
   since how many columns fit per row changes with available width. Gap
   spacing alone still reads clearly as separate columns without that
   problem. */
.mega-menu__column {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 190px;
  min-width: 190px;
}

.auth-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-links form { margin: 0; }
.auth-link { text-decoration: none; }
.auth-link--btn { background: none; border: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; color: var(--muted); }
.auth-link--cta { border: 1px solid var(--ink); padding: 0.5rem 1rem; }
.auth-link--cta:hover { background: var(--ink); color: var(--bg); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-left: auto; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.5rem 4.5rem;
  background: var(--ink);
  color: #fff;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 100%);
}
.hero__clock {
  position: absolute;
  top: 1.75rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}
.hero__copy { position: relative; z-index: 2; max-width: 620px; }
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.hero__lede { max-width: 46ch; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; margin: 0 0 2rem; }

/* ---------- Intro / About blurb ---------- */

.intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
}
.intro__body { max-width: 68ch; }
.intro__body p {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}

/* ---------- Image band ---------- */

.image-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.image-band img { width: 100%; height: 420px; object-fit: cover; object-position: bottom; }

/* ---------- Habit index / rows ---------- */

.habit-index { max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem 2rem; }
.habit-index__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.habit-index__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); margin: 0; }

.habit-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}
.habit-row:first-child { padding-top: 0; }
.habit-row__image { overflow: hidden; }
.habit-row__image img { width: 100%; height: 190px; object-fit: cover; transition: transform 0.4s ease; }
.habit-row:hover .habit-row__image img { transform: scale(1.04); }

.habit-row__index { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; }
.habit-row__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; margin: 0 0 0.35rem; }
.habit-row__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; }
.habit-row__teaser { max-width: 60ch; color: var(--ink-soft); margin: 0 0 1.1rem; }

.habit-row--plain { grid-template-columns: 1fr; }

/* ---------- Children grid (compact "grid" layout option) ---------- */

.children-grid { max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem 2rem; }
.children-grid__head { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.children-grid__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.75rem;
}
.children-grid__tile { text-decoration: none; color: var(--ink); }
.children-grid__tile-image { overflow: hidden; }
.children-grid__tile-image img { width: 100%; height: 160px; object-fit: cover; transition: transform 0.4s ease; }
.children-grid__tile:hover .children-grid__tile-image img { transform: scale(1.04); }
.children-grid__tile-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; margin: 0.85rem 0 0.35rem; }
.children-grid__tile-teaser { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* ---------- Statement band ---------- */

.statement { background: var(--ink); color: var(--paper); text-align: center; padding: 6rem 1.5rem; }
.statement p { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.3; margin: 0; }
.statement em { font-style: italic; color: #c9a876; }

/* ---------- Page banner (category pages) ---------- */

.page-banner { position: relative; height: 56vh; min-height: 320px; }
.page-banner img { position: absolute; inset: 0; z-index: -1; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
}
.page-banner__title { font-family: var(--font-serif); font-weight: 500; color: #fff; font-size: clamp(2.25rem, 5.5vw, 3.75rem); margin: 0; }

.page-banner__title-row { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.page-banner__toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem;
  transition: color 0.15s ease, transform 0.15s ease;
}
.page-banner__toggle:hover { color: #fff; }
.page-banner__toggle[aria-expanded="true"] { transform: scaleY(-1); color: #fff; }

/* Reuses the nav bar's own .mega-menu styling (light paper background, columns,
   typography reset) so the content looks identical in both places — just
   repositioned to hang off the title row instead of centering under a nav link. */
.page-banner__mega-menu {
  top: 100%;
  left: 0;
  transform: none;
  margin-top: 0.85rem;
}
.page-banner__mega-menu.page-banner__mega-menu--open { display: flex; }

.content-page { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 5.5rem; font-size: 1.05rem; }
.content-page::after { content: ""; display: block; clear: both; }
.content-page--wide { max-width: 900px; padding-bottom: 6rem; }
.content-page__meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.75rem; }
.content-page__coming-soon {
  margin-top: 6em;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--ink);
}
.content-page p { margin: 0 0 1.25rem; color: var(--ink-soft); }
.content-page a { color: var(--ink); font-weight: 600; }
.content-page__reference { clear: both; font-size: 0.7rem; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 2rem; white-space: pre-line; }

/* Unlike the mega-menu's table (an invisible layout grid, see .mega-menu table
   above), a table in the Body is real tabular content, so it keeps visible
   gridlines here instead of hiding them. This is the default look for every
   table in a page body — bordered cells, a quiet mono/uppercase header, and
   striped rows — the same styling the Orange page's nutrient table popularised;
   it now applies without needing that "nutrient-table" class, so a table
   inserted from the toolbar looks the same without any extra setup. */
.content-page table { border-collapse: collapse; width: 100%; margin: 0 0 1.25rem; font-size: 0.92rem; }
.content-page table td, .content-page table th { border: 1px solid var(--border); padding: 0.5rem 0.7rem; vertical-align: top; text-align: left; }
/* Table-better wraps every cell's text in its own <p> (.ql-table-block /
   .table-th-block), which would otherwise inherit .content-page p's 1.25rem
   bottom margin as real, visible space inside the cell, on top of the cell's
   own padding above — puffing every row out. Quill's own stylesheet already
   zeroes paragraph margins in the editor, so this only actually shows up on
   the saved page; matching it here keeps the two consistent. */
.content-page table p { margin: 0; }
.content-page table th { background: var(--bg-panel); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.content-page table tbody tr:nth-child(even) { background: var(--bg-panel); }

/* NIH-sourced "selected food sources" tables in nutrient pages, and any other
   table of a label plus numeric values: a scroll wrapper isn't available since
   this table is written straight into Quill's rich-text body, so columns stay
   narrow enough to fit at phone width instead — numeric columns right-aligned
   and sized to their content, the label column taking whatever's left. Layered
   on top of the default table look above; add this class by hand (via the
   editor's HTML view) when a table is specifically label-then-numbers. */
.content-page table.nutrient-table { table-layout: fixed; }
.content-page table.nutrient-table th:first-child, .content-page table.nutrient-table td:first-child { width: auto; }
.content-page table.nutrient-table th:not(:first-child), .content-page table.nutrient-table td:not(:first-child) { width: 15%; text-align: right; font-family: var(--font-mono); white-space: nowrap; }

/* [[nutrition-values]] — server-rendered "Wellness Card" (see
   nutrition::render_wellness_card): a small thumbnail beside the page's own
   teaser text (the photo is dropped entirely, not just hidden, when the page
   has no real photo yet — see .wellness-card__photo below), then a nutrition
   panel in Singapore HPB's own format (A Handbook on Nutrition Labelling,
   2015) — a plain "core list" table with no %DV column, deliberately
   understated rather than the thick-ruled FDA label look this used to have.
   Vitamins/minerals (outside that core list) sit in a supplementary "Other
   Nutrients" section, with the true long tail (amino acids, trace values)
   tucked behind a "Show all nutrients" toggle. */
.content-page .wellness-card {
  margin: 0 0 1.25rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.wellness-card__intro { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.25rem; background: var(--bg-panel); }
.wellness-card__intro:empty { display: none; }
.wellness-card__photo { width: 64px; height: 64px; flex: none; object-fit: cover; margin: 0; border-radius: 10px; }
.wellness-card__teaser { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
.wellness-card__body { padding: 1.1rem 1.25rem 1.3rem; }
.wellness-card__meta {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.35rem;
}
.wellness-card__meta a { font-weight: 500; }
.wellness-card__calories { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.9rem; }
.wellness-card__calories-num { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; color: var(--ink); line-height: 1; }
.wellness-card__calories-unit { font-size: 0.85rem; color: var(--muted); }

.wellness-card__title {
  font-size: 0.82rem; font-weight: 700; color: var(--ink);
  padding-bottom: 0.5rem; margin: 1rem 0 0.2rem; border-bottom: 1px solid var(--border);
}
.wellness-card__title:first-of-type { margin-top: 0; }
.wellness-card__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--bg-panel); font-size: 0.85rem;
}
.wellness-card__row:last-child { border-bottom: 0; }
.wellness-card__row a { font-weight: 500; }
.wellness-card__row--indent { padding-left: 1rem; color: var(--ink-soft); }
.wellness-card__row-value { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }

/* Same collapsible mechanic as .rc-nutrient-group (Recipe Analyzer) — native
   <details>, no JS needed for the expand/collapse itself. */
.wellness-card__more { margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.wellness-card__more summary {
  cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.4rem;
}
.wellness-card__more summary::-webkit-details-marker { display: none; }
.wellness-card__more summary::before { content: '\25B8'; display: inline-block; transition: transform 0.15s; color: var(--muted); }
.wellness-card__more[open] summary::before { transform: rotate(90deg); }
.wellness-card__more .wellness-card__list { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .wellness-card__intro { flex-wrap: wrap; }
}

/* ---------- Body lists (Quill's own list markup) ----------
   Quill never emits real nested <ul>/<ol> — every list item is a flat <li
   data-list="bullet|ordered"> (optionally class="ql-indent-N" for nesting),
   with a leading <span class="ql-ui"> that its own editor stylesheet turns
   into a bullet/number via a ::before counter. That stylesheet only loads in
   the admin editor, so without an equivalent here every <li> on the public
   page falls back to the browser's default flat, unbroken numbering — this
   reproduces just enough of it (skipping the editor's interactive-checkbox
   positioning, which a read-only page never needs) for bullets and nested
   ordered lists to render the way they were authored. */
.content-page ol,
.content-page ul { margin: 0 0 1.25rem; padding-left: 0; }
.content-page li { list-style-type: none; padding-left: 1.5em; position: relative; }
/* The admin editor (#editor/#mega-editor) also loads Quill's own quill.snow.css,
   which sets this same padding-left back to 1.5em on its <ol> — after ours, so it
   would otherwise win the tie and make the editor show an indent the saved page
   never had. ".content-page .ql-editor ol" outscores plain ".ql-editor ol"
   regardless of link order, so level-0 stays flush here too; only the explicit
   indent control (Tab, or the toolbar buttons) should ever indent a list. */
.content-page .ql-editor ol,
.content-page .ql-editor ul { padding-left: 0; }
.content-page li > .ql-ui::before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.content-page li[data-list="bullet"] > .ql-ui::before { content: "\2022"; }
/* A blank line added inside a list via Shift+Return (rather than plain Return,
   which would start a genuinely new item) still saves as its own <li> — Quill
   has no third option — so it would otherwise show as a stray, textless bullet
   or number. Hiding the marker only when the item truly has nothing but that
   line break keeps the blank line's spacing while dropping the dangling mark. */
.content-page li:has(> .ql-ui + br:last-child:not(.ql-softbreak)) > .ql-ui::before { content: none; }
.content-page li[data-list="checked"] > .ql-ui::before { content: "\2611"; }
.content-page li[data-list="unchecked"] > .ql-ui::before { content: "\2610"; }

.content-page p,
.content-page h1, .content-page h2, .content-page h3,
.content-page h4, .content-page h5, .content-page h6 {
  counter-reset: list-0 list-1 list-2 list-3 list-4;
}
.content-page li[data-list] { counter-reset: list-1 list-2 list-3 list-4; }
.content-page li[data-list="ordered"] { counter-increment: list-0; }
.content-page li[data-list="ordered"] > .ql-ui::before { content: counter(list-0, decimal) ". "; }

.content-page li[data-list="ordered"].ql-indent-1 { counter-increment: list-1; }
.content-page li[data-list="ordered"].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) ". "; }
.content-page li[data-list].ql-indent-1 { counter-reset: list-2 list-3 list-4; }

.content-page li[data-list="ordered"].ql-indent-2 { counter-increment: list-2; }
.content-page li[data-list="ordered"].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) ". "; }
.content-page li[data-list].ql-indent-2 { counter-reset: list-3 list-4; }

.content-page li[data-list="ordered"].ql-indent-3 { counter-increment: list-3; }
.content-page li[data-list="ordered"].ql-indent-3 > .ql-ui::before { content: counter(list-3, decimal) ". "; }
.content-page li[data-list].ql-indent-3 { counter-reset: list-4; }

.content-page li[data-list="ordered"].ql-indent-4 { counter-increment: list-4; }
.content-page li[data-list="ordered"].ql-indent-4 > .ql-ui::before { content: counter(list-4, lower-alpha) ". "; }

.content-page .ql-indent-1 { padding-left: 3em; }
.content-page li.ql-indent-1 { padding-left: 4.5em; }
.content-page .ql-indent-2 { padding-left: 6em; }
.content-page li.ql-indent-2 { padding-left: 7.5em; }
.content-page .ql-indent-3 { padding-left: 9em; }
.content-page li.ql-indent-3 { padding-left: 10.5em; }
.content-page .ql-indent-4 { padding-left: 12em; }
.content-page li.ql-indent-4 { padding-left: 13.5em; }

.content-page blockquote { margin: 0 0 1.25rem; padding-left: 1rem; border-left: 3px solid var(--border); color: var(--muted); font-style: italic; }

/* ---------- Side panel (quick-nav to children, wide screens only) ---------- */

.page-with-panel { display: grid; grid-template-columns: 1fr 220px; gap: 0 2.5rem; max-width: 900px; margin: 0 auto; padding: 0 1.5rem; align-items: start; }
.page-with-panel .content-page { max-width: none; margin: 0; padding: 3rem 0 5.5rem; }
.page-with-panel:has(.content-page):not(:has(.side-panel)) { display: block; max-width: 640px; }
.side-panel { position: sticky; top: 1.5rem; margin-top: 3rem; margin-bottom: 5.5rem; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--border); display: flex; flex-direction: column; max-height: min(calc(100vh - 3rem), max(var(--panel-max, 100vh), 14rem)); }
.side-panel__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.85rem; }
.side-panel__links { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; min-height: 0; padding-right: 0.4rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.side-panel__links > * { flex: none; }
.side-panel__links::-webkit-scrollbar { width: 6px; }
.side-panel__links::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.side-panel__links a[hidden], .side-panel__none[hidden] { display: none; }
.side-panel__none { margin: 0; font-size: 0.85rem; color: var(--muted); }
.side-panel__filter { width: 100%; box-sizing: border-box; margin: 0 0 0.85rem; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 0; flex: none; }
.side-panel__filter:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.side-panel__filter[hidden] { display: none; }
.side-panel__links a { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 500; text-decoration: none; font-size: 0.88rem; line-height: 1.3; }
.side-panel__links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--border); flex: none; transition: background 0.15s ease; }
.side-panel__links a:hover::before { background: var(--ink); }

@media (max-width: 900px) {
  .page-with-panel { display: block; max-width: 640px; }
  .page-with-panel .content-page { max-width: none; padding: 3rem 1.5rem 2rem; }
  .side-panel { position: static; margin: 0 1.5rem 3rem; max-height: none; }
  .side-panel__links { max-height: 22rem; }
}

/* ---------- Body images (inserted via the admin rich-text editor) ---------- */

.content-page img { max-width: 100%; height: auto; }
.content-page .body-img--full { display: block; width: 100%; margin: 1.75rem 0; }
.content-page .body-img--left { float: left; max-width: 45%; margin: 0.25rem 1.5rem 1rem 0; }
.content-page .body-img--right { float: right; max-width: 45%; margin: 0.25rem 0 1rem 1.5rem; }
.content-page .body-img--center { display: block; margin: 1.75rem auto; }

/* ---------- Comments ---------- */

.comments { max-width: 640px; margin: 0 auto; padding: 0 1.5rem 6rem; }
.comments__empty, .comments__login { color: var(--muted); font-size: 0.95rem; }
.comment { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.comment__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.comment__body { margin: 0; color: var(--ink-soft); }
.comment__response {
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-panel);
  border-left: 2px solid var(--ink);
}
.comment__response-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.4rem; }
.comment__response p:last-child { margin: 0; color: var(--ink-soft); }

.comment-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 2rem; }
.comment-form textarea {
  font: inherit;
  font-family: var(--font-body);
  min-height: 100px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.comment-form textarea:focus { outline: none; border-color: var(--ink); }
.comment-form .btn-outline { align-self: flex-start; }

/* ---------- Admin ---------- */

.admin-table { border-top: 1px solid var(--border); }
.admin-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 0.8fr 0.9fr 1.4fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.admin-table__row--head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-table__role { text-transform: capitalize; }
.admin-table__status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.admin-table__status--approved { background: var(--bg-panel); color: #3b7a4e; }
.admin-table__status--pending { background: var(--bg-panel); color: #8c6d1f; }

.pages-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 1px solid var(--border); font-size: 0.95rem; }
.pages-table th, .pages-table td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pages-table th:nth-child(1), .pages-table td:nth-child(1) { width: 2.25rem; }
.pages-table th:nth-child(2), .pages-table td:nth-child(2) { width: 30%; padding-left: 0; }
.pages-table th:nth-child(3), .pages-table td:nth-child(3) { width: 13%; }
.pages-table th:nth-child(4), .pages-table td:nth-child(4) { width: 27%; }
.pages-table th:nth-child(5), .pages-table td:nth-child(5) { width: 25%; overflow: visible; }
.pages-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.pages-table td.admin-table__role { text-transform: capitalize; }

.pages-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pages-search {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  min-width: 260px;
}
.pages-toggle {
  display: inline-block;
  width: 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.7rem;
  padding: 0;
  vertical-align: middle;
}

/* Briefly marks the row a create/edit/delete redirect just returned to (see
   the "?open=<id>" handling in admin_pages.html) so it's easy to spot after
   the tree re-expands to it. */
.pages-row--highlight { background: var(--bg-panel); transition: background 1.6s ease; }
.pages-toggle:hover { color: var(--ink); }
.pages-title { vertical-align: middle; }
.pages-empty-state { color: var(--muted); padding: 1.5rem 0; }

.body-img-picker {
  position: absolute;
  display: flex;
  gap: 0.25rem;
  background: var(--ink);
  padding: 0.35rem;
  z-index: 50;
}
/* Our own `display: flex` above otherwise beats the browser's default
   `[hidden] { display: none }` rule (author styles win over user-agent styles
   regardless of the hidden attribute), so setting `.hidden = true` in JS would
   leave the picker visible without this. */
.body-img-picker[hidden] { display: none; }
.body-img-picker button {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.body-img-picker button:hover { background: rgba(255, 255, 255, 0.15); }

.body-img-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 50;
  cursor: nwse-resize;
}

.page-link-picker { gap: 0.4rem; align-items: center; }
.page-link-picker select {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.3rem;
  max-width: 260px;
}

.admin-form .ql-toolbar button.ql-pagelink,
.admin-form .ql-toolbar button.ql-colbreak,
.admin-form .ql-toolbar button.ql-hrline {
  width: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  padding: 0 0.35rem;
}
.admin-form .ql-toolbar button.ql-pagelink::before { content: "Page link"; }
.admin-form .ql-toolbar button.ql-colbreak::before { content: "Vertical line"; }
.admin-form .ql-toolbar button.ql-hrline::before { content: "Horizontal line"; }

.ql-editor hr.mm-col-break,
.ql-editor hr.mm-hr {
  margin: 0.6rem 0;
  position: relative;
}
.ql-editor hr.mm-col-break { border: none; border-top: 2px dashed var(--border); }
.ql-editor hr.mm-hr { border: none; border-top: 2px solid var(--border); }
.ql-editor hr.mm-col-break::after,
.ql-editor hr.mm-hr::after {
  position: absolute;
  top: -0.55rem;
  left: 0.5rem;
  background: var(--paper);
  padding: 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ql-editor hr.mm-col-break::after { content: "vertical line"; }
.ql-editor hr.mm-hr::after { content: "horizontal line"; }
.admin-table__you { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.admin-table__form { display: flex; gap: 0.6rem; align-items: center; }
.admin-table__form + .admin-table__form { margin-top: 0.5rem; }
.admin-table__form select {
  font: inherit;
  font-family: var(--font-body);
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--paper);
}
.admin-table__form .btn-outline { padding: 0.4rem 0.75rem; font-size: 0.68rem; }

.admin-comment { padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
.admin-comment--hidden { opacity: 0.65; }
.admin-comment__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.admin-comment__meta a { color: var(--ink); }
.admin-comment__body { margin: 0 0 0.5rem; color: var(--ink-soft); }
.admin-comment .comment-form { margin-top: 1rem; }
.admin-comment .comment-form textarea { min-height: 70px; }
.admin-comment__status-form { margin-top: 1rem; }
.admin-table__status--abusive { background: var(--bg-panel); color: #8c3b3b; }

.admin-page-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; }
.pages-table .admin-page-actions { font-size: 0.7rem; }
.pages-table .admin-page-actions .link-arrow { white-space: nowrap; }
.admin-page-actions form { margin: 0; }
.admin-page-actions__delete {
  background: none;
  border: none;
  font: inherit;
  font-family: var(--font-mono);
  cursor: pointer;
  color: #8c3b3b;
  border-bottom: 1px solid #8c3b3b;
  padding: 0;
}
.admin-page-actions__delete::before { content: "\2192"; }

.admin-subheading { font-family: var(--font-serif); font-size: 1.3rem; margin: 2.5rem 0 1rem; }
.admin-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }
.admin-form--inline { flex-direction: row; align-items: flex-end; gap: 1rem; max-width: none; margin-top: 1.25rem; }
.admin-form--inline label { flex: 1; }
.admin-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem; font-size: 0.8rem; font-family: var(--font-body);
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--ink);
}
.admin-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 0.3rem; }
.admin-chip button:hover { color: var(--ink); }
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-form__hint { text-transform: none; letter-spacing: 0; font-family: var(--font-body); color: var(--muted); font-size: 0.8rem; margin-left: 0.5rem; }
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
  font: inherit;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
}
.admin-form textarea { resize: vertical; min-height: 70px; }
.admin-form__reference { font-size: 0.8rem !important; }
.admin-form__code { font-family: var(--font-mono) !important; font-size: 0.78rem !important; line-height: 1.5; resize: vertical; }
.admin-form input[type="file"] { font-family: var(--font-body); text-transform: none; letter-spacing: normal; }
.admin-form__preview img { max-width: 240px; margin-top: -0.5rem; }
.admin-form #editor { background: var(--paper); height: 420px; font-family: var(--font-body); }
.admin-form #editor .ql-editor { overflow-y: auto; }
.admin-form #mega-editor { background: var(--paper); height: 320px; font-family: var(--font-body); }
.admin-form #mega-editor .ql-editor { overflow-y: auto; }

.admin-form__label-row { flex-direction: row !important; align-items: center; justify-content: space-between; }
.admin-form__marks-toggle {
  align-self: auto !important;
  padding: 0.3rem 0.6rem !important;
  font-size: 0.68rem !important;
  margin-bottom: 0.4rem;
}
.admin-form__marks-toggle.is-active { background: var(--ink); color: var(--paper); }

/* Only visible with "Show marks" on: reveals the one distinction a saved
   soft break and a real block break otherwise hide once you're not actively
   typing them — same idea as Word's paragraph marks. Targets the wrapper
   span, not the <br> inside it — browsers never give a bare <br> a box to
   paint ::before/::after content into, no matter what the CSS says. */
.ql-editor.ql-show-marks span.ql-softbreak::before {
  content: "\21b5";
  color: #06c;
  font-weight: bold;
}
.ql-editor.ql-show-marks p::after,
.ql-editor.ql-show-marks li::after,
.ql-editor.ql-show-marks h1::after,
.ql-editor.ql-show-marks h2::after,
.ql-editor.ql-show-marks h3::after,
.ql-editor.ql-show-marks blockquote::after {
  content: "\00b6";
  color: #06c;
  opacity: 0.6;
  margin-left: 0.25em;
}
.admin-form .btn-outline { align-self: flex-start; }
.admin-form__checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 0.6rem !important;
  text-transform: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
}
.admin-form__checkbox input[type="checkbox"] { width: 16px; height: 16px; }

.error-toast-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.4);
  animation: error-toast-backdrop-in 0.15s ease-out;
}
.error-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 90%;
  max-width: 420px;
  background: #fff;
  border-top: 4px solid #c0392b;
  padding: 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: error-toast-in 0.15s ease-out;
}
.error-toast__body { flex: 1; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.error-toast__body p { margin: 0 0 1rem; }
.error-toast__body p:last-child { margin-bottom: 0; }
.error-toast__close {
  background: none;
  border: none;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.error-toast__close:hover { color: var(--ink); }
@keyframes error-toast-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes error-toast-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Simple header (dashboard / profile) ---------- */

.simple-header { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 1rem; }
.simple-header__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3rem); margin: 0; }

.dashboard { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem 5rem; }

/* ---------- Auth ---------- */

.auth-page { display: flex; justify-content: center; padding: 5rem 1.5rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 2.25rem; margin: 0 0 2rem; }
.auth-card form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-card label {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.auth-card input { font: inherit; font-family: var(--font-body); padding: 0.6rem 0.1rem; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); }
.auth-card input:focus { outline: none; border-color: var(--ink); }
.auth-card__checkbox {
  flex-direction: row !important; align-items: center; gap: 0.55rem !important; text-transform: none;
  font-family: var(--font-body); font-size: 0.92rem; letter-spacing: normal; color: var(--ink);
}
.auth-card__checkbox input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border: 1px solid var(--border); }
.auth-card__foot { margin-top: 1.5rem; font-size: 0.9rem; color: var(--muted); }
.auth-card__foot a { font-weight: 600; color: var(--ink); }
.form-error { background: var(--bg-panel); color: #8c3b3b; padding: 0.6rem 0.9rem; font-size: 0.9rem; margin-bottom: 1.25rem; }
.form-notice { background: var(--bg-panel); color: var(--muted); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin-bottom: 1.25rem; }
.auth-card > p:not([class]) { color: var(--muted); line-height: 1.5; }

/* ---------- Profile fields ---------- */

.profile-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem 1.5rem; font-size: 1.05rem; }
.profile-fields dt { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); align-self: center; }
.profile-fields dd { margin: 0; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--paper); }
.site-footer__top { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; }
.brand--footer { font-size: 1.5rem; color: var(--paper); }
.site-footer__cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.site-footer__cols h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,243,234,0.5); margin: 0 0 0.9rem; }
.site-footer__cols a { display: block; text-decoration: none; color: var(--paper); font-size: 0.9rem; margin-bottom: 0.6rem; }
.site-footer__cols a:hover { color: #c9a876; }
.site-footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding: 1.25rem 1.5rem;
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(246,243,234,0.55);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .habit-row { grid-template-columns: 1fr; }
  .habit-row__image img { height: 220px; }
  .admin-table__row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.25rem 0; }
  .admin-table__row--head { display: none; }
}

/* The full nav (brand + 8 top-level links + auth links) stops comfortably
   fitting on one line well before a phone-sized viewport — anywhere from
   roughly 640px up to ~1150px it would otherwise wrap onto a second,
   misaligned line instead of cleanly switching to the hamburger menu. This
   breakpoint is deliberately wider than the one below (which covers layout
   changes to unrelated page content, not the nav) to close that gap. */
@media (max-width: 1150px) {
  .nav-toggle { display: flex; }
  .nav-links, .auth-links { display: none; }
  body.nav-open .nav-links,
  body.nav-open .auth-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex-basis: 100%;
    padding: 1rem 0 0;
  }
  body.nav-open .site-nav { flex-wrap: wrap; }
  body.nav-open .nav-links__separator { width: 100%; height: 1px; align-self: auto; }
  .nav-item { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-item__toggle { display: none; }
  .mega-menu { display: none !important; }
}

@media (max-width: 640px) {
  .image-band { grid-template-columns: 1fr; }
  .image-band img { height: 260px; }
  .habit-index__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------- Page graph: "Research connections" ---------- */

/* Fixed on the right edge, vertically centered, rather than left in normal
   flow — on a long page (a pillar page with a full children grid, say) an
   in-flow button could sit well below the fold, so this keeps it reachable
   without scrolling. The row itself holds the fixed position; "Compare"
   (when present) and "Research connections" are just normal flex children
   within it, stacked under it, so a second button attaches right below the
   first without either needing its own hand-computed offset. */
.pg-fab-row {
  position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%);
  z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
}
.pg-fab {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  box-shadow: 0 8px 20px rgba(28, 26, 22, 0.28);
}
.pg-fab:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 640px) {
  .pg-fab-row { right: 1rem; gap: 0.4rem; }
  .pg-fab { padding: 0.7rem 1rem; font-size: 0.8rem; }
}

.pg-modal {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  padding: 1.25rem;
}
/* Visibility is driven by this class, not the `hidden` attribute — Chrome's
   UA stylesheet hides `[hidden]` via `display: none !important` scoped with
   `:not(#_)` to dodge id-based overrides, but that trick doesn't raise its
   specificity enough to beat another `!important` author rule, and without
   `!important` on our side `display: flex` below would need to out-cascade
   it. Simpler and more robust to just not rely on `hidden` interacting
   correctly with a custom `display` value at all. */
.pg-modal.pg-open {
  display: flex; align-items: center; justify-content: center;
}
.pg-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 26, 22, 0.55); }
.pg-modal__panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(880px, 100%);
  max-height: min(720px, 100%);
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(28, 26, 22, 0.3);
}
.pg-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.pg-modal__head-actions { display: flex; align-items: center; gap: 0.25rem; }
.pg-modal__close {
  background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
  padding: 0.25rem 0.5rem;
}
.pg-modal__close:hover { color: var(--ink); }
/* Copies every compared food's nutrition info as one combined plain-text
   block (see #nc-copy-all in dynamic_page.html) — a brief "Copied" label
   swap is the only feedback, no toast. */
.pg-modal__copy-all {
  background: none; border: 1px solid var(--border); cursor: pointer; color: var(--muted);
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.pg-modal__copy-all:hover { color: var(--ink); border-color: var(--ink); }
.pg-modal__copy-all--done { color: #3b7a4e; border-color: #3b7a4e; }
.pg-modal__copy-all--error { color: #8c3b3b; border-color: #8c3b3b; }
/* Widens the panel (see #nc-expand in dynamic_page.html) for when several
   foods are compared at once and the default width clips the last card. */
.pg-modal__expand {
  background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
  padding: 0.25rem 0.5rem;
}
.pg-modal__expand:hover, .pg-modal__expand[aria-pressed="true"] { color: var(--ink); }
/* Genuinely near-fullscreen, not just "bigger" — the point is giving a
   wide, tall comparison (several foods, each with a full Other Nutrients
   list) the best realistic chance of fitting without scrolling at all,
   which a merely-larger fixed cap wouldn't reliably do. The inner
   .nc-table-wrap's own height cap is lifted too (below), since otherwise
   it would keep forcing its own scrollbar even once the outer panel had
   plenty of room. */
.pg-modal.pg-modal--expanded .pg-modal__panel { width: 98vw; max-height: 96vh; }

.pg-jump { position: relative; margin-top: 1rem; }
.pg-jump-input {
  width: 100%; font: inherit; font-size: 0.85rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink);
}
.pg-jump-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pg-jump-list {
  list-style: none; margin: 0.35rem 0 0; padding: 0.35rem; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--border); border-radius: 9px; z-index: 5;
  max-height: 220px; overflow-y: auto; box-shadow: 0 10px 24px rgba(28, 26, 22, 0.18);
}
.pg-jump-list li { padding: 0.4rem 0.6rem; font-size: 0.82rem; border-radius: 6px; cursor: pointer; }
.pg-jump-list li:hover { background: var(--bg-panel); }

.page-graph__body { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.1rem; }
@media (min-width: 860px) { .page-graph__body { grid-template-columns: 1fr 290px; } }

.page-graph__canvas-wrap {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  overflow: hidden;
}
.page-graph__svg { width: 100%; height: 100%; display: block; }

.pg-node { cursor: pointer; }
.pg-node.pg-center { cursor: default; }
.pg-node:focus-visible { outline: none; }
.pg-node:hover circle, .pg-node:focus-visible circle { transform: scale(1.08); transform-box: fill-box; transform-origin: center; }
.pg-node circle {
  transition: cx 0.4s ease, cy 0.4s ease, r 0.4s ease, opacity 0.3s ease, stroke-width 0.15s ease, transform 0.15s ease;
}
.pg-node text { transition: x 0.4s ease, y 0.4s ease, opacity 0.3s ease; font-family: var(--font-body); fill: var(--ink); }
.pg-line { transition: x1 0.4s ease, y1 0.4s ease, x2 0.4s ease, y2 0.4s ease, opacity 0.3s ease; }
.pg-node-label { font-size: 11px; font-weight: 500; }
.pg-center-label { font-size: 13px; font-weight: 600; fill: #fff; }

.page-graph__tooltip {
  position: absolute;
  max-width: 200px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.12s ease;
  z-index: 3;
}
.page-graph__tooltip.pg-show { opacity: 1; }
.page-graph__tooltip b { display: block; font-weight: 600; margin-bottom: 2px; }

.page-graph__panel { display: flex; flex-direction: column; gap: 1rem; }
.pg-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; }
.pg-kicker { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
.pg-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 999px; margin-top: 0.5rem;
}
.pg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pg-now h4 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0.45rem 0 0; }
.pg-open-link { display: block; margin-top: 0.5rem; font-size: 0.78rem; }
.pg-hint { font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0.65rem; line-height: 1.45; }
.pg-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--paper); font-size: 0.75rem; font-family: var(--font-body); cursor: pointer;
}
.pg-chip[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.pg-chip:hover { border-color: var(--ink); }

.pg-node image { transition: opacity 0.3s ease; }
.pg-node.pg-cluster circle { stroke-dasharray: 4 3; }
.pg-cluster-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; fill: var(--ink-soft); }

.pg-legend-rows { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.pg-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--ink-soft); }
.pg-edge-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em;
  fill: var(--muted); transition: x 0.4s ease, y 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}
.pg-edge-label-bg {
  fill: var(--paper);
  transition: x 0.4s ease, y 0.4s ease, width 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}

.pg-conn-list { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.pg-conn-list li {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.78rem;
}
.pg-conn-list li span:first-child { font-weight: 500; flex: 1; }
.pg-conn-list { max-height: 26rem; overflow-y: auto; }
.pg-conn-list li[hidden] { display: none; }
.pg-conn-open { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: inherit; text-align: left; cursor: pointer; }
.pg-conn-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-conn-filter { width: 100%; box-sizing: border-box; margin: 0.5rem 0 0; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.pg-conn-rel { color: var(--muted); font-size: 0.72rem; }
.pg-remove {
  background: none; border: none; color: var(--muted); font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0 0.15rem;
}
.pg-remove:hover { color: #8c3b3b; }

.pg-add-search { position: relative; }
.pg-add-input {
  width: 100%; font: inherit; font-size: 0.8rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--border); border-radius: 7px; background: var(--paper); color: var(--ink);
}
.pg-add-list {
  list-style: none; margin: 0.3rem 0 0; padding: 0.3rem; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px; z-index: 2;
  max-height: 160px; overflow-y: auto; box-shadow: 0 8px 20px rgba(28, 26, 22, 0.15);
}
.pg-add-list li { padding: 0.35rem 0.5rem; font-size: 0.78rem; border-radius: 5px; cursor: pointer; }
.pg-add-list li:hover { background: var(--bg-panel); }

.pg-add-direction {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem;
  font-size: 0.75rem; color: var(--ink-soft);
}
.pg-add-from, .pg-add-to { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-add-to { text-align: right; }
.pg-add-swap {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 26px; height: 26px;
  flex: none; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft);
}
.pg-add-swap:hover { border-color: var(--ink); color: var(--ink); }

.pg-add-rel {
  width: 100%; font: inherit; font-size: 0.78rem; margin-top: 0.6rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border); border-radius: 7px; background: var(--paper); color: var(--ink);
}
.pg-add-submit { width: 100%; margin-top: 0.6rem; justify-content: center; }
.pg-add-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.pg-add-submit:disabled:hover { background: none; color: inherit; }

@media (max-width: 640px) {
  .pg-modal { padding: 0; }
  .pg-modal__panel { max-height: 100%; height: 100%; border-radius: 0; }
}

/* ---------- Running pace tools (calculator / race pace table / splits) ---------- */

.pace-tool { margin: 2rem 0; padding: 1.25rem; background: var(--bg-panel); border: 1px solid var(--border); }
.pace-tool [hidden] { display: none !important; }

.pace-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.pace-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.pace-seg legend,
.pace-slot__label {
  display: block; padding: 0; margin: 0 0 0.45rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.pace-seg__row { display: inline-flex; border: 1px solid var(--ink); }
.pace-seg label { display: block; }
.pace-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pace-seg span {
  display: block; padding: 0.5rem 0.85rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.pace-seg label + label span { border-left: 1px solid var(--ink); }
.pace-seg input:checked + span { background: var(--ink); color: var(--bg); }
.pace-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.pace-slots { display: grid; gap: 0; }
.pace-slot { padding: 1rem 0; border-top: 1px solid var(--border); }
.pace-slot:last-child { border-bottom: 1px solid var(--border); }
.pace-slot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.pace-slot__out { display: block; font-family: var(--font-serif); font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; }
.pace-slot.is-result { background: var(--paper); margin: 0 -0.5rem; padding: 1rem 0.5rem; }

.pace-num { display: inline-flex; align-items: center; gap: 0.35rem; }
.pace-num input {
  width: 4.4rem; box-sizing: border-box; padding: 0.55rem 0.5rem; text-align: right;
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border); border-radius: 0;
}
.pace-num input[data-f="dist"] { width: 6rem; }
.pace-num input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.pace-num span, .pace-per { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.pace-num span b, .pace-per b { font-weight: 500; }
.pace-per { margin-left: 0.25rem; }

.pace-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.pace-chip {
  background: transparent; color: var(--ink); border: 1px solid var(--border); cursor: pointer;
  padding: 0.3rem 0.65rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.pace-chip:hover { border-color: var(--ink); }

.pace-select select {
  font: inherit; font-size: 1rem; padding: 0.55rem 0.5rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--border); border-radius: 0;
}

.pace-summary { margin: 1rem 0 0 !important; font-size: 0.95rem; color: var(--ink) !important; line-height: 1.5; }
.pace-summary b { font-weight: 600; }
.pace-summary span { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }

.pace-table-wrap { margin-top: 1rem; overflow-x: auto; }
.content-page table.pace-table { width: 100%; margin: 0; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.content-page table.pace-table th,
.content-page table.pace-table td { border: 0; border-bottom: 1px solid var(--border); padding: 0.5rem 0.6rem; text-align: right; white-space: nowrap; }
.content-page table.pace-table thead th {
  background: transparent; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.content-page table.pace-table tbody th { text-align: left; font-weight: 600; }
.content-page table.pace-table thead th:first-child { text-align: left; }
.content-page table.pace-table td { font-family: var(--font-mono); font-size: 0.85rem; }
.content-page table.pace-table tbody tr:nth-child(even) { background: var(--paper); }
/* The race table is wide (twelve distances): keep the pace column in view while
   the rest scrolls. The pinned cell needs an opaque background matching its
   row's stripe, or the scrolling cells would show through it. */
.pace-table-wrap .pace-table thead th:first-child,
.pace-table-wrap .pace-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg-panel); }
.pace-table-wrap .pace-table tbody tr:nth-child(even) th { background: var(--paper); }
.content-page table.pace-table tr.is-finish th,
.content-page table.pace-table tr.is-finish td { font-weight: 600; border-bottom-color: var(--ink); }

@media (max-width: 640px) {
  .pace-tool { padding: 1rem; }
  .pace-seg span { padding: 0.5rem 0.7rem; }
  .pace-slot__in { gap: 0.4rem 0.5rem; }
  .pace-num { gap: 0.25rem; }
  .pace-num input { width: 3.4rem; padding: 0.55rem 0.35rem; }
  .pace-num input[data-f="dist"] { width: 5.2rem; }
  .content-page table.pace-table th,
  .content-page table.pace-table td { padding: 0.45rem 0.28rem; }
  .content-page table.pace-table td { font-size: 0.74rem; }
}

/* ---------- Coach Connect ---------- */

.coach-page { max-width: 1180px; }
.coach-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .coach-grid { grid-template-columns: minmax(0, 1fr); } }

.coach-runners { display: grid; gap: 0.75rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.coach-runner {
  display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 0.25rem 1rem; align-items: center;
  padding: 0.9rem 1rem; background: var(--paper); border: 1px solid var(--border); text-decoration: none;
}
.coach-runner:hover { border-color: var(--ink); }
.content-page a.coach-runner { font-weight: 400; }
.coach-runner__name { font-weight: 600; }
.coach-runner__meta { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 640px) { .coach-runner { grid-template-columns: 1fr; } }

.coach-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--ink); color: var(--paper);
  vertical-align: middle;
}

.coach-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.coach-weeknav__label { display: flex; flex-direction: column; align-items: center; font-size: 0.95rem; text-align: center; }
.coach-weeknav__label a { font-size: 0.75rem; }
.coach-summary { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 1.25rem; text-align: center; }

.coach-day { border-top: 1px solid var(--border); padding: 0.9rem 0 0.4rem; }
.coach-day--today { background: linear-gradient(to right, var(--bg-panel), transparent 40%); }
.coach-day__name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 0.6rem; }

.coach-workout { background: var(--paper); border: 1px solid var(--border); padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
.coach-workout--done { border-left: 4px solid #3b7a4e; }
.coach-workout--skipped { border-left: 4px solid #8c6d1f; opacity: 0.8; }
.coach-workout__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.coach-workout__title { font-family: var(--font-serif); font-size: 1.1rem; margin: 0; }
.coach-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--bg-panel); padding: 0.15rem 0.5rem; border-radius: 999px; color: var(--ink-soft); }
.content-page .coach-workout p { margin: 0.35rem 0 0; font-size: 0.92rem; }
.coach-workout__target { font-family: var(--font-mono); font-size: 0.8rem !important; color: var(--ink) !important; }
.coach-workout__details, .coach-note { white-space: pre-line; }
.coach-workout__result { color: #3b7a4e !important; font-weight: 600; }
.coach-workout--skipped .coach-workout__result { color: #8c6d1f !important; }
.coach-note--coach { border-left: 3px solid var(--ink); padding-left: 0.6rem; }
.coach-workout__flag { color: #8c6d1f !important; font-family: var(--font-mono); font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.04em; }

.coach-actions { margin-top: 0.6rem; }
.coach-actions > summary, .coach-add > summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.coach-actions > summary:hover { color: var(--ink); }
.coach-add { margin-bottom: 1.25rem; }
.coach-add > summary { display: inline-flex; color: var(--ink); list-style: none; }
.coach-add > summary::-webkit-details-marker { display: none; }
.coach-add > summary::before { content: "+"; }

.coach-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; margin: 0.7rem 0 0.4rem; }
.coach-form label { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.coach-form__wide { grid-column: 1 / -1; }
.coach-form input, .coach-form select, .coach-form textarea {
  font: inherit; font-family: var(--font-body); font-size: 0.92rem; text-transform: none; letter-spacing: normal;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); background: var(--bg); color: var(--ink); width: 100%;
}
.coach-form textarea { resize: vertical; }
.coach-form input:focus, .coach-form select:focus, .coach-form textarea:focus { outline: none; border-color: var(--ink); }
.coach-form .btn-outline { justify-self: start; }
@media (max-width: 480px) { .coach-form { grid-template-columns: 1fr; } }

.coach-chat { position: sticky; top: 1rem; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); padding: 1rem; max-height: calc(100vh - 2rem); }
@media (max-width: 900px) { .coach-chat { position: static; max-height: none; } }
.coach-chat__title { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 0.75rem; }
.coach-chat__log { display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; min-height: 220px; max-height: 480px; padding-right: 0.25rem; }
.coach-chat__empty { color: var(--muted); font-size: 0.9rem; margin: auto; text-align: center; }
.coach-msg { align-self: flex-start; max-width: 88%; }
.coach-msg--mine { align-self: flex-end; }
.coach-msg__meta { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 0.15rem; }
.coach-msg--mine .coach-msg__meta { text-align: right; }
.coach-msg__body { background: var(--bg-panel); padding: 0.5rem 0.7rem; font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.coach-msg--mine .coach-msg__body { background: var(--ink); color: var(--paper); }
.coach-chat__form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.coach-chat__form textarea { font: inherit; font-size: 0.92rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); background: var(--bg); color: var(--ink); resize: vertical; }
.coach-chat__form textarea:focus { outline: none; border-color: var(--ink); }
.coach-chat__form .btn-outline { align-self: flex-end; }
.coach-chat__hint { font-size: 0.72rem; color: var(--muted); margin: 0.5rem 0 0; }

.coach-assign-row { grid-template-columns: 1fr 2fr; }

.admin-users-row { grid-template-columns: 1.3fr 2.2fr 0.8fr 1.1fr; align-items: start; }
.admin-users__who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.admin-users__email { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.admin-users__roles { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.admin-users__check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }
.admin-users__actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
@media (max-width: 760px) { .admin-users-row { grid-template-columns: 1fr; gap: 0.5rem; } .admin-users-row.admin-table__row--head { display: none; } }

.coach-switch { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1.25rem; text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-size: 0.85rem; }
.coach-switch select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); }

/* .link-arrow used on a <button> (Delete links): drop the browser's button chrome. */
button.link-arrow { background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0 0 0.15rem; cursor: pointer; }
button.link-arrow:hover { opacity: 0.7; }

/* Strava link + imported activities (Coach Connect) */
.coach-notice { background: var(--bg-panel); border-left: 3px solid var(--ink); padding: 0.6rem 0.8rem; font-size: 0.9rem; margin: 0 0 1rem; }
.coach-strava { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 0.9rem; background: var(--paper); border: 1px solid var(--border); margin-bottom: 1.25rem; }
.coach-strava form { margin: 0; }
.coach-strava__status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; flex: 1 1 auto; }
.coach-strava__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #fc4c02; display: inline-block; }
.content-page a.coach-strava__connect { display: inline-block; background: #fc4c02; color: #fff; padding: 0.55rem 1rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; border-radius: 3px; }
.content-page a.coach-strava__connect:hover { background: #e34402; }
.coach-strava__hint { font-size: 0.85rem; color: var(--muted); }
.content-page a.coach-strava__link { font-size: 0.75rem; font-weight: 500; color: #fc4c02; margin-left: 0.4rem; }
.coach-strava__credit { font-family: var(--font-mono); font-size: 0.65rem !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted) !important; margin: 0.5rem 0 0 !important; }
.coach-activities__title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 2rem 0 0.6rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.coach-activities__empty { color: var(--muted); font-size: 0.9rem; }
.coach-activities { overflow-x: auto; }
.content-page .coach-activities table { font-size: 0.85rem; min-width: 560px; margin: 0; }
.content-page .coach-activities th { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--bg-panel); white-space: nowrap; }
.content-page .coach-activities td { white-space: nowrap; }
.content-page .coach-activities td:nth-child(2) { white-space: normal; min-width: 8rem; }
.coach-activities__sport { font-size: 0.68rem; color: var(--muted); margin-left: 0.3rem; }
.coach-activities__extra { color: var(--muted); font-style: italic; }
.coach-strava__dot--suunto { background: #e4002b; }
.content-page a.coach-strava__connect--suunto { background: #e4002b; }
.content-page a.coach-strava__connect--suunto:hover { background: #c40025; }
.content-page span.coach-strava__link { font-size: 0.75rem; color: var(--muted); margin-left: 0.4rem; }

/* "← Admin" / "← Pages" links at the top of the admin screens */
.admin-back { display: inline-block; margin: 0 1.25rem 0.9rem 0; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; }
.admin-back:hover { color: var(--ink); border-color: currentColor; }

/* "Scan for hierarchy connections" preview screen */
.scan-check { display: flex; justify-content: center; }
.scan-check input { width: 1.1rem; height: 1.1rem; }
.scan-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }

.scan-note { display: block; font-size: 0.72rem; color: var(--muted); }

/* Small popup used for the "Scan for hierarchy connections" relationship
   picker — same open/close mechanic as .pg-modal (the reader-facing
   "Research connections" window), just a narrower panel for a single field
   rather than the full graph. */
.admin-modal { display: none; position: fixed; inset: 0; z-index: 40; padding: 1.25rem; }
.admin-modal.admin-modal--open { display: flex; align-items: center; justify-content: center; }
.admin-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 26, 22, 0.55); }
.admin-modal__panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(440px, 100%);
  max-height: min(560px, 100%);
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(28, 26, 22, 0.3);
}
.admin-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.admin-modal__close {
  background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
  padding: 0.25rem 0.5rem;
}
.admin-modal__close:hover { color: var(--ink); }
.admin-modal__panel select { width: 100%; margin-top: 0.35rem; }

/* Connections list bulk-delete checkboxes */
#conn-delete-submit { margin-top: 1rem; }
#conn-delete-submit:disabled { opacity: 0.4; cursor: default; }
#all-conn-delete-submit { margin-top: 1rem; }
#all-conn-delete-submit:disabled { opacity: 0.4; cursor: default; }
#pages-delete-submit { margin-top: 1rem; }
#pages-delete-submit:disabled { opacity: 0.4; cursor: default; }

/* Relationship type delete, when it's still in use (see .scan-note) */
.rt-conflict { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; }
.rt-conflict form { display: contents; }

/* Relationship type name column: forward/reverse labels, edited in place */
.rt-edit-form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.rt-edit-input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); min-width: 9rem; flex: 1; }

/* Fixed column widths for these admin tables' rows — only above the 900px
   breakpoint where .admin-table__row switches from a single stacked column
   to a real grid (see "Responsive" above); defining these at the top level
   would win over that stacking at every width, same specificity but later
   in the file, and break the mobile single-column layout. */
@media (min-width: 901px) {
  .scan-row { grid-template-columns: 2.5rem 1.2fr 2fr; }
  .nutrition-row { grid-template-columns: 1.6fr 0.8fr 1.3fr 0.6fr 1.3fr; }
  .conn-row { grid-template-columns: 2.5rem 1.2fr 2fr; }
  .rt-row { grid-template-columns: 2.2fr 1fr; }
  .all-conn-row { grid-template-columns: 2.5rem 1.4fr 1fr 1.4fr; }
  .nutrition-grid-row { grid-template-columns: 1.4fr 2fr 1fr 0.8fr 2.5rem; }
  .uc-grid-row { grid-template-columns: 2fr 1.2fr 1fr 2.5rem; }
  .ia-grid-row { grid-template-columns: 1.6fr 2fr 2.5rem; }
  .ticker-row { grid-template-columns: 1fr 2.5rem; }
}

/* Editable nutrient-row grid on the nutrition entry form (see
   admin_nutrition_form.html) — wider than the default .admin-form so its
   four columns have room, and its own compact inputs rather than the
   form's normal full-width ones. */
#nutrition-form { max-width: none; }
.nutrition-grid { margin-top: 0.5rem; }
.nutrition-grid-row input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); width: 100%; }
.nutrition-grid-remove { font-size: 1rem; }
#nutrition-grid-add { margin-top: 0.75rem; }

/* Unit-conversions admin grid (see admin_unit_conversions.html) — same shape
   as the nutrition grid above, three columns instead of four. */
#uc-form { max-width: none; }
.uc-grid { margin-top: 0.5rem; }
.uc-grid-row input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); width: 100%; }
.uc-grid-remove { font-size: 1rem; }
#uc-grid-add { margin-top: 0.75rem; margin-right: 0.75rem; }

/* Ingredient-aliases admin grid (see admin_ingredient_aliases.html) — same
   grid shape as the unit-conversions grid above, two fields instead of
   three (an alias text input, and a page dropdown instead of two inputs). */
#ia-form { max-width: none; }
.ia-grid-row input, .ia-grid-row select { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); width: 100%; }
.ia-grid-remove { font-size: 1rem; }
#ia-grid-add { margin-top: 0.75rem; margin-right: 0.75rem; }

/* Site-ticker admin grid (see admin_ticker.html) — one message input per row */
#ticker-form { max-width: none; }
.ticker-row input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); width: 100%; }
.ticker-remove { font-size: 1rem; }
#ticker-add { margin-top: 0.75rem; margin-right: 0.75rem; }

/* "Import from USDA" field at the top of the nutrition entry form */
.usda-import { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; background: var(--bg-panel); }
.usda-import__row { display: flex; gap: 0.75rem; margin-top: 0.35rem; }
.usda-import__row input { flex: 1; }
#usda-import-status { margin: 0.5rem 0 0; }

.pg-legend-sub { margin-top: 0.75rem; }
.pg-legend-hint { margin-top: 0.3rem; }
.pg-chip .pg-dot { margin-right: 0.15rem; }

/* Every nutrition entry side by side (see admin_nutrition_compare.html) —
   dozens of nutrient columns, so it scrolls horizontally within its own
   wrapper rather than fighting .content-page's max-width, and the food-name
   column stays put (position: sticky) as a reference point while scrolling.
   Styled to read closer to a Nutrition Facts label than a plain data grid —
   bold food-name headers, a thick rule under them (echoing the label's own
   thick "Amount per serving" rule), and bold, upper-case category dividers —
   while keeping the same nutrient-row/food-column structure and compact
   font size a several-dozen-row comparison needs. */
.nutrition-compare-wrap { overflow-x: auto; margin-top: 1rem; padding-bottom: 0.5rem; }
.nutrition-compare-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.nutrition-compare-table th, .nutrition-compare-table td { border-bottom: 1px solid var(--border); padding: 0.32rem 0.6rem; white-space: nowrap; text-align: left; }
.nutrition-compare-table thead th {
  background: var(--paper); font-family: var(--font-serif); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); border-bottom: 3px solid var(--ink);
}
.nutrition-compare-table tbody tr:nth-child(even) { background: var(--bg-panel); }
.nutrition-compare-table th:first-child, .nutrition-compare-table td:first-child {
  position: sticky; left: 0; background: var(--paper); z-index: 1; font-weight: 500;
}
.nutrition-compare-table tbody tr:nth-child(even) th:first-child,
.nutrition-compare-table tbody tr:nth-child(even) td:first-child { background: var(--bg-panel); }
/* Column headers freeze at the top of whichever ancestor actually scrolls —
   the admin overview page has none of its own, so this sticks to the
   browser viewport as the whole page scrolls; the reader-facing widget below
   gives it a bounded, internally-scrolling wrap instead, so it sticks there
   without the modal's own search box and chips scrolling out of view too. */
.nutrition-compare-table thead th { position: sticky; top: 0; z-index: 3; }
.nutrition-compare-table thead th:first-child { background: var(--paper); z-index: 4; }
.nutrition-compare-table .nutrition-compare-divider {
  background: var(--bg-panel); font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--border);
}
.nutrition-compare-unit { color: var(--muted); font-weight: 400; text-transform: none; }

/* Reader-facing "Compare" widget (see the button beside "Research
   connections" on a food-categories page) — same search/chip pattern as the
   admin "Pages to connect" picker, but its own rendering (see renderTable in
   dynamic_page.html): one classic Nutrition-Facts-style label per food,
   side by side, rather than the admin overview's wide nutrient-rows table —
   built from the same CompareTable JSON either way (see nutrition.rs). Only
   this inner area scrolls (both ways: sideways through food cards, down
   within an individual card if it's taller than the wrap) — the modal's
   title, search box, and chip row above it stay in place. */
.nc-chips { margin-top: 0.75rem; }
.nc-table-wrap:empty { display: none; }
.nc-table-wrap { max-height: min(70vh, 620px); overflow: auto; }
/* Expanded mode (#nc-expand) hands this its own extra room instead of
   capping it independently of the now much taller .pg-modal__panel — see
   that rule above for why a fixed cap defeats the point of expanding. */
.pg-modal--expanded .nc-table-wrap { max-height: none; overflow: visible; }

/* Singapore HPB's nutrition-labelling CONTENT (A Handbook on Nutrition
   Labelling, 2015 — core list, no %DV, carb excluding fibre, 1dp/whole
   rounding — see renderTable in dynamic_page.html), restyled with the
   bolder FDA "Nutrition Facts" VISUAL language this had before: thick
   black rules, a big serif title, bold core-row labels and amounts. The
   data is Singapore's; only the look is the earlier Option A one. */
/* width: fit-content keeps this flex row exactly as wide as its cards --
   without it, a block-level flex container stretches to fill whatever
   ancestor it's in (the modal panel, up to 98vw when expanded), so a
   handful of narrow cards leaves a big blank strip of background on the
   right -- harmless on screen but very visible once that whole box is
   captured for "Copy image". */
.nc-labels { display: flex; width: fit-content; gap: 1.25rem; align-items: flex-start; }
.nc-label {
  flex: 0 0 290px; background: var(--paper); border: 3px solid var(--ink); border-radius: 2px;
  padding: 1rem 1.1rem 1.1rem;
}
.nc-label__title { margin: 0 0 2px; font-family: var(--font-serif); font-size: 1.8rem; line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.nc-label__name { border-bottom: 1px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; font-size: 0.85rem; color: var(--ink); }
.nc-label__cal-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 8px solid var(--ink); padding-bottom: 4px; margin-bottom: 4px; }
.nc-label__cal-row span:first-child { font-size: 1.05rem; font-weight: 800; }
.nc-label__cal { font-size: 1.9rem; font-weight: 900; font-family: var(--font-mono); }

/* Every row must stay exactly one line tall no matter how long its label —
   two cards side by side only stay aligned row-for-row if neither ever
   wraps, so a long Common — Technical pairing (e.g. "Vitamin B5 —
   Pantothenic Acid") truncates with an ellipsis instead. min-width: 0 is
   required for a flex child to shrink below its content's natural width,
   which is what lets the ellipsis actually take effect here. */
.nc-label__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.nc-label__row span:first-child { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nc-label__row span:last-child { flex: none; white-space: nowrap; font-family: var(--font-mono); font-weight: 700; }
.nc-label__row--indent { padding-left: 1rem; font-size: 0.82rem; }
.nc-label__row--indent span:first-child,
.nc-label__row--indent span:last-child { font-weight: 400; color: var(--ink-soft); }
/* The last core row (Sodium) closes the core list with a thick rule, same
   as the FDA label's own Protein-closing rule — the direct-child combinator
   keeps this from also matching the last row inside .nc-label__micro
   (Other Nutrients), which is a separate flex container of its own rows. */
.nc-label > .nc-label__row:last-of-type { border-bottom: 6px solid var(--ink); }

.nc-label__section {
  margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
  background: var(--bg-panel); padding: 0.3rem 0.4rem; margin-bottom: 0.1rem;
}
/* Other Nutrients rows: plain weight again, like the FDA micronutrient
   rows that came before this — only the core list above is bold. */
.nc-label__micro .nc-label__row span:first-child,
.nc-label__micro .nc-label__row span:last-child { font-weight: 400; }

@media (max-width: 640px) {
  .nc-label { flex-basis: 250px; }
  .nc-label__title { font-size: 1.5rem; }
}

.simple-header__lede { max-width: 60ch; margin-top: 0.6rem; color: var(--muted); }

/* Recipe nutrition calculator (see recipe_calculator.html) — a three-step
   public tool: paste/upload -> editable ingredient preview -> result table.
   The preview grid and result table reuse the admin nutrition grid's and
   compare table's own classes/styling for visual consistency. */
.rc-step-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 0.75rem; }
.rc-step { margin-top: 2.5rem; }
.rc-input-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rc-input-tab--active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rc-textarea {
  width: 100%; font: inherit; font-size: 0.9rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border);
  background: var(--paper); color: var(--ink); resize: vertical;
}
.rc-hint { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.rc-status { margin-top: 0.75rem; font-size: 0.88rem; }
.rc-status--error { color: #b3341f; }

.rc-grid-row {
  display: grid; grid-template-columns: 1.6fr 1fr 0.7fr 1.4fr 1.4fr 2.5rem; gap: 0.6rem; align-items: start;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.rc-grid-row input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); width: 100%; }
.rc-grid-row--head {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.4rem;
}
.rc-match { position: relative; }
.rc-no-match { color: var(--muted); cursor: default; }
.rc-unmatched { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
#rc-add-row { margin-top: 0.75rem; }

@media (max-width: 900px) {
  .rc-grid-row { grid-template-columns: 1fr; }
  .rc-grid-row--head { display: none; }
}

/* Recipe Nutrition Analyzer's "4. Chart" step (see _recipe_analyzer_widget.html) —
   a single donut with callout labels on its biggest wedges, a hover
   tooltip, and a value-ranked table underneath. */
.rc-chart-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; background: var(--bg-panel); margin-top: 1rem; }
.rc-donut-wrap { position: relative; text-align: center; }
.rc-pie-svg { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.rc-donut-slice { cursor: pointer; transition: opacity 0.12s; }
.rc-donut-slice:hover { opacity: 0.82; }
.rc-donut-leader { fill: none; stroke: var(--muted); stroke-width: 1; }
.rc-donut-callout { font-family: var(--font-mono); font-size: 0.6rem; fill: var(--ink); }
.rc-donut-label { text-anchor: middle; font-family: var(--font-serif); font-size: 0.85rem; fill: var(--ink); }
.rc-donut-tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 0.78rem;
  padding: 0.3rem 0.6rem; border-radius: 6px; white-space: nowrap; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,0.28);
}
.rc-pie-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.rc-donut-group {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.3rem;
}
.rc-donut-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.72rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.rc-donut-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border);
}
.rc-donut-table td { padding: 0.18rem 0.4rem; border-bottom: 1px solid var(--border); line-height: 1.2; }
.rc-donut-table tbody tr:hover { background: var(--paper); }
.rc-donut-table .rc-pie-swatch { width: 0.55rem; height: 0.55rem; }
.rc-donut-table .rc-donut-group { font-size: 0.56rem; padding: 0.02rem 0.22rem; }

/* Headline-macro summary cards, Bento-style (see renderMacroCards) */
.rc-macro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 560px) { .rc-macro-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-macro-card { border-radius: 10px; padding: 1rem 1.1rem; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.rc-macro-card__icon { font-size: 1.25rem; line-height: 1; }
.rc-macro-card__value { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; margin-top: 0.4rem; }
.rc-macro-card__unit { font-size: 0.85rem; font-weight: 400; opacity: 0.88; }
.rc-macro-card__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.88; margin-top: 0.15rem; }
.rc-macro-card--calories { background: linear-gradient(135deg, #e8734a, #c9502f); }
.rc-macro-card--protein { background: linear-gradient(135deg, #6fa96a, #467a4c); }
.rc-macro-card--carbs { background: linear-gradient(135deg, #e0a848, #c07f2a); }
.rc-macro-card--fat { background: linear-gradient(135deg, #9b7bb0, #6f4f87); }

/* Collapsible Vitamins/Minerals sections below the donut (native <details>,
   no JS needed for the expand/collapse itself) */
.rc-nutrient-group { border: 1px solid var(--border); border-radius: 8px; margin-top: 0.75rem; background: var(--bg-panel); }
.rc-nutrient-group summary {
  cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.rc-nutrient-group summary::-webkit-details-marker { display: none; }
.rc-nutrient-group summary::before { content: '\25B8'; display: inline-block; transition: transform 0.15s; color: var(--muted); }
.rc-nutrient-group[open] summary::before { transform: rotate(90deg); }
.rc-nutrient-group .rc-donut-table { margin: 0 1rem 0.9rem; width: calc(100% - 2rem); max-width: none; }

/* ---------- Admin media library ---------- */

.media-upload-form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.media-upload-form__hint { font-size: 0.8rem; color: var(--muted); }
.media-empty { color: var(--muted); padding: 2rem 0; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.media-card {
  border: 1px solid var(--border); border-radius: 8px; background: var(--paper);
  overflow: hidden; display: flex; flex-direction: column;
}
.media-card__select {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
  font-size: 0.7rem; color: var(--muted); border-bottom: 1px solid var(--border); cursor: pointer;
}
.media-card__thumb {
  aspect-ratio: 4 / 3; background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media-card__thumb img, .media-card__thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-card__unknown { font-size: 0.75rem; color: var(--muted); padding: 0.5rem; word-break: break-all; text-align: center; }
.media-card__meta { padding: 0.6rem 0.75rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.media-card__url {
  font-family: var(--font-mono); font-size: 0.7rem; border: 1px solid var(--border); border-radius: 5px;
  padding: 0.3rem 0.5rem; background: var(--bg); color: var(--ink-soft); width: 100%;
}
.media-card__info { font-size: 0.68rem; color: var(--muted); }
.media-card__refs { font-size: 0.68rem; }
.media-card__refs--none { color: var(--muted); font-style: italic; }
.media-card__actions { display: flex; gap: 0.25rem; margin-top: auto; }
.media-card__delete { padding: 0.5rem 0.75rem; color: #b3402f; }

/* ---------- Admin analytics ---------- */

.analytics-subhead { font-size: 1.1rem; margin: 2rem 0 1rem; }
.analytics-subhead:first-of-type { margin-top: 0; }

.analytics-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.analytics-bar-row { display: grid; grid-template-columns: 10rem 1fr 3.5rem; align-items: center; gap: 0.75rem; }
.analytics-bar-row__label { font-size: 0.85rem; }
.analytics-bar-row__track { height: 0.9rem; background: var(--bg-panel); border-radius: 5px; overflow: hidden; }
.analytics-bar-row__fill { height: 100%; background: linear-gradient(90deg, #6fa96a, #467a4c); border-radius: 5px; }
.analytics-bar-row__count { text-align: right; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.analytics-count { font-family: var(--font-mono); text-align: right; }
@media (max-width: 640px) {
  .analytics-bar-row { grid-template-columns: 6rem 1fr 3rem; }
}

.analytics-sessions { display: flex; flex-direction: column; gap: 1rem; }
.analytics-session { border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; background: var(--paper); }
.analytics-session__head { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.5rem; }
.analytics-session__head code { font-family: var(--font-mono); }
.analytics-session__flow { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.analytics-session__flow li { font-size: 0.85rem; }
.analytics-session__type { font-weight: 600; }
.analytics-session__time { float: right; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.analytics-note { font-size: 0.8rem; color: var(--muted); margin-top: -0.5rem; }


/* ---------- Tag chips (filters on a category's list, and the groups a food belongs to) ---------- */

.children-grid__tile[hidden], .habit-row[hidden] { display: none !important; }
.tag-filter { margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tag-filter[hidden] { display: none; }
.tag-filter__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.tag-filter__group { position: relative; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tag-filter__toggle { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-bottom: 1px dotted var(--border); padding: 0.3rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; }
.tag-filter__toggle:hover, .tag-filter__group.is-open .tag-filter__toggle, .tag-filter__group.has-picked .tag-filter__toggle { color: var(--ink); border-bottom-color: var(--ink); }
.tag-filter__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tag-filter__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.15s ease; }
.tag-filter__group.is-open .tag-filter__caret { transform: rotate(180deg); }
.tag-filter__picked { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-filter__chips { display: none; position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 0.15rem; padding: 0.7rem; width: max-content; max-width: min(34rem, 88vw); flex-wrap: wrap; gap: 0.4rem; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); }
.tag-filter__group.is-open .tag-filter__chips { display: flex; }
.tag-chip { font: inherit; font-size: 0.8rem; line-height: 1; padding: 0.4rem 0.7rem; color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.tag-chip:hover { border-color: var(--ink); }
.tag-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tag-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag-chip__n { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.6; }
.tag-filter__status { margin: 0; min-height: 1.2rem; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.8rem; }
.tag-filter__clear { font: inherit; font-size: 0.8rem; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; }
.tag-filter__clear[hidden] { display: none; }
.content-page__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 2rem 0 0; }
.content-page__tags-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 0.5rem; }
@media (max-width: 900px) { .tag-filter__chips { position: static; width: auto; max-width: none; box-shadow: none; margin-top: 0.4rem; flex-basis: 100%; } }


/* ---------- Admin: tags ---------- */

.tag-admin { max-width: 860px; }
.tag-admin__facet { border: 1px solid var(--border); padding: 0.7rem 1rem; background: var(--paper); }
.tag-admin__facet summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tag-admin__options { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.8rem 0; max-height: 15rem; overflow-y: auto; padding-right: 0.4rem; }
.tag-admin__opt { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem !important; font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; }
.tag-admin__opt input { width: auto; margin: 0; }
.tag-admin__new { width: 100%; box-sizing: border-box; }
.tag-admin__computed-title { margin: 0 0 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tag-chip--static { cursor: default; }
.tag-table__row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) 3rem auto auto; gap: 0.6rem; align-items: center; margin: 0.15rem 0; }
.tag-table__row input[type="text"] { width: 100%; box-sizing: border-box; }
.tag-table__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-align: right; }
.tag-table__row--new { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dotted var(--border); }
.tag-table__delete { background: none; border: 0; cursor: pointer; color: var(--muted); }
@media (max-width: 700px) { .tag-table__row { grid-template-columns: 1fr; } .tag-table__count { text-align: left; } }


/* ---------- Site search ---------- */

.site-search { position: relative; display: flex; justify-content: flex-end; }
.site-search__toggle[hidden] { display: none; }
.site-search__input { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; width: 16rem; max-width: calc(100vw - 2.5rem); box-sizing: border-box; padding: 0.7rem 1.1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: 0 8px 20px rgba(28, 26, 22, 0.28); }
.site-search__input[hidden] { display: none; }
.site-search__input::placeholder { color: var(--muted); }
.site-search__input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-search__list { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 60; width: 22rem; max-width: calc(100vw - 2.5rem); margin: 0; padding: 0.3rem 0; list-style: none; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); font-family: var(--font-body); }
.site-search__list[hidden] { display: none; }
.site-search__list li a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.9rem; text-decoration: none; color: var(--ink); border: 0 !important; font-size: 0.9rem; }
.site-search__list li.is-active a, .site-search__list li a:hover { background: var(--bg, rgba(0, 0, 0, 0.05)); }
.sg-title { display: block; }
.sg-sub { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.pg-jump-list li.is-active, .pg-add-list li.is-active, .nc-search-list li.is-active { background: var(--bg-panel); }
.pg-jump-list li.is-disabled, .pg-add-list li.is-disabled, .nc-search-list li.is-disabled { opacity: 0.55; cursor: not-allowed; }
.search-page__form { display: flex; gap: 0.6rem; margin-top: 1.2rem; max-width: 40rem; }
.search-page__form input[type="search"] { flex: 1; font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--border); background: var(--paper); color: var(--ink); }
.search-results { display: flex; flex-direction: column; }
.content-page__aka { margin: 0 0 1.4rem; font-size: 0.9rem; color: var(--muted); }
.content-page__aka-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 0.5rem; }
.content-page__aka em { font-style: italic; }