/* Keel Nutrition — app-only components on the Keel UI kit (./keel/keel-ui.css).
   Every colour, size and rule comes from kit tokens (var(--k-*)): Archivo, square corners,
   2px section rules, flush-left labels, Nutrition vivid/deep/tint, Ocean primary actions.
   No inline styles anywhere (production CSP): dynamic widths arrive as data-k-w → --k-w. */

.hidden { display: none !important; }
.n-contents { display: contents; }
.n-main { display: block; min-height: calc(100vh - 110px); background: var(--k-bg); }
.n-main:focus { outline: none; }

/* calorie-light mode hides numbers that invite counting */
body.calorie-light .cal-num { display: none !important; }
body.calorie-light .cal-light-note { display: block !important; }
.cal-light-note { display: none; }

/* ------------------------------------------------------------ shared bits */
.n-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); }
.n-row--end { align-items: flex-end; }
.n-row--between { justify-content: space-between; }
.n-stack { display: flex; flex-direction: column; gap: var(--k-space-3); min-width: 0; }
.n-stack--tight { gap: var(--k-space-2); }
.n-grow { flex: 1 1 160px; min-width: 0; }
.n-muted { color: var(--k-muted); }
.n-small { font-size: var(--k-fs-12-5); }
.n-strong { font-weight: 800; }
.n-num { text-align: right; white-space: nowrap; }
.n-error { margin: 0; font-size: var(--k-fs-13); color: var(--k-error); }
.n-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.n-field-inline { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.n-field-inline .k-input, .n-field-inline .k-select { min-width: 0; }
.n-w-sm { width: 120px; flex: none; }
.n-w-md { width: 180px; flex: none; }
.n-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-space-2); }
.n-sec-head h3 { margin: 0; font-size: var(--k-fs-15); font-weight: 800; }
.n-sub-title { margin: 0; font-size: var(--k-fs-15); font-weight: 800; letter-spacing: -0.01em; }
.n-meta-line { margin: 0; font-size: var(--k-fs-13); color: var(--k-muted); }
.n-p { margin: 0; font-size: var(--k-fs-14); line-height: 1.55; color: var(--k-text-2); }
.n-list-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.n-list-actions .k-btn { min-height: 36px; }
.n-quote { margin: 0; font-size: var(--k-fs-13); color: var(--k-muted); font-style: italic; }
.n-pre {
  margin: 0; max-height: 40vh; overflow: auto; padding: var(--k-space-3);
  background: var(--k-surface); font-family: var(--k-font-mono); font-size: var(--k-fs-12); white-space: pre;
}
.n-link-btn {
  padding: 0; border: 0; background: none; font: inherit; color: var(--k-link-strong);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left;
}
.n-link-btn:hover { color: var(--k-link-hover); }

/* Table cells that hold controls. */
.k-table td .k-btn { min-height: 36px; }
.n-table-flush th:first-child, .n-table-flush td:first-child { padding-left: 32px; }
.n-table-flush th:last-child, .n-table-flush td:last-child { padding-right: 32px; }
.n-table-flush td { padding-top: 11px; padding-bottom: 11px; }
.n-table-flush { font-size: var(--k-fs-14); }
.k-table td.n-dim, .k-table td.n-dim:first-child { color: var(--k-muted); }
.k-table th.n-th-wrap { white-space: normal; }

/* Visible, square progress meter (Today macros, water, onboarding). */
.n-meter { position: relative; display: block; height: 8px; background: var(--k-surface); }
.n-meter > span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-c, var(--k-app)); }
.n-meter--sm { height: 6px; }

/* ------------------------------------------------------------ toast */
.n-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1200; transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px;
  background: var(--k-text); color: var(--k-bg); font-size: var(--k-fs-14); font-weight: 600;
  box-shadow: var(--k-shadow-md); opacity: 0; pointer-events: none; transition: opacity var(--k-ease);
}
.n-toast.show { opacity: 1; }

/* ------------------------------------------------------------ page-level rows */
.n-datebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-3);
  padding: 20px 32px; border-bottom: 2px solid var(--k-divider); background: var(--k-bg);
}
.n-datebar-date { font-size: var(--k-fs-17); font-weight: 800; white-space: nowrap; }
.n-datebar .k-btn { min-height: 44px; min-width: 44px; justify-content: center; }
.n-datebar-pick { width: auto; min-height: 40px; padding: 4px 8px; font-size: var(--k-fs-13); }
.n-datebar-right { margin-left: auto; font-size: var(--k-fs-13); color: var(--k-muted); }
.n-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2);
  padding: 14px 32px; border-bottom: 2px solid var(--k-divider);
}
.n-toolbar .k-btn { min-height: 44px; }
.n-toolbar-label { font-size: var(--k-fs-12-5); color: var(--k-muted); margin-right: 4px; }

/* ------------------------------------------------------------ Today (Keel Apps A 1a/1b) */
.n-hero { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 2px solid var(--k-divider); }
.n-hero-left {
  display: flex; flex-direction: column; gap: 14px; padding: 32px;
  background: var(--k-app-tint); border-right: 2px solid var(--k-divider); min-width: 0;
}
.n-hero-line { margin: 0; font-size: var(--k-fs-12); color: var(--k-muted); }
.n-hero-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.n-hero-num { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.n-hero-unit { font-size: var(--k-fs-15); color: var(--k-muted); }
.n-macros { display: flex; flex-direction: column; gap: 14px; }
.n-macro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.n-macro-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--k-fs-13); }
.n-macro-head b { font-weight: 800; }
.n-macro-v { color: var(--k-muted); }
.n-macro-short { display: none; font-size: var(--k-fs-12); color: var(--k-muted); }
.n-hero-log { align-self: flex-start; min-height: 48px; min-width: 200px; margin-top: 6px; }
.n-meals { min-width: 0; }
.n-meal-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid var(--k-divider);
}
.n-meal-name { font-size: var(--k-fs-14); font-weight: 800; }
.n-meal-main { display: flex; flex-direction: column; min-width: 0; }
.n-meal-food { font-size: var(--k-fs-14); overflow-wrap: anywhere; }
.n-meal-meta { font-size: var(--k-fs-12); color: var(--k-muted); }
.n-meal-row .k-btn { font-size: var(--k-fs-12-5); min-height: 40px; }
.n-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--k-divider); }
.n-cell {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 24px 32px;
  border-right: 1px solid var(--k-divider);
}
.n-cell:last-child { border-right: 0; }
.n-cell--raised { background: var(--k-raised); }
.n-cell > .k-block, .n-cell .k-state { padding: 0; border: 0; }
.n-cell-k { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.n-cell-k--link { color: var(--k-link-strong); font-weight: 600; }
.n-cell-v { margin: 0; font-size: var(--k-fs-22); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.n-cell-s { margin: 0; font-size: var(--k-fs-12-5); color: var(--k-muted); }
.n-cell-t { margin: 0; font-size: var(--k-fs-14); line-height: 1.5; }
.n-cell .n-link-btn, .n-cell a.n-cell-a { align-self: flex-start; font-size: var(--k-fs-13); color: var(--k-link-strong); }
.n-water { display: flex; gap: 4px; }
.n-water > span { flex: 1; height: 18px; background: var(--k-surface); }
.n-water > span.n-on { background: var(--k-app); }
.n-sticky-log { display: none; }

@media (max-width: 720px) {
  .n-hero { grid-template-columns: minmax(0, 1fr); }
  .n-hero-left { padding: 20px 16px; gap: 10px; background: transparent; border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .n-hero-line { order: 3; }
  .n-hero-num { font-size: 52px; }
  .n-hero-unit { font-size: var(--k-fs-14); }
  .n-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .n-macro-head { font-size: var(--k-fs-12); }
  .n-macro-v { display: none; }
  .n-macro-short { display: block; }
  .n-macros .n-meter { height: 6px; }
  .n-hero-log { display: none; }
  .n-meal-row { display: flex; gap: 10px; padding: 12px 16px; min-height: 64px; }
  .n-meal-row .n-meal-name { display: none; }
  .n-meal-main { flex: 1; }
  .n-meal-main .n-meal-label { display: block; font-size: var(--k-fs-14); font-weight: 800; }
  .n-meal-food { font-size: var(--k-fs-12-5); color: var(--k-muted); }
  .n-meal-meta, .n-meal-row .k-tag { display: none; }
  .n-meal-row .k-btn { min-height: 44px; font-size: var(--k-fs-13); }
  .n-strip { grid-template-columns: minmax(0, 1fr); }
  .n-cell { padding: 18px 16px; border-right: 0; border-bottom: 1px solid var(--k-divider); }
  .n-sticky-log {
    position: sticky; bottom: 0; z-index: 40; display: block; padding: 12px 16px;
    background: var(--k-bg); border-top: 2px solid var(--k-divider);
  }
  .n-sticky-log .k-btn { width: 100%; min-height: 52px; padding: 0 16px; }
  /* Toasts sit above Today's sticky Log food bar instead of covering it (route() sets the class). */
  body.n-has-sticky .n-toast { bottom: 96px; }
  .n-datebar, .n-toolbar { padding: 14px 16px; }
  .n-table-flush th:first-child, .n-table-flush td:first-child { padding-left: 16px; }
  .n-table-flush th:last-child, .n-table-flush td:last-child { padding-right: 16px; }
}
@media (min-width: 721px) { .n-meal-label { display: none; } }

/* ------------------------------------------------------------ dialogs and the log-food drawer */
/* App-built modals (openModal) carry their own head and body padding; kit confirm dialogs keep the kit's. */
dialog.k-dialog.n-dlg { padding: 0; gap: 0; overflow: hidden; }
dialog.k-dialog[open] { display: flex; }
.n-dlg-head {
  display: flex; align-items: center; gap: var(--k-space-3); padding: 18px 20px;
  border-bottom: 2px solid var(--k-divider);
}
.n-dlg-head .k-dialog-title { margin-right: auto; }
.n-dlg-close { width: 44px; min-height: 44px; justify-content: center; }
.n-dlg-body { display: flex; flex-direction: column; gap: var(--k-space-3); padding: 16px 20px 20px; overflow: auto; min-height: 0; }
.n-dlg-body > .k-form-actions { padding-top: var(--k-space-2); }
dialog.n-drawer {
  position: fixed; inset: var(--n-bar-h, 0px) 0 0 auto; width: min(460px, 100vw); max-width: 100vw;
  height: auto; max-height: none; margin: 0; padding: 0;
}
dialog.n-drawer::backdrop { top: var(--n-bar-h, 0px); }
dialog.n-drawer .n-dlg-head { padding: 20px 24px; }
dialog.n-drawer .k-dialog-title { font-size: var(--k-fs-22); }
/* Drawer = head / scrolling body / footer. The footer is a sibling of the body (not sticky inside it),
   so the body's scrollport ends above the footer and nothing focused or flagged can hide under it. */
dialog.n-drawer[open] { flex-direction: column; }
dialog.n-drawer .n-dlg-head { flex: none; }
dialog.n-drawer .n-dlg-body {
  padding: 0; gap: 0; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  scroll-padding-block: 16px; /* focus, validation and scrollIntoView leave a little room above the footer */
}
.n-drawer-sec { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; }
.n-drawer-foot {
  display: flex; flex-wrap: wrap; gap: 10px; flex: none; padding: 16px 24px;
  border-top: 2px solid var(--k-divider); background: var(--k-raised);
}
.n-drawer-foot .k-btn { min-height: 48px; }
.n-drawer-foot .k-btn-primary { flex: 1; padding: 0 16px; }
.n-results { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--k-divider); }
.n-result {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 24px 12px 20px;
  border-bottom: 1px solid var(--k-divider); border-left: 4px solid transparent; cursor: pointer;
}
.n-result:hover { background: var(--k-blank); }
.n-result[aria-selected="true"] { background: var(--k-primary-tint); border-left-color: var(--k-primary); }
.n-result:focus-visible { outline-offset: -2px; }
.n-result-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.n-result-title { font-size: var(--k-fs-14); font-weight: 800; overflow-wrap: anywhere; }
.n-result-meta { font-size: var(--k-fs-12); color: var(--k-muted); }
.n-result-main > .k-tag { align-self: flex-start; margin-top: 4px; }
.n-result-kcal { font-size: var(--k-fs-14); font-weight: 800; white-space: nowrap; }
.n-results-empty { padding: 16px 24px; margin: 0; font-size: var(--k-fs-13); color: var(--k-muted); }
.n-drawer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 24px; border-bottom: 1px solid var(--k-divider); }
.n-drawer-links .k-btn { min-height: 40px; }

/* Review lists (photo / voice): one row per item with Accept / Adjust / Reject. */
.n-review { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--k-divider); }
.n-review > li { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--k-divider); }
.n-review > li.rejected .n-review-title { text-decoration: line-through; color: var(--k-muted); }
.n-review-title { font-weight: 800; font-size: var(--k-fs-14-5); }
.n-photo-preview { display: block; max-width: 100%; max-height: 220px; object-fit: contain; background: var(--k-surface); }
.n-scanner-video { display: block; width: 100%; max-height: 260px; background: var(--k-text); object-fit: cover; }

/* ------------------------------------------------------------ recipes */
.n-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.n-ing-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.n-ing-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--k-divider); }
.n-ing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .n-ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.n-steps-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.n-recipe-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--k-space-6); align-items: start; }
@media (max-width: 820px) { .n-recipe-card { grid-template-columns: minmax(0, 1fr); } }
.n-recipe-card ol, .n-recipe-card ul { margin: 0 0 var(--k-space-3); padding-left: 20px; font-size: var(--k-fs-14); line-height: 1.6; }
.n-recipe-card h3 { margin: 0 0 6px; font-size: var(--k-fs-15); font-weight: 800; }

/* Nutrition Facts panel — the familiar label layout, drawn in kit ink. */
.n-facts { border: 2px solid var(--k-text); padding: 8px 10px; background: var(--k-raised); color: var(--k-text); font-size: var(--k-fs-13); }
.n-facts h3 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; border-bottom: 1px solid var(--k-text); }
.n-facts p { margin: 2px 0; }
.n-facts-cal { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-top: 8px solid var(--k-text); border-bottom: 4px solid var(--k-text); font-size: 22px; font-weight: 800; }
.n-facts table { width: 100%; border-collapse: collapse; }
.n-facts td { padding: 3px 0; border-bottom: 1px solid var(--k-text); }
.n-facts td + td { text-align: right; }
.n-facts td.indent { padding-left: 16px; }

/* ------------------------------------------------------------ planner */
.n-week-wrap .k-week-item { min-height: 44px; }
.n-week-wrap .k-week-day > .n-week-add {
  margin: 0 6px; min-height: 36px; justify-content: flex-start; font-size: var(--k-fs-12);
  color: var(--k-link-strong); border: 1px dashed var(--k-divider); background: transparent;
}
.k-week-item.n-is-eaten .k-week-item-title { text-decoration: line-through; color: var(--k-muted); }
.k-week-day.n-is-selected { box-shadow: inset 0 -3px 0 var(--k-app-deep); }
.k-month-cell.n-month-btn { font: inherit; text-align: left; background: transparent; cursor: pointer; border-top: 0; border-left: 0; }
.k-month-cell.n-month-btn:hover { background: var(--k-hover-wash); }
.k-month-cell.n-month-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--k-app-deep); }
.k-month-cell.n-month-btn.k-is-today { background: var(--k-app-tint); }
.k-month-cell.n-month-btn:focus-visible { outline-offset: -2px; }
.n-month-kcal { margin-top: auto; font-size: var(--k-fs-10-5); color: var(--k-muted); }

/* ------------------------------------------------------------ groceries */
.n-groc .k-list-row { align-items: flex-start; }
.n-groc .k-check { margin-top: 2px; }
.n-groc .k-list-row .k-btn { min-height: 36px; }
.n-groc-buy { font-size: var(--k-fs-12); color: var(--k-text-2); }

/* ------------------------------------------------------------ health & fasting */
.n-fast-big { display: flex; flex-direction: column; gap: 10px; }
.n-fast-big .k-big-value { font-variant-numeric: tabular-nums; }
.n-fast-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.n-fast-controls .k-btn { min-height: 48px; min-width: 120px; }
.n-fast-controls .k-field { flex: 1 1 160px; }

/* ------------------------------------------------------------ onboarding */
.n-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
.n-progress > span { height: 6px; background: var(--k-surface); }
.n-progress > span.n-on { background: var(--k-app); }

/* Allergen checklists. */
.n-checks { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .n-w-sm, .n-w-md { width: 100%; }
}

/* ------------------------------------------------------------ print (recipe cards) */
@media print {
  .k-bar, .k-skip, .n-toast, .no-print, .n-sticky-log, .k-head-actions { display: none !important; }
  body, .n-main { background: #ffffff; color: #000000; }
  .n-facts { break-inside: avoid; border-color: #000000; color: #000000; }
}
.n-datebar--bare { padding: 0; border: 0; background: transparent; }
.n-cell .n-link-btn, .n-cell a.n-cell-a { display: inline-flex; align-items: center; min-height: 44px; }
.k-table td.n-short { color: var(--k-caution); font-weight: 600; }
button.n-week-head {
  width: 100%; margin: 0; font: inherit; font-size: var(--k-fs-12); text-align: left; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid var(--k-divider); min-height: 36px;
}
button.n-week-head:hover { background: var(--k-hover-wash); }
button.n-week-head:focus-visible { outline-offset: -2px; }
.n-week-none { padding: 4px 8px; }
.n-meal-food { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-phone-only { display: none; }
@media (max-width: 720px) {
  .n-phone-only { display: block; }
  .n-diary .n-col-portion, .n-diary .n-col-protein { display: none; }
  .n-diary .n-table-flush td, .n-diary .n-table-flush th { padding-left: 6px; padding-right: 6px; }
  .n-diary .n-table-flush td:first-child, .n-diary .n-table-flush th:first-child { padding-left: 16px; }
  .n-diary .n-table-flush td:last-child, .n-diary .n-table-flush th:last-child { padding-right: 16px; }
}
/* Blocks rendered inside display:contents slots (independently loading sections, wrapping forms)
   are grid items too: give them the kit's phone layout (one column, phone padding). */
@container k-page (max-width: 720px) {
  .k-grid .n-contents > .k-block, .k-grid .n-contents > form > .k-block { grid-column: 1 / -1; padding: 18px 16px; }
}
@media (pointer: coarse) {
  .n-link-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 720px) {
  /* Rows with several actions: title and meta keep the full row; the buttons wrap onto their own
     line, aligned with the title (64px .k-list-lead + 12px gap). */
  .k-list-row:has(> .n-list-actions > :nth-child(2)) { flex-wrap: wrap; }
  .k-list-row > .n-list-actions:has(> :nth-child(2)) { flex: 1 0 100%; justify-content: flex-start; }
  .k-list-row:has(> .k-list-lead) > .n-list-actions:has(> :nth-child(2)) { padding-left: 76px; }
}
/* Touch targets: every control this app draws is at least 44px tall on phones and touch screens. */
@media (max-width: 720px), (pointer: coarse) {
  .n-main .k-btn, .k-dialog .k-btn, .n-main .k-seg-opt, .k-dialog .k-seg-opt,
  .n-main .k-input, .n-main .k-select, .k-dialog .k-input, .k-dialog .k-select,
  .k-table td .k-btn, .n-list-actions .k-btn, .n-groc .k-list-row .k-btn, .k-list-row .k-btn,
  .n-week-wrap .k-week-day > .n-week-add, button.n-week-head, .n-main .k-chip { min-height: 44px; }
  .n-main .n-link-btn { min-height: 44px; display: inline-flex; align-items: center; }
}