/* =============================================
   Macro Kitchen — "Midnight Kitchen" Design System
   Loaded AFTER app.css. The only file that holds colour literals.
   ============================================= */

/* ---------------------------------------------
   1. Design tokens
   --------------------------------------------- */
:root {
  color-scheme: dark;

  /* 1.1 Surfaces & borders */
  --mk-bg: #0B0B0F;
  --mk-bg-elevated: #121214;
  --mk-surface-1: #1A1A1F;
  --mk-surface-2: #22222A;
  --mk-surface-3: #2A2A30;
  --mk-border: rgba(255, 255, 255, 0.08);
  --mk-border-strong: rgba(255, 255, 255, 0.16);
  --mk-overlay: rgba(6, 6, 10, 0.72);

  /* 1.2 Text */
  --mk-text: #F5F6F8;
  --mk-text-muted: rgba(245, 246, 248, 0.70);
  --mk-text-subtle: rgba(245, 246, 248, 0.50);
  --mk-text-on-accent: #05161C;

  /* 1.3 Accent & gradient */
  --mk-accent: #2E7DFF;
  --mk-accent-2: #17D9C4;
  --mk-accent-text: #5AB0FF;
  --mk-accent-text-2: #3FE0CE;
  --mk-gradient-primary: linear-gradient(135deg, #2E7DFF 0%, #17D9C4 100%);
  --mk-gradient-soft: linear-gradient(135deg, rgba(46, 125, 255, 0.16) 0%, rgba(23, 217, 196, 0.16) 100%);
  --mk-accent-ring: rgba(46, 125, 255, 0.35);
  --mk-accent-subtle: rgba(46, 125, 255, 0.14);

  /* 1.4 Semantic / macro colours */
  --mk-calories: #34D399;
  --mk-protein: #5AB0FF;
  --mk-carbs: #F5B544;
  --mk-fat: #FF7A7A;
  --mk-fiber: #7DD3FC;
  --mk-success: #34D399;
  --mk-warning: #F5B544;
  --mk-danger: #FF7A7A;
  --mk-info: #7DD3FC;

  --mk-calories-subtle: rgba(52, 211, 153, 0.14);
  --mk-protein-subtle: rgba(90, 176, 255, 0.14);
  --mk-carbs-subtle: rgba(245, 181, 68, 0.14);
  --mk-fat-subtle: rgba(255, 122, 122, 0.14);
  --mk-fiber-subtle: rgba(125, 211, 252, 0.14);
  --mk-success-subtle: rgba(52, 211, 153, 0.14);
  --mk-warning-subtle: rgba(245, 181, 68, 0.14);
  --mk-danger-subtle: rgba(255, 122, 122, 0.14);
  --mk-info-subtle: rgba(125, 211, 252, 0.14);

  /* 1.5 Radii */
  --mk-radius-xs: 8px;
  --mk-radius-sm: 12px;
  --mk-radius-md: 16px;
  --mk-radius-lg: 20px;
  --mk-radius-xl: 24px;
  --mk-radius-pill: 999px;

  /* 1.6 Spacing */
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-7: 32px;
  --mk-space-8: 40px;
  --mk-space-9: 56px;

  --mk-card-pad: var(--mk-space-5);
  --mk-page-pad: var(--mk-space-4);
  --mk-stack: var(--mk-space-3);

  /* 1.7 Typography */
  --mk-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mk-font-num: 'Manrope', ui-monospace, sans-serif;

  --mk-fs-display: 2.5rem;
  --mk-fs-stat: 2rem;
  --mk-fs-h1: 1.5rem;
  --mk-fs-h2: 1.1875rem;
  --mk-fs-h3: 1.0625rem;
  --mk-fs-body: 0.9375rem;
  --mk-fs-sm: 0.8125rem;
  --mk-fs-xs: 0.6875rem;

  /* 1.8 Elevation */
  --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --mk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --mk-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --mk-glow-accent: 0 6px 20px rgba(46, 125, 255, 0.30);

  /* 1.9 Motion */
  --mk-dur-fast: 150ms;
  --mk-dur: 200ms;
  --mk-dur-slow: 250ms;
  --mk-dur-ring: 700ms;
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 1.10 Layout */
  --mk-nav-height: 64px;
  --mk-header-height: 56px;
  --mk-sidebar-width: 240px;
  --mk-content-max: 640px;
  --mk-safe-top: env(safe-area-inset-top, 0px);
  --mk-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Legacy alias — app.css `main` padding and `.chat-fab` still reference it */
  --mk-bottom-nav-height: var(--mk-nav-height);
}

/* ---------------------------------------------
   2. Bootstrap variable bridge
   --------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--mk-bg);
  --bs-body-bg-rgb: 11, 11, 15;
  --bs-body-color: var(--mk-text);
  --bs-body-color-rgb: 245, 246, 248;
  --bs-body-font-family: var(--mk-font-sans);
  --bs-body-font-size: var(--mk-fs-body);

  --bs-emphasis-color: var(--mk-text);
  --bs-secondary-color: var(--mk-text-muted);
  --bs-secondary-bg: var(--mk-surface-2);
  --bs-tertiary-color: var(--mk-text-subtle);
  --bs-tertiary-bg: var(--mk-surface-1);
  --bs-heading-color: var(--mk-text);

  --bs-border-color: var(--mk-border);
  --bs-border-color-translucent: var(--mk-border);
  --bs-border-radius: var(--mk-radius-sm);
  --bs-border-radius-sm: var(--mk-radius-xs);
  --bs-border-radius-lg: var(--mk-radius-md);
  --bs-border-radius-xl: var(--mk-radius-lg);
  --bs-border-radius-xxl: var(--mk-radius-xl);
  --bs-border-radius-pill: var(--mk-radius-pill);

  --bs-primary: var(--mk-accent);
  --bs-primary-rgb: 46, 125, 255;
  --bs-primary-text-emphasis: var(--mk-accent-text);
  --bs-primary-bg-subtle: var(--mk-accent-subtle);
  --bs-primary-border-subtle: rgba(46, 125, 255, 0.35);

  --bs-success: var(--mk-success);
  --bs-success-rgb: 52, 211, 153;
  --bs-success-text-emphasis: var(--mk-success);
  --bs-success-bg-subtle: var(--mk-success-subtle);
  --bs-success-border-subtle: rgba(52, 211, 153, 0.35);

  --bs-danger: var(--mk-danger);
  --bs-danger-rgb: 255, 122, 122;
  --bs-danger-text-emphasis: var(--mk-danger);
  --bs-danger-bg-subtle: var(--mk-danger-subtle);
  --bs-danger-border-subtle: rgba(255, 122, 122, 0.35);

  --bs-warning: var(--mk-warning);
  --bs-warning-rgb: 245, 181, 68;
  --bs-warning-text-emphasis: var(--mk-warning);
  --bs-warning-bg-subtle: var(--mk-warning-subtle);
  --bs-warning-border-subtle: rgba(245, 181, 68, 0.35);

  --bs-info: var(--mk-info);
  --bs-info-rgb: 125, 211, 252;
  --bs-info-text-emphasis: var(--mk-info);
  --bs-info-bg-subtle: var(--mk-info-subtle);
  --bs-info-border-subtle: rgba(125, 211, 252, 0.35);

  --bs-secondary: var(--mk-surface-3);
  --bs-secondary-rgb: 42, 42, 48;
  --bs-light: var(--mk-surface-2);
  --bs-light-rgb: 34, 34, 42;
  --bs-dark: var(--mk-surface-3);
  --bs-dark-rgb: 42, 42, 48;

  --bs-link-color: var(--mk-accent-text);
  --bs-link-color-rgb: 90, 176, 255;
  --bs-link-hover-color: var(--mk-accent-text-2);
  --bs-link-hover-color-rgb: 63, 224, 206;

  --bs-code-color: var(--mk-accent-text-2);
  --bs-highlight-bg: var(--mk-warning-subtle);

  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------------------------------------------
   3. Base element overrides
   --------------------------------------------- */
html,
body {
  background-color: var(--mk-bg);
  color: var(--mk-text);
}

body {
  font-family: var(--mk-font-sans);
  font-size: var(--mk-fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--mk-text);
  letter-spacing: -0.01em;
}

hr {
  border-color: var(--mk-border);
  opacity: 1;
}

.bi {
  vertical-align: -0.125em;
}

::selection {
  background: var(--mk-accent-subtle);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
  border-radius: var(--mk-radius-xs);
}

/* ---------------------------------------------
   4. Bootstrap component overrides
   --------------------------------------------- */
.card {
  --bs-card-bg: var(--mk-surface-1);
  --bs-card-border-color: var(--mk-border);
  --bs-card-cap-bg: var(--mk-surface-2);
  --bs-card-color: var(--mk-text);
  background-color: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  color: var(--mk-text);
}

.card-header,
.card-footer {
  background-color: transparent;
  border-color: var(--mk-border);
  color: var(--mk-text);
}

.modal {
  --bs-modal-bg: var(--mk-surface-1);
  --bs-modal-border-color: var(--mk-border);
  --bs-modal-color: var(--mk-text);
  --bs-modal-header-border-color: var(--mk-border);
  --bs-modal-footer-border-color: var(--mk-border);
  --bs-modal-border-radius: var(--mk-radius-lg);
}

.modal-backdrop {
  --bs-backdrop-bg: #06060A;
  --bs-backdrop-opacity: 0.72;
}

.btn-close {
  filter: var(--bs-btn-close-white-filter);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--mk-surface-2);
  border-color: var(--mk-border);
  color: var(--mk-text);
  border-radius: var(--mk-radius-sm);
}

.form-control::placeholder {
  color: var(--mk-text-subtle);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--mk-surface-2);
  border-color: var(--mk-accent);
  color: var(--mk-text);
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--mk-surface-1);
  color: var(--mk-text-subtle);
}

/* Scrollable timezone select (native — reliable on mobile) */
.mk-tz-select {
  /* 16px avoids iOS focus zoom; size=10 shows a scrollable list */
  font-size: 16px;
  min-height: 280px;
  max-height: min(360px, 45vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--mk-surface-2);
  border-color: var(--mk-border);
  color: var(--mk-text);
  padding: 0.25rem;
}

.mk-tz-select:focus {
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
}

.mk-tz-select option {
  padding: 0.55rem 0.65rem;
  min-height: 44px;
}

.input-group-text {
  color: var(--mk-text-muted);
}

.form-label,
.form-text,
.col-form-label {
  color: var(--mk-text-muted);
}

.form-check-input {
  background-color: var(--mk-surface-2);
  border-color: var(--mk-border-strong);
}

.form-check-input:checked {
  background-color: var(--mk-accent);
  border-color: var(--mk-accent);
}

.form-check-input:focus {
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
}

/* Native date/time inputs — force dark UA chrome so the value + calendar popup
   stay readable. Without color-scheme, Chromium often paints black-on-black.
   showPicker() in ui.js opens the calendar on field tap (mobile / fixed sheets
   often swallow the tiny default icon click). Do NOT add a background-image
   calendar glyph here — that doubles up with the native indicator. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.mk-date-input {
  color-scheme: dark;
  color: var(--mk-text);
  background-color: var(--mk-surface-2);
  background-image: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  filter: invert(1) brightness(1.4);
}

.list-group {
  --bs-list-group-bg: var(--mk-surface-1);
  --bs-list-group-color: var(--mk-text);
  --bs-list-group-border-color: var(--mk-border);
  --bs-list-group-action-hover-bg: var(--mk-surface-2);
  --bs-list-group-action-hover-color: var(--mk-text);
  --bs-list-group-action-active-bg: var(--mk-surface-3);
  --bs-list-group-action-active-color: var(--mk-text);
  --bs-list-group-border-radius: var(--mk-radius-md);
}

.list-group-item {
  background-color: var(--mk-surface-1);
  border-color: var(--mk-border);
  color: var(--mk-text);
}

.nav-underline {
  --bs-nav-underline-link-active-color: var(--mk-accent-text);
  --bs-nav-link-color: var(--mk-text-muted);
  --bs-nav-link-hover-color: var(--mk-text);
}

.nav-underline .nav-link {
  color: var(--mk-text-muted);
  border-bottom-color: transparent;
}

.nav-underline .nav-link.active {
  color: var(--mk-accent-text);
  border-bottom-color: var(--mk-accent);
}

.progress,
.progress-stacked {
  --bs-progress-bg: var(--mk-surface-3);
  --bs-progress-bar-bg: var(--mk-accent);
  --bs-progress-border-radius: var(--mk-radius-pill);
  background-color: var(--mk-surface-3);
  border-radius: var(--mk-radius-pill);
}

.placeholder {
  background-color: var(--mk-surface-3);
  opacity: 1;
  border-radius: var(--mk-radius-xs);
}

.placeholder-glow .placeholder {
  animation: mk-placeholder-glow 1.6s ease-in-out infinite;
}

@keyframes mk-placeholder-glow {
  50% { opacity: 0.35; }
}

.dropdown-menu {
  --bs-dropdown-bg: var(--mk-surface-2);
  --bs-dropdown-border-color: var(--mk-border);
  --bs-dropdown-color: var(--mk-text);
  --bs-dropdown-link-color: var(--mk-text);
  --bs-dropdown-link-hover-bg: var(--mk-surface-3);
  --bs-dropdown-link-hover-color: var(--mk-text);
  --bs-dropdown-border-radius: var(--mk-radius-md);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mk-text);
  --bs-table-border-color: var(--mk-border);
  --bs-table-striped-bg: var(--mk-surface-1);
  --bs-table-striped-color: var(--mk-text);
  --bs-table-hover-bg: var(--mk-surface-2);
  --bs-table-hover-color: var(--mk-text);
}

.alert {
  border-radius: var(--mk-radius-md);
  border-width: 1px;
}

.alert-success {
  --bs-alert-bg: var(--mk-success-subtle);
  --bs-alert-border-color: rgba(52, 211, 153, 0.30);
  --bs-alert-color: var(--mk-success);
}

.alert-danger {
  --bs-alert-bg: var(--mk-danger-subtle);
  --bs-alert-border-color: rgba(255, 122, 122, 0.30);
  --bs-alert-color: var(--mk-danger);
}

.alert-warning {
  --bs-alert-bg: var(--mk-warning-subtle);
  --bs-alert-border-color: rgba(245, 181, 68, 0.30);
  --bs-alert-color: var(--mk-warning);
}

.alert-info {
  --bs-alert-bg: var(--mk-info-subtle);
  --bs-alert-border-color: rgba(125, 211, 252, 0.30);
  --bs-alert-color: var(--mk-info);
}

.alert-primary {
  --bs-alert-bg: var(--mk-accent-subtle);
  --bs-alert-border-color: rgba(46, 125, 255, 0.30);
  --bs-alert-color: var(--mk-accent-text);
}

.alert-secondary,
.alert-light,
.alert-dark {
  --bs-alert-bg: var(--mk-surface-2);
  --bs-alert-border-color: var(--mk-border);
  --bs-alert-color: var(--mk-text);
}

/* Muted body copy nested inside a tinted alert keeps its own contrast */
.alert .text-muted {
  color: var(--mk-text-muted) !important;
}

.badge {
  border-radius: var(--mk-radius-pill);
  font-weight: 600;
}

.btn {
  --bs-btn-border-radius: var(--mk-radius-sm);
  border-radius: var(--mk-radius-sm);
  font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: var(--mk-accent);
  --bs-btn-border-color: var(--mk-accent);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #4A8FFF;
  --bs-btn-hover-border-color: #4A8FFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #1F63D6;
  --bs-btn-active-border-color: #1F63D6;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--mk-accent);
  --bs-btn-disabled-border-color: var(--mk-accent);
  --bs-btn-disabled-color: #FFFFFF;
}

.btn-success,
.btn-info,
.btn-warning {
  --bs-btn-color: var(--mk-text-on-accent);
  --bs-btn-hover-color: var(--mk-text-on-accent);
  --bs-btn-active-color: var(--mk-text-on-accent);
  --bs-btn-disabled-color: var(--mk-text-on-accent);
}

.btn-danger {
  --bs-btn-color: var(--mk-text-on-accent);
  --bs-btn-hover-color: var(--mk-text-on-accent);
  --bs-btn-active-color: var(--mk-text-on-accent);
  --bs-btn-disabled-color: var(--mk-text-on-accent);
}

.btn-secondary,
.btn-dark {
  --bs-btn-bg: var(--mk-surface-2);
  --bs-btn-border-color: var(--mk-border-strong);
  --bs-btn-color: var(--mk-text);
  --bs-btn-hover-bg: var(--mk-surface-3);
  --bs-btn-hover-border-color: var(--mk-border-strong);
  --bs-btn-hover-color: var(--mk-text);
  --bs-btn-active-bg: var(--mk-surface-3);
  --bs-btn-active-border-color: var(--mk-border-strong);
  --bs-btn-active-color: var(--mk-text);
}

.btn-light {
  --bs-btn-bg: var(--mk-surface-2);
  --bs-btn-border-color: var(--mk-border-strong);
  --bs-btn-color: var(--mk-text);
  --bs-btn-hover-bg: var(--mk-surface-3);
  --bs-btn-hover-color: var(--mk-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--mk-text);
  --bs-btn-border-color: var(--mk-border-strong);
  --bs-btn-hover-bg: var(--mk-surface-3);
  --bs-btn-hover-border-color: var(--mk-border-strong);
  --bs-btn-hover-color: var(--mk-text);
  --bs-btn-active-bg: var(--mk-surface-3);
  --bs-btn-active-border-color: var(--mk-border-strong);
  --bs-btn-active-color: var(--mk-text);
}

.btn-outline-primary {
  --bs-btn-color: var(--mk-accent-text);
  --bs-btn-border-color: rgba(46, 125, 255, 0.45);
  --bs-btn-hover-bg: var(--mk-accent-subtle);
  --bs-btn-hover-border-color: var(--mk-accent);
  --bs-btn-hover-color: var(--mk-accent-text);
  --bs-btn-active-bg: var(--mk-accent-subtle);
  --bs-btn-active-color: var(--mk-accent-text);
}

.btn-outline-success {
  --bs-btn-color: var(--mk-success);
  --bs-btn-border-color: rgba(52, 211, 153, 0.45);
  --bs-btn-hover-bg: var(--mk-success-subtle);
  --bs-btn-hover-border-color: var(--mk-success);
  --bs-btn-hover-color: var(--mk-success);
  --bs-btn-active-bg: var(--mk-success-subtle);
  --bs-btn-active-color: var(--mk-success);
}

.btn-outline-danger {
  --bs-btn-color: var(--mk-danger);
  --bs-btn-border-color: rgba(255, 122, 122, 0.45);
  --bs-btn-hover-bg: var(--mk-danger-subtle);
  --bs-btn-hover-border-color: var(--mk-danger);
  --bs-btn-hover-color: var(--mk-danger);
  --bs-btn-active-bg: var(--mk-danger-subtle);
  --bs-btn-active-color: var(--mk-danger);
}

.btn-outline-warning {
  --bs-btn-color: var(--mk-warning);
  --bs-btn-border-color: rgba(245, 181, 68, 0.45);
  --bs-btn-hover-bg: var(--mk-warning-subtle);
  --bs-btn-hover-border-color: var(--mk-warning);
  --bs-btn-hover-color: var(--mk-warning);
  --bs-btn-active-bg: var(--mk-warning-subtle);
  --bs-btn-active-color: var(--mk-warning);
}

.btn-outline-info {
  --bs-btn-color: var(--mk-info);
  --bs-btn-border-color: rgba(125, 211, 252, 0.45);
  --bs-btn-hover-bg: var(--mk-info-subtle);
  --bs-btn-hover-border-color: var(--mk-info);
  --bs-btn-hover-color: var(--mk-info);
  --bs-btn-active-bg: var(--mk-info-subtle);
  --bs-btn-active-color: var(--mk-info);
}

.btn-link {
  --bs-btn-color: var(--mk-accent-text);
  --bs-btn-hover-color: var(--mk-accent-text-2);
}

.spinner-border,
.spinner-grow {
  color: var(--mk-text-muted);
}

/* ---------------------------------------------
   5. Legacy utility neutralisation
   Keeps the ~30 out-of-scope templates legible with zero edits.
   --------------------------------------------- */
[data-bs-theme="dark"] .bg-white { background-color: var(--mk-surface-1) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--mk-surface-2) !important; }
[data-bs-theme="dark"] .bg-body { background-color: var(--mk-bg) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--mk-text) !important; }
[data-bs-theme="dark"] .text-black { color: var(--mk-text) !important; }
[data-bs-theme="dark"] .text-body { color: var(--mk-text) !important; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary { color: var(--mk-text-muted) !important; }
[data-bs-theme="dark"] .text-success { color: var(--mk-success) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--mk-danger) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--mk-warning) !important; }
[data-bs-theme="dark"] .text-info { color: var(--mk-info) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--mk-accent-text) !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: var(--mk-carbs) !important; }
[data-bs-theme="dark"] .text-success-emphasis { color: var(--mk-success) !important; }
[data-bs-theme="dark"] .text-primary-emphasis { color: var(--mk-accent-text) !important; }
[data-bs-theme="dark"] .text-danger-emphasis { color: var(--mk-danger) !important; }
[data-bs-theme="dark"] .text-info-emphasis { color: var(--mk-info) !important; }
[data-bs-theme="dark"] .text-bg-light {
  background-color: var(--mk-surface-2) !important;
  color: var(--mk-text) !important;
}
[data-bs-theme="dark"] .text-bg-dark {
  background-color: var(--mk-surface-3) !important;
  color: var(--mk-text) !important;
}
/* Bootstrap's warning/info swatches stay light in dark mode, so a badge using
   them needs near-black text — including where the template already asked for
   `.text-dark`, which the rule above would otherwise flip to near-white. */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-info.text-dark {
  color: var(--mk-text-on-accent) !important;
}

[data-bs-theme="dark"] .border { border-color: var(--mk-border) !important; }
[data-bs-theme="dark"] .shadow-sm { box-shadow: var(--mk-shadow-sm) !important; }
[data-bs-theme="dark"] .shadow { box-shadow: var(--mk-shadow-md) !important; }
[data-bs-theme="dark"] .shadow-lg { box-shadow: var(--mk-shadow-lg) !important; }

/* ---------------------------------------------
   6. Typography helpers
   --------------------------------------------- */
.mk-num {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mk-eyebrow {
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}

.mk-text-muted { color: var(--mk-text-muted); }
.mk-text-subtle { color: var(--mk-text-subtle); }
.mk-text-accent { color: var(--mk-accent-text); }

.mk-wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--mk-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Auth screens — centred card, no bottom nav present. */
.mk-auth {
  display: flex;
  justify-content: center;
  padding: var(--mk-space-6) var(--mk-space-4) var(--mk-space-8);
}

.mk-auth__card {
  width: 100%;
  max-width: 420px;
}

.mk-auth__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-gradient-primary);
  color: var(--mk-text-on-accent);
  box-shadow: var(--mk-glow-accent);
}

.mk-auth__title {
  font-size: var(--mk-fs-h1);
}

/* ---------------------------------------------
   7. App shell — topbar, header, nav, page
   --------------------------------------------- */
.mk-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: var(--mk-bg-elevated);
  padding-top: var(--mk-safe-top);
  border-bottom: 1px solid var(--mk-border);
}

.mk-topbar--bare {
  background: transparent;
  border-bottom: none;
}

.mk-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  padding: var(--mk-space-2) var(--mk-space-4);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  margin: 0;
}

.mk-banner--warn {
  background: var(--mk-warning-subtle);
  color: var(--mk-warning);
}

.mk-header {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  min-height: var(--mk-header-height);
  padding: 0 var(--mk-page-pad);
}

.mk-header__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mk-header__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--mk-fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-header__right {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  flex-shrink: 0;
}

.mk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mk-surface-2);
  color: var(--mk-text);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--mk-surface-2), var(--mk-surface-2)), var(--mk-gradient-primary);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.mk-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: var(--mk-fs-h2);
}

.mk-avatar--ring {
  box-shadow: var(--mk-glow-accent);
}

.mk-profile__name {
  font-size: var(--mk-fs-h2);
  font-weight: 700;
  color: var(--mk-text);
}

.mk-avatar:active {
  transform: scale(0.94);
}

/* Header/nav hit areas */
.mk-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mk-text-muted);
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
  transition: color var(--mk-dur-fast) var(--mk-ease),
              background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-iconbtn:active {
  background: var(--mk-surface-3);
  color: var(--mk-text);
}

/* ---- Navigation ---- */
.mk-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  height: calc(var(--mk-nav-height) + var(--mk-safe-bottom));
  padding-bottom: var(--mk-safe-bottom);
  background: var(--mk-bg-elevated);
  border-top: 1px solid var(--mk-border);
}

@supports (backdrop-filter: blur(20px)) {
  .mk-nav {
    background: color-mix(in srgb, var(--mk-bg-elevated) 88%, transparent);
    backdrop-filter: blur(20px);
  }
}

.mk-nav__brand {
  display: none;
}

.mk-nav__tabs {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.mk-nav__tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--mk-space-1) 0;
  color: var(--mk-text-subtle);
  text-decoration: none;
  transition: color var(--mk-dur-fast) var(--mk-ease),
              transform var(--mk-dur-fast) var(--mk-ease);
}

.mk-nav__tab:active {
  transform: scale(0.94);
  color: var(--mk-text);
}

.mk-nav__tab--active {
  color: var(--mk-accent-text);
}

.mk-nav__tab--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-primary);
}

.mk-nav__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* The badge endpoint also returns a Bootstrap icon; the nav renders its own
   Lucide glyph, so only the count bubble is shown. */
.mk-nav__icon #nav-trainer-badge {
  position: absolute !important;
  inset: 0;
}

.mk-nav__icon #nav-trainer-badge .bi {
  display: none;
}

.mk-nav__label {
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  .mk-nav__tab:hover { color: var(--mk-text); }
  .mk-nav__tab--active:hover { color: var(--mk-accent-text); }
}

/* ---- Page container ---- */
.mk-page {
  max-width: var(--mk-content-max);
  margin-inline: auto;
  padding-inline: var(--mk-page-pad);
  padding-block-start: var(--mk-space-4);
}

.mk-stack > * + * {
  margin-top: var(--mk-stack);
}

/* ---- Desktop: bottom bar becomes a sidebar ---- */
@media (min-width: 768px) {
  /* Only signed-in pages render the nav, so only they get the sidebar gutter. */
  body.mk-has-nav {
    padding-left: var(--mk-sidebar-width);
  }

  main {
    padding-bottom: var(--mk-space-7);
  }

  .mk-nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--mk-sidebar-width);
    height: 100%;
    padding: var(--mk-safe-top) var(--mk-space-3) var(--mk-space-4);
    border-top: none;
    border-right: 1px solid var(--mk-border);
  }

  .mk-nav__brand {
    display: block;
    padding: var(--mk-space-6) var(--mk-space-3);
    font-size: var(--mk-fs-h2);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .mk-nav__tabs {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mk-space-1);
  }

  .mk-nav__tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--mk-space-3);
    min-height: 48px;
    padding: var(--mk-space-3) var(--mk-space-4);
    border-radius: var(--mk-radius-sm);
  }

  .mk-nav__tab--active {
    background: var(--mk-gradient-soft);
  }

  .mk-nav__tab--active::after {
    display: none;
  }

  .mk-nav__label {
    font-size: var(--mk-fs-body);
    font-weight: 600;
    letter-spacing: 0;
  }

  @media (hover: hover) {
    .mk-nav__tab:hover { background: var(--mk-surface-2); }
    .mk-nav__tab--active:hover { background: var(--mk-gradient-soft); }
  }
}

/* ---------------------------------------------
   8. mk-card
   --------------------------------------------- */
.mk-card {
  display: block;
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  color: var(--mk-text);
  overflow: hidden;
}

.mk-card--elevated {
  background: var(--mk-surface-2);
  box-shadow: var(--mk-shadow-md);
}

.mk-card--accent {
  background-image: var(--mk-gradient-soft);
  border-color: rgba(46, 125, 255, 0.35);
}

.mk-card--hero {
  border-radius: var(--mk-radius-xl);
}

.mk-card__head {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-card-pad) var(--mk-card-pad) 0;
}

.mk-card--flush > .mk-card__head {
  padding: var(--mk-card-pad);
}

.mk-card__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--mk-radius-xs);
  background: var(--mk-surface-2);
  color: var(--mk-accent-text);
}

.mk-card__titles {
  min-width: 0;
}

.mk-card__title {
  margin: 0;
  font-size: var(--mk-fs-h3);
  font-weight: 600;
  color: var(--mk-text);
}

.mk-card__subtitle {
  margin: 2px 0 0;
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

.mk-card__body {
  padding: var(--mk-card-pad);
}

.mk-card__head + .mk-card__body {
  padding-top: var(--mk-space-4);
}

.mk-card--flush > .mk-card__body,
.mk-card__body--flush {
  padding: 0;
}

.mk-spacer {
  flex: 1;
}

a.mk-card {
  text-decoration: none;
  transition: transform var(--mk-dur-fast) var(--mk-ease);
}

a.mk-card:active {
  transform: scale(0.99);
}

/* ---------------------------------------------
   9. mk-btn
   --------------------------------------------- */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  border: 1px solid transparent;
  border-radius: var(--mk-radius-sm);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--mk-dur-fast) var(--mk-ease),
              background-color var(--mk-dur-fast) var(--mk-ease),
              box-shadow var(--mk-dur-fast) var(--mk-ease),
              border-color var(--mk-dur-fast) var(--mk-ease);
}

/* Spec calls for 40px here but also requires a 44px hit area; 44px satisfies
   both without a transparent overflow pseudo-element. */
.mk-btn--sm {
  min-height: 44px;
  padding: var(--mk-space-2) var(--mk-space-3);
  font-size: var(--mk-fs-sm);
}

.mk-btn--md {
  min-height: 48px;
  padding: var(--mk-space-3) var(--mk-space-5);
  font-size: var(--mk-fs-body);
}

.mk-btn--lg {
  min-height: 56px;
  padding: var(--mk-space-4) var(--mk-space-6);
  font-size: var(--mk-fs-h3);
}

.mk-btn--block {
  display: flex;
  width: 100%;
}

.mk-btn--primary {
  background: var(--mk-gradient-primary);
  color: var(--mk-text-on-accent);
  border-color: transparent;
}

.mk-btn--secondary {
  background: transparent;
  border-color: var(--mk-border-strong);
  color: var(--mk-text);
}

.mk-btn--secondary.mk-btn--danger {
  color: var(--mk-danger);
  border-color: rgba(255, 122, 122, 0.45);
}

.mk-btn--secondary.mk-btn--accent {
  color: var(--mk-accent-text);
  border-color: rgba(46, 125, 255, 0.45);
}

.mk-btn--secondary.mk-btn--warning {
  color: var(--mk-warning);
  border-color: rgba(255, 197, 92, 0.45);
}

/* Solid warning — used for the "favourited" state. */
.mk-btn--warning {
  background: var(--mk-warning);
  border-color: transparent;
  color: var(--mk-text-on-accent);
}

/* Favorite toggle — solid, high-contrast (outline gold was unreadable on dark) */
.mk-btn--fav {
  background: rgba(245, 181, 68, 0.16);
  border-color: #F5B544;
  color: #FFE8A8;
  font-weight: 700;
  white-space: normal;
}

.mk-btn--fav .mk-icon {
  color: #F5B544;
  flex-shrink: 0;
}

.mk-btn--fav-on {
  background: linear-gradient(135deg, #F5B544 0%, #E89A2E 100%);
  border-color: transparent;
  color: #1A1205;
  font-weight: 700;
}

.mk-btn--fav-on .mk-icon {
  color: #1A1205;
}

@media (hover: hover) {
  .mk-btn--fav:hover {
    background: rgba(245, 181, 68, 0.28);
    border-color: #FFD06A;
    color: #FFF4CC;
  }

  .mk-btn--fav-on:hover {
    box-shadow: 0 0 0 3px rgba(245, 181, 68, 0.28);
  }
}

.mk-btn:active {
  transform: scale(0.97);
}

.mk-btn--secondary:active {
  background: var(--mk-surface-3);
}

.mk-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
}

.mk-btn[disabled],
.mk-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  transform: none;
}

@media (hover: hover) {
  .mk-btn--primary:hover { box-shadow: var(--mk-glow-accent); }
  .mk-btn--secondary:hover { background: var(--mk-surface-2); }
}

/* ---------------------------------------------
   10. mk-stat
   --------------------------------------------- */
.mk-stat {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.mk-stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mk-space-3);
}

.mk-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mk-radius-xs);
  background: var(--mk-surface-2);
  color: var(--mk-accent-text);
  flex-shrink: 0;
}

.mk-stat__figure {
  display: flex;
  align-items: baseline;
  gap: var(--mk-space-2);
  margin-top: var(--mk-space-3);
}

/* Compact remaining-calories card: centre the figure, drop dead head space */
.mk-stat--centered .mk-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--mk-space-4);
  gap: var(--mk-space-2);
  min-height: 0;
}

.mk-stat--centered .mk-stat__head {
  display: none;
}

.mk-stat--centered .mk-stat__figure {
  margin-top: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--mk-space-2);
}

.mk-stat--centered .mk-stat__icon {
  width: 28px;
  height: 28px;
  background: var(--mk-calories-subtle);
  color: var(--mk-calories);
}

.mk-stat--centered .mk-stat__label {
  margin-top: 0;
  width: 100%;
  text-align: center;
}

.mk-stat__value {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-stat);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mk-text);
}

.mk-stat--calories .mk-stat__value { color: var(--mk-calories); }
.mk-stat--protein .mk-stat__value { color: var(--mk-protein); }
.mk-stat--carbs .mk-stat__value { color: var(--mk-carbs); }
.mk-stat--fat .mk-stat__value { color: var(--mk-fat); }
.mk-stat--fiber .mk-stat__value { color: var(--mk-fiber); }
.mk-stat--success .mk-stat__value { color: var(--mk-success); }
.mk-stat--danger .mk-stat__value { color: var(--mk-danger); }

.mk-stat__unit {
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

.mk-stat__label {
  margin-top: var(--mk-space-2);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}

.mk-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
  padding: 4px 10px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-surface-2);
  color: var(--mk-text-muted);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------
   11. mk-progress-ring
   --------------------------------------------- */
.mk-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mk-ring__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mk-ring__track {
  stroke: var(--mk-surface-3);
}

.mk-ring__arc {
  transition: stroke-dashoffset var(--mk-dur-ring) var(--mk-ease);
}

.mk-ring--over .mk-ring__arc {
  stroke: var(--mk-warning);
}

.mk-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12%;
}

.mk-ring__value {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mk-text);
}

.mk-ring__unit,
.mk-ring__label {
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

.mk-ring__label {
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-ring__unit {
  margin-top: 6px;
}

.mk-ring__icon {
  color: var(--mk-accent-text);
}

/* ---------------------------------------------
   12. mk-badge
   --------------------------------------------- */
.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
  padding: 4px 10px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid transparent;
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.mk-badge--sm {
  padding: 2px 8px;
  font-size: 0.625rem;
}

.mk-badge--neutral {
  background: var(--mk-surface-2);
  border-color: var(--mk-border);
  color: var(--mk-text-muted);
}

.mk-badge--accent {
  background: var(--mk-accent-subtle);
  border-color: rgba(46, 125, 255, 0.30);
  color: var(--mk-accent-text);
}

.mk-badge--success {
  background: var(--mk-success-subtle);
  border-color: rgba(52, 211, 153, 0.30);
  color: var(--mk-success);
}

.mk-badge--warning {
  background: var(--mk-warning-subtle);
  border-color: rgba(245, 181, 68, 0.30);
  color: var(--mk-warning);
}

.mk-badge--danger {
  background: var(--mk-danger-subtle);
  border-color: rgba(255, 122, 122, 0.30);
  color: var(--mk-danger);
}

.mk-badge--info {
  background: var(--mk-info-subtle);
  border-color: rgba(125, 211, 252, 0.30);
  color: var(--mk-info);
}

.mk-badge--gradient,
.mk-badge--pro {
  background: var(--mk-gradient-primary);
  border-color: transparent;
  color: var(--mk-text-on-accent);
  font-weight: 700;
}

.mk-badge--glow {
  box-shadow: var(--mk-glow-accent);
}

/* ---------------------------------------------
   13. mk-streak
   --------------------------------------------- */
.mk-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-3);
}

.mk-streak__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mk-radius-sm);
  background-image: var(--mk-gradient-soft);
  color: var(--mk-accent-text-2);
  flex-shrink: 0;
}

.mk-streak--lg .mk-streak__tile {
  width: 52px;
  height: 52px;
}

.mk-streak__count {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mk-text);
  line-height: 1;
}

.mk-streak__label {
  display: block;
  margin-top: 2px;
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}

.mk-streak--active .mk-streak__tile > * {
  animation: mk-spark 3s ease-in-out infinite;
}

.mk-streak--idle .mk-streak__tile {
  background-image: none;
  background-color: var(--mk-surface-2);
  color: var(--mk-text-subtle);
}

.mk-streak--idle .mk-streak__count,
.mk-streak--idle .mk-streak__label {
  color: var(--mk-text-subtle);
}

@keyframes mk-spark {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ---------------------------------------------
   14. mk-section-title
   --------------------------------------------- */
.mk-section-title {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-3);
}

.mk-section-title__text {
  margin: 0;
  font-size: var(--mk-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mk-text);
}

.mk-section-title__spacer {
  flex: 1;
}

.mk-section-title__action {
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--mk-accent-text);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
}

.mk-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mk-text);
  cursor: pointer;
}

.mk-section-toggle__chevron {
  display: inline-flex;
  color: var(--mk-text-subtle);
}

.mk-goals-hero {
  text-align: center;
}

.mk-goals-hero__foot {
  margin-top: var(--mk-space-4);
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

.mk-goals-hero__foot .mk-num {
  font-weight: 700;
  color: var(--mk-text);
}

.drag-handle {
  color: var(--mk-text-subtle);
  cursor: grab;
  touch-action: none;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------
   15. mk-meter
   --------------------------------------------- */
.mk-meter + .mk-meter {
  margin-top: var(--mk-space-4);
}

.mk-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mk-space-3);
  margin-bottom: var(--mk-space-2);
}

.mk-meter__label {
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}

.mk-meter__value {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--mk-text);
}

.mk-meter__track {
  height: 10px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-surface-3);
  overflow: hidden;
}

.mk-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-accent);
  transition: width var(--mk-dur-ring) var(--mk-ease);
}

.mk-meter--calories .mk-meter__fill { background: var(--mk-calories); }
.mk-meter--protein .mk-meter__fill { background: var(--mk-protein); }
.mk-meter--carbs .mk-meter__fill { background: var(--mk-carbs); }
.mk-meter--fat .mk-meter__fill { background: var(--mk-fat); }
.mk-meter--fiber .mk-meter__fill { background: var(--mk-fiber); }
.mk-meter--accent .mk-meter__fill { background: var(--mk-gradient-primary); }

.mk-meter--calories .mk-meter__label { color: var(--mk-calories); }
.mk-meter--protein .mk-meter__label { color: var(--mk-protein); }
.mk-meter--carbs .mk-meter__label { color: var(--mk-carbs); }
.mk-meter--fat .mk-meter__label { color: var(--mk-fat); }
.mk-meter--fiber .mk-meter__label { color: var(--mk-fiber); }

.mk-meter__foot {
  margin-top: var(--mk-space-1);
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

/* ---------------------------------------------
   16. mk-empty
   --------------------------------------------- */
.mk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--mk-space-8) var(--mk-space-5);
}

.mk-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--mk-space-4);
  border-radius: var(--mk-radius-md);
  background-image: var(--mk-gradient-soft);
  color: var(--mk-accent-text-2);
}

.mk-empty__title {
  margin: 0 0 var(--mk-space-2);
  font-size: var(--mk-fs-h2);
  font-weight: 700;
  color: var(--mk-text);
}

.mk-empty__body {
  margin: 0 0 var(--mk-space-6);
  max-width: 34ch;
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

/* ---------------------------------------------
   17. mk-sheet (Alpine only — never data-bs-*)
   --------------------------------------------- */
.mk-sheet {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--mk-overlay);
}

.mk-sheet__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mk-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--mk-content-max);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--mk-bg-elevated);
  border: 1px solid var(--mk-border);
  border-bottom: none;
  border-radius: var(--mk-radius-xl) var(--mk-radius-xl) 0 0;
  padding: var(--mk-space-5);
  padding-bottom: calc(var(--mk-space-5) + var(--mk-safe-bottom));
  box-shadow: var(--mk-shadow-lg);
}

.mk-sheet__grip {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--mk-space-4);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-surface-3);
}

.mk-sheet__title {
  margin: 0 0 var(--mk-space-4);
  font-size: var(--mk-fs-h2);
  font-weight: 700;
  color: var(--mk-text);
}

@media (min-width: 768px) {
  .mk-sheet {
    align-items: center;
  }

  .mk-sheet__panel {
    border-radius: var(--mk-radius-xl);
    border-bottom: 1px solid var(--mk-border);
    max-width: 420px;
  }
}

/* ---------------------------------------------
   18. Lists, rows, search, tabs, segments
   --------------------------------------------- */
.mk-row {
  display: block;
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-3) var(--mk-space-4);
  color: var(--mk-text);
}

.mk-row + .mk-row {
  margin-top: var(--mk-space-2);
}

.mk-row__title {
  font-size: var(--mk-fs-body);
  font-weight: 600;
  color: var(--mk-text);
}

.mk-row__meta {
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

.mk-row__value {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-calories);
}

.mk-row__macros {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

.mk-row__fiber {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--mk-text-subtle);
  margin-top: 0.05rem;
  letter-spacing: 0.01em;
}

.mk-group {
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-surface-1);
}

.mk-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-2);
  padding: var(--mk-space-2) var(--mk-space-4);
  background-image: var(--mk-gradient-soft);
  border-bottom: 1px solid var(--mk-border);
}

.mk-group__title {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  min-width: 0;
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-accent-text);
}

.mk-group__panel {
  padding: var(--mk-space-3) var(--mk-space-4);
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-surface-1);
}

.mk-group__item + .mk-group__item {
  border-top: 1px solid var(--mk-border);
}

.mk-group__item {
  padding: var(--mk-space-2) var(--mk-space-4);
}

/* Macro pill tones — the base layout lives in app.css. */
.macro-pill--cal {
  background: color-mix(in srgb, var(--mk-calories) 14%, transparent);
}
.macro-pill--cal .macro-pill__value { color: var(--mk-calories); }

.macro-pill--protein {
  background: color-mix(in srgb, var(--mk-protein) 14%, transparent);
}
.macro-pill--protein .macro-pill__value { color: var(--mk-protein); }

.macro-pill--carbs {
  background: color-mix(in srgb, var(--mk-carbs) 14%, transparent);
}
.macro-pill--carbs .macro-pill__value { color: var(--mk-carbs); }

.macro-pill--fat {
  background: color-mix(in srgb, var(--mk-fat) 14%, transparent);
}
.macro-pill--fat .macro-pill__value { color: var(--mk-fat); }

.macro-pill--fiber {
  background: color-mix(in srgb, var(--mk-fiber) 14%, transparent);
}
.macro-pill--fiber .macro-pill__value { color: var(--mk-fiber); }

.macro-pill__label {
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

/* Full-width text button used for list rows (search results). */
.mk-listbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-text);
  text-align: left;
}

.mk-listbtn:active {
  opacity: 0.7;
}

.mk-list-item--custom {
  background: var(--mk-surface-2);
}

.mk-searchbar .form-control,
.mk-searchbar .input-group-text {
  background: var(--mk-surface-2);
  border-color: var(--mk-border);
  color: var(--mk-text);
}

.mk-searchbar .input-group-text {
  color: var(--mk-text-subtle);
}

.mk-searchbar .form-control:focus {
  box-shadow: none;
  border-color: var(--mk-accent);
}

.mk-searchbar .input-group:focus-within {
  border-radius: var(--mk-radius-sm);
  box-shadow: 0 0 0 3px var(--mk-accent-ring);
}

.mk-tabs {
  display: flex;
  gap: var(--mk-space-1);
  padding: var(--mk-space-1);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
}

.mk-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  min-height: 44px;
  padding: var(--mk-space-2) var(--mk-space-3);
  border: none;
  border-radius: var(--mk-radius-xs);
  background: transparent;
  color: var(--mk-text-muted);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mk-dur-fast) var(--mk-ease),
              color var(--mk-dur-fast) var(--mk-ease);
}

.mk-tab--active {
  background-image: var(--mk-gradient-soft);
  color: var(--mk-text);
}

.mk-tab:active {
  background-color: var(--mk-surface-3);
}

.mk-segment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-2);
}

.mk-segment__btn {
  min-height: 44px;
  padding: var(--mk-space-2) var(--mk-space-3);
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-border);
  background: var(--mk-surface-2);
  color: var(--mk-text-muted);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mk-dur-fast) var(--mk-ease),
              color var(--mk-dur-fast) var(--mk-ease),
              border-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-segment__btn--active {
  background-image: var(--mk-gradient-soft);
  border-color: var(--mk-border-strong);
  color: var(--mk-text);
}

.mk-segment__btn:active {
  transform: scale(0.97);
}

/* Date navigation pill */
.mk-daynav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-2);
  padding: var(--mk-space-1);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
}

.mk-daynav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mk-text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color var(--mk-dur-fast) var(--mk-ease),
              color var(--mk-dur-fast) var(--mk-ease);
}

.mk-daynav__arrow:active {
  background: var(--mk-surface-3);
  color: var(--mk-text);
}

.mk-daynav__arrow[aria-disabled="true"],
.mk-daynav__arrow.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mk-daynav__center {
  flex: 1;
  min-height: 44px;
  padding: var(--mk-space-1) var(--mk-space-2);
  border: none;
  background: transparent;
  color: var(--mk-text);
  cursor: pointer;
  text-align: center;
}

.mk-daynav__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-1);
  margin: 0;
  font-size: var(--mk-fs-h3);
  font-weight: 700;
  color: var(--mk-text);
}

.mk-daynav__date {
  display: block;
  font-size: var(--mk-fs-xs);
  color: var(--mk-text-muted);
}

/* Hero empty-state content (meals landing page) */
.mk-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--mk-radius-lg);
  background-image: var(--mk-gradient-soft);
  border: 1px solid var(--mk-border);
  color: var(--mk-accent-text-2);
}

.mk-hero__title {
  font-size: var(--mk-fs-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mk-text);
}

.mk-hero__body {
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

.mk-hero__points {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-3);
  margin-top: var(--mk-space-6);
  padding-top: var(--mk-space-5);
  border-top: 1px solid var(--mk-border);
}

.mk-hero__point {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-muted);
}

.mk-hero__point .mk-icon {
  color: var(--mk-accent-text-2);
  flex-shrink: 0;
}

/* Thumbnails (legacy list size — recipe grid uses .mk-recipe-tile) */
.mk-thumb {
  width: 50px;
  height: 50px;
  border-radius: var(--mk-radius-xs);
  object-fit: cover;
  flex-shrink: 0;
}

.mk-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: var(--mk-gradient-soft);
  border: 1px solid var(--mk-border);
  color: var(--mk-accent-text-2);
  font-weight: 800;
  font-size: var(--mk-fs-h3);
  text-transform: uppercase;
}

/* ---------------------------------------------
   Recipe grid — 2 columns, ~8 tiles on a phone
   --------------------------------------------- */
.mk-recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mk-space-3);
  align-content: start;
}

.mk-recipe-grid__more,
.mk-recipe-grid__empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: var(--mk-space-4) 0;
}

.mk-recipe-tile {
  margin: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  min-width: 0;
}

.mk-recipe-tile.mk-card {
  /* Override default mk-card body padding — tile owns its layout */
  padding: 0;
}

.mk-recipe-tile .mk-card__body {
  padding: var(--mk-space-3);
}

.mk-recipe-tile--expanded {
  grid-column: 1 / -1;
}

.mk-recipe-tile__face {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.mk-recipe-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mk-surface-2);
  overflow: hidden;
}

.mk-recipe-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-recipe-tile__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--mk-gradient-soft);
  color: var(--mk-accent-text-2);
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
}

.mk-recipe-tile__menu {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: rgba(6, 6, 10, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.mk-recipe-tile__menu:active {
  transform: scale(0.96);
}

.mk-recipe-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  text-decoration: none;
  color: inherit;
  min-height: 3.1rem;
}

.mk-recipe-tile__title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mk-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.mk-recipe-tile__cal {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mk-text-muted);
}

.mk-recipe-tile__panel {
  width: 100%;
}

/* Compact tiles so ~4 rows (8 recipes) fit a typical phone content area */
@media (max-width: 767.98px) {
  .mk-recipe-grid {
    gap: 10px;
  }

  .mk-recipe-tile__meta {
    padding: 6px 8px 8px;
    min-height: 2.85rem;
  }

  .mk-recipe-tile__title {
    font-size: 0.75rem;
    -webkit-line-clamp: 1;
  }
}

.mk-skeleton--recipe-tile {
  aspect-ratio: 1 / 1.28;
  border-radius: var(--mk-radius-md);
  min-height: 0;
}

/* Meal plan day cards — allow the ⋮ dropdown to escape the day square.
   overflow-hidden was clipping menus behind the card / next day. */
.meal-plan-day {
  overflow: visible;
  position: relative;
}

.meal-plan-day .list-group,
.meal-plan-day .list-group-item {
  overflow: visible;
}

.meal-slot--menu-open {
  position: relative;
  z-index: 20;
}

.meal-slot__menu {
  z-index: 30;
}

/* ---------------------------------------------
   Next Meal Up (dashboard)
   --------------------------------------------- */
.mk-next-meal {
  display: flex;
  gap: var(--mk-space-4);
  align-items: stretch;
  padding: var(--mk-space-3);
}

.mk-next-meal__media {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-surface-2);
}

.mk-next-meal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-next-meal__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--mk-gradient-soft);
  color: var(--mk-accent-text-2);
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
}

.mk-next-meal__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.mk-next-meal__slot {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-accent-text);
}

.mk-next-meal__title {
  font-size: var(--mk-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mk-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.mk-next-meal__title:active {
  opacity: 0.85;
}

.mk-next-meal__cal {
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--mk-text-muted);
  margin-top: 2px;
}

.mk-next-meal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-2);
  margin-top: var(--mk-space-3);
}

.mk-next-meal--empty {
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-4);
}

.mk-next-meal__empty-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--mk-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-gradient-soft);
  color: var(--mk-accent-text);
}

/* Skeletons */
.mk-skeleton {
  display: block;
  border-radius: var(--mk-radius-xs);
  background: linear-gradient(
    90deg,
    var(--mk-surface-2) 0%,
    var(--mk-surface-3) 50%,
    var(--mk-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: mk-shimmer 1.4s ease-in-out infinite;
}

.mk-skeleton--card {
  height: 88px;
  border-radius: var(--mk-radius-lg);
}

.mk-skeleton--row {
  height: 64px;
  border-radius: var(--mk-radius-md);
}

.mk-skeleton--text {
  height: 12px;
}

.mk-skeleton + .mk-skeleton {
  margin-top: var(--mk-space-2);
}

@keyframes mk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Accordion (profile) */
.mk-accordion {
  background: var(--mk-surface-1);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
}

.mk-accordion + .mk-accordion {
  margin-top: var(--mk-space-2);
}

.mk-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--mk-space-3) var(--mk-space-4);
  border: none;
  background: transparent;
  color: var(--mk-text);
  font-size: var(--mk-fs-h3);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-accordion__trigger:active {
  background: var(--mk-surface-2);
}

.mk-accordion__chevron {
  color: var(--mk-text-subtle);
  flex-shrink: 0;
}

.mk-accordion__panel {
  padding: 0 var(--mk-space-4) var(--mk-space-4);
  border-top: 1px solid var(--mk-border);
  padding-top: var(--mk-space-4);
}

/* Flash toasts */
.mk-toast {
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-border);
  box-shadow: var(--mk-shadow-md);
  backdrop-filter: blur(12px);
}

/* Macro pills (chat / add form) */
.mk-pill-calories { background: var(--mk-calories-subtle) !important; color: var(--mk-calories) !important; }
.mk-pill-protein  { background: var(--mk-protein-subtle) !important;  color: var(--mk-protein) !important; }
.mk-pill-carbs    { background: var(--mk-carbs-subtle) !important;    color: var(--mk-carbs) !important; }
.mk-pill-fat      { background: var(--mk-fat-subtle) !important;      color: var(--mk-fat) !important; }

/* ---------------------------------------------
   19. Reduced motion
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mk-dur-fast: 1ms;
    --mk-dur: 1ms;
    --mk-dur-slow: 1ms;
    --mk-dur-ring: 1ms;
  }

  .chat-fab,
  .chat-fab::after,
  .mk-streak--active .mk-streak__tile > *,
  .mk-skeleton,
  .placeholder-glow .placeholder {
    animation: none !important;
  }

  .mk-ring__arc,
  .mk-meter__fill {
    transition: none !important;
  }

  .mk-btn:active,
  .mk-nav__tab:active,
  .mk-segment__btn:active,
  .mk-avatar:active {
    transform: none;
  }
}