/* ── Nutrition Home (Sprint 10 Task 3) ──────────────────────────────
   Namespaced .nut-* throughout, same per-page-CSS-file convention as
   css/progress.css (.prg-*) / css/workout.css (.wf-*). Reuses shared
   .card/.btn/.pill/.gf-state/page-loading/page-error from css/style.css --
   nothing here duplicates those. Colors are var(--...) only, no hardcoded
   hex, so dark/light theme and any future palette tweak both apply for
   free. */

.nut-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px 40px;
}

/* ── Header / date navigation ───────────────────────── */
.nut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.nut-title {
    font-size: 26px;
    margin: 0;
    color: var(--text);
}

.nut-date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nut-date-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-width: 120px;
    text-align: center;
}

.nut-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 16px;
}

.nut-icon-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text);
}

.nut-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Nutrition tabs (Final Pre-Live UI Cleanup, locked decisions
   5/12/13) ────────────────────────────────────────────────────────
   Standard WAI-ARIA tabs pattern -- see switchNutritionTab()/
   handleNutTabKeydown() in js/nutrition.js. The active-tab look is driven
   directly off aria-selected (not a separate JS-toggled class), same
   convention css/progress.css's .prg-attn-view-toggle establishes for
   aria-pressed, so the visible state and the accessible state can never
   drift apart. flex: 1 on each .nut-tab means the row can never force the
   page wider than its container -- no horizontal scroll at any width,
   including 320px, regardless of label length. */
.nut-tablist {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.nut-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nut-tab:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.nut-tab[aria-selected="true"] {
    background: var(--gold-dim);
    color: var(--gold);
    font-weight: 600;
}

.nut-tabpanel {
    outline: none; /* focusable per WAI-ARIA tabs pattern (tabindex="0"); no visible ring needed on the panel itself since focus always lands on a real control inside it or on the tab button, matching this project's existing focus-visible conventions elsewhere */
}

/* ── Daily summary card ─────────────────────────────── */
.nut-summary {
    margin-bottom: 20px;
}

.nut-cal-hero {
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.nut-cal-primary {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
}

.nut-cal-secondary {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.nut-qualifier {
    font-size: 12px;
    color: var(--text-hint);
    margin-top: 2px;
}

.nut-macro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.nut-macro-cell {
    text-align: center;
}

.nut-macro-primary {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.nut-water-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nut-water-summary-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
}

.nut-water-summary-left i {
    color: var(--gold);
}

.nut-water-bar-track {
    flex: 1 1 120px;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-input);
    overflow: hidden;
    min-width: 80px;
}

.nut-water-bar-fill {
    /* Static indicator only -- no fill animation in V1 (explicitly deferred
       to a future task), so deliberately no width transition here. */
    height: 100%;
    background: var(--gold);
    border-radius: 4px;
}

/* ── Quick actions ───────────────────────────────────── */
.nut-quick-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.nut-quick-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

/* ── Two-column layout (desktop) ────────────────────── */
.nut-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Post-v0.10.0 Nutrition UX Improvements -- Pantry tab's own two-column
   split. Deliberately NOT .nut-columns' even 1fr/1fr -- the Attention
   panel is a secondary summary, not a peer of the primary inventory list,
   so it gets a narrower 1fr against the inventory's 2fr. Stacks to one
   column at the same 900px breakpoint as .nut-columns (see the
   @media block below), never a separate breakpoint. */
.nut-pantry-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.nut-section-heading {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--text);
}

/* ── Meals ───────────────────────────────────────────── */
.nut-meals-list {
    position: relative; /* anchor for showBreatheLoader() overlay */
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nut-meal-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--bg-input);
}

.nut-meal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.nut-meal-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: 2px;
}

.nut-meal-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.nut-meal-macros {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Task 9C.1 -- compact Meal provenance label ("From template"/"From habit
   · <name>"). Deliberately smaller/quieter than .nut-meal-macros (identity
   metadata, not a value worth the same visual weight) -- same muted-text,
   no-icon, real-text-only treatment .hab-source-label already established
   for the equivalent purpose on the Habits page. */
.nut-meal-provenance {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.nut-meal-notes {
    font-size: 13px;
    color: var(--text-hint);
    margin-top: 8px;
    white-space: pre-wrap;
}

.nut-meal-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.nut-meal-actions .nut-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 15px;
}

/* ── Inline destructive confirm (meal + water) ──────── */
.nut-confirm-delete {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nut-confirm-delete-label {
    font-size: 13px;
    color: var(--text-muted);
}

.nut-confirm-yes,
.nut-confirm-no {
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
}

.nut-confirm-yes {
    background: var(--red);
    color: #fff;
}

.nut-confirm-yes:hover { background: #c62828; }

.nut-confirm-no {
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ── Water section ───────────────────────────────────── */
.nut-water-quickadd {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.nut-water-quickadd button {
    border: 1px solid var(--gold-border);
    background: var(--gold-dim);
    color: var(--gold);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    transition: background 0.15s;
}

.nut-water-quickadd button:hover:not(:disabled) {
    background: var(--gold-border);
}

.nut-water-quickadd button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Natural round numbers per water unit preference -- never a converted/
   awkward equivalent of the other system's numbers. UX Refinement Task:
   toggled by .nut-water-unit-flOz on .nut-page (set from
   js/nutrition.js's applyWaterUnitToUI()), independent of the global
   .nut-units-imperial class -- water display no longer follows body-weight
   units. */
.nut-water-quick-imperial { display: none; }
.nut-water-unit-flOz .nut-water-quick-metric { display: none; }
.nut-water-unit-flOz .nut-water-quick-imperial { display: inline; }

/* ── Water heading row + unit toggle (UX Refinement Task) ── */
.nut-water-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.nut-water-heading-row .nut-section-heading { margin-bottom: 0; }

.nut-water-unit-toggle {
    display: flex;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.nut-water-unit-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    min-width: 44px;
    min-height: 32px;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nut-water-unit-btn:hover { background: var(--bg-hover); }

.nut-water-unit-btn[aria-pressed="true"] {
    background: var(--gold);
    color: #1a1200;
}

.nut-water-custom {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.nut-water-custom input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
}

.nut-water-custom .btn {
    min-height: 40px;
    flex-shrink: 0;
}

.nut-water-list {
    position: relative; /* anchor for showBreatheLoader() overlay */
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.nut-water-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.nut-water-time {
    color: var(--text-muted);
    min-width: 76px;
}

.nut-water-amount {
    color: var(--text);
    font-weight: 600;
    flex: 1 1 auto;
}

.nut-water-row .nut-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 14px;
}

/* ── Add/Edit Meal dialog ────────────────────────────── */
.nut-dialog-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
}

.nut-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 64px));
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    z-index: 91;
    padding: 0;
}

.nut-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.nut-dialog-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.nut-dialog-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.nut-dialog-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.nut-dialog-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nut-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.nut-field label {
    font-size: 13px;
    color: var(--text-muted);
}

.nut-field input,
.nut-field select,
.nut-field textarea {
    width: 100%;
    min-height: 44px;
}

.nut-field textarea {
    min-height: 60px;
    resize: vertical;
}

.nut-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nut-field-error {
    font-size: 12px;
    color: var(--red);
    margin: 0;
}

.nut-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
}

.nut-dialog-footer .btn {
    min-height: 44px;
}

/* ── Recent-meal autofill combobox ──────────────────── */
.nut-field-combobox {
    position: relative;
}

.nut-suggest-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.nut-suggest-option {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.nut-suggest-option:last-child {
    border-bottom: none;
}

.nut-suggest-option:hover,
.nut-suggest-option.nut-suggest-active {
    background: var(--bg-hover);
}

.nut-suggest-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.nut-suggest-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   ── Nutrition Templates V1, Task 8C ─────────────────────────────────
   Saved Templates section, the Manage my foods / Manage templates
   panels, and the Template / Food picker / Food Item builder dialogs.
   Reuses the same .nut-dialog*/.nut-field*/.nut-icon-btn/.card/.btn/
   .gf-state primitives already defined above -- no new visual system.
   ══════════════════════════════════════════════════════════════════ */

.nut-templates-section {
    margin-top: 20px;
}

.nut-templates-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.nut-templates-heading-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Post-v0.10.0 Nutrition UX Improvements, item 7 -- read-only date context
   line on the Templates tab (not a second date-nav control; see
   nutrition.html for why). */
.nut-templates-date-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.9em;
    color: var(--text-muted);
}

.nut-templates-date-context-change {
    border: none;
    background: none;
    color: var(--gold);
    font-size: inherit;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.nut-manage-toggle {
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    min-height: 40px;
}

.nut-manage-toggle:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.nut-templates-list {
    position: relative; /* anchor for showBreatheLoader() overlay */
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nut-template-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nut-template-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nut-template-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.nut-template-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.nut-template-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Task 8E -- "Linked to <Habit name>" status slot that replaces the "Add
   as habit" button once a Template has at least one active Nutrition
   action. Deliberately styled as a plain status label, never as a button
   -- there is no unlink control to trigger in V1 (see js/nutrition.js's
   templateHabitActions()/openAddHabitFromTemplateDialog()). Reuses the
   same muted-text treatment .nut-template-meta already establishes for
   secondary, non-interactive facts on a card. */
.nut-template-linked-status {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.nut-template-archived-row {
    opacity: 0.85;
}

.nut-archived-badge {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-hint);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    width: fit-content;
}

/* ── Task 8F -- review-status badges. Built on .nut-archived-badge's
   existing shape (font/case/radius/padding) above; these three modifiers
   only override color/background/border, reusing the project's existing
   subtle pill color language (--gold-dim/--green-dim/--red-dim +
   matching -border, css/style.css) rather than inventing new colors.
   Deliberately muted, not a strong banner -- always paired with real
   status text in the DOM (locked decision: never color-only meaning). */
.nut-review-status--pending {
    color: var(--gold);
    background: var(--gold-dim);
    border-color: var(--gold-border);
}
.nut-review-status--approved {
    color: var(--green);
    background: var(--green-dim);
    border-color: var(--green-border);
}
.nut-review-status--rejected {
    color: var(--red);
    background: var(--red-dim);
    border-color: var(--red-border);
}

.nut-templates-actions {
    margin-top: 14px;
}

.nut-manage-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.nut-manage-panel-heading {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 10px;
}

.nut-foods-list {
    position: relative;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nut-my-foods-new {
    margin-bottom: 4px;
}

.nut-food-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-input);
    flex-wrap: wrap;
}

.nut-food-row-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.nut-food-row-name {
    font-size: 14px;
    color: var(--text);
}

.nut-food-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.nut-foods-empty {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Template builder: ingredients list ─────────────── */
.nut-template-ingredients {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nut-ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nut-ingredient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--bg-input);
}

.nut-ingredient-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nut-ingredient-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.nut-ingredient-scaled {
    font-size: 12px;
    color: var(--text-muted);
}

.nut-ingredient-qty-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.nut-ingredient-qty-input {
    width: 72px;
    min-height: 40px;
    text-align: right;
}

.nut-ingredient-basis-unit {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.nut-ingredients-empty {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.nut-add-ingredient-btn {
    align-self: flex-start;
}

/* ── Template builder: nutrition preview ────────────── */
.nut-template-preview {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.nut-template-preview-heading {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.nut-template-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}

.nut-template-preview-line {
    font-size: 13px;
    color: var(--text);
}

/* ── Task 8D.1: Edit Meal dialog's calculated-nutrition summary, shown
   only for a structured meal in place of the direct macro inputs. Same
   spacing treatment as .nut-template-preview above (its own children --
   .nut-template-preview-heading/-grid/-line -- are reused as-is, so only
   the outer container needs a rule here). ── */
.nut-meal-calculated-summary:not(:empty) {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.nut-dialog-footer-spacer {
    flex: 1 1 auto;
}

.nut-archive-link-btn {
    background: none;
    border: none;
    color: var(--red);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 4px;
    min-height: 44px;
}

.nut-archive-link-btn:hover {
    text-decoration: underline;
}

/* ── Food picker dialog ──────────────────────────────── */
.nut-food-picker-group {
    margin-bottom: 14px;
}

.nut-food-picker-group-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-hint);
    margin-bottom: 8px;
}

.nut-food-picker-results {
    position: relative;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nut-food-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    min-height: 44px;
}

.nut-food-picker-row:hover {
    background: var(--bg-hover);
}

/* Shared Food Discovery sprint -- groups name + the compact macro line
   together in one column, kept separate from the right-aligned source
   label (.nut-food-source-label) which stays a sibling, not a child. */
.nut-food-picker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nut-food-picker-name {
    font-size: 14px;
    min-width: 0;
}

/* Compact macro line, e.g. "70 kcal · 6g protein / 100 g" -- omitted
   entirely (no empty row) when a food has no macro/basis data at all. */
.nut-food-picker-macros {
    font-size: 12px;
    color: var(--text-hint);
    min-width: 0;
}

.nut-food-source-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.nut-create-food-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* ── Private Food Item builder dialog ───────────────── */
.nut-radio-group {
    display: flex;
    gap: 16px;
}

.nut-radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text);
}

.nut-radio-option input {
    width: 20px;
    height: 20px;
    min-height: 20px;
}

.nut-field-label-static {
    font-size: 13px;
    color: var(--text-muted);
}

.nut-field-hint {
    font-size: 12px;
    color: var(--text-hint);
    margin: 0;
}

.nut-basis-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Post-v0.10.0 Nutrition UX Improvements -- low-stock threshold input +
   its item's own unit, shown inline (e.g. "6" + "egg"), same
   input-plus-label shape .nut-pantry-add-quantity-row-like fields already
   use elsewhere on this page. */
.nut-pantry-threshold-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nut-pantry-threshold-row input {
    max-width: 120px;
}

.nut-pantry-threshold-unit {
    font-size: 13px;
    color: var(--text-hint);
}

/* ── Mobile (<=900px): one-column compact flow ──────── */
@media (max-width: 900px) {
    .nut-page {
        padding: 20px 16px 32px;
    }

    .nut-title {
        font-size: 22px;
    }

    .nut-columns {
        grid-template-columns: 1fr;
    }

    .nut-pantry-columns {
        grid-template-columns: 1fr;
    }

    .nut-macro-grid {
        gap: 8px;
    }

    .nut-cal-primary {
        font-size: 24px;
    }

    .nut-water-quickadd button {
        flex: 1 1 30%;
    }

    .nut-field-row {
        grid-template-columns: 1fr;
    }

    .nut-dialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 48px);
    }

    /* Task 8C: ingredient rows and food-picker rows stack vertically on
       mobile instead of squeezing name+qty+remove onto one line -- keeps
       the quantity input a comfortable tap target and avoids horizontal
       scroll. */
    .nut-ingredient-row {
        flex-wrap: wrap;
    }

    .nut-ingredient-info {
        flex-basis: 100%;
    }

    .nut-ingredient-qty-wrap {
        flex: 1 1 auto;
    }

    .nut-ingredient-qty-input {
        flex: 1 1 auto;
        width: auto;
    }

    .nut-food-picker-row {
        flex-wrap: wrap;
    }

    .nut-food-row {
        flex-wrap: wrap;
    }

    .nut-food-row-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .nut-basis-row {
        grid-template-columns: 1fr;
    }

    .nut-template-preview-grid {
        grid-template-columns: 1fr;
    }

    /* Task 8D: the new "Add to today"/"Add to <date>" button sits beside
       Edit -- on narrow screens let the actions row take full card width
       and stack its two buttons instead of squeezing "Add to Aug 20" and
       "Edit" onto one line, matching the ingredient/food-row wrap pattern
       already used above. */
    .nut-template-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .nut-template-actions .btn {
        flex: 1 1 auto;
    }

    /* Task 9B -- Pantry rows follow the exact same stacking rule
       .nut-food-row already uses above (name/quantity/status wrap, then
       actions take full width) -- no new breakpoint logic. */
    .nut-pantry-row {
        flex-wrap: wrap;
    }

    .nut-pantry-row .nut-food-row-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Final Pre-Live UI Cleanup (locked decision 13): tighter padding
       instead of smaller text, no page-level horizontal overflow at
       narrow widths (verified down to 320px). Tabs stay on one row and
       scroll if truly needed rather than wrapping into a second row,
       which would push tabpanel content down unpredictably. */
    .nut-tablist {
        gap: 2px;
        padding: 3px;
    }

    .nut-tab {
        padding: 10px 10px;
        font-size: 13px;
    }
}

/* ── Inventory / Pantry V1 (Task 9A schema/RPCs, Task 9B UI). Reuses
   .nut-food-row/.nut-foods-list/.nut-archived-badge/.nut-manage-toggle/
   .nut-manage-panel's existing shapes wherever the row/list/badge/panel
   language is identical -- only new, Pantry-specific pieces (the
   quantity/status text, the two status badge color modifiers, the
   operation segmented control, and the History disclosure) get their own
   rules below. ── */

/* Post-v0.10.0 Nutrition UX Improvements -- Inventory Attention panel
   (Out of stock / Running low / Needs reconciliation). Reuses the existing
   .nut-section-heading/.card shapes for the section itself; only these
   small list/group/row rules are new. */
.nut-pantry-attention-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nut-pantry-attention-group + .nut-pantry-attention-group {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.nut-pantry-attention-group-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.nut-pantry-attention-count {
    font-weight: 400;
    color: var(--text-hint);
}

.nut-pantry-attention-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nut-pantry-attention-item {
    font-size: 13px;
    color: var(--text-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nut-pantry-summary {
    font-size: 13px;
    color: var(--text-hint);
    margin: 0 0 10px;
}

.nut-pantry-list {
    position: relative;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nut-pantry-row-wrap {
    display: flex;
    flex-direction: column;
}

.nut-pantry-row-archived {
    opacity: 0.85;
}

.nut-pantry-qty {
    font-size: 14px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Built on .nut-archived-badge's existing shape (font/case/radius/padding)
   above, same modifier pattern .nut-review-status--* already establishes
   for Task 8F -- reusing this project's existing subtle pill color
   language rather than inventing new colors. Always paired with real
   status text in the DOM (locked decision: never color-only meaning). */
.nut-inventory-status--out {
    color: var(--gold);
    background: var(--gold-dim);
    border-color: var(--gold-border);
}
.nut-inventory-status--mismatch {
    color: var(--red);
    background: var(--red-dim);
    border-color: var(--red-border);
}

.nut-pantry-history {
    margin-top: 6px;
}

.nut-pantry-history-toggle {
    font-size: 12px;
}

.nut-pantry-history-list {
    position: relative;
    min-height: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.nut-pantry-history-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

/* Post-v0.10.0 Nutrition UX Improvements -- compact date (or date+time in
   the full-history dialog) rendered by the one shared
   formatPantryHistoryDate() helper; muted so the delta/description stay
   the visual focus of the row. */
.nut-pantry-history-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nut-pantry-history-delta {
    font-variant-numeric: tabular-nums;
    min-width: 44px;
}

.nut-pantry-history-delta-pos {
    color: var(--green);
}

.nut-pantry-history-delta-neg {
    color: var(--red);
}

.nut-pantry-history-desc {
    color: var(--text-hint);
}

/* Final Pre-Live UI Cleanup (locked decision 14): shown only once the
   compact preview has more than 5 entries. Reuses .nut-manage-toggle's
   existing small-button look; the full-history dialog it opens
   (#nutPantryFullHistoryDialog, nutrition.html) reuses .nut-pantry-history-
   list/.nut-pantry-history-row verbatim via the shared buildPantryHistoryRow()
   renderer, so no separate "full" row style exists here. */
.nut-pantry-history-viewfull {
    margin-top: 2px;
    align-self: flex-start;
}

.nut-pantry-history-list--full {
    max-height: 60vh;
    overflow-y: auto;
}

/* ── Add-to-Pantry / Adjust dialog pieces -- both dialogs otherwise reuse
   .nut-dialog/.nut-field/.nut-field-row/.nut-field-error verbatim. ── */

.nut-pantry-add-food-name {
    font-size: 15px;
    color: var(--text);
    margin: 0;
}

.nut-pantry-adjust-current {
    font-size: 13px;
    color: var(--text-hint);
    margin: 2px 0 12px;
}

/* Informational note shown in "reactivate" mode -- deliberately NOT
   styled as an error (unlike the "duplicate" mode note, which reuses
   .nut-field-error for its already-established warning treatment). */
.nut-pantry-inline-note {
    font-size: 13px;
    color: var(--text-hint);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 0 0 12px;
}

.nut-pantry-op-group {
    flex-wrap: wrap;
}

/* ── Verified/shared consolidation notice (Task 9D) ──────────────────
   Rendered under an active, private-backed Pantry row that has an
   approved verified mapping (see findPantryConsolidationCandidates() /
   buildPantryConsolidationNotice() in nutrition.js). Reuses
   .nut-pantry-inline-note + .btn-secondary for the resting state, and
   the SAME .nut-confirm-delete-label/.nut-confirm-yes/.nut-confirm-no
   classes the meal/water delete confirm already established for the
   inline-confirm state -- deliberately the same tested visual language,
   not a new one. */
.nut-pantry-consolidate-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nut-pantry-consolidate-notice .nut-pantry-inline-note {
    flex: 1 1 auto;
    min-width: 160px;
    margin: 0;
}

.nut-pantry-consolidate-btn {
    flex: 0 0 auto;
}

/* Switching to a verified Pantry entry (or resolving a duplicate) is a
   neutral/positive action, not a destructive one -- .nut-confirm-yes's
   default red is correct for a delete confirmation but would misread as
   a warning here, so this notice alone overrides its color to the
   existing gold accent already used for primary actions elsewhere. */
.nut-pantry-consolidate-notice .nut-confirm-yes {
    background: var(--gold);
    color: #1a1200;
}

.nut-pantry-consolidate-notice .nut-confirm-yes:hover {
    background: #b8860b;
}